сделал корзину

Kepby1608 commented 2 years ago

https://github.com/Kepby1608/course-work.git

единственный момент: у обычных пользователей есть возможность попасть в админ панель по прямой ссылке localhost.../admin, но добавить они ничего не смогут, вроде как ;)

еще момент: первое открытие сайта происходит в авторизованном профиле, даже если в базе данных нет ни одного аккаунта.

AndrianK commented 2 years ago

Ответ для пользователя на ютубе, дописал навбар для тех кто сделал корзину.

UserStore.js

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
    }
}

NavBar.js

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.setIsUser({})
        user.setIsAuth(false)
        localStorage.removeItem('token')
        window.location.reload();
    }
    //Можно конечно кинуть в ЮзЭффект, но смысла особого не вижу

    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;

App.js

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;

Доделайте функции авторизации в pages/Auth

                data = await registration(email, password); 
             } 
             user.setUser(data.role) 
             user.setIsUser(data.id) 
             user.setIsAuth(true) 
             history(SHOP_ROUTE) 
         } catch (e) { 
             console.log(e) 
         }

terminatorkg commented 2 years ago

спасибо брат

utimur / online-store-full-course

сделал корзину #8