second commit

js21 react/my-react-app/src/App.js

@@ -2,9 +2,7 @@ import React from 'react';
 import { Provider } from 'react-redux';
 import { Route, Routes} from 'react-router-dom';
 
-import './App.scss';
-
-import MainPage from './pages/MainPage';
+import MainPage from './pages/HomePage';
 import NotFound from './pages/NotFound';
 import OrdersHistory from './pages/OrdersHistory';
 import Register from './pages/Register';
@@ -14,7 +12,7 @@ import Cart from './pages/Cart';
 import {ConnectCategory} from './pages/Category';
 import Good from './pages/Good';
 import Layout from './components/Layout/Layout';
-import { store } from './redux/reducers/promiseReducer';
+import store from './redux/reducers';
 
 
 function App() {
@@ -30,7 +28,7 @@ function App() {
             <Route path='/register' element={<Register />} />
             <Route path='/login' element={<Login />} />
             <Route path='/:category/:catId' element={<ConnectCategory />} />
-            <Route path='/:catId/:goodId' element={<Good />} />
+            <Route path='/:goodName/:goodId' element={<Good />} />
             <Route path='*' element={<NotFound />} />
           </Route>
         </Routes>

js21 react/my-react-app/src/App.scss

@@ -2,24 +2,6 @@
   color: rgb(18, 139, 199);
 }
 
-.aside {
-  min-width: 260px;
-  max-width: 260px;
-  margin-right: 30px;
-  a {
-    display: block;
-    text-decoration: none;
-    color: black;
-    border-bottom: 1px solid gray;
-    padding: 10px 20px;
-    margin-bottom: 8px;
-  }
-  a:hover {
-    color: gray;
-    transition: color 0.3s;
-  }
-}
-
 #main {
   max-width: 1000px;
   width: 100%;
@@ -29,11 +11,6 @@
   cursor: pointer;
 }
 
-.image-container {
-  width: 200px;
-  height: 200px;
-}
-
 .icon-container {
   width: 20px;
   text-align: center;
@@ -71,27 +48,6 @@ input[type="number"]::-webkit-inner-spin-button {
   width: 100%;
   height: 100%;
 }
-
-.good-image {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
-
-.info-about-category > * {
-  margin: 0 8px;
-  font-weight: 300;
-}
-
-.link-style {
-  color: rgb(18, 139, 199);
-}
-
-.link-style:hover {
-  color: rgb(255, 42, 42);
-  transition: color 0.3s;
-}
-
 .goods-container {
   display: flex;
   flex-wrap: wrap;
@@ -124,33 +80,6 @@ input[type="number"]::-webkit-inner-spin-button {
   height: 40px;
 }
 
-.price {
-  font-size: 18px;
-  font-weight: 500;
-  color: rgb(15, 29, 67);
-}
-
-.button {
-  border: none;
-  color: #fff;
-  background-color: rgb(22, 29, 168);
-  padding: 8px 10px;
-  border-radius: 6px;
-  max-width: 140px;
-  width: 100%;
-  font-size: 16px;
-}
-
-.button:hover {
-  color: rgb(233, 233, 73);
-}
-
-.title {
-  font-size: 32px;
-  text-align: center;
-  font-weight: 300;
-  margin: 20px 0;
-}
 
 .goods-out-stock,
 .cart-is-empty {

js21 react/my-react-app/src/components/Button/Button.js

@@ -0,0 +1,8 @@
+import React from "react";
+import './Button.scss';
+
+export function Button(children) {
+  return (
+    <button className="button">{children}</button>
+  )
+}

js21 react/my-react-app/src/components/Button/Button.scss

@@ -0,0 +1,14 @@
+.button {
+  border: none;
+  color: #fff;
+  background-color: rgb(22, 29, 168);
+  padding: 8px 10px;
+  border-radius: 6px;
+  max-width: 140px;
+  width: 100%;
+  font-size: 16px;
+
+  .button:hover {
+    color: rgb(233, 233, 73);
+  }
+}

js21 react/my-react-app/src/components/Categories/CategoryMenu.js

@@ -1,10 +1,9 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { connect, useDispatch, useSelector } from 'react-redux';
-import { actionCategories} from '../../redux/actions/actions';
-import { store } from '../../redux/reducers/promiseReducer';
 
-store.dispatch(actionCategories());
+import './CategoryMenu.scss'
+
 
 const CategoryMenu = ({ categories = [] }) => {
   return (
@@ -13,5 +12,5 @@ const CategoryMenu = ({ categories = [] }) => {
     </aside>
   )
 }
-const ReduxCategoryMenu = connect(state => ({ categories: state.categories?.payload }))(CategoryMenu);
+const ReduxCategoryMenu = connect(state => ({ categories: state.promise.categories?.payload }))(CategoryMenu);
 export {ReduxCategoryMenu};

js21 react/my-react-app/src/components/Categories/CategoryMenu.scss

@@ -0,0 +1,17 @@
+.aside {
+  min-width: 260px;
+  max-width: 260px;
+  margin-right: 30px;
+  a {
+    display: block;
+    text-decoration: none;
+    color: black;
+    border-bottom: 1px solid gray;
+    padding: 10px 20px;
+    margin-bottom: 8px;
+  }
+  a:hover {
+    color: gray;
+    transition: color 0.3s;
+  }
+}

js21 react/my-react-app/src/components/CategoriesSection/CategoriesSection.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import './CategoriesSection.scss';
+
+export function CategoriesSection({categories, categoryEl}) {
+  return (
+    <section className="'info-about-category'">
+      {categoryEl}
+      {categories.map(category => <Link key={category.id} to={`/${category.name}/${category._id}`} className="'link-style'">
+                                        {category.name}</Link>)}
+    </section>
+  )
+}

js21 react/my-react-app/src/components/CategoriesSection/CategoriesSection.scss

@@ -0,0 +1,15 @@
+.info-about-category {
+  * {
+    margin: 0 8px;
+    font-weight: 300;
+  }
+
+  .link-style {
+    color: rgb(18, 139, 199);
+  }
+
+  .link-style:hover {
+    color: rgb(255, 42, 42);
+    transition: color 0.3s;
+  }
+}

js21 react/my-react-app/src/components/Caunter/Caunter.js

@@ -0,0 +1,8 @@
+import React from "react";
+import './styles.scss';
+
+export function Counter({value}) {
+  return (
+    <input type='number' min='1' value={value}/>
+  )
+}

js21 react/my-react-app/src/components/Footer.js

@@ -3,6 +3,6 @@ import React from 'react';
 
 export default function Footer() {
   return (
-    <footer>Все права защищены &copy;</footer>
+    <footer>&copy; 2023 Kapran Co.</footer>
   )
 }

js21 react/my-react-app/src/components/Header/Header.js

@@ -1,22 +1,28 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import { NavLink } from 'react-router-dom';
+import { authReducer } from '../../redux/reducers/authReducer';
 import './Header.scss';
 
+const UserName = ({userName}) => <div>{userName || 'anon'}</div>
+
+const ConnectUserName = connect(state => ({userName: state.auth.payload?.sub?.login}))(UserName);
+
 export default function Header() {
   return (
     <header>
-      <NavLink to='/'><img src="images/logo.png" alt="" /></NavLink>
+      <NavLink to='/'><img src="/images/logo.png" alt="" /></NavLink>
       <div className="header-info">
         <div id="historyPage">
           <NavLink to="history">My orders</NavLink>
         </div>
         <div className="cart-section">
           <NavLink to="cart">
-          <img className="cart-icon" src="images/shopping-cart.png" />
+          <img className="cart-icon" src="/images/shopping-cart.png" />
           <div id='cartIconEl' >0</div>
           </NavLink>
         </div>
-        <div id="userName"></div>
+        <ConnectUserName />
         <div className="login-block">
           <NavLink to="login" id="login" className="button">Login</NavLink>
           <NavLink to="register" id="registration" className="button">Registration</NavLink>

js21 react/my-react-app/src/components/Image/Image.js

@@ -0,0 +1,15 @@
+import React from "react";
+import './Image.scss';
+
+export function Image({url, id}) {
+
+  return (
+    <div className="image-container">
+      <img className="good-image" src={`http://shop-roles.node.ed.asmer.org.ua/${url}`}/>
+    </div>
+  )
+
+  // if (route == 'category') {
+  //   imageContainer.addEventListener('click', (e) => location.href = `#/good/${id}`);
+  // }
+}

js21 react/my-react-app/src/components/Image/Image.scss

@@ -0,0 +1,10 @@
+.image-container {
+  width: 200px;
+  height: 200px;
+
+  .good-image {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+}

js21 react/my-react-app/src/components/Price/Price.js

@@ -0,0 +1,10 @@
+import React from "react";
+import './Price.scss';
+
+export function Price( {children}) {
+  return (
+    <div className="price">
+      {children}
+    </div>
+  )
+}

js21 react/my-react-app/src/components/Price/Price.scss

@@ -0,0 +1,5 @@
+.price {
+  font-size: 18px;
+  font-weight: 500;
+  color: rgb(15, 29, 67);
+}

js21 react/my-react-app/src/components/Title/Title.js

@@ -0,0 +1,11 @@
+import React from "react";
+import './Title.scss';
+
+export function Title({children}) {
+  return (
+    <div className="title">
+      {children}
+    </div>
+  )
+
+}

js21 react/my-react-app/src/components/Title/Title.scss

@@ -0,0 +1,6 @@
+.title {
+  font-size: 32px;
+  text-align: center;
+  font-weight: 300;
+  margin: 20px 0;
+}

js21 react/my-react-app/src/functions/styles.scss

@@ -0,0 +1,16 @@
+
+
+.form {
+  border: 1px solid gray;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-radius: 10px;
+  max-width: 300px;
+  width: 100%;
+  margin: 100px auto 0;
+  padding: 20px;
+  * {
+    margin: 4px;
+  }
+}

js21 react/my-react-app/src/pages/Category.js

@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react'
 import { useParams } from 'react-router-dom';
 import { connect } from 'react-redux';
-import { createStore, combineReducers} from 'redux';
 import { actionCategoryById } from '../redux/actions/actions';
 
 const Category = ({ category = {}, loadCatogory }) => {
@@ -14,6 +13,6 @@ const Category = ({ category = {}, loadCatogory }) => {
     <div>Category {category.name}</div>
   )
 }
-const ConnectCategory = connect(state => ({category: state.category?.payload}), { loadCatogory: actionCategoryById })(Category);
+const ConnectCategory = connect(state => ({category: state.promise.category?.payload}), { loadCatogory: actionCategoryById })(Category);
 
 export { Category, ConnectCategory };

js21 react/my-react-app/src/redux/actions/actions.js

@@ -1,6 +1,6 @@
 import { actionPromise } from "../reducers/promiseReducer";
-import { actionAuthLogin } from "../reducers/authReduser";
-import { actionCartClear } from "../reducers/cartReduser";
+import { actionAuthLogin } from "../reducers/authReducer";
+import { actionCartClear } from "../reducers/cartReducer";
 
 const API_URL = "http://shop-roles.node.ed.asmer.org.ua/graphql";
 

js21 react/my-react-app/src/redux/reducers/index.js

@@ -0,0 +1,21 @@
+import { createStore, combineReducers, applyMiddleware } from 'redux';
+import thunk from 'redux-thunk';
+import { authReducer } from "./authReducer";
+import { cartReducer } from "./cartReducer";
+import { promiseReducer } from "./promiseReducer";
+import { actionCategories, actionFullLogin} from '../../redux/actions/actions';
+
+
+const reducers = {
+  promise: promiseReducer, //допилить много имен для многих промисо
+  auth: authReducer,     //часть предыдущего ДЗ
+  cart: cartReducer,     //часть предыдущего ДЗ
+}
+
+const totalReducer = combineReducers(reducers);
+
+const store = createStore(totalReducer, applyMiddleware(thunk));
+store.subscribe(() => console.log(store.getState()));
+store.dispatch(actionCategories());
+// store.dispatch(actionFullLogin('test457', '123123'));
+export default store;

js21 react/my-react-app/src/redux/reducers/promiseReducer.js

@@ -1,6 +1,3 @@
-import { createStore, combineReducers, applyMiddleware } from 'redux';
-import thunk from 'redux-thunk';
-
 export const promiseReducer = (state = {}, { key, type, status, payload, error }) => {
   if (type === 'PROMISE') {
     return { ...state, [key]: { status, payload, error } };
@@ -24,7 +21,4 @@ export const actionPromise = (key, promise) =>
       dispatch(actionRejected(key, error)); //в случае ошибки - сигнализируем redux, что промис несложился
       //main.innerHTML = '<div style="background-color:red; width:500px; height:500px"></div>';
     }
-  }
-
-export const store = createStore(promiseReducer, applyMiddleware(thunk));
-store.subscribe(() => console.log(store.getState()));
+  }