aswi2022code-of-duty-gitlab/frontend/src/App.tsx @ 4a2ac9a8

import './App.css'
import { Routes, Route, Link } from 'react-router-dom'
import Home from './features/Home/Home'
import Catalog from './features/Catalog/Catalog'
import NotFound from './features/NotFound/NotFound'
import { Container, Paper, Theme } from '@mui/material'
import { ThemeProvider } from '@emotion/react'
import { useSelector } from 'react-redux'
import { RootState } from './features/redux/store'
import Login from './features/Auth/Login'
import CatalogItemDetail from './features/Catalog/CatalogItemDetail'

const App = () => {
    const theme: Theme = useSelector((state: RootState) => state.theme.theme)

    // TODO remove this its only for debug
    const user = useSelector((state: RootState) => state.user)

    return (
        <ThemeProvider theme={theme}>
            <p>{JSON.stringify(user)}</p>
            <Paper style={{ minHeight: '100vh', borderRadius: 0 }}>
                <nav>
                    <Link to="/">Home </Link>
                    <Link to="/catalog">Catalog </Link>
                    <Link to="/login">Login </Link>
                </nav>
                <Container>
                    <Routes>
                        <Route path="/" element={<Home />} />
                        <Route path="/catalog" element={<Catalog />} />
                        <Route
                            path="/catalog/:itemId"
                            element={<CatalogItemDetail />}
                        />
                        <Route path="/login" element={<Login />} />
                        <Route path="*" element={<NotFound />} />
                    </Routes>
                </Container>
            </Paper>
        </ThemeProvider>
    )
}

export default App