add ability to buy

src/App.js

@@ -60,6 +60,12 @@ const RegistrationForm = lazy(() =>
   ),
 );
 
+const UserInterface = lazy(() =>
+  import(
+    './components/UserInterface/UserInterface' /* webpackChunkName: "UserInterface" */
+  ),
+);
+
 function App() {
   const isLoading = useSelector(getLoad);
   return (
@@ -68,9 +74,11 @@ function App() {
         <Switch>
           <PrivateRoute exact path={'/'}>
             <Navigation />
+            <UserInterface />
           </PrivateRoute>
           <PrivateRoute exact path="/categories">
             <Navigation />
+            <UserInterface />
             <Categories />
           </PrivateRoute>
           <PrivateRoute path="/categories/:id">
@@ -78,6 +86,7 @@ function App() {
           </PrivateRoute>
           <PrivateRoute exact path="/goods">
             <Navigation />
+            <UserInterface />
             <Goods />
           </PrivateRoute>
           <PrivateRoute path="/goods/:id">
@@ -85,6 +94,7 @@ function App() {
           </PrivateRoute>
           <PrivateRoute exact path="/orders">
             <Navigation />
+            <UserInterface />
             <Orders />
           </PrivateRoute>
           <PrivateRoute path="/orders/:id">

src/components/Categories/Categories.module.css

@@ -5,7 +5,7 @@
   justify-content: space-around;
   flex-wrap: wrap;
   padding-bottom: 10px;
-  padding-top: 100px;
+  padding-top: 200px;
   padding-left: 0;
 }
 

src/components/Goods/DetailGood/DetailGood.jsx

@@ -6,8 +6,8 @@ import { useDispatch,useSelector } from 'react-redux';
 
 
 import s from './DetailGood.module.css';
-import { makeOrderById } from '../../../api-data'
 import { asyncGetGoodById } from '../../../redux/goods/operations';
+import { asyncMakeOrderById } from '../../../redux/user/operations';
 import { getGood} from '../../../redux/goods/selector';
 
 function DetailCategory() {
@@ -15,19 +15,20 @@ function DetailCategory() {
   const dispatch = useDispatch();
   const good = useSelector(getGood);
 
-
+  const randomPrice = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)
+  const price = randomPrice(1,10)
+  const handlePurchase = async () => dispatch(asyncMakeOrderById(id, price))
+  
   useEffect(() => {
     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>fake price for redux : {price}</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}`}

src/components/Goods/Goods.module.css

@@ -5,7 +5,7 @@
   justify-content: space-around;
   flex-wrap: wrap;
   padding-bottom: 10px;
-  padding-top: 100px;
+  padding-top: 200px;
   padding-left: 0;
 }
 

src/components/Navigation/Navigation.module.css

@@ -16,7 +16,4 @@
 }
 
 @media (min-width: 767px) {
-  .wrapper__button {
-    padding: 15px 0;
-  }
 }

src/components/Orders/Orders.module.css

@@ -5,7 +5,7 @@
   justify-content: space-around;
   flex-wrap: wrap;
   padding-bottom: 10px;
-  padding-top: 100px;
+  padding-top: 200px;
   padding-left: 0;
 }
 

src/components/UserInterface/UserInterface.jsx

@@ -0,0 +1,20 @@
+import { useSelector } from 'react-redux';
+
+import s from './UserInterface.module.css';
+import { getCash } from '../../redux/user/selector';
+import {getLogin} from '../../redux/authorization/selector';
+
+const UserInterface = () => {
+
+    const cash = useSelector(getCash);
+    const login = useSelector(getLogin);
+
+    return (
+        <div className={s.interfaceWrapper}>
+            <p className={s.interfaceWrapper__title}>cash : {cash}$</p>
+            <p className={s.interfaceWrapper__title}>Login : {login}</p>
+        </div>
+  );
+};
+
+export default UserInterface;

src/components/UserInterface/UserInterface.module.css

@@ -0,0 +1,19 @@
+.interfaceWrapper {
+  width: 100%;
+  position: fixed;
+  background-color: rgb(95, 92, 92);
+  width: 100vw;
+  z-index: 100;
+  display: flex;
+  justify-content: center;
+  padding: 10px 0;
+  border-top: solid 4px rgb(105, 105, 105);
+  color: rgb(233, 231, 229);
+  font-size: 30px;
+  line-height: 0;
+  top: 46px;
+}
+
+.interfaceWrapper__title:first-child{
+    margin-right: 3%;
+}

src/redux/rootReducer/index.js

@@ -7,7 +7,7 @@ import reducerGoods from '../goods/reducer';
 import reducerOrders from '../orders/reducer';
 import reducerLoading from '../loading/reducer';
 import reducerAuthorization from '../authorization/reducer';
-
+import reducerUser from '../user/reducer';
 const authorizationPersistConfig = {
   key: 'auth',
   storage: storage,
@@ -18,6 +18,7 @@ export const rootReducer = combineReducers({
   goods: reducerGoods,
   orders: reducerOrders,
   isLoading: reducerLoading,
+  user: reducerUser,
   authorization: persistReducer(
     authorizationPersistConfig,
     reducerAuthorization,

src/redux/user/action/index.js

@@ -0,0 +1,11 @@
+import { createAction } from '@reduxjs/toolkit';
+
+const actionPurchaseSuccess = createAction('purchase/success', value => ({
+  payload: value,
+}));
+
+const actionPurchaseReject = createAction('purchase/reject', value => ({
+  payload: value,
+}));
+
+export { actionPurchaseSuccess, actionPurchaseReject };

src/redux/user/operations/index.js

@@ -0,0 +1,19 @@
+import { actionIsLoading } from '../../loading/action';
+
+import { actionPurchaseSuccess, actionPurchaseReject } from '../action';
+
+import { makeOrderById } from '../../../api-data';
+
+const asyncMakeOrderById = (id, price) => async dispatch => {
+  try {
+    dispatch(actionIsLoading(true));
+    await makeOrderById(id);
+    dispatch(actionPurchaseSuccess(price));
+  } catch (e) {
+    dispatch(actionPurchaseReject());
+  } finally {
+    dispatch(actionIsLoading(false));
+  }
+};
+
+export { asyncMakeOrderById };

src/redux/user/reducer/index.js

@@ -0,0 +1,17 @@
+import { createReducer } from '@reduxjs/toolkit';
+
+import { actionPurchaseSuccess, actionPurchaseReject } from '../action';
+
+const initialState = { cash: 100 };
+
+const reducerUser = createReducer(initialState, {
+  [actionPurchaseSuccess]: (state, { payload: price }) => {
+    const cash = state.cash - price;
+    return { cash };
+  },
+  [actionPurchaseReject]: (state, _) => {
+    return state;
+  },
+});
+
+export default reducerUser;

src/redux/user/selector/index.js

@@ -0,0 +1,3 @@
+const getCash = state => state.user.cash;
+
+export { getCash };