new goods

shop/src/App.css

@@ -78,11 +78,17 @@
 }
 
 aside {
-  width: 30%;
+  width: 20%;
 }
 content {
-  width: 70%;
+  width: 80%;
+}
+.goodsWrapper {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
 }
+
 .goods {
   display: flex;
   flex-wrap: wrap;
@@ -97,15 +103,13 @@ content {
   padding: 3%;
 }
 
-.goodsWrapper {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-}
+
 
 .oneGood {
+  position: relative;
   background-color: rgb(10, 10, 10);
   display: flex;
+  width: 150px;
   flex-direction: column;
   font-size: 15px;
   align-items: center;
@@ -114,11 +118,15 @@ content {
   border: 2px solid;
   border-color:rgb(229, 229, 243);
   border-radius: 20%;
+  justify-content: space-between;
 }
 .oneGood h5 {
   font-size: 16px;
+  height: 75px;
 }
 
+
+
 .About {
 
 }
@@ -192,9 +200,10 @@ content {
   }
   .oneGood h5 {
     font-size: 10px;
+    height: 25px;
   }
   .oneGood img {
-    width: 35px;
+    width: 80px;
   }
 
   .footer {

shop/src/App.js

@@ -8,10 +8,28 @@ 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} from "./reducers";
 
 
 
 
+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 };
+};
+
+
+// toQuery("   klk     lk nnnj    klkm    555   ");
 function promiseReducer(state={}, action){
   if (action.type === 'PROMISE'){
       const { name="default", status, payload, error} = action
@@ -29,6 +47,21 @@ 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)])}))
+}
+
+store.dispatch(actionSearch("Apple"));
 
 function App() {
   return (

shop/src/components/MainImg.js

@@ -7,12 +7,13 @@ import {createStore, combineReducers, applyMiddleware} from 'redux';
 import thunk from 'redux-thunk';
 import store from "../reducers";
 import Catalog from "./catalog";
-import {Goods} from "./index";
-// import Goods from "../reducers/goods";
+//import {Goods} from "./index";
+import CGoodsCategory from "./goods";
 
   
 const Main = ({className = "MainImg" }) => {
     return (
+
         <div className = {className}>
             <Switch>
                 <aside>
@@ -21,24 +22,29 @@ const Main = ({className = "MainImg" }) => {
 
                 </aside>
             </Switch>
-            <Switch>
-            <content>
-                <Route path = "/" component = {MainMag} exact/>
-                <Route path = "/catalog/" component={MainCatalog} exact/>
-                <Route path = "/catalog/:id" component= {({match}) => <Goods id = {match.params.id}/>}/>
-                <Route path="/about" component = {About} exact/>
-                <Route path = "/post" component = {Post} exact/>
-                <Route path = "/contacts" component = {Contacts} />
-                {/* <Route component = { NotFound } /> */}
 
+            <content>
+                <Switch>
+                    <Route path = "/" component = {MainMag} exact/>
+                    <Route path = "/catalog/" component={MainCatalog} exact/>
+                    {/* <Route path = "/catalog/:id" component= {({match}) => <Goods id = {match.params.id} /> }/> */}
+                    <Route path = "/catalog/:id" component= {({match}) => <CGoodsCategory id = {match.params.id} /> }/>
+                    <Route path="/about" component = {About} exact/>
+                    <Route path = "/post" component = {Post} exact/>
+                    <Route path = "/contacts" component = {Contacts} />
+                    <Route component = { NotFound } exact/>
+                </Switch>
             </content>
-            </Switch>
+
+
+
+
 
         </div>
     )
   }
-  const Id = ({name = "Idishnic"} )=> {
-   return(<div>{name}</div>) }
+//   const Id = ({name = "Idishnic"} )=> {
+//    return(<div>{name}</div>) }
   const MainMag = () => <div>Я тут кароче самый главный страниц</div>
   const About = () => <div>Мы крутой магазин, бла-бла</div>
   const NotFound = () => <div>Да пошел ты!</div>

shop/src/components/goods.js

@@ -5,39 +5,22 @@ import {actionPromise} from "./index"
 import {gql, actionGoods} from "../reducers/index";
 import { useEffect } from 'react';
 
+  // const Goods = ({className = "goods",  goods = [], getData, id}) => {
+  //     useEffect(() =>  getData(id), [id])
 
-
-const OneGood = ({className = "oneGood", image, name, price}) => {
-    return (
-      <>
-      <div className = {className}>
-        <h5>{name}</h5>
-
-        <img width = "120px" src = {`http://shop-roles.asmer.fs.a-level.com.ua/${image}`}/>
-        <span>{price}грн</span>
-      </div>
-      </>
-    )
-  }
-  
-  
-  const Goods = ({className = "goods", state, goods = [], getData, id}) => {
-      useEffect(() =>  getData(id), [id])
-      console.log(goods)
-      return(
-          <>
-            <div className = "goodsWrapper">
-                <h4>Товары</h4>
-                <div className = {className}>          
-                {goods.map(good => <OneGood name = {good.name} price = {good.price} image = {good.images[0].url}/>)}
-                </div>
-            </div>
-          </>
-      )
-  }
+  //     return(
+  //         <>
+  //           <div className = "goodsWrapper">
+  //               <h4>Товары</h4>
+  //               <div className = {className}>          
+  //               {goods.map(good => <OneGood key = {good._id} name = {good.name} price = {good.price} image = {good.images[0].url}/>)}
+  //               </div>
+  //           </div>
+  //         </>
+  //     )
+  // }
   
   const getGoods = state => {
-    console.log(state);
   
     if(state.promiseRed.goods && state.promiseRed.goods.payload) {
         return state.promiseRed.goods.payload.data.GoodFind
@@ -45,6 +28,9 @@ const OneGood = ({className = "oneGood", image, name, price}) => {
   
     return [];
   };
+
+
+
   
   const mapStateToProps = state => ({
     state: state,
@@ -55,4 +41,44 @@ const OneGood = ({className = "oneGood", image, name, price}) => {
     getData: actionGoods
   }, dispatch);
   
-  export default connect(mapStateToProps, mapDispatchToProps)(Goods);
+
+
+const OneGood = ({className = "oneGood", image, name, price}) => {
+
+  return (
+    <>
+    <div className = {className}>
+      <h5>{name}</h5>
+
+      <img width = "120px" src = {`http://shop-roles.asmer.fs.a-level.com.ua/${image}`}/>
+      <span>{price}грн</span>
+    </div>
+    </>
+  )
+}
+
+
+
+const GoodsCategory = ({goods = [], id, tittle = "Товари", getData = actionGoods}) => {
+  useEffect(() =>  getData(id), [id])
+  return(
+      <>
+        <div className = "goodsWrapper">
+            <GoodsList goodsArr = {goods} className = "goods" fn = {console.log("pratsuu")}/>
+        </div>
+      </>
+  )
+}
+
+
+const CGoodsCategory = connect(mapStateToProps, mapDispatchToProps)(GoodsCategory);
+
+const GoodsList = ({goodsArr, className = "goods"}) => {
+  return (
+  <div className = {className}>          
+  {goodsArr.map((good) => <OneGood key = {good._id} name = {good.name} price = {good.price} image = {good.images[0].url}/>)}
+  </div>
+  )
+}
+
+  export default CGoodsCategory;

shop/src/reducers/actionsearch.js

@@ -0,0 +1,8 @@
+import actionPromise from "./actionPromise";
+import gql from "./gql";
+
+let str = "iphone galaxy samsung"
+///const toRegexp = str => /iphone|galaxy|samsung/" должно убирать пробелы
+// const toQuery = (fields = ["1","2"], str => ({$or: [{"1":toRexexp(str)},
+//                                                     {"2":toRexexp(str)}]}) должно создавать обьект массива слов
+

shop/src/reducers/getGoods.js

@@ -19,9 +19,9 @@ const actionGoods = (_id) => {
           name, price,
           images{url}, _id
           categories {
-            _id
-            createdAt
-            name
+          _id
+          createdAt
+          name
           }
         }
       }` ,{ query:  queryJson })))
@@ -30,51 +30,5 @@ const actionGoods = (_id) => {
 
 
 
-// const OneGood = ({className = "oneGood", image, name, price}) => {
-//   return (
-//     <>
-//     <div>
-//       <h5>{name}</h5>
-//       <span>{price}грн</span>
-//       <img src = {`http://shop-roles.asmer.fs.a-level.com.ua/${image}`}/>
-//     </div>
-//     </>
-//   )
-// }
-
-
-// const Goods = ({className = "goods", state, goods = [], getData, id}) => {
-//     useEffect(() => goods.length == 0 && getData(id), [])
-//     console.log(goods)
-//     return(
-//         <>
-//                   <h1>{id}</h1>
-//         <div className = {className}>
-
-//           {/* <button onClick = {() => getData(id)}>hello</button> */}
-//           {goods.map(good => <OneGood name = {good.name} price = {good.price} image = {good.images[0].url}/>)}
-//         </div>
-//         </>
-//     )
-// }
-
-// const getGoods = state => {
-//   console.log(state);
-
-//   if(state.promiseRed.data && state.promiseRed.data.payload) {
-//       return state.promiseRed.data.payload.data.GoodFind
-//   }
-
-//   return [];
-// };
-
-// const mapStateToProps = state => ({
-//   state: state,
-//   goods: getGoods(state)
-// });
-
-// const mapDispatchToProps = dispatch => bindActionCreators({
-//   getData: actionGoods
-// }, dispatch);
 
  export default actionGoods;