imageUpdate + good by click

shop/package.json

@@ -1,4 +1,6 @@
 {
+
+  
   "name": "shop",
   "version": "0.1.0",
   "private": true,

shop/src/App.css

@@ -24,11 +24,12 @@ button:disabled {
 
  .links {
    text-decoration: none;
+
    color: rgb(229, 229, 243);
  }
- .links:hover {
-  color: rgb(229, 229, 243);
- }
+ /* .links li:hover {
+  color: rgb(65, 65, 150);
+ } */
 .header {
   position: fixed;
   width: 100%;
@@ -54,7 +55,7 @@ button:disabled {
 .mobileMenu {
   position: absolute;
   background-color: rgb(58, 58, 65);
-  height: 9em;
+  height: 7em;
   border-radius: 0 0% 10% 10%;
   align-items: center;
   list-style-type: none; 
@@ -102,7 +103,7 @@ button:disabled {
 }
 .catalogInput {
   display: flex;
-
+  justify-content: space-between;
 }
 .catalogHead {
   padding: 5px;
@@ -122,9 +123,7 @@ button:disabled {
 
 }
 
-aside {
-  width: 20%;
-}
+
 content {
   width: 80%;
 }
@@ -184,6 +183,27 @@ content {
   height: 75px;
 }
 
+.goodCard {
+  display: flex;
+  flex-direction: column;
+  /* width: 70%; */
+  padding: 35px;
+  align-items: center;
+  background-color: rgb(10, 10, 10);
+  border: 2px solid;
+  border-color:rgb(229, 229, 243);
+  border-radius: 20%;
+}
+.goodCard h2 {
+  text-align: center;
+}
+.goodCard span {
+  font-size: 20px;
+}
+.goodCard img {
+  width: 250px;
+}
+
 .loginForm {
   display: flex;
   justify-content: center;
@@ -264,8 +284,8 @@ button {
     width: 150px;
   }
 
-  .catalog {
-
+  .catalog li{
+    font-size: 10px;
   }
   
 
@@ -278,9 +298,9 @@ button {
     /* height: 15em; */
     background-position: top;
   }
-.MainImg aside {
+/* .MainImg aside {
   width: 40%;
-}
+} */
 
   .MainImg content {
     width: 60%;
@@ -291,7 +311,9 @@ button {
   }
   .oneGood {
     background-color: rgb(10, 10, 10);
-    width: 100%;
+    padding: auto;
+    margin: 5px 0;
+    width: 140px;
   }
   .oneGood h5 {
     font-size: 10px;
@@ -304,6 +326,23 @@ button {
     font-size: 15px;
     line-height: 25px;
   }
+  .goodCard {
+    width: 200px;
+    padding: 10px;
+  }
+  .goodCard img{
+    width: 100px;
+  }
+  .goodCard h2 {
+    font-size: 14px;
+  }
+  .goodCard p {
+    width: 100%;
+    font-size: 8px;
+  }
+
+
+
 
   .footer {
     font-size: 8px;

shop/src/App.js

@@ -8,80 +8,47 @@ import createHistory from "history/createBrowserHistory";
 import Catalog from "./components/catalog"
 import {createStore, combineReducers, applyMiddleware, compose} from 'redux';
 import thunk from 'redux-thunk';
-import {gql, actionPromise, store, promiseReducer, actionSearch} from "./reducers";
-import { useState } from 'react';
+import {gql, actionPromise, store, promiseReducer, actionSearch, urlUpload} from "./reducers";
+import { useState, useRef } from 'react';
 
 
+        
 
 
 
-// let toRegexp = (str) => {
-//   str = str.replace(/ +/g, " ").trim();
-//   str = "/" + str.split(" ").join("|") + "/";
-//   return str;
-// };
 
-// let toQuery = (str, fields = ["name", "description"]) => {
-//   str = toRegexp(str);
-//   let arr = fields.map((s) => {
-//       console.log(s, typeof s);
-//       return { [s]: str };
-//   });
-//   return { $or: arr };
-// };
+const UpdateForm = ({}) => {
+    const formRef = useRef(null);
+    const [isUpdate, changeIt] = useState(false)
+    const updateAction =  async () => {
+    fetch(`${urlUpload}/upload`, {
+        method: "POST",
+        headers: localStorage.authToken ? {Authorization: 'Bearer ' + localStorage.authToken} : {},
+        body: new FormData(formRef.current)
+    })
+    .then((res) => res.json()).then(res => console.log(res))
 
+    changeIt(true)
+  }
 
-// toQuery("   klk     lk nnnj    klkm    555   ");
-// function promiseReducer(state={}, action){
-//   if (action.type === 'PROMISE'){
-//       const { name="default", status, payload, error} = action
-//       if (status){
-//           return {
-//               ...state, [name]: {status, payload: (status === 'PENDING' && state[name] && state[name].payload) || payload, error}
-//           }
-//       }
-//   }
-//   return state;
-// }
-
-
-// const store = createStore(combineReducers({
-//   promiseRed: promiseReducer
-// }), compose(applyMiddleware(thunk)))
-
-// function actionSearch(queryString) {
-//   return actionPromise('search', gql(`query goods($query: String) {
-//       GoodFind(query: $query)  {
-//         name, price,
-//         images{url}, _id
-//         categories {
-//           _id
-//           createdAt
-//           name
-//         }
-//       }
-//     }`, {query: JSON.stringify([toQuery(queryString)])}))
-// }
-
-// console.log(store.dispatch(actionSearch("Холодильник")));
+  return(
+    <>
+    <form action="/upload" method="post" enctype="multipart/form-data" id='form' ref={formRef} onChange = {updateAction}>
+      <input type="file" name="photo" id='photo'/>
+    </form>
 
+    <img src = {`${urlUpload}/images/cbd7145dbc78ced471951c70f571f871`}/>
+    </>
+  )
+}
 
-// const SearchInput = ({}) => {
-//   const [name, changeValue] = useState("posuk");
-//   return(
-//     <>
-//       <input type = "text" plaseholder = "Пошук" onChange = {(e) => changeValue(e.target.value)}/>
-//       <button onClick = {() => console.log(store.dispatch(actionSearch(name)))}>пуск</button>
-//     </>
-//   )
-// }
 
 function App() {
   return (
     <>
       <Provider store={store}>
         <Router history = {createHistory}>
-          
+          {/* <UpdateForm/> */}
           <Header/>
 
           <Main/>

shop/src/components/MainImg.js

@@ -7,7 +7,7 @@ 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} from "./index";
+import {searchInput, CGoodsCategory, SearchInput, CGoodsSearch, LoginForm, CGoodCard} from "./index";
 // //import {Goods} from "./index";
 // import  from "./goodsCategory";
 // import  from './searchInput';
@@ -23,13 +23,15 @@ const Main = ({className = "MainImg" }) => {
                 <SearchInput/>
             </div>
                 <div className = "catalogInput">
-                    <Switch>
-                        <aside>
 
+                    <aside>
+                        <Switch>
                             <Route path = "/catalog/" component={Catalog} />
                             <Route path = "/search/"component={Catalog} />
-                        </aside>
-                    </Switch>
+                            {/* <Route path = "/good/:id" component={Catalog} /> */}
+                        </Switch>
+                    </aside>
+
 
                 <content>
                     <Switch>
@@ -37,6 +39,7 @@ const Main = ({className = "MainImg" }) => {
                         <Route path = "/catalog/" component={MainCatalog} exact/>
                         <Route path = "/catalog/:id" component= {({match}) => <CGoodsCategory id = {match.params.id} /> }/>
                         <Route path = "/search/:name" component = {({match}) => <CGoodsSearch name = {match.params.name}/>}/>
+                        <Route path = "/good/:id" component = {({match}) => <CGoodCard id = {match.params.id}/>}/>
                         <Route path = "/login" component = {LoginForm}/>
                         <Route path = "/profile/:login" component = {YourProfile}/>
                         <Route path="/about" component = {About} exact/>

shop/src/components/catalog.js

@@ -1,6 +1,6 @@
-import {Provider, connect} from 'react-redux';
-import {useEffect } from 'react'
-import {Header, Footer, MainImg, Links} from "./index"
+import { Provider, connect } from 'react-redux';
+import { useEffect, useState } from 'react'
+import { Header, Footer, MainImg, Links } from "./index"
 import thunk from 'redux-thunk';
 import { bindActionCreators } from 'redux';
 import actionCatalogCard from './../reducers/reducerCat';
@@ -8,19 +8,29 @@ import actionCatalogCard from './../reducers/reducerCat';
 
 
 
-const Catalog = ({state, categories = [], getData = () => console.log("no")}) => {
+const Catalog = ({ state, categories = [], getData = () => console.log("no") }) => {
     useEffect(() => categories.length == 0 && getData(), []);
-    return(
+    //const [show, changeValue] = useState(false);
+
+    return (
         <>
-        <ul className = "catalog">
-            {categories.map(category => <Links key = {category._id} url = {`/catalog/` + category._id} text = {category.name}></Links>)}
-        </ul>
+            <ul className="catalog">
+                {categories.map(category =>
+                    category.subCategories == null ?
+                        <Links key={category._id} url={`/catalog/` + category._id} text={category.name}> </Links> :
+
+                        <li>{category.name} {<ul className="catalog">{category.subCategories.map(subCategory =>
+                            <Links key={subCategory._id} url={`/catalog/` + subCategory._id} text={subCategory.name}> </Links>)}</ul>}</li>
+
+                )}
+            </ul>
         </>
-  )}
+    )
+}
 
 const getCategories = state => {
     console.log("state", state)
-    if(state.promiseRed.categories && state.promiseRed.categories.payload) {
+    if (state.promiseRed.categories && state.promiseRed.categories.payload) {
         return state.promiseRed.categories.payload.data.CategoryFind
     }
 

shop/src/components/goodCard.js

@@ -0,0 +1,76 @@
+import { connect } from "react-redux";
+import {gql, urlUpload, actionPromise} from "../reducers";
+import {createStore, combineReducers, applyMiddleware, bindActionCreators} from 'redux';
+import { useEffect } from 'react';
+
+
+
+
+
+const actionGoodCard = (_id) => {
+    const queryJson = JSON.stringify([{
+        "_id": `${_id}`
+      }]);
+    return (actionPromise(`goodCard`, gql (
+        `query oneGood($query: String) {
+            GoodFindOne(query: $query) {
+                _id
+                createdAt
+                name
+                description
+                price
+                images{url}
+            }
+          }
+    ` ,{ query: queryJson})))
+  }
+
+
+  const mapStateToProps = state => ({
+    state: state,
+    goodCard: getGood(state, "goodCard")
+  });
+  
+  const mapDispatchToProps = dispatch => bindActionCreators({
+    getData: actionGoodCard
+  }, dispatch);
+  
+
+
+  const getGood = (state, key) => {
+  
+    if(state.promiseRed[key] && state.promiseRed[key].payload) {
+        return state.promiseRed[key].payload.data.GoodFindOne
+    }
+  
+    return null;
+  };
+
+
+
+
+  const GoodCard = ({id, goodCard = null, getData, className = "goodCard"}) => {
+    useEffect(() =>  getData(id), [id])
+    console.log(goodCard)
+     return(
+        <> 
+        { goodCard &&
+          <div className = {className}>
+            <h2>{goodCard.name}</h2>
+            <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>
+          </div>
+        }
+        </>
+    )
+  }
+  
+
+
+  const CGoodCard = connect(mapStateToProps, mapDispatchToProps)(GoodCard)
+
+  export default CGoodCard;
+
+
+

shop/src/components/goodsList.js

@@ -1,6 +1,6 @@
 import {OneGood, GoodsNotFound} from "./index";
 import {createStore, combineReducers, applyMiddleware, bindActionCreators} from 'redux';
-import {getData, getGoods, actionGoods} from "../reducers";
+import {getData, getGoods, actionGoods, urlUpload} from "../reducers";
 import {Provider, connect} from 'react-redux';
 
 
@@ -27,7 +27,7 @@ const GoodsList = ({arr = [], className = "goods"}) => {
 }
   return (
     <div className = {className}>          
-      {arr.map((good) => <OneGood key = {good._id} name = {good.name} price = {good.price} image = {good.images ? `http://shop-roles.asmer.fs.a-level.com.ua/${good.images[0].url}` : `https://images.ua.prom.st/2259265311_korobka-syurpriz-dlya.jpg`}/>)}
+      {arr.map((good) => <OneGood key = {good._id} id = {good._id} name = {good.name} price = {good.price} image = {good.images ? `${urlUpload}/${good.images[0].url}` : `https://images.ua.prom.st/2259265311_korobka-syurpriz-dlya.jpg`}/>)}
     </div>
   )
 }

shop/src/components/goodsSearch.js

@@ -17,7 +17,6 @@ const mapStateToProps = state => ({
   }, dispatch);
 
   const GoodsSearch = ({search, name, getData}) => {
-    console.log(search)
     useEffect(() =>  getData(name), [name])
     return(
     <>

shop/src/components/header.js

@@ -52,7 +52,8 @@ const TabletMenu = ({}) => {
 
 const ToLoginPage = ({login, onLogout}) => {
     const history = useHistory();
-    useEffect(() => login ?  history.push(`/profile/` + login) : history.push(`/login`),[login])
+    console.log(history.location.pathname)
+    useEffect(() => history.location.pathname.includes(`/profile/`) && (login ?  history.push(`/profile/` + login) : history.push(`/login`)),[login])
     return(
         <>
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-person" viewBox="0 0 16 16">

shop/src/components/index.js

@@ -15,11 +15,12 @@ import CGoodsSearch from "./goodsSearch";
 import CGoodsListSearch from "./goodsListSearch";
 import GoodsNotFound from "./goodsNotFound";
 import LoginForm from "./loginOnPage";
+import CGoodCard from "./goodCard";
 
 
 
 export {Header,Footer, actionCatalogCard, Main, Links, CGoodsCategory, OneGood, GoodsList, SearchInput, CGoodsSearch, CGoodsListSearch, GoodsNotFound, 
-LoginForm};
+LoginForm, CGoodCard};
 
 
 

shop/src/components/links.js

@@ -3,9 +3,9 @@ import {BrowserRouter as Router, Route, Link, Switch, Redirect} from 'react-rout
 
 const Links = ({url, text, className = "links"}) => {
     return (
-        <li>
-            <Link className = {className} to={url}>{text}</Link>
-        </li>
+
+            <Link className = {className} to={url}><li>{text}</li></Link>
+
     )
 }
 

shop/src/components/loginOnPage.js

@@ -40,14 +40,16 @@ const PasswordConfirm = ({login, isLoggedIn, onLogin = null }) => {
                     onChange={(e) => {
                         setPass1(e.target.value);
                     }}
-                ></input>
+                    onKeyDown = {(e) => e.keyCode == 13 && onLogin(pass1, pass2)}
+                />
                 <input
                     type="password"
                     placeholder = "password"
                     onChange={(e) => {
                         setPass2(e.target.value);
                     }}
-                ></input>
+                    onKeyDown = {(e) => e.keyCode == 13 && onLogin(pass1, pass2)}
+                />
             </div>
             <div>
                 <button disabled = {isLoggedIn} onClick={() => onLogin(pass1, pass2)}>Login</button>

shop/src/components/oneGood.js

@@ -1,15 +1,17 @@
+import {BrowserRouter as Router, Route, Link, Switch, Redirect} from 'react-router-dom';
 
-
-const OneGood = ({className = "oneGood", image, name, price}) => {
+const OneGood = ({className = "oneGood", image, name, price, id}) => {
 
     return (
       <>
-      <div className = {className}>
-        <h5>{name}</h5>
-  
-        <img width = "120px" src = {image}/>
-        <span>{price}грн</span>
-      </div>
+      <Link to = {`/good/` + id}>
+        <div className = {className}>
+          <h5>{name}</h5>
+    
+          <img width = "120px" src = {image}/>
+          <span>{price}грн</span>
+        </div>
+      </Link>
       </>
     )
   }

shop/src/reducers/actionGoods.js

@@ -1,8 +1,8 @@
 import {Provider, connect} from 'react-redux';
 import {createStore, combineReducers, applyMiddleware, bindActionCreators} from 'redux';
 import thunk from 'redux-thunk';
-import {actionPromise} from "./index"
-import gql from "./gql";
+import {actionPromise, gql} from "./index"
+
 import { useEffect } from 'react';
 
 

shop/src/reducers/actionLogin.js

@@ -1,8 +1,7 @@
 import {Provider, connect} from 'react-redux';
 import {createStore, combineReducers, applyMiddleware, bindActionCreators} from 'redux';
 import thunk from 'redux-thunk';
-import {actionPromise, actionAuthLogout, actionAuthLogin} from "./index"
-import gql from "./gql";
+import {actionPromise, actionAuthLogout, actionAuthLogin, gql} from "./index"
 import { useEffect } from 'react';
 
 

shop/src/reducers/actionsearch.js

@@ -1,5 +1,5 @@
 import actionPromise from "./actionPromise";
-import gql from "./gql";
+import {gql} from "./";
 
 
 

shop/src/reducers/authReducer.js

@@ -6,7 +6,7 @@ import {actionLogin, store, actionAuthLogin} from "./index";
 
 function authReducer(state, action){ 
     if (state === undefined){
-        if(localStorage.authToken && localStorage.authToken !== "null") {
+        if(localStorage.authToken) {
             return {token: localStorage.authToken, payload: jwt_decode(localStorage.authToken)}
 
         }
@@ -22,7 +22,7 @@ function authReducer(state, action){
     }
     if (action.type === 'LOGOUT'){
         console.log('ЛОГАУТ')
-        localStorage.authToken = ""
+        localStorage.removeItem("authToken");
         return {}
     }
     return state

shop/src/reducers/gql.js

@@ -12,4 +12,6 @@ const getGQL = url =>
 
 const gql = getGQL("http://shop-roles.asmer.fs.a-level.com.ua/graphql");
 
-export default gql;
+const urlUpload = "http://shop-roles.asmer.fs.a-level.com.ua";
+
+export  {gql, urlUpload};

shop/src/reducers/index.js

@@ -1,7 +1,7 @@
 import {createStore, combineReducers, applyMiddleware, compose} from 'redux';
 import thunk from 'redux-thunk';
 import actionPromise from "./actionPromise";
-import gql from "./gql";
+import {gql, urlUpload} from "./gql";
 import actionGoods from "./actionGoods"
 import getGoods from "./getGoods";
 import {actionSearch} from "./actionsearch";
@@ -30,7 +30,7 @@ function promiseReducer(state={}, action){
   }), compose(applyMiddleware(thunk)))
 
 export {actionPromise, gql, actionGoods, getGoods, promiseReducer, store, actionSearch,
-   actionLogin, authReducer, actionAuthLogin, actionAuthLogout};
+   actionLogin, authReducer, actionAuthLogin, actionAuthLogout, urlUpload};
 
 
 

shop/src/reducers/reducerCat.js

@@ -29,6 +29,11 @@ const actionCatalogCard = () => {
             query categories {
                 CategoryFind(query:"[{}]") {
                 _id name 
+                subCategories {
+                    name,
+                    _id
+                    goods {name}
+                  }
                 goods {name, price _id, images {url}}
                     image {
                         _id