utimur / online-store-full-course Goto Github PK

import React from 'react';
import App from './App';
import {StrictMode} from 'react';
import { createRoot } from 'react-dom/client';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement); // createRoot(container!) if you use TypeScript
root.render(
    <StrictMode>
        <App />
    </StrictMode>,
);

import React from 'react';

import {
    Routes,
    Route
} from "react-router-dom";
import {authRoutes,publicRoutes} from "../routes";
import {SHOP_ROUTE} from "../utils/consts";


const AppRouter = () => {
    //const iaAuth = false
    return(
           <Routes>

                {authRoutes.map(({path, Component}) =>
                     <Route key = {path}  path={path} element={<Component/>} exact/>
                )}
                {publicRoutes.map(({path , Component}) =>
                   <Route key = {path} path = {path} element={<Component/>} exact/>
                )}
            </Routes>
    );
};
export default AppRouter;

import {makeAutoObservable} from "mobx";

export default class UserStore{
    constructor() {
        this._isUser = {}
        this._isAuth = false
        this._isRole = {}

        makeAutoObservable(this)
    }
    setIsUser(bool){
        this._isUser = bool
    }

    setIsAuth(bool){
        this._isAuth = bool
    }

    setUser(bool){
        this._isRole = bool
    }

    get isAuth() {
        return this._isAuth
    }
    get isUser(){
        return this._isUser
    }
    get isRole(){
        return this._isRole
    }
}

import React, {useContext} from 'react';
import {Context} from "../index";
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import {Button, Container} from "react-bootstrap";
import {ADMIN_ROUTE, BASKET_ROUTE, LOGIN_ROUTE, ORDER_ROUTE, SHOP_ROUTE} from "../utils/consts";
import {observer} from "mobx-react-lite";
import {useNavigate} from "react-router-dom";

const NavBar = observer(() => {
    const {user} = useContext(Context)
    const history = useNavigate()

    const logOut = () => {
        user.setUser({})
        user.setIsAuth(false)
    }

    return (
        <Navbar bg="dark" variant="dark">
            <Container>
                <label style={{color:'white'}} onClick={() => history(SHOP_ROUTE)}>Shop</label>
                {user.isAuth ?
                    <Nav className="ml-auto" style={{color: 'white'}}>
                        {user.isRole === 'ADMIN'?<Button
                            variant={"outline-light"}
                            onClick={() => history(ADMIN_ROUTE)}
                            className="ms-3"
                        >
                            Админ панель
                        </Button>: <Button
                            variant={"outline-light"}
                            onClick={() => history(BASKET_ROUTE)}
                        >
                            Корзина
                        </Button> }
                        <Button
                            variant={"outline-light"}
                            onClick={() => logOut()}
                            className="ms-3"
                        >
                            Выйти
                        </Button>
                    </Nav>
                    :
                    <Nav className="ml-auto" style={{color: 'white'}}>
                        <Button variant={"outline-light"} onClick={() => history(LOGIN_ROUTE)}>Авторизація</Button>
                    </Nav>
                }
            </Container>
        </Navbar>

    );
});


export default NavBar;

import React, {useContext, useEffect, useState} from 'react';
import {BrowserRouter} from "react-router-dom";
import AppRouter from "./components/AppRouter";
import NavBar from "./components/NavBar";
import {observer} from "mobx-react-lite";
import {Context} from "./index";
import {check} from "./http/userAPI";
import {Spinner} from "react-bootstrap";

const App = observer(() => {
    const {user, device} = useContext(Context)
    const [loading, setLoading] = useState(true)

    useEffect(() => {
        check().then(data => {
            user.setUser(data.role)
            user.setIsUser(data.id)
            user.setIsAuth(true)
        }).finally(() => setLoading(false))
    }, [])

    if (loading) {
        return <Spinner animation={"grow"}/>
    }

    return (
        <BrowserRouter>
            <NavBar />
            <AppRouter />
        </BrowserRouter>
    );
});

export default App;