Bladeren bron

newUpdate

maryluis 3 jaren geleden
bovenliggende
commit
7aa3b6fbab

+ 4 - 17
shop/src/App.css

@@ -469,7 +469,7 @@ button {
   display: flex;
   flex-direction: column;
   justify-content: space-around;
-  background-color: rgb(10, 10, 10);
+  background-color: rgba(10, 10, 10, 0.5);
   border: 2px solid;
   align-items: center;
   border-color:rgb(229, 229, 243);
@@ -548,7 +548,6 @@ button {
   .rightSide {
     padding-right: 10px;
     font-size: 10px;
-    /* width: 70%; */
     align-items: center;
   }
   .rightSide button {
@@ -594,9 +593,6 @@ button {
 }
 .oneOrder .oneOrderInner h5 {
   font-size: 10px;
-}
-.oneOrderInner {
-
 }
 
 
@@ -620,7 +616,7 @@ button {
     display: flex;
     flex-direction: column;
     justify-content: space-around;
-    background-color: rgb(10, 10, 10);
+    background-color: rgba(10, 10, 10, 0.5);
     border: 2px solid;
     font-size: 10px;
     border-color:rgb(229, 229, 243);
@@ -653,12 +649,9 @@ button {
 
   .MainImg {
     padding-top: 100px;
-    /* height: 15em; */
     background-position: top;
   }
-/* .MainImg aside {
-  width: 40%;
-} */
+
 
   .MainImg content {
     width: 100%;
@@ -702,7 +695,6 @@ button {
     position: absolute;
     left: 0;
     right: 0;
-    /* padding: 10px; */
   }
   .goodCard img{
     width: 250px;
@@ -730,15 +722,10 @@ button {
 }
 
 @media screen and (max-width: 300px){
-  .header {
-    /* position: relative; */
-  }
+
 
   .header button {
     transform: rotate(-90deg);
     width: 30px;
-    /* position: absolute; */
-    /* width: 30px;
-    font-size: 6px; */
   }
 }

+ 2 - 1
shop/src/components/Main.js

@@ -8,7 +8,7 @@ import store from "../reducers";
 import Catalog from "./catalog";
 import {actionCatalogCard, CBasketPage, searchInput, CGoodsCategory, 
     SearchInput, CGoodsSearch, LoginForm, CGoodCard, CYourProfile,
-    COrderPage, CUsersList, COrdersList, COrderUpdate, CGoodsList} from "./index";
+    COrderPage, CUsersList, COrdersList, COrderUpdate, CWishesPage, CGoodsList} from "./index";
 
 
   
@@ -48,6 +48,7 @@ const Main = ({className = "MainImg" }) => {
                         <Route path = "/profile/" component = {CYourProfile}/>
                         <Route path = "/user/:_id" component = {CYourProfile}/>
                         <Route path = "/basket" component = {CBasketPage}/>
+                        <Route path = "/wishes" component = {CWishesPage}/>
                         <Route path="/about" component = {About} exact/>
                         <Route path = "/orderPage/" component = {MainCatalog} exact/>
                         <Route path = "/orderPage/:id" component = {({match}) => <CGoodsCategory id = {match.params.id}/>}/>

+ 1 - 1
shop/src/components/basket.js

@@ -63,7 +63,7 @@ const mapStateToProps = state => ({
 
 const BasketPage = ({state, orderDeal, orderDone, basket, GoodsArr, onAdd, onDel, onClear, onOrder, order}) => {
     const history = useHistory();
-    console.log(state)
+
 
 
     if(!basket.price && !orderDone){

+ 2 - 2
shop/src/components/goodsCategory.js

@@ -28,8 +28,8 @@ import {OneGood, CGoodsList} from "./index";
   
 
 
-const GoodsCategory = ({goods, wishes, id, tittle = "Товари", addWish, delWish,  onAddtoOrder, getData, onAdd}) => {
-
+const GoodsCategory = ({state, goods, wishes, id, tittle = "Товари", addWish, delWish,  onAddtoOrder, getData, onAdd}) => {
+  console.log(state)
   useEffect(() =>  getData(id), [id])
   return(
       <>

+ 1 - 1
shop/src/components/goodsList.js

@@ -20,7 +20,7 @@ import {BrowserRouter as Router, Route, Link, Switch, Redirect, useHistory} from
 
 const GoodsList = ({arr = [], isWish, className = "goods", wishAdd, wishDelete, onAdd, onAddtoOrder}) => {
   const history = useHistory();
-
+  console.log(arr)
   if(arr.length == 0) {
     return(
         <>

+ 34 - 34
shop/src/components/goodsListSearch.js

@@ -1,46 +1,46 @@
-import {OneGood} from "./index";
-import {createStore, combineReducers, applyMiddleware, bindActionCreators} from 'redux';
-import {getData, actionGoods, actionWishDelete, actionWishAdd, getSearchedGoods, actionSearch} from "../reducers";
-import {Provider, connect} from 'react-redux';
-import {GoodsNotFound } from "./index";
+// import {OneGood} from "./index";
+// import {createStore, combineReducers, applyMiddleware, bindActionCreators} from 'redux';
+// import {getData, actionGoods, actionWishDelete, actionWishAdd, getSearchedGoods, actionSearch} from "../reducers";
+// import {Provider, connect} from 'react-redux';
+// import {GoodsNotFound } from "./index";
 
-const mapStateToProps = state => ({
-    state: state,
-    search: getData(state, "search"),
+// const mapStateToProps = state => ({
+//     state: state,
+//     search: getData(state, "search"),
 
-    status: state.promiseRed && state.promiseRed.search &&
-    state.promiseRed.search.payload && state.promiseRed.search &&
-    state.promiseRed.search.status,
+//     status: state.promiseRed && state.promiseRed.search &&
+//     state.promiseRed.search.payload && state.promiseRed.search &&
+//     state.promiseRed.search.status,
 
-    wishes: state.wishListReducer
+//     wishes: state.wishListReducer
     
-  });
+//   });
   
-  const mapDispatchToProps = dispatch => bindActionCreators({
-    getData: actionSearch,
-    addWish: actionWishAdd,
-    delWish: actionWishDelete,
+//   const mapDispatchToProps = dispatch => bindActionCreators({
+//     getData: actionSearch,
+//     addWish: actionWishAdd,
+//     delWish: actionWishDelete,
     
-  }, dispatch);
+//   }, dispatch);
   
 
 
-const GoodsListSearch = ({status, addWish, delWish, search = [], className = "goods"}) => {
+// const GoodsListSearch = ({status, wishes,addWish, delWish, search = [], className = "goods"}) => {
     
-    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>
-  )
-}
+//     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);
+//  const CGoodsListSearch = connect(mapStateToProps, mapDispatchToProps)(GoodsListSearch);
 
- export default CGoodsListSearch;
+//  export default CGoodsListSearch;

+ 22 - 4
shop/src/components/header.js

@@ -81,7 +81,24 @@ const CToLoginPage = connect(s => ({
 }) (ToLoginPage);
 
 
-const Basket = ({basketCount, data, className = "basket"}) => {
+const Wishes = ({wishesCount}) => {
+
+    return(
+        <div>
+            <Link to = "/wishes">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-heart" viewBox="0 0 16 16">
+                <path d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
+                </svg>
+                <span>Хочу({wishesCount})</span>
+            </Link>
+        </div>
+    )
+}
+
+const CWishes = connect(s => ({wishesCount: s.wishListReducer.count}), {})(Wishes)
+
+
+const Basket = ({basketCount, className = "basket"}) => {
 
     return(
     <div className = {className}>
@@ -100,7 +117,7 @@ const CBasket = connect(s => ({data: s.basket, basketCount: s.basket.price}), {}
 
 const Header = ({}) => {
 
-    const [wishes, wishesCount] = useState(0);
+    // const [wishes, wishesCount] = useState(0);
     console.log(connect((s) => ({isLoggedIn: s.auth.payload})))
     return(
         <>
@@ -112,12 +129,13 @@ const Header = ({}) => {
                 <StandartMenu/>
 
                 <div className = "rightSide">
-                    <div>
+                    <CWishes/>
+                    {/* <div>
                         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-heart" viewBox="0 0 16 16">
                         <path d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
                         </svg>
                         <span>Хочу({wishes})</span>
-                    </div>
+                    </div> */}
                     <div>
                         <CToLoginPage/>
 

+ 2 - 1
shop/src/components/index.js

@@ -23,10 +23,11 @@ import COrderPage from "./orderDonePage";
 import CUsersList from "./usersList";
 import COrdersList from "./ordersList";
 import COrderUpdate from "./orderUpdate";
+import CWishesPage from "./wishesPage";
 
 
 export {Header,Footer, actionCatalogCard, Main, Links, CGoodsCategory, OneGood, CGoodsList, SearchInput, CGoodsSearch, CGoodsListSearch, GoodsNotFound, 
-LoginForm, CGoodCard, CYourProfile, COrderUpdate, CBasketPage, COrdersList, COrderPage, CUsersList, SearchUserInput};
+LoginForm, CGoodCard, CWishesPage, CYourProfile, COrderUpdate, CBasketPage, COrdersList, COrderPage, CUsersList, SearchUserInput};
 
 
 

+ 37 - 27
shop/src/components/profilePage.js

@@ -10,7 +10,7 @@ import {BrowserRouter as Router, Route, Link, Switch, Redirect, useHistory} from
 import { NewAuth } from "../reducers/actionAuthLog";
 
 
-const YourProfile = ({state, orders, updateStatus, updatedUser = {}, newImg, token, onLogin, onLogout, updateImg, 
+const YourProfile = ({state, orders, loginStatus = {}, updateStatus, updatedUser = {}, newImg, token, onLogin, onLogout, updateImg, 
                         updateUser, isUserAdmin = {}, status, data = {}, getData, 
                         match:{params:{_id}}, isAdmin = [], isOwner = {}, newPicture = "clear"}) => {
 
@@ -22,6 +22,7 @@ const YourProfile = ({state, orders, updateStatus, updatedUser = {}, newImg, tok
     const [password, changePassword] = useState(null);
     const [password2, changePassword2] = useState(null);
     const [isUpdateImg, changeImg] = useState(false);
+    const [falseTrying, OneRty] = useState(false)
     // const [isUpdatePage, changePage] = useState(false);
     // const [newImage, getImage] = useState({});
 
@@ -48,7 +49,7 @@ const YourProfile = ({state, orders, updateStatus, updatedUser = {}, newImg, tok
               await onLogin(newLogin|| data.login, password || nowPassword);
 
            } 
-          window.location.reload()
+          // window.location.reload()
 
       }
     }, [updateStatus])
@@ -61,8 +62,8 @@ const YourProfile = ({state, orders, updateStatus, updatedUser = {}, newImg, tok
      const [searchInput, changeValue] = useState("Пошук");
      
 
-      console.log(state);
-    //  console.log(data);
+       console.log(state);
+    // //  console.log(data);
      
 
         return (
@@ -103,7 +104,9 @@ const YourProfile = ({state, orders, updateStatus, updatedUser = {}, newImg, tok
                     <div className = "updateWrapper">
                     <h4>Редагування</h4>
                     
-                    {updatedUser && updatedUser.errors && updatedUser.errors.length > 0 && <p>Цей логін вже зайнято</p>}
+                    {((loginStatus.status && loginStatus.status == "RESOLVED" && !loginStatus.payload.data.login) 
+                    ||(updatedUser && updatedUser.errors && updatedUser.errors.length > 0))
+                     && <p>Цей логін вже зайнято, або невірний пароль</p>}
                     
 
                     {(!isAdmin  || (isAdmin && isOwner.id == data._id))&&
@@ -124,29 +127,34 @@ const YourProfile = ({state, orders, updateStatus, updatedUser = {}, newImg, tok
                        ( !isAdmin && !nowPassword) || 
                         ((isAdmin && isOwner.id == data._id) && !nowPassword )}  
                          onClick = {
-                        () => {
-              
-                      let newUser = {};
-                      newUser._id = data._id;
-                      if(nick){
-                        newUser.nick = nick;
-                      }
-                      if (newLogin){
-                        newUser.login = newLogin;
-                      }
-                      if (password && password == password2) {
-                        newUser.password = password;
-                      } else if (password !== password2) {
-                        history.push("/loginError");
-                        return
-                      }
-                      if(isUpdateImg) {
+                        async () => {
 
-                        newUser.avatar = {};
-                        newUser.avatar._id = newImg._id;
-                        newUser.avatar.url = newImg._url;
-                      }
-                        updateUser(newUser);
+                          if(!isAdmin || (isAdmin && isOwner.id == data._id)){
+
+                            await onLogin( data.login, nowPassword);
+
+                           }
+                            let newUser = {};
+                            newUser._id = data._id;
+                            if(nick){
+                              newUser.nick = nick;
+                            }
+                            if (newLogin){
+                              newUser.login = newLogin;
+                            }
+                            if (password && password == password2) {
+                              newUser.password = password;
+                            } else if (password !== password2) {
+                              history.push("/loginError");
+                              return
+                            }
+                            if(isUpdateImg) {
+
+                              newUser.avatar = {};
+                              newUser.avatar._id = newImg._id;
+                              newUser.avatar.url = newImg._url;
+                            }
+                              updateUser(newUser);
 
 
 
@@ -187,6 +195,8 @@ const mapStateToProps = state => ({
      state.promiseRed.newUser.payload && state.promiseRed.newUser.payload.data &&
      state.promiseRed.newUser.payload,
 
+     loginStatus: state.promiseRed && state.promiseRed.login,
+
      updateStatus: state.promiseRed && state.promiseRed.newUser &&
      state.promiseRed.newUser.status,
 

+ 55 - 0
shop/src/components/wishesPage.js

@@ -0,0 +1,55 @@
+import { Provider, connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { useHistory } from "react-router-dom";
+import {actionSearch, actionOrderAddNewGood, actionWishes, actionWishDelete, actionWishAdd, actionCartAdd, getData, actionAuthLogout, actionUserFindOne} from "../reducers"
+import React, {Component, useState, useEffect} from 'react';
+import {OneGood, CGoodsList} from "./index";
+
+const WishesPage = ({arr, state, getGoods, goods = [], wishes, onAdd, addWish, delWish, onAddtoOrder}) => {
+    const history = useHistory();
+    useEffect(async () =>   { 
+        let newArr = [];
+        for (let key of arr) {
+            let oneObj = {}
+            oneObj._id = key
+            newArr.push(oneObj)
+        }
+        console.log(newArr)
+        await getGoods(newArr) 
+    }, [wishes])
+    return(
+
+        <div className = "goodsWrapper">
+            {goods.length > 0 ?
+            <CGoodsList arr = {goods} isWish = {wishes.goods} onAdd = {onAdd} wishAdd = {addWish} wishDelete = {delWish} onAddtoOrder = {onAddtoOrder}/> :
+            <div className = "basketNoGoods"><h2>У вас немає забаганок. То може щось пошукаємо? </h2><button onClick = {() => history.push("/catalog/")}>В каталог</button></div>
+            }
+            
+        </div>
+    )
+}
+
+
+
+const mapStateToProps = state => ({
+    state: state,
+    arr: state.wishListReducer.goods,
+    goods: getData(state, "wishesSearch", "GoodFind"),
+    wishes: state.wishListReducer,
+
+ });
+
+
+ 
+ const mapDispatchToProps = dispatch => bindActionCreators({
+    getGoods: actionWishes,
+    onAdd: actionCartAdd,
+    addWish: actionWishAdd,
+    delWish: actionWishDelete,
+    onAddtoOrder: actionOrderAddNewGood,
+ }, dispatch);
+
+const CWishesPage = connect(mapStateToProps, mapDispatchToProps)(WishesPage)
+
+export default CWishesPage;
+    

+ 28 - 0
shop/src/reducers/actionWishSearch.js

@@ -0,0 +1,28 @@
+import actionPromise from "./actionPromise";
+import {gql} from "./";
+
+
+
+
+const actionWishes = (arr) => {
+
+    return async dispatch => {
+        const queryJson = JSON.stringify(
+            [{"$or" : arr}]
+        )
+
+
+        await dispatch(actionPromise("wishesSearch", gql(
+            `query wishesGoods($query: String) {
+                GoodFind(query: $query) {
+                  name 
+                  _id
+                  images{url}
+                  price
+                 }
+              }`, {query: queryJson}
+        )))
+    }
+}
+
+export default actionWishes;

+ 2 - 1
shop/src/reducers/actionsearch.js

@@ -12,7 +12,7 @@ let toRegexp = (str) => {
   let toQuery = (str, fields = ["name", "description"]) => {
     str = toRegexp(str);
     let arr = fields.map((s) => {
-        console.log(s, typeof s);
+        //console.log(s, typeof s);
         return { [s]: str };
     });
     return { $or: arr };
@@ -20,6 +20,7 @@ let toRegexp = (str) => {
   
 
 function actionSearch(queryString) {
+
     return actionPromise('search', gql(
       `query goods($query: String) {
         GoodFind(query: $query)  {

+ 2 - 1
shop/src/reducers/index.js

@@ -21,6 +21,7 @@ import {orderUpdateReducer, actionOrderClear, actionOrderAddNewGood, actionOrder
 import {actionOrdersFind, actionOrderFindOne} from "./actionOrdersFind";
 import actionOrderUpdate from "./actionUpdateOrder";
 import {wishListReducer, actionWishAdd, actionWishDelete} from "./wishListReducer";
+import actionWishes from "./actionWishSearch";
 
 
 function promiseReducer(state={}, action){
@@ -45,7 +46,7 @@ function promiseReducer(state={}, action){
       wishListReducer
   }), compose(applyMiddleware(thunk)))
 
-export {actionPromise, actionOrdersFind,  gql, actionGoods, getData, promiseReducer, store, actionSearch,
+export {actionPromise, actionWishes, actionOrdersFind,  gql, actionGoods, getData, promiseReducer, store, actionSearch,
    actionLogin, authReducer, actionAuthLogin, actionAuthLogout, urlUpload, actionGoodCard, 
    updateImgAction, actionCartAdd, actionOrderClear, actionCartDelete, actionCartClear, actionOrder,
     actionReg, actionOrderUpdate, actionUserFindOne, wishListReducer, actionWishAdd, actionWishDelete, actionOrderAddNewGood, actionOrderAddOne, orderUpdateReducer, actionOrderAddOrder, actionOrderDelete, actionOrderFindOne, actionUserUpdate, actionSearchUser, actionGoodUpdate};