search done

shop/src/App.css

@@ -21,6 +21,7 @@
   justify-content: space-between;
   padding-top: 10px;
   height: 50px;
+  z-index: 2;
 }
 
 .header .standartMenu {
@@ -33,7 +34,7 @@
 .mobileMenu {
   position: absolute;
   background-color: rgb(58, 58, 65);
-  height: 10em;
+  height: 9em;
   border-radius: 0 0% 10% 10%;
   align-items: center;
   list-style-type: none; 
@@ -66,15 +67,36 @@
 
 .MainImg {
   background-image: url(./images/main.jpg);
-  background-color: rgb(10, 10, 10);
-  background-repeat: no-repeat;
+  background-repeat: no-repeat; 
   background-position: center;
-  background-size: 100%;
+  background-size: cover;
   width: 100%;
   min-height: 45em;
   margin-top: 50px;
   padding-bottom: 100px;
   display: flex;
+  flex-direction: column;
+}
+.catalogInput {
+  display: flex;
+
+}
+.catalogHead {
+  padding: 5px;
+}
+
+
+.search input{
+  width: 50%;
+  margin: 0 15px 0 0px;
+  color: rgb(58, 58, 65);
+}
+.search button {
+  width: 100px;
+  background-color: rgb(58, 58, 65);
+  border-radius: 15%;
+
+
 }
 
 aside {
@@ -83,6 +105,13 @@ aside {
 content {
   width: 80%;
 }
+.goodsNotFound {
+  /* height: 30em; */
+  padding-top: 20%;
+}
+.goodsNotFound h5 {
+  font-size: 30px;
+}
 .goodsWrapper {
   display: flex;
   align-items: center;
@@ -109,12 +138,12 @@ content {
   position: relative;
   background-color: rgb(10, 10, 10);
   display: flex;
-  width: 150px;
+  width: 170px;
   flex-direction: column;
   font-size: 15px;
   align-items: center;
   margin: 5px;
-  padding: 10px;
+  padding: 25px;
   border: 2px solid;
   border-color:rgb(229, 229, 243);
   border-radius: 20%;
@@ -205,6 +234,10 @@ content {
   .oneGood img {
     width: 80px;
   }
+  .goodsNotFound h5 {
+    font-size: 15px;
+    line-height: 25px;
+  }
 
   .footer {
     font-size: 8px;

shop/src/App.js

@@ -2,66 +2,79 @@
 import './App.css';
 import Layout from "./components/layout.js";
 import {Provider, connect} from 'react-redux';
-import {Header, Footer, actionCatalogCard, Main} from "./components/index"
+import {Header, Footer, actionCatalogCard, Main, SearchInput} from "./components/index"
 import {BrowserRouter as Router, Route, Link, Switch, Redirect} from 'react-router-dom';
 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";
+import {gql, actionPromise, store, promiseReducer, actionSearch} from "./reducers";
+import { useState } 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 };
-};
+// 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
-      if (status){
-          return {
-              ...state, [name]: {status, payload: (status === 'PENDING' && state[name] && state[name].payload) || payload, error}
-          }
-      }
-  }
-  return state;
-}
+// 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)])}))
-}
+// 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"));
+// console.log(store.dispatch(actionSearch("Холодильник")));
+
+
+// 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 (
@@ -70,7 +83,7 @@ function App() {
         <Router history = {createHistory}>
           
           <Header/>
-          
+
           <Main/>
 
           <Footer/>

shop/src/components/MainImg.js

@@ -7,40 +7,45 @@ import {createStore, combineReducers, applyMiddleware} from 'redux';
 import thunk from 'redux-thunk';
 import store from "../reducers";
 import Catalog from "./catalog";
-//import {Goods} from "./index";
-import CGoodsCategory from "./goodsCategory";
+import {searchInput, CGoodsCategory, SearchInput, CGoodsSearch} from "./index";
+// //import {Goods} from "./index";
+// import  from "./goodsCategory";
+// import  from './searchInput';
+// import  from './goodsSearch';
 
   
 const Main = ({className = "MainImg" }) => {
     return (
+        <>
 
         <div className = {className}>
-            <Switch>
-                <aside>
-
-                    <Route path = "/catalog/" component={Catalog} />
-
-                </aside>
-            </Switch>
-
-            <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>
-
-
-
-
-
+            <div className = "catalogHead">
+                <SearchInput/>
+            </div>
+                <div className = "catalogInput">
+                    <Switch>
+                        <aside>
+
+                            <Route path = "/catalog/" component={Catalog} />
+                            <Route path = "/search/"component={Catalog} />
+                        </aside>
+                    </Switch>
+
+                <content>
+                    <Switch>
+                        <Route path = "/" component = {MainMag} exact/>
+                        <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="/about" component = {About} exact/>
+                        <Route path = "/post" component = {Post} exact/>
+                        <Route path = "/contacts" component = {Contacts} />
+                        <Route component = { NotFound } exact/>
+                    </Switch>
+                </content>
+            </div>
         </div>
+        </>
     )
   }
 //   const Id = ({name = "Idishnic"} )=> {

shop/src/components/catalog.js

@@ -13,7 +13,7 @@ const Catalog = ({state, categories = [], getData = () => console.log("no")}) =>
     return(
         <>
         <ul className = "catalog">
-            {categories.map(category => <Links url = {`/catalog/` + category._id} text = {category.name}></Links>)}
+            {categories.map(category => <Links key = {category._id} url = {`/catalog/` + category._id} text = {category.name}></Links>)}
         </ul>
         </>
   )}

shop/src/components/goodsList.js

@@ -1,11 +1,13 @@
-import {OneGood} from "./index";
+import {OneGood, GoodsNotFound} from "./index";
 import {createStore, combineReducers, applyMiddleware, bindActionCreators} from 'redux';
 import {getData, getGoods, actionGoods} from "../reducers";
 import {Provider, connect} from 'react-redux';
 
+
   const mapStateToProps = state => ({
     state: state,
-    goods: getGoods(state)
+    goods: getGoods(state),
+    search: getGoods(state)
   });
   
   const mapDispatchToProps = dispatch => bindActionCreators({
@@ -16,9 +18,16 @@ import {Provider, connect} from 'react-redux';
 
 
 const GoodsList = ({goods = [], className = "goods"}) => {
+  if(goods.length == 0) {
+    return(
+        <>
+        <GoodsNotFound/>
+        </>
+    )
+}
   return (
     <div className = {className}>          
-      {goods.map((good) => <OneGood key = {good._id} name = {good.name} price = {good.price} image = {good.images[0].url}/>)}
+      {goods.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`}/>)}
     </div>
   )
 }

shop/src/components/goodsListSearch.js

@@ -0,0 +1,37 @@
+import {OneGood} from "./index";
+import {createStore, combineReducers, applyMiddleware, bindActionCreators} from 'redux';
+import {getData, getGoods, actionGoods, getSearchedGoods, actionSearch} from "../reducers";
+import {Provider, connect} from 'react-redux';
+import {GoodsNotFound } from "./index";
+
+const mapStateToProps = state => ({
+    state: state,
+    search: getSearchedGoods(state)
+  });
+  
+  const mapDispatchToProps = dispatch => bindActionCreators({
+    getData: actionSearch
+  }, dispatch);
+  
+let image = ""
+
+
+const GoodsListSearch = ({search = [], className = "goods"}) => {
+    console.log(search)
+    if(search.length == 0) {
+        return(
+            <>
+            <GoodsNotFound/>
+            </>
+        )
+    }
+  return (
+    <div className = {className}>          
+      {search.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`}/>)}
+    </div>
+  )
+}
+
+ const CGoodsListSearch = connect(mapStateToProps, mapDispatchToProps)(GoodsListSearch);
+
+ export default CGoodsListSearch;

shop/src/components/goodsNotFound.js

@@ -0,0 +1,11 @@
+
+const GoodsNotFound = ({className = "goodsNotFound"}) => {
+    return(
+        <>
+        <div className = {className}>
+            <h5>Нажаль за вашими критеріями нічого не знайдено</h5>
+        </div>
+        </>
+    )
+}
+export default GoodsNotFound;

shop/src/components/goodsSearch.js

@@ -0,0 +1,37 @@
+import {Provider, connect} from 'react-redux';
+import {createStore, combineReducers, applyMiddleware, bindActionCreators} from 'redux';
+import thunk from 'redux-thunk';
+import {actionPromise} from "./index"
+import {gql, actionGoods, getGoods, actionSearch} from "../reducers/index";
+import { useEffect } from 'react';
+import {OneGood, CGoodsList} from "./index";
+import CGoodsListSearch from './goodsListSearch';
+
+const mapStateToProps = state => ({
+    state: state,
+    search: getGoods(state)
+  });
+  
+  const mapDispatchToProps = dispatch => bindActionCreators({
+    getData: actionSearch
+  }, dispatch);
+
+  const GoodsSearch = ({name, getData}) => {
+      console.log(name)
+    useEffect(() =>  getData(name), [name])
+    return(
+    <>
+            <div className = "goodsWrapper">
+                <CGoodsListSearch />
+            </div>
+    </>
+    )
+  }
+   const CGoodsSearch = connect(mapStateToProps, mapDispatchToProps)(GoodsSearch);
+
+// const CGoodsSearch = ({}) => {
+//     return(
+//         <h2>Hello</h2>
+//     )
+// }
+  export default CGoodsSearch;

shop/src/components/index.js

@@ -10,10 +10,14 @@ import Links from "./links"
 import CGoodsCategory from "./goodsCategory";
 import OneGood from './oneGood';
 import CGoodsList from "./goodsList";
+import SearchInput from "./searchInput";
+import CGoodsSearch from "./goodsSearch";
+import CGoodsListSearch from "./goodsListSearch";
+import GoodsNotFound from "./goodsNotFound";
 
 
 
-export {Header,Footer, actionCatalogCard, Main, Links, CGoodsCategory, OneGood, CGoodsList};
+export {Header,Footer, actionCatalogCard, Main, Links, CGoodsCategory, OneGood, CGoodsList, SearchInput, CGoodsSearch, CGoodsListSearch, GoodsNotFound};
 
 
 

shop/src/components/oneGood.js

@@ -7,7 +7,7 @@ const OneGood = ({className = "oneGood", image, name, price}) => {
       <div className = {className}>
         <h5>{name}</h5>
   
-        <img width = "120px" src = {`http://shop-roles.asmer.fs.a-level.com.ua/${image}`}/>
+        <img width = "120px" src = {image}/>
         <span>{price}грн</span>
       </div>
       </>

shop/src/components/searchInput.js

@@ -0,0 +1,24 @@
+import {useState} from "react";
+import {store, actionSearch} from "../reducers";
+import {BrowserRouter as Router, Route, Link, Switch, Redirect} from 'react-router-dom';
+
+
+
+
+
+const SearchInput = ({classname = "search"}) => {
+    const [name, changeValue] = useState("posuk");
+    return(
+      <>
+        <div className = {classname}>
+            <input type = "text" plaseholder = "Пошук" onChange = {(e) => changeValue(e.target.value)}/>
+            <Link to = {"/search/" + name}>
+                <button onClick = {() => console.log(store.dispatch(actionSearch(name)))}>пуск</button>
+            </Link>
+        </div>
+      </>
+    )
+  }
+
+
+  export default SearchInput;

shop/src/reducers/actionsearch.js

@@ -1,8 +1,36 @@
 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)}]}) должно создавать обьект массива слов
 
+
+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 };
+  };
+  
+
+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)])}))
+  }
+  
+export {toRegexp, toQuery, actionSearch};

shop/src/reducers/getSearchedGoods.js

@@ -0,0 +1,12 @@
+
+
+  const getSearchedGoods = state => {
+  
+    if(state.promiseRed.search && state.promiseRed.search.payload) {
+        return state.promiseRed.search.payload.data.GoodFind
+    }
+  
+    return [];
+  };
+
+  export default getSearchedGoods;

shop/src/reducers/index.js

@@ -4,8 +4,28 @@ import actionPromise from "./actionPromise";
 import gql from "./gql";
 import actionGoods from "./actionGoods"
 import getGoods from "./getGoods";
+import {actionSearch} from "./actionsearch";
+import getSearchedGoods from "./getSearchedGoods";
 
-export {actionPromise, gql, actionGoods, getGoods};
+
+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)))
+
+export {actionPromise, gql, actionGoods, getGoods, promiseReducer, store, actionSearch, getSearchedGoods};