done options to buy

jsconfig.json

@@ -0,0 +1,6 @@
+{
+    "compilerOptions": {
+      "baseUrl": "src"
+    },
+    "include": ["src"]
+  }

src/App.js

@@ -1,4 +1,5 @@
 import { lazy, Suspense } from 'react';
+import { useSelector } from 'react-redux';
 import { BrowserRouter, Switch } from 'react-router-dom';
 import 'react-toastify/dist/ReactToastify.css';
 import { ToastContainer } from 'react-toastify';
@@ -7,6 +8,7 @@ import Loader from './components/Loader/Loader';
 import Navigation from './components/Navigation/Navigation';
 import PrivateRoute from './components/Routes/PrivateRoute/PrivateRoute';
 import PublicRoute from './components/Routes/PublicRoute/PublicRoute';
+import { getLoad } from './redux/loading/selector/';
 
 const Categories = lazy(() =>
   import(
@@ -59,6 +61,7 @@ const RegistrationForm = lazy(() =>
 );
 
 function App() {
+  const isLoading = useSelector(getLoad);
   return (
     <Suspense fallback={<Loader />}>
       <BrowserRouter>
@@ -97,6 +100,7 @@ function App() {
             </PublicRoute>
           </PublicRoute>
         </Switch>
+        {isLoading && <Loader />}
         <ToastContainer
           position="top-right"
           autoClose={3000}

src/api-data/index.js

@@ -1,11 +1,11 @@
 const getGQL = url => async (query, variables) => {
   try {
-    const token = localStorage.token;
+    const token = localStorage.token ? localStorage.token : '';
     const res = await fetch(url, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
-        Authorization: 'Bearer ' + token ? token : '',
+        Authorization: 'Bearer ' + token,
       },
       body: JSON.stringify({ query, variables }),
     });
@@ -160,14 +160,11 @@ const orderById = async _id => {
     const { data } = await gql(
       `query findById($id:String){
         OrderFindOne (query:$id){
-            _id createdAt name price description images  {
-				url
-			}
+            _id createdAt    
         }
     }`,
       { id: JSON.stringify([{ _id }]) },
     );
-
     return data.OrderFindOne;
   } catch (e) {
     console.error(e);

src/components/Authorization/helpers/validation.js

@@ -8,6 +8,7 @@ const validationSchemaRegistration = yup.object({
   password: yup
     .string('Enter your password')
     .min(8, 'Password should be of minimum 8 characters length')
+    .max(20, 'Password should be less 20 characters')
     .required('Password is required'),
 });
 

src/components/Goods/DetailGood/DetailGood.jsx

@@ -6,6 +6,7 @@ import { useDispatch,useSelector } from 'react-redux';
 
 
 import s from './DetailGood.module.css';
+import { makeOrderById } from '../../../api-data'
 import { asyncGetGoodById } from '../../../redux/goods/operations';
 import { getGood} from '../../../redux/goods/selector';
 
@@ -19,15 +20,19 @@ function DetailCategory() {
     dispatch(asyncGetGoodById(id))
   }, [dispatch, id]);
 
+  const handlePurchase = () => makeOrderById("5dc4b2553f23b553bf3540fc")
+console.log(good[0])
 
   return (
       good.length !== 0 &&(
         <div className={s.detailGood_wrapper}>
         <p>name : {good[0].name?good[0].name:'missed'}</p>
-        <p>createdAt : {good[0].createdAt?good[0].createdAt:'missed'}</p>
+        <p>createdAt : {good[0].createdAt ? good[0].createdAt : 'missed'}</p>
+        <p>price : {good[0].price?good[0].price:'missed'}</p>
         <p>description : {good[0].description?good[0].description:'missed'}</p>
         <img src={`http://shop-roles.asmer.fs.a-level.com.ua/${good[0].images&&good[0].images[0].url}`}
           alt='*it has to be pic of product*' width='200' height='200'></img>
+        <button onClick={handlePurchase} className={s.detailGoodBtn} type='button'>Purchase</button>
         </div>
       )
   )

src/components/Goods/DetailGood/DetailGood.module.css

@@ -9,6 +9,14 @@
   font-size: 24px;
 }
 
+.detailGoodBtn{
+  margin-top: 20px;
+  background-color: rgb(16, 255, 16);
+  border-radius: 8px;
+  color: rgb(114, 114, 114);
+  width: 160px;
+}
+
 
 
 

src/components/Goods/Good/Good.jsx

@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
 
 import s from './Good.module.css';
 
+
 const Good = ({ good: { _id, name, createdAt, price, images } }) => {
   return (
       <li  className={s.good_item}>

src/components/Orders/DetailOrder/DetailOrder.jsx

@@ -17,10 +17,11 @@ function DetailOrder() {
     dispatch(asyncGetOrderById(id))
   }, [dispatch, id]);
 
+
   return (
       order.length !== 0 &&(
         <div className={s.detailOrder_wrapper}>
-          <p>name : {order[0].name?order[0].name:'missed'}</p>
+          <p>_id : {order[0]._id?order[0]._id:'missed'}</p>
           <p>createdAt : {order[0].createdAt?order[0].createdAt:'missed'}</p>
         </div>
       )

src/components/Orders/Order/Order.jsx

@@ -3,12 +3,13 @@ import { Link } from 'react-router-dom';
 
 import s from './Order.module.css';
 
-const Order = ({ order: { _id, total, createdAt } }) => {
+const Order = ({ order: { _id, total, createdAt,orderGoods } }) => {
       return (
         <li  className={s.order_item}>
           <Link className={s.order_link} to={`/orders/${_id}`}>
             <p>total : {total?total:'missed'}</p>
-            <p>createdAt : {createdAt?createdAt:'missed'}</p>
+            <p>createdAt : {createdAt ? createdAt : 'missed'}</p>
+            <p>count : {orderGoods[0].count?orderGoods[0].count:'missed'}</p>
           </Link>
         </li>
       );

src/index.js

@@ -8,6 +8,7 @@ import './index.css';
 import App from './App';
 import { store, persistor } from './redux/store';
 
+
 ReactDOM.render(
   <React.StrictMode>
     <div className="app_wrapper">