basket

shop/src/App.css

@@ -91,12 +91,16 @@ button:disabled {
 .rightSide {
   height: 100%;
   align-items: center;
-  width: 30%;
+  /* width: 30%; */
   display: flex;
   justify-content: space-around;
 
 
 }
+
+.rightSide div {
+  margin: 0px 10px;
+}
 .rightSide div svg {
   margin-right: 2px;
 }
@@ -272,6 +276,7 @@ button {
   justify-content: space-around;
 }
 
+
 @media screen and (max-width: 900px) {
   .header {
     padding: 0%;
@@ -284,12 +289,16 @@ button {
   }
   .rightSide {
     font-size: 10px;
-    width: 70%;
+    /* width: 70%; */
     align-items: center;
   }
   .rightSide button {
     width: 50px;
   }
+
+  .rightSide div {
+    margin: 0px 2px;
+  }
   .loginForm {
     flex-direction: column;
     
@@ -299,6 +308,8 @@ button {
     width: 150px;
   }
 
+
+
   .catalog li{
     font-size: 10px;
   }

shop/src/App.js

@@ -1,6 +1,5 @@
 
 import './App.css';
-import Layout from "./components/layout.js";
 import {Provider, connect} from 'react-redux';
 import {Header, Footer, actionCatalogCard, Main, SearchInput} from "./components/index"
 import {BrowserRouter as Router, Route, Link, Switch, Redirect} from 'react-router-dom';
@@ -24,11 +23,8 @@ function App() {
     <>
       <Provider store={store}>
         <Router history = {createHistory}>
-
           <Header/>
-
           <Main/>
-
           <Footer/>
         </Router>
       </Provider>

shop/src/components/MainImg.js

@@ -7,11 +7,8 @@ import {createStore, combineReducers, applyMiddleware} from 'redux';
 import thunk from 'redux-thunk';
 import store from "../reducers";
 import Catalog from "./catalog";
-import {searchInput, CGoodsCategory, SearchInput, CGoodsSearch, LoginForm, CGoodCard} from "./index";
-// //import {Goods} from "./index";
-// import  from "./goodsCategory";
-// import  from './searchInput';
-// import  from './goodsSearch';
+import {searchInput, CGoodsCategory, SearchInput, CGoodsSearch, LoginForm, CGoodCard, YourProfile} from "./index";
+
 
   
 const Main = ({className = "MainImg" }) => {
@@ -55,7 +52,7 @@ const Main = ({className = "MainImg" }) => {
   }
 //   const Id = ({name = "Idishnic"} )=> {
 //    return(<div>{name}</div>) }
-const YourProfile = () => <div>Ну привет, мистер</div>
+
 const MainMag = () => <div>Я тут кароче самый главный страниц</div>
 const About = () => <div>Мы крутой магазин, бла-бла</div>
 const NotFound = () => <div>Да пошел ты!</div>

shop/src/components/catalog.js

@@ -29,8 +29,7 @@ const Catalog = ({ state, categories = [], getData = () => console.log("no") })
 
                          <CatalogSubLink name = {category.name} arr = {category.subCategories}/>
 
-                        // <li onClick = {() =>changeValue(!show)}>{category.name} { show &&  <ul className="catalog">{category.subCategories.map(subCategory =>
-                        //     <Links key={subCategory._id} url={`/catalog/` + subCategory._id} text={subCategory.name}> </Links>)}</ul>}</li>
+
 
                 )}
             </ul>
@@ -39,13 +38,14 @@ const Catalog = ({ state, categories = [], getData = () => console.log("no") })
 }
 
 const getCategories = state => {
-    // console.log("state", state)
+
     if (state.promiseRed.categories && state.promiseRed.categories.payload) {
         return state.promiseRed.categories.payload.data.CategoryFind
     }
 
     return [];
 };
+
 const mapStateToProps = state => ({
     state: state,
     categories: getCategories(state)

shop/src/components/goodCard.js

@@ -1,5 +1,5 @@
 import { connect } from "react-redux";
-import {gql, urlUpload, actionPromise, actionGoodCard, getGoods} from "../reducers";
+import {gql, urlUpload, actionPromise, actionGoodCard, getGoods, actionCartAdd} from "../reducers";
 import {createStore, combineReducers, applyMiddleware, bindActionCreators} from 'redux';
 import { useEffect, useState } from 'react';
 import {BrowserRouter as Router, Route, Link, Switch, Redirect, useHistory} from 'react-router-dom';
@@ -10,11 +10,14 @@ import {BrowserRouter as Router, Route, Link, Switch, Redirect, useHistory} from
 
   const mapStateToProps = state => ({
     state: state,
+    basket: state.basket,
     goodCard: getGoods(state, "goodCard", "GoodFindOne")
   });
   
   const mapDispatchToProps = dispatch => bindActionCreators({
-    getData: actionGoodCard
+    getData: actionGoodCard,
+    onAdd: actionCartAdd
+
   }, dispatch);
   
 
@@ -23,10 +26,10 @@ import {BrowserRouter as Router, Route, Link, Switch, Redirect, useHistory} from
 
 
 
-  const GoodCard = ({id, goodCard = null, getData, className = "goodCard"}) => {
+  const GoodCard = ({id, goodCard = null, state, onAdd, getData, className = "goodCard"}) => {
     const history = useHistory();
     useEffect(() =>  getData(id), [id]);
-
+    console.log(state)
 
 
     const [width, setWidth] = useState(window.innerWidth);
@@ -55,6 +58,7 @@ import {BrowserRouter as Router, Route, Link, Switch, Redirect, useHistory} from
             <img src = {goodCard.images ? `${urlUpload}/${goodCard.images[0].url}`: `https://images.ua.prom.st/2259265311_korobka-syurpriz-dlya.jpg`}/>
             <span>{`${goodCard.price}грн`}</span>
             <p>{goodCard.description}</p>
+            <button onClick = {() => onAdd(goodCard.price, id)}>В кошик</button>
           </div>
         }
         </>

shop/src/components/header.js

@@ -23,7 +23,7 @@ const StandartMenu = ({className = "standartMenu", getCat = null}) => {
                 <Links url = {"/about"} text = {"Про нас"}/>
                 <Links url = {"/post"} text = {"Оплата і доставка"}/>
                 <Links url = {"/contacts"} text = {"Контакти"}></Links>
-                {/* <button onClick={() => getCat()}>mazafaca</button> */}
+
             </ul>
         </>
     )
@@ -52,7 +52,7 @@ const TabletMenu = ({}) => {
 
 const ToLoginPage = ({login, onLogout}) => {
     const history = useHistory();
-    console.log(history.location.pathname)
+
     useEffect(() => history.location.pathname.includes(`/profile/`) && (login ?  history.push(`/profile/` + login) : history.push(`/login`)),[login])
     return(
         <>
@@ -67,10 +67,26 @@ const ToLoginPage = ({login, onLogout}) => {
     )
 }
 
-const CToLoginPage =connect(s => ({login: s.auth.payload && s.auth.payload.sub.login}), {onLogout: actionAuthLogout}) (ToLoginPage);
+const CToLoginPage = connect(s => ({login: s.auth.payload && s.auth.payload.sub.login}), {onLogout: actionAuthLogout}) (ToLoginPage);
+
+
+const Basket = ({basketCount, data, className = "basket"}) => {
+    console.log(data)
+    return(
+    <div className = {className}>
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-bag" viewBox="0 0 16 16">
+        <path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z"/>
+        </svg>
+        <span>{basketCount || "0"}грн</span>
+    </div>
+    )
+}
+const CBasket = connect(s => ({data: s.basket, basketCount: s.basket.price}), {})(Basket)
+
+
 
 const Header = ({}) => {
-    const [basketCount, buyDelete] = useState(0);
+    //const [basketCount, buyDelete] = useState(0);
     const [wishes, wishesCount] = useState(0);
     console.log(connect((s) => ({isLoggedIn: s.auth.payload})))
     return(
@@ -98,12 +114,13 @@ const Header = ({}) => {
                             <span className = "link">Вхід</span>
                         </Link> */}
                     </div>
-                    <div>
+                    <CBasket/>
+                    {/* <div>
                         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-bag" viewBox="0 0 16 16">
                         <path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z"/>
                         </svg>
                         <span>{basketCount}</span>
-                    </div>
+                    </div> */}
                 </div>
             </div>          
         </>

shop/src/components/index.js

@@ -4,7 +4,7 @@ import createHistory from "history/createBrowserHistory";
 import {createStore, combineReducers, applyMiddleware} from 'redux';
 import Header from "./header";
 import Footer from "./footer";
-import Main from "./MainImg";
+import Main from "./Main";
 import actionCatalogCard from "../reducers/reducerCat";
 import Links from "./links"
 import CGoodsCategory from "./goodsCategory";
@@ -17,11 +17,12 @@ import GoodsNotFound from "./goodsNotFound";
 import LoginForm from "./loginOnPage";
 import CGoodCard from "./goodCard";
 import UpdateForm from "./updateForm";
+import YourProfile from "./profilePage"
 
 
 
 export {Header,Footer, actionCatalogCard, Main, Links, CGoodsCategory, OneGood, GoodsList, SearchInput, CGoodsSearch, CGoodsListSearch, GoodsNotFound, 
-LoginForm, CGoodCard, UpdateForm};
+LoginForm, CGoodCard, UpdateForm, YourProfile};
 
 
 

shop/src/components/layout.js

@@ -1,29 +0,0 @@
-import React, { useState } from 'react';
-import {BrowserRouter as Router, Route, Link, Switch, Redirect} from 'react-router-dom';
-import createHistory from "history/createBrowserHistory";
-import {Header, Footer} from "./index"
-import MainImg from "./MainImg"
-
-
-
-
-
-const Layout =({}) =>{
-    return(
-        <>
-
-
-        </>
-    )
-}
-
-
-
-
-
-
-
-
-
-export default Layout;
-

shop/src/components/profilePage.js

@@ -0,0 +1,14 @@
+import {UpdateForm} from "./index";
+import { useState, useRef } from 'react';
+import {gql, urlUpload, actionPromise, actionGoodCard, getGoods, updateAction} from "../reducers";
+
+
+const YourProfile = ({}) => {
+    return (
+        <>
+            <div>Ну привет, мистер</div>
+            <UpdateForm onchange = {updateAction}/>
+        </>
+    )
+}
+export default YourProfile;

shop/src/reducers/cartReducer.js

@@ -0,0 +1,55 @@
+import jwt_decode from "jwt-decode";
+
+
+function cartReducer(state, { type, id, count, price }) {
+    if(state === undefined){
+        if(localStorage.authToken && localStorage.basket) {
+            state =  JSON.parse(localStorage.basket);
+        }
+        else { 
+            state = {}
+    }
+    }
+    if (type === "CART_ADD") {
+
+        state = {
+            ...state,
+            
+            price: price + (state.price ||0),
+            [id]: count + (state[id] || 0),
+        };
+    }
+
+    if (type === "CART_DELETE") {
+        const { [id]: skip, ...newState } = state;
+
+        return newState;
+    }
+    localStorage.basket = JSON.stringify(state)
+
+    return state;
+}
+    
+
+
+
+const actionCartAdd = (price, id, count = 1) => ({
+    type: "CART_ADD",
+    id,
+    count,
+    price
+    
+});
+
+const actionCartDelete = (id, count = 1) => ({
+    type: "CART_ADD",
+    id,
+    count: -count,
+});
+
+const actionCartClear = (id) => ({
+    type: "CART_DELETE",
+    id,
+});
+
+export {cartReducer, actionCartAdd, actionCartDelete, actionCartClear};

shop/src/reducers/index.js

@@ -10,6 +10,7 @@ import authReducer from "./authReducer";
 import {actionAuthLogin, actionAuthLogout} from "./actionAuthLog";
 import actionGoodCard from "./actionGoodCard";
 import updateAction from "./actionUpdateImg";
+import {cartReducer, actionCartClear, actionCartDelete, actionCartAdd} from "./cartReducer";
 
 
 
@@ -28,11 +29,14 @@ function promiseReducer(state={}, action){
   
   
   const store = createStore(combineReducers({
-    promiseRed: promiseReducer, auth: authReducer
+      promiseRed: promiseReducer, 
+      auth: authReducer,
+      basket: cartReducer
   }), compose(applyMiddleware(thunk)))
 
 export {actionPromise, gql, actionGoods, getGoods, promiseReducer, store, actionSearch,
-   actionLogin, authReducer, actionAuthLogin, actionAuthLogout, urlUpload, actionGoodCard, updateAction};
+   actionLogin, authReducer, actionAuthLogin, actionAuthLogout, urlUpload, actionGoodCard, 
+   updateAction, actionCartAdd, actionCartDelete, actionCartClear};
 
 
 

shop/src/reducers/reducerCat.js

@@ -23,23 +23,40 @@ import {gql} from "./index"
 
 
 
+// const actionCatalogCard = () => {
+//     return async  dispatch => {
+//         await dispatch(actionPromise("categories", gql(`
+//             query categories {
+//                 CategoryFind(query:"[{}]") {
+//                 _id name 
+//                 subCategories {
+//                     name,
+//                     _id
+//                     goods {name}
+//                   }
+//                 goods {name, price _id, images {url}}
+//                     image {
+//                         _id
+//                         createdAt
+//                         text               
+//                         originalFileName
+//                     }
+//                 }
+//             }`, )))    
+//     }
+// }
+
+
+
 const actionCatalogCard = () => {
     return async  dispatch => {
         await dispatch(actionPromise("categories", gql(`
             query categories {
                 CategoryFind(query:"[{}]") {
-                _id name 
-                subCategories {
-                    name,
-                    _id
-                    goods {name}
-                  }
-                goods {name, price _id, images {url}}
-                    image {
+                    _id name 
+                    subCategories {
+                        name,
                         _id
-                        createdAt
-                        text               
-                        originalFileName
                     }
                 }
             }`, )))