Tasks_App/frontend/src/App.tsx

import React from 'react';
import { createTheme, CssBaseline, ThemeProvider } from "@mui/material";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import SignInPage from "./pages/SignInPage";
import { ApolloClient, ApolloProvider, createHttpLink, InMemoryCache } from "@apollo/client";
import SignUpPage from "./pages/SignUpPage";
import { setContext } from "@apollo/client/link/context";
import TasksPage from "./pages/TasksPage";
import TokenCheck from "./components/TokenCheck";
import { RootStore } from "./stores/RootStore";
import { Provider } from "inversify-react";
import Layout from "./components/Layout";

type AppProps = {}

const darkTheme = createTheme({
    palette: {
        mode: 'dark',
    },
})

const store = new RootStore()

const httpLink = createHttpLink({
    uri: process.env.NODE_ENV == 'development' ? 'http://localhost:31234/graphql' : '/graphql',
})

const authLink = setContext((_, { headers }) => {
    const token = store.authStore.token
    return {
        headers: {
            ...headers,
            authorization: token ? `${token}` : ''
        }
    }
})

const client = new ApolloClient({
    link: authLink.concat(httpLink),
    cache: new InMemoryCache()
})

const App = ({}: AppProps) => {
    return (
        <React.StrictMode>
            <ApolloProvider client={client}>
                <Provider container={store.container}>
                    <BrowserRouter>
                        <ThemeProvider theme={darkTheme}>
                            <CssBaseline/>
                            <Routes>
                                <Route path='/' element={<Layout />}>
                                    <Route path='signin' element={<TokenCheck required={false}><SignInPage/></TokenCheck>}/>
                                    <Route path='signup' element={<TokenCheck required={false}><SignUpPage/></TokenCheck>}/>
                                    <Route index element={<TokenCheck><TasksPage/></TokenCheck>}/>
                                </Route>
                            </Routes>
                        </ThemeProvider>
                    </BrowserRouter>
                </Provider>
            </ApolloProvider>
        </React.StrictMode>
    )
};

export default App;