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

View Code? Open in Web Editor NEW

1.3K 20.0 214.0 594 KB

Shell 0.40% HTML 1.34% JavaScript 98.26%

online-store-full-course's Introduction

Не забудь поставить звезду

npm run dev - запуск сервера

npm start - запуск клиента

online-store-full-course's People

Contributors

Stargazers

Watchers

Forkers

cosmatiy88 nazkoro grickov marceluphd kejno linkinvo95 igorplisko dragon1104 alex-grinvich farik92 emagweb-zz isakura313 mvictorl tileksh1199 mego27 illyako kalashnikovkv shoazimov06 egor18032019 dremdilly anglebski noiselim boikoeva wanderer03 sergevonschwarz just-kide zamatay viktoria-yarema alslapp yeahweretrying1 safarovdeem yoshimuro zeargg ikromjon1998 geeknickson maxtuptin yuriy1302 kadasdlaf reactness mralevy goncharovv vorblex shtorman ibroximboy gryaznykh-ivan khamzat995 andreyb7 duhtpa henkok ulugbekh nikolay-mishin junxian428 leoser11 inna30 gel1ler exxuslee beginnerunidue viktortarasevich robot-chappi vlado2021 igor-anosov delvin2343 drizzy514 dpsols slaus letton ruslanmirets carlagedon kepby1608 artemcs50 alexeya-png dimitr81 extra86 alexsiera ansurakin delamenthe alexandrmrk greenperfectalt evanmendax erokhin-n proqwek triaboging sahar0k drishhenko kup96 nikitapeshko tatjana1980 ahureikinandrei aleksandr-antonov ogancheban garrus-v inouq kens54 rauf22 alex01-kulnis ksenofontovd97 mazurchakvova ivansleptsov dastier jsdeemon

online-store-full-course's Issues

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

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

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

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

Реакт 18 всё сломал (Новый свитч/роут и навигация)

Решения для урока (этап - написание Роута)
Мой индекс.js :

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>,
);

AppRoute:

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;

Константы(может и не обязательно менять, не проверял):

export const ADMIN_ROUTE = 'admin' export const LOGIN_ROUTE = 'login' export const REG_ROUTE = 'registration' export const SHOP_ROUTE = '/' export const BASKET_ROUTE = 'basket' export const DEVICE_ROUTE = 'device'

Сообщение об ошибке при регистрации

server package.json

Добавить:
"private": true,
"repository": {
"type": "git",
"url": "https://github.com/"UserName"/"nameProjekt.git"
}
Так как ошибку пишет:
npm WARN [email protected] No description

Завис на следующем

не могу понять как реализовать 2 пункта

Получить новое значение из базы, которое будет обращать внимание на id товара
(создал новую таблицу в базе. но не пойму как её получить на клиенте. хотел сделать поле описание товара, ну и следовательно как передать из поля администратора на сервер)
Как реализовать в карточках нормальный показ бренда (там где ты написал просто Samsung...).не пойму как это сделать писал только на Redux а тут как-то очень мудрено на mobx

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.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;

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;