Home Esplora Aiuto
Registrati Accedi
AleksandrovPavel
/
AleksandrovHomeWork
Segui 1
Vota 0
Forka 0
File Problemi 4 Pull Requests 0 Wiki
Sfoglia il codice sorgente

initial commit

Aleksandrov96 2 anni fa
parent
3569b53665
commit
b48493a61b
10 ha cambiato i file con 95 aggiunte e 52 eliminazioni
Visualizzazione separata Mostra Diff Stats
  1. 1 1
      nix-project/public/index.html
  2. 9 1
      nix-project/src/App.scss
  3. 45 36
      nix-project/src/actions/GQLActions.js
  4. 5 2
      nix-project/src/components/AdminGoodCard/AdminGoodCard.js
  5. 1 1
      nix-project/src/components/CartCounter/CartCounter.js
  6. 22 1
      nix-project/src/components/Dropzone/Dropzone.js
  7. 2 2
      nix-project/src/components/Pages/Admin/Admin.js
  8. 1 1
      nix-project/src/reducers/localStorageReducer.js
  9. 5 5
      nix-project/src/reducers/routeReducer.js
  10. 4 2
      nix-project/src/reducers/store.js

+ 1 - 1
nix-project/public/index.html
Vedi File 

@@ -4,7 +4,7 @@
 
     <meta charset="utf-8" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <script src="https://kit.fontawesome.com/365c1b8218.js" crossorigin="anonymous"></script>
 
-    <title>STORE</title>
 
+    <title>S T O R E</title>
 
   </head>
 
   <body>
 
     <div id="root"></div>

+ 9 - 1
nix-project/src/App.scss
Vedi File 

@@ -161,6 +161,7 @@
 
         aside {
 
             width: 30%;
 
             margin-top: 2px;
 
+            background-color: var(--primary-color)
 
         }
 
     }
 
 }
 
@@ -443,6 +444,7 @@ li {
 
 
     &_input {
 
         @include input();
 
+        width: 100%;
 
     }
 
 
     &_delete {
 
@@ -482,6 +484,7 @@ li {
 
     &-btns {
 
         display: flex;
 
         flex-direction: row;
 
+
 
         &-btn {
 
             @include btn();
 
         }
 
@@ -619,10 +622,15 @@ li {
 
         color: white;
 
 
 
+        &:hover {
 
+            color: var(--font-color);
 
+        }
 
+
 
         &-icon {
 
             color: white;
 
             font-size: 1.4rem;
 
-
 
+            margin-right: .5rem;
 
+            
             &:hover {
 
                 color: var(--font-color);
 
             }

+ 45 - 36
nix-project/src/actions/GQLActions.js
Vedi File 

@@ -217,42 +217,31 @@ export function* getOrderHistoryWatcher() {
 
   yield takeEvery("GET_ORDER_HISTORY", getOrdersHistoryWorker);
 
 }
 
 
-// export const actionGoodChange = (name, price, description, id) => {
 
-//   return actionPromise(
 
-//     'goodChange', gql(`mutation g($name: String, $price: Float, $desc: String, $id: ID){
 
-//       GoodUpsert(good:{
 
-//         _id: $id,
 
-//         name: $name,
 
-//         price: $price,
 
-//         description: $desc
 
-//       }) {
 
-//         _id
 
-//         createdAt
 
-//         name
 
-//         description
 
-//         price
 
-//       }
 
-//     }`, {name: name, price: price, desc: description, id: id}
 
-//   ))
 
-// }
 
+export const actionGoodChange = (goodChange) => { 
+  return actionPromise( 
+    "goodChange", 
+    gql( 
+      `mutation g($good: GoodInput){ 
+        GoodUpsert(good:$good) { 
+          _id 
+          createdAt 
+          name 
+          description 
+          price 
+          categories { 
+            name 
+          } 
+          images { 
+            url 
+          } 
+        } 
+      }`, 
+      { good: goodChange } 
+    ) 
+  ); 
+};
 
+
 
 
-export const actionGoodChange = (goodChange) => {
 
-  return actionPromise(
 
-    'goodChange', gql(`mutation g($good: GoodInput){
 
-      GoodUpsert(good: $good) {
 
-        _id
 
-        createdAt
 
-        name
 
-        description
 
-        price
 
-        categories {
 
-          _id
 
-          name
 
-        }
 
-      }
 
-    }`, {good: goodChange}
 
-  ))
 
-}
 
 
 export const actionCategoryCreate = (name) => {
 
   return actionPromise(
 
@@ -333,6 +322,7 @@ export const actionUploadFile = (file) => {
 
 // };
 
 
 export const actionSetAvatar = (file) => ({ type: "SET_AVATAR", file });
 
+
 
 export function* setAvatarWorker(action) {
 
   const { file } = action;
 
   let result = yield call(promiseWorker, actionUploadFile(file));
 
@@ -352,6 +342,25 @@ export function* setAvatarWorker(action) {
 
   );
 
   yield put(actionAboutMe());
 
 }
 
+
 
 export function* setAvatarWatcher() {
 
   yield takeEvery("SET_AVATAR", setAvatarWorker);
 
-}
 
+}
 
+
 
+export function* setGoodImageWorker(action) { 
+  const { 
+    image: { _id, images }, 
+  } = action; 
+  let result = yield call(promiseWorker, actionUploadFile(images[0])); 
+  let imageId = result?._id; 
+  yield put(actionGoodChange({ _id: _id, images: [{ _id: imageId }] })); 
+} 
+ 
+export function* setGoodImageWatcher() { 
+  yield takeEvery("IMAGE_UPLOAD", setGoodImageWorker); 
+} 
+ 
+export const actionSetGoodImage = (image) => ({ 
+  type: "IMAGE_UPLOAD", 
+  image, 
+});

+ 5 - 2
nix-project/src/components/AdminGoodCard/AdminGoodCard.js
Vedi File 

@@ -5,9 +5,11 @@ import { actionCartAdd } from "../../actions/actionsCartReducer";
 
 import { backURL } from "../../services/getGQL";
 
 import { actionGoodChange } from "../../actions/GQLActions";
 
 import { useState } from "react";
 
+import { CSetImageDropzone } from "../Dropzone/Dropzone";
 
+
 
 import './../../App.scss';
 
 
-const AdminGoodCard = ({ good: {_id, name, price, description, images} = {}, onCartAdd, onGoodChange, admin }) => {
 
+const AdminGoodCard = ({ good: {_id, name, price, description, images} = {}, onCartAdd, onGoodChange }) => {
 
 
 const [nameField, setNameField] = useState(name);
 
 const [priceField, setPriceField] = useState(price);
 
@@ -19,6 +21,7 @@ const [descriptionField, setDescriptionField] = useState(description);
 
         <div className="goodCard_img">
 
             {images && images[0] && images[0].url && <img src={backURL + '/' + images[0].url} />}
 
         </div>
 
+        <CSetImageDropzone id={_id} />
 
             <div className="goodCard_cart">
 
                 <h2 className="goodCard_cart-price">{price} ₴</h2>
 
             <div className="goodCard_cart-btns">
 
@@ -39,7 +42,7 @@ const [descriptionField, setDescriptionField] = useState(description);
 
             <textarea type="text" value={nameField} onChange={e => setNameField(e.target.value)} />
 
             <textarea type="number" value={priceField} onChange={e => setPriceField(+e.target.value)} />
 
             <textarea type="text" value={descriptionField} onChange={e => setDescriptionField(e.target.value)} />
 
-            <button className="goodCard_change-btn" onClick={() => onGoodChange({name:nameField, price: priceField, description: descriptionField, _id: _id})}>Change</button>
 
+            <button className="goodCard_change-btn" onClick={() => onGoodChange({ name:nameField, price: priceField, description: descriptionField, _id: _id })}>Change</button>
 
         </div>
 
     </div>
 
   )

+ 1 - 1
nix-project/src/components/CartCounter/CartCounter.js
Vedi File 

@@ -12,8 +12,8 @@ const CartCounter = ({cart}) => {
 
           <Link className='cart_counter' to='/cart'>
 
             <div className="cart_counter-icon">
 
                 <i class="fas fa-shopping-cart"></i>
 
-            </div>
 
             {count}
 
+            </div>
 
           </Link>
 
       </div>
 
     )

+ 22 - 1
nix-project/src/components/Dropzone/Dropzone.js
Vedi File 

@@ -6,6 +6,7 @@ import { store } from '../../reducers/store';
 
 import { actionSetAvatar } from '../../actions/GQLActions';
 
 import { backURL } from '../../services/getGQL';
 
 import { useState } from 'react';
 
+import { actionSetGoodImage } from '../../actions/GQLActions';
 
 
 export const Dropzone = ({ onLoad }) => {
 
     const onDrop = useCallback(acceptedFiles => {
 
@@ -26,6 +27,23 @@ export const Dropzone = ({ onLoad }) => {
 
     )
 
 }
 
 
+export const SetImageDropzone = ({ onLoad, id }) => {
 
+    const onDrop = useCallback(acceptedFiles => {
 
+        onLoad({ _id: id, images: [acceptedFiles[0]] });
 
+    }, [])
 
+    const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop})
 
+
 
+    return (
 
+        <div {...getRootProps()}>
 
+        <input {...getInputProps()} />
 
+        {
 
+            isDragActive ?
 
+            <p>Drop the files here ...</p> :
 
+            <p className='dropzone'>Drag 'n' drop some files here, or click to select files</p>
 
+        }
 
+        </div>
 
+    )
 
+}
 
 
 const Avatar = ({ avatarURL = {}, open, children }) => {
 
     const [isOpen, setOpen] = useState(open);
 
@@ -57,4 +75,7 @@ const Avatar = ({ avatarURL = {}, open, children }) => {
 
 
 export const CAvatar = connect((state) => ({avatarURL: state.promise.aboutMe?.payload}))(Avatar)
 
 
-export const CDropzone = connect(null, {onLoad: actionUploadFile})(Dropzone);
 
+export const CDropzone = connect(null, {onLoad: actionUploadFile})(Dropzone);
 
+
 
+export const CSetImageDropzone = connect(null, {onLoad: actionSetGoodImage})(SetImageDropzone);
 
+

+ 2 - 2
nix-project/src/components/Pages/Admin/Admin.js
Vedi File 

@@ -3,7 +3,7 @@ import { useState } from "react";
 
 import { connect } from "react-redux";
 
 import { actionGoodChange } from "../../../actions/GQLActions";
 
 import { actionCategoryCreate } from "../../../actions/GQLActions";
 
-import { CDropzone } from "../../Dropzone/Dropzone";
 
+import { CSetImageDropzone } from "../../Dropzone/Dropzone";
 
 import './../../../App.scss';
 
 import { history } from "../../../App";
 
 
@@ -32,7 +32,7 @@ export const Admin = ({cats = defaultRootCats, onGoodChange, onCatCreate}) => {
 
                 <div className="adminPage_dashboard-goodAdd">
 
                     <div className="adminPage_dashboard-goodAdd--container">
 
                         <h2 className="adminPage_dashboard-title">ADD GOOD</h2>
 
-                        <CDropzone />
 
+                        <CSetImageDropzone />
 
                         <textarea placeholder="Name..." type="text" value={nameField} onChange={e => setNameField(e.target.value)} />
 
                         <textarea placeholder="Price..." type="number" value={priceField} onChange={e => setPriceField(+e.target.value)} />
 
                         <textarea placeholder="Description..." type="text" value={descriptionField} onChange={e => setDescriptionField(e.target.value)} />

+ 1 - 1
nix-project/src/reducers/localStorageReducer.js
Vedi File 

@@ -7,4 +7,4 @@ export const localStorageReducer =
 
       localStorage.setItem(localStorageName, JSON.stringify(newState));
 
       return newState;
 
     }
 
-  };
 
+};

+ 5 - 5
nix-project/src/reducers/routeReducer.js
Vedi File 

@@ -75,7 +75,7 @@ const RRoute = ({ action, component: Component, ...routeProps }) => {
 
       return <Component {...componentProps} />;
 
     };
 
     return <Route {...routeProps} component={WrapperComponent} />;
 
-  };
 
+};
 
 
 export const CRRoute = connect(null, {
 
     action: (match) => ({ type: "ROUTE", match }),
 
@@ -88,7 +88,7 @@ export const CRRoute = connect(null, {
 
     ...routeProps
 
   }) => {
 
 
-const WrapperComponent = (componentProps) => {
 
+      const WrapperComponent = (componentProps) => {
 
       let aclArr = auth?.payload?.sub?.acl;
 
       if (!aclArr) {
 
         aclArr = ["anon"];
 
@@ -106,6 +106,6 @@ const WrapperComponent = (componentProps) => {
 
     return <CRRoute {...routeProps} component={WrapperComponent} />;
 
   };
 
 
-  export const CProtectedRoute = connect((state) => ({ auth: state.auth }))(
 
-    ProtectedRoute
 
-  );
 
+export const CProtectedRoute = connect((state) => ({ auth: state.auth }))(
 
+  ProtectedRoute
 
+);

+ 4 - 2
nix-project/src/reducers/store.js
Vedi File 

@@ -6,11 +6,12 @@ import { authReducer } from "./authReducer";
 
 import { localStorageReducer } from "./localStorageReducer";
 
 import { actionCatById, actionRootCats } from "../actions/GQLActions";
 
 import createSagaMiddleware from 'redux-saga';
 
-import {all, put, takeEvery, takeLatest, takeLeading, select} from 'redux-saga/effects';
 
+import { all } from 'redux-saga/effects';
 
 import { promiseWatcher } from "../actions/actionsPromiseReducer";
 
 import { loginWatcher, regWatcher, aboutMeWatcher, getOrderHistoryWatcher, newOrderWatcher, setAvatarWatcher } from "../actions/GQLActions";
 
 import { routeWatcher } from "./routeReducer";
 
 import { actionAdminCatById } from "../actions/GQLActions";
 
+import { setGoodImageWatcher } from "../actions/GQLActions";
 
 
 const sagaMiddleware = createSagaMiddleware();
 
 export const store = createStore(combineReducers({
 
@@ -28,7 +29,8 @@ function* rootSaga() {
 
         newOrderWatcher(),
 
         setAvatarWatcher(),
 
         routeWatcher(),
 
-        regWatcher()
 
+        regWatcher(),
 
+        setGoodImageWatcher(),
 
     ]);
 
 };
 
 sagaMiddleware.run(rootSaga);