|
|
@@ -1,10 +1,11 @@
|
|
|
-import { useState } from 'react';
|
|
|
+import { useEffect, useState } from 'react';
|
|
|
import logo from './logo.svg';
|
|
|
import './App.scss';
|
|
|
import thunk from 'redux-thunk';
|
|
|
import {createStore, combineReducers, applyMiddleware} from 'redux';
|
|
|
import {Provider, connect} from 'react-redux';
|
|
|
-
|
|
|
+import { Link, Route, Router, Switch, Redirect } from 'react-router-dom';
|
|
|
+import createHistory from 'history/createBrowserHistory'
|
|
|
|
|
|
const actionPending = name => ({type: 'PROMISE', status: 'PENDING', name})
|
|
|
const actionResolved = (name, payload) => ({type: 'PROMISE', status: 'RESOLVED', name, payload})
|
|
|
@@ -141,8 +142,11 @@ function promiseReducer(state={}, {type, name, status, payload, error}){
|
|
|
const actionAuthLogin = (token) => ({ type: 'AUTH_LOGIN', token })
|
|
|
const actionAuthLogout = () => ({ type: 'AUTH_LOGOUT' })
|
|
|
|
|
|
-const actionLogin = (login = 'tst', password = '123') =>
|
|
|
- actionPromise('login', gql(`query ($login:String, $password:String){ login(login:$login, password:$password)}`, { 'login': login, 'password': password }))
|
|
|
+const actionLogin = (login, password) =>
|
|
|
+ actionPromise('login', gql(`
|
|
|
+ query log($login:String, $password:String) {
|
|
|
+ login(login: $login, password: $password)
|
|
|
+ }`, { login, password }))
|
|
|
|
|
|
const actionFullLogin = (login = 'tst', password = '123') =>
|
|
|
async dispatch => {
|
|
|
@@ -152,12 +156,18 @@ const actionFullLogin = (login = 'tst', password = '123') =>
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-const actionRegister = (login = 'tst', password = '123') =>
|
|
|
- actionPromise('login', gql(`mutation reg($login:String, $password:String) {
|
|
|
- UserUpsert(user:{login:$login, password:$password, nick:$login}){
|
|
|
- _id login
|
|
|
+const actionRegister = (login, password) =>
|
|
|
+ actionPromise('registration', gql(`
|
|
|
+ mutation register($login:String, $password:String) {
|
|
|
+ UserUpsert(
|
|
|
+ user: {
|
|
|
+ login: $login,
|
|
|
+ password: $password,
|
|
|
+ }){
|
|
|
+ login _id
|
|
|
+ }
|
|
|
}
|
|
|
- }`, { 'login': login, 'password': password }))
|
|
|
+ `, { login, password }))
|
|
|
|
|
|
const actionFullRegister = (login = 'tst', password = '123') =>
|
|
|
async dispatch => {
|
|
|
@@ -180,13 +190,20 @@ const actionCatById = (_id) =>
|
|
|
}`, { q: JSON.stringify([{ _id }]) }))
|
|
|
|
|
|
const actionGoodById = (_id) =>
|
|
|
- actionPromise('goodById', gql(`query ($good:String) {
|
|
|
- GoodFindOne(query:$good) {
|
|
|
- _id name price images {
|
|
|
- url
|
|
|
- }
|
|
|
- }
|
|
|
- }`, { good: JSON.stringify([{ _id }]) }))
|
|
|
+ actionPromise('goodById', gql(`
|
|
|
+ query goodById ($good:String) {
|
|
|
+ GoodFindOne(query: $good) {
|
|
|
+ name
|
|
|
+ description
|
|
|
+ price
|
|
|
+ categories {
|
|
|
+ name
|
|
|
+ }
|
|
|
+ images {
|
|
|
+ url
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }`, { good: JSON.stringify([{ _id }]) }))
|
|
|
|
|
|
|
|
|
const store = createStore(combineReducers({promise: promiseReducer,
|
|
|
@@ -194,24 +211,29 @@ const store = createStore(combineReducers({promise: promiseReducer,
|
|
|
cart: cartReducer}), applyMiddleware(thunk))
|
|
|
store.subscribe(() => console.log(store.getState()))
|
|
|
store.dispatch(actionRootCats())
|
|
|
-store.dispatch(actionCatById('5dc458985df9d670df48cc47'))
|
|
|
|
|
|
|
|
|
const Logo = () =>
|
|
|
- <img src={logo} className="Logo" alt="logo" />
|
|
|
+ <Link to="/">
|
|
|
+ <img src={logo} className="Logo" alt="logo" />
|
|
|
+ </Link>
|
|
|
|
|
|
const Header = () =>
|
|
|
- <header><Logo /></header>
|
|
|
+ <header>
|
|
|
+ <Logo />
|
|
|
+ </header>
|
|
|
|
|
|
const Navbar = () =>
|
|
|
<nav className='Navbar'>
|
|
|
<CKoshik/>
|
|
|
+ <LogBtn />
|
|
|
+ <RegBtn />
|
|
|
</nav>
|
|
|
-
|
|
|
+//--------------------------------------------------------------------------------------------------------------------------------
|
|
|
const CategoryListItem = ({_id, name}) =>
|
|
|
- <li className='CatLink'>
|
|
|
- <a href={`#/category/${_id}`}>{name}</a>
|
|
|
- </li>
|
|
|
+ <Link to={`/category/:${_id}`}>
|
|
|
+ <li className='CatLink' style={{color:'dodgerblue'}}>{name}</li>
|
|
|
+ </Link>
|
|
|
|
|
|
const CategoryList = ({cats}) =>
|
|
|
<ul>{cats.map((item) => <CategoryListItem {...item}/>)}</ul>
|
|
|
@@ -220,11 +242,13 @@ const CCategoryList = connect(state => ({cats:state.promise.rootCats?.payload ||
|
|
|
|
|
|
const Aside = () =>
|
|
|
<aside><CCategoryList /></aside>
|
|
|
-
|
|
|
+//--------------------------------------------------------------------------------------------------------------------------------
|
|
|
const GoodCard = ({good:{_id, name, price, images}, onAdd}) =>
|
|
|
<li className='GoodCard'>
|
|
|
<h2>{name}</h2>
|
|
|
- {images && images[0] && images[0].url && <img className='GoodImg' src={backendURL + '/' + images[0].url} />}
|
|
|
+ <Link to={`/good/:${_id}`}>На страницу товара</Link>
|
|
|
+ <br/>
|
|
|
+ {images && images[0] && images[0].url && <img className='GoodImg' alt='img' src={backendURL + '/' + images[0].url} />}
|
|
|
<br/>
|
|
|
<strong>Цена: {price}</strong>
|
|
|
<br/>
|
|
|
@@ -232,14 +256,45 @@ const GoodCard = ({good:{_id, name, price, images}, onAdd}) =>
|
|
|
</li>
|
|
|
|
|
|
const CGoodCard = connect(null, {onAdd: actionCartAdd})(GoodCard)
|
|
|
-
|
|
|
-const Category = ({cat:{name, goods=[]}={}}) =>
|
|
|
- <div className='Category'>
|
|
|
- <h1>{name}</h1>
|
|
|
- <ul>{goods.map(good => <CGoodCard good={good} />)}</ul>
|
|
|
+//--------------------------------------------------------------------------------------------------------------------------------
|
|
|
+const GoodPg = ({good:{_id, name, price, images, description}, onAdd}) =>
|
|
|
+ <div className='GoodCard'>
|
|
|
+ <h2>{name}</h2>
|
|
|
+ <br/>
|
|
|
+ {images && images[0] && images[0].url && <img className='GoodImg' alt='img' src={backendURL + '/' + images[0].url} />}
|
|
|
+ <br/>
|
|
|
+ <strong>Цена: {price}</strong>
|
|
|
+ <br/>
|
|
|
+ <p>{description}</p>
|
|
|
+ <br />
|
|
|
+ <button onClick={() => onAdd({_id, name, price, images})}>Добавить в корзину</button>
|
|
|
</div>
|
|
|
|
|
|
-const CCategory = connect(state => ({cat:state.promise.catById?.payload || {}}))(Category)
|
|
|
+const CGoodPg = connect(state => ({good:state.promise.goodById?.payload || {}}),{onAdd: actionCartAdd})(GoodPg)
|
|
|
+
|
|
|
+const PageGood = ({match: {params: {_id}}, getData}) => {
|
|
|
+ useEffect(() => {
|
|
|
+ getData(_id.substring(1))
|
|
|
+ console.log('get', _id,typeof _id)
|
|
|
+ },[_id])
|
|
|
+ return (
|
|
|
+ <CGoodPg />
|
|
|
+ )
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+const CPageGood = connect(null, {getData: actionGoodById})(PageGood)
|
|
|
+//--------------------------------------------------------------------------------------------------------------------------------
|
|
|
+const LogBtn = () =>
|
|
|
+ <Link to="/login" style={{color:'white', textDecoration:'none'}}>
|
|
|
+ <div className='KoshikCnt item'>Войти / Выйти</div>
|
|
|
+ </Link>
|
|
|
+
|
|
|
+const RegBtn = () =>
|
|
|
+ <Link to="/registration" style={{color:'white', textDecoration:'none'}}>
|
|
|
+ <div className='KoshikCnt item'>Зарегистрироваться</div>
|
|
|
+ </Link>
|
|
|
+
|
|
|
|
|
|
const Koshik = ({cart}) => {
|
|
|
let goodsInCart = cart
|
|
|
@@ -247,28 +302,54 @@ const Koshik = ({cart}) => {
|
|
|
for (let key in goodsInCart) {
|
|
|
allGoodsInCart += goodsInCart[key].count
|
|
|
}
|
|
|
-
|
|
|
return (
|
|
|
- <div className='KoshikCnt item'>
|
|
|
- <h3>Корзина: {allGoodsInCart}</h3>
|
|
|
- </div>
|
|
|
+ <Link to="/cart" style={{color:'white', textDecoration:'none'}}>
|
|
|
+ <div className='KoshikCnt item'>
|
|
|
+ Корзина: {allGoodsInCart}
|
|
|
+ </div>
|
|
|
+ </Link>
|
|
|
)
|
|
|
}
|
|
|
|
|
|
const CKoshik = connect(({cart}) => ({cart}))(Koshik)
|
|
|
+//--------------------------------------------------------------------------------------------------------------------------------
|
|
|
+const Category = ({cat:{name, goods=[]}={}}) =>
|
|
|
+ <div className='Category'>
|
|
|
+ <h1>{name}</h1>
|
|
|
+ <ul>
|
|
|
+ {(goods || []).map(good => <CGoodCard good={good} />)}
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+
|
|
|
+const CCategory = connect(state => ({cat:state.promise.catById?.payload || {}}))(Category)
|
|
|
+
|
|
|
+const PageCategory = ({match: {params: {_id}}, getData}) => {
|
|
|
+ useEffect(() => {
|
|
|
+ getData(_id.substring(1))
|
|
|
+ console.log('get', _id,typeof _id)
|
|
|
+ },[_id])
|
|
|
+ return (
|
|
|
+ <CCategory />
|
|
|
+ )
|
|
|
|
|
|
+}
|
|
|
+
|
|
|
+const CPageCategory = connect(null, {getData: actionCatById})(PageCategory)
|
|
|
+//--------------------------------------------------------------------------------------------------------------------------------
|
|
|
const CartItem = ({cart:{_id, name, price, images}, count: {count}, onChange, onRemove}) => {
|
|
|
console.log('good', _id)
|
|
|
return(
|
|
|
<li className='GoodCard'>
|
|
|
<h2>{name}</h2>
|
|
|
- {images && images[0] && images[0].url && <img className='GoodImg' src={backendURL + '/' + images[0].url} />}
|
|
|
+ <Link to={`/good/:${_id}`}>На страницу товара</Link>
|
|
|
+ <br/>
|
|
|
+ {images && images[0] && images[0].url && <img className='GoodImg' alt='img' src={backendURL + '/' + images[0].url} />}
|
|
|
<br/>
|
|
|
<strong>Цена: {price * count}</strong>
|
|
|
<br/>
|
|
|
<label>Кол-во покупки: <input type="number" value={count} min="1" onInput={(e) => onChange({_id, name, price, images}, e.target.value)}/></label>
|
|
|
<br/>
|
|
|
- <button>Заказать</button>
|
|
|
+ <button disabled={!localStorage.authToken}>{localStorage.authToken? 'Заказать' : 'Авторизуйтесть чтобы заказать'}</button>
|
|
|
<button onClick={() => onRemove({_id, name, price, images})}>Удалить заказ[X]</button>
|
|
|
</li>
|
|
|
)
|
|
|
@@ -281,65 +362,103 @@ const Cart = ({cart}) => {
|
|
|
for(let item in cart) {
|
|
|
cartArr.push(cart[item])
|
|
|
}
|
|
|
- console.log('cartarr',cartArr)
|
|
|
-
|
|
|
return(
|
|
|
<div>
|
|
|
- <h1>Корзина</h1>
|
|
|
+ <h1 style={{marginLeft:'30px'}}>Корзина</h1>
|
|
|
<ul>{cartArr.map(item => <CCartItem cart={item.good} count={item} />)}</ul>
|
|
|
</div>
|
|
|
)
|
|
|
}
|
|
|
|
|
|
const CCart = connect(state => ({cart:state.cart}))(Cart)
|
|
|
-//const CCart = connect(забрать из редакса корзину положить в пропс cart,
|
|
|
- //дать компоненту onCartChange и onCartRemove с соответствующими actionCreator)(Cart)
|
|
|
-
|
|
|
-
|
|
|
-const LoginForm = ({onLogin}) => {
|
|
|
+//--------------------------------------------------------------------------------------------------------------------------------
|
|
|
+const LoginForm = ({log:{sub}, onLogin, onLogout}) => {
|
|
|
let [pass, setPass] = useState()
|
|
|
let [login, setLogin] = useState()
|
|
|
return (
|
|
|
- <div className='form'>
|
|
|
- <h3>Login Form</h3>
|
|
|
- <input placeholder='login' style={{outlineColor: login? 'black' : 'firebrick'}} onChange={(e) => setLogin(e.target.value)}/>
|
|
|
+ <div className='form' style={{margin: '0 auto'}}>
|
|
|
+ <h3>Войти</h3>
|
|
|
+ <input placeholder='Логин' style={{outlineColor: login? 'black' : 'firebrick'}} onChange={(e) => setLogin(e.target.value)}/>
|
|
|
+ <br/>
|
|
|
+ <input placeholder='Пароль' type="password" style={{outlineColor: pass? 'black' : 'firebrick'}} onChange={(e) => setPass(e.target.value)}/>
|
|
|
+ <br/>
|
|
|
+ <button disabled={!pass || !login || localStorage.authToken} onClick={() => onLogin(login, pass)}>{localStorage.authToken? 'Авторизация была выполнена.' : 'Войти'}</button>
|
|
|
+ {localStorage.authToken && <button onClick={() => onLogout()}>Выйти</button>}
|
|
|
+ <br/>
|
|
|
+ {sub && <small>Пользователь {sub.login} авторизован</small>}
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+const CLoginForm = connect(state => ({log: state.auth?.payload || {}}), {onLogin: actionFullLogin, onLogout: actionAuthLogout})(LoginForm)
|
|
|
+//--------------------------------------------------------------------------------------------------------------------------------
|
|
|
+const RegForm = ({reg:{login}, loged: {sub}, onRegister, onFullRegister}) => {
|
|
|
+ let [pass, setPass] = useState()
|
|
|
+ let [log, setLog] = useState()
|
|
|
+ return (
|
|
|
+ <div className='form' style={{margin: '0 auto'}}>
|
|
|
+ <h3>Зарегистрироваться</h3>
|
|
|
+ <input placeholder='Логин' style={{outlineColor: log? 'black' : 'firebrick'}} onChange={(e) => setLog(e.target.value)}/>
|
|
|
+ <br/>
|
|
|
+ <input placeholder='Пароль' type="password" style={{outlineColor: pass? 'black' : 'firebrick'}} onChange={(e) => setPass(e.target.value)}/>
|
|
|
+ <br/>
|
|
|
+ <button disabled={!pass || !log || localStorage.authToken} onClick={() => onRegister(log, pass)}>{localStorage.authToken? 'Авторизация была выполнена' : 'Зарегистрироваться'}</button>
|
|
|
<br/>
|
|
|
- <input placeholder='password' type="password" style={{outlineColor: pass? 'black' : 'firebrick'}} onChange={(e) => setPass(e.target.value)}/>
|
|
|
+ {!localStorage.authToken && <button disabled={!pass || !log} onClick={() => {onFullRegister(log, pass); }}>Зарегистрироваться и Войти</button>}
|
|
|
<br/>
|
|
|
- <button disabled={!pass || !login} onClick={() => onLogin(login, pass)}>Login</button>
|
|
|
+ {login && `Пользователь ${login} зарегистрирован ${sub && 'и авторизован'}!`}
|
|
|
</div>
|
|
|
)
|
|
|
}
|
|
|
|
|
|
-const CLoginForm = connect(null, {onLogin: actionFullLogin})(LoginForm)
|
|
|
+const CRegForm = connect(state => ({reg: state.promise.registration?.payload || {}, loged: state.auth?.payload || {}}), {onRegister: actionRegister, onFullRegister: actionFullRegister})(RegForm)
|
|
|
+//--------------------------------------------------------------------------------------------------------------------------------
|
|
|
+
|
|
|
+
|
|
|
+const PageMain = () => <h1>MAIN PAGE</h1>
|
|
|
+
|
|
|
+const Page404 = () => <h1> 404 </h1>
|
|
|
|
|
|
const Main = () =>
|
|
|
<main>
|
|
|
<Aside />
|
|
|
- <Content>
|
|
|
- <CCategory />
|
|
|
- {/* <LoginForm onLogin={(l, p) => actionFullLogin(l, p)}/> */}
|
|
|
- <CLoginForm />
|
|
|
- <CCart />
|
|
|
+ <Content style={{border:'1px solid black'}}>
|
|
|
+ <Switch>
|
|
|
+ <Redirect from='/main' to='/' />
|
|
|
+ <Route path="/" component={PageMain} exact/>
|
|
|
+ <Route path="/category/:_id" component={CPageCategory}/>
|
|
|
+ <Route path="/good/:_id" component={CPageGood}/>
|
|
|
+ <Route path="/cart" component={CCart} />
|
|
|
+ <Route path="/login" component={CLoginForm} />
|
|
|
+ <Route path="/registration" component={CRegForm} />
|
|
|
+ <Route path="*" component={Page404} />
|
|
|
+ </Switch>
|
|
|
</Content>
|
|
|
</main>
|
|
|
|
|
|
const Content = ({children}) =>
|
|
|
<div className="Content">{children}</div>
|
|
|
|
|
|
+
|
|
|
const Footer = () =>
|
|
|
<footer><Logo /></footer>
|
|
|
|
|
|
+
|
|
|
+const history = createHistory()
|
|
|
+
|
|
|
+
|
|
|
function App() {
|
|
|
return (
|
|
|
- <Provider store={store}>
|
|
|
- <div className="App">
|
|
|
- <Header />
|
|
|
- <Navbar />
|
|
|
- <Main />
|
|
|
- <Footer />
|
|
|
- </div>
|
|
|
- </Provider>
|
|
|
+ <Router history={history}>
|
|
|
+ <Provider store={store}>
|
|
|
+ <div className="App">
|
|
|
+ <Header />
|
|
|
+ <Navbar />
|
|
|
+ <Main />
|
|
|
+ <Footer />
|
|
|
+ </div>
|
|
|
+ </Provider>
|
|
|
+ </Router>
|
|
|
);
|
|
|
}
|
|
|
|
