App.js - main app component

import React, { useEffect } from 'react';
import { useDispatch } from "react-redux";
import { BrowserRouter } from 'react-router-dom';
import { Routes } from "./routes/routes";
import { AlertNotifications } from "./components/alert/alert";
import { Navbar } from "./components/navbar/navbar";
import { SelectDropdownsState } from "./context/select-dropdowns";
import { renewAuthTokenAction } from "./store/actions/authActions";
import './App.css';

const App = () => {

    const dispatch = useDispatch();

    const renewToken = async () => await dispatch(renewAuthTokenAction());

    let renewTokenID;

    const fiveMinuteTimer = () => renewTokenID = setInterval(renewToken, 300000);

    useEffect(() => {
        fiveMinuteTimer();

        return () => clearInterval(renewTokenID);
    }, []);


    return (
        <BrowserRouter>
            <div className="mb-10 mx-auto">
                 <Navbar />
            </div>
            <SelectDropdownsState>
              <div className="container w-full mx-auto my-4 py-4">
                  <AlertNotifications />
                  <Routes />
              </div>
            </SelectDropdownsState>
        </BrowserRouter>
    );

};

export default App;