Untitled

import React, { useState } from 'react'
import  ReactDOM  from 'react-dom/client'
import {BrowserRouter,Routes, Route,Navigate}  from "react-router-dom"
import 'bootstrap/dist/css/bootstrap.min.css'
import "bootstrap/dist/js/bootstrap.js"
import Home from './component/Home/home'
import Signin from './component/Signin/signin'
import Signup from './component/Signup/signup'
import CowManagement from './component/CowManagement/cowmanagement'
import Milk from './component/Milk/milk'
import Feed from './component/Feed/feed'
import Offspring from './component/Offspring/offspring'

export default function  App (){
    const[cows,setCows]=useState([]) 
    const [ref,setRef]=useState(null)

    const logout=()=>{
        fetch(process.env.REACT_APP_BACKEND_URL+"/signout",{credentials:"include",headers:{'Content-Type':'application/json'}}).then((response)=>{
            if(!response.ok){
                throw new Error(response.statusText)
            }; 
            return response.json()
        }).then(
            (data)=>{
                localStorage.removeItem('user')
                clearInterval(ref)
                setRef(null)
                window.location.replace("/signin")
            }
        ).catch().finally()
    }

   function refresh(){
        fetch(process.env.REACT_APP_BACKEND_URL+"/refresh",{credentials:"include",headers:{'Content-Type':'application/json'}}).then((response)=>{
            if(!response.ok){
                throw new Error(response.statusText)
            }; 
            return response.json()
        }).then().catch().finally()
    }
    const setInt=()=>{
        if(!ref){
            setRef(setInterval(refresh,1000))
        }
    }

    function authenticated(){
        let x=localStorage.getItem('user')
        if( x==null){
            return false
        }
        return Object.keys(x).length!==0?true:false
    }
   
   return(
        <BrowserRouter>
            <Routes>
                <Route path="/"element={authenticated()?<Home  logout={logout} />:<Navigate to="/signin"/>}></Route>
                <Route path="/signin" element={<Signin  logout={logout}setInt={setInt}/>}></Route>
                <Route path="/signup" element={<Signup  logout={logout}/>}></Route>
                <Route path="/cow"element={authenticated()?<CowManagement logout={logout} setCows={setCows} />:<Navigate to="/signin"/>}></Route>
                <Route path="/milk"element={authenticated()?<Milk cows={cows}  logout={logout}/>:<Navigate to="/signin"/>}></Route>
                <Route path="/feed"element={authenticated()?<Feed  logout={logout}/>:<Navigate to="/signin"/>}></Route>
                <Route path="/offspring"element={authenticated()?<Offspring  logout={logout}/>:<Navigate to="/signin"/>}></Route>
            </Routes>
        </BrowserRouter> 
   )
}

const root=ReactDOM.createRoot(document.getElementById('root'))
root.render(<App/>)