HW react-store done

src/App.js

@@ -3,6 +3,7 @@ import './App.scss';
 import thunk from 'redux-thunk';
 import {createStore, combineReducers, applyMiddleware} from 'redux';
 import {Provider, connect} from 'react-redux';
+import {useState} from 'react';
 
 const actionPending = name => ({type: 'PROMISE', status: 'PENDING', name});
 const actionResolved = (name, payload) => ({type: 'PROMISE', status: 'RESOLVED', name, payload});
@@ -157,6 +158,7 @@ const actionLogin = (login = 'tst', password = '123') =>
 const actionFullLogin = (login = 'tst', password = '123') =>
     async dispatch => {
         let token = await dispatch(actionLogin(login, password));
+        console.log(token);
         if (token) {
             dispatch(actionAuthLogin(token));
         }
@@ -172,6 +174,7 @@ const actionRegister = (login = 'tst', password = '123') =>
 
 const actionFullRegister = (login = 'tst', password = '123') =>
     async dispatch => {
+        console.log(login, password);
         await dispatch(actionRegister(login, password));
         await dispatch(actionFullLogin(login, password));
     };
@@ -229,13 +232,13 @@ const Header = () =>
 const CategoryListItem = ({_id, name}) =>
     <li><a href={`#/category/${_id}`}>{name}</a></li>;
 
-const CategoryList = ({cats}) =>{
-    return(
+const CategoryList = ({cats}) => {
+    return (
         <ul>
             {cats.map((item) => <CategoryListItem key={item._id} {...item}/>)}
         </ul>
-    )
-}
+    );
+};
 
 
 const CCategoryList = connect(state => ({cats: state.promise.rootCats?.payload || []}))(CategoryList);
@@ -262,7 +265,7 @@ const Koshik = ({cart}) => {
         allGoodsInCart += goodsInCart[key].count;
     }
     return (
-        <h2 className="koshikCounter">Корзина:{allGoodsInCart}</h2>
+        <h2 className="koshikCounter">В корзине:{allGoodsInCart}</h2>
     );
 };
 
@@ -270,16 +273,16 @@ const CKoshik = connect(({cart}) => ({cart}))(Koshik);
 
 
 const Category = ({cat: {name, goods = []} = {}}) => {
-    return(
+    return (
         <div className="Category">
             <h1>{name}</h1>
             <ul className="ul">
                 {goods.map(good => <CGoodCard key={good._id} good={good}/>)}
             </ul>
         </div>
-    )
+    );
 
-}
+};
 
 
 const CCategory = connect(state => ({cat: state.promise.catById?.payload || {}}))(Category);
@@ -288,44 +291,49 @@ const Cart = ({cart, onCartChange, onCartRemove}) => {
     const error = typeof cart === 'undefined';
     return (
         <div className="Cart">
-            <div className="wrapperForName">
-            {error === false &&
-            (cart.map((good) => {
-                        return (
-                            <div className="name" key={good.good.name}>{good.good.name}</div>
-                        );
-                    })
-                )
-            }
-            </div>
-
-            <div className="wrapperForCount">
-                {error === false &&
-                (cart.map((good) => {
-                        return <div className="count" key={good.good._id}>{good.count}</div>;
-                    })
-                )}
+            <h1>Корзина</h1>
+            <div className="containerForCart">
+                <div className="wrapperForName">
+                    {error === false &&
+                    (cart.map((good) => {
+                            return (
+                                <div className="name" key={good.good.name}>{good.good.name}</div>
+                            );
+                        })
+                    )
+                    }
+                </div>
+
+                <div className="wrapperForCount">
+                    {error === false &&
+                    (cart.map((good) => {
+                            return <input
+                                className="count"
+                                type="number"
+                                defaultValue={good.count}
+                                onChange={(e) => {
+                                    onCartChange(good.good, +e.target.value);
+                                }
+                                }
+                                key={good.good._id}
+                            />;
+                        })
+                    )}
+                </div>
+                <div className="wrapperForName">
+                    {error === false &&
+                    (cart.map((good) => {
+                            return (
+                                <button key={good.good._id} onClick={() => onCartRemove(good.good, good.count)
+                                }>
+                                    Удалить {good.good.name}</button>);
+                        })
+                    )
+                    }
+                </div>
             </div>
-            <div className="wrapperForName">
-                {error === false &&
-                (cart.map((good) => {
-                        return (
-                            <button key={good.good._id} onClick={() => onCartRemove(good.good, good.count)
-                            }>
-                             Удалить {good.good.name}</button>);
-                    })
-                )
-                }
-
-            </div>
-            {/*    {` нарисовать страницу корзины , по изменению в input <input onChange={() => onCartChange(...)}*/
-            }
-            {/*по кнопке удалить */
-            }
-            {/*    ТУТ БУДЕТ КОРЗИНА*/
-            }
         </div>
-    )
+    );
 };
 
 const CCart = connect(
@@ -334,16 +342,61 @@ const CCart = connect(
         onCartChange: actionCartChange,
         onCartRemove: actionCartRemove
     })(Cart);
-// забрать из редакса корзину положить в пропс cart,
-//дать компоненту onCartChange и onCartRemove с соответствующими actionCreator)(Cart)
+
+
+const LoginForm = ({onCartLogin}) => {
+    const [login, setLogin] = useState('');
+    const [password, setPassword] = useState('');
+    const isDisabled = login === '' || password === '';
+    console.log(login, password, isDisabled)
+
+    const onChange = (event) => {
+        event.target.name === 'login' ?  setLogin(event.target.value) : setPassword(event.target.value);
+    };
+
+    return (
+        <div className="inputWrapper">
+            <h1>Регистрация</h1>
+            <input
+                className="inputLogin"
+                name="login"
+                style={{borderColor: isDisabled ? 'red' : ''}}
+                placeholder="введите логин"
+                type="text"
+                onChange={onChange}
+            />
+            <input
+                className="inputPsw"
+                name="password"
+                style={{borderColor: isDisabled ? 'red' : ''}}
+                placeholder="введите пароль"
+                type="password"
+                onChange={onChange}
+            />
+            <button
+                className="buttonLogin"
+                disabled={isDisabled}
+                onClick={
+                    () => {
+                        onCartLogin(login, password);
+                    }}>Login
+            </button>
+        </div>
+    );
+};
+
+const CLoginForm = connect(
+    null,
+    {
+        onCartLogin: actionFullRegister
+    })(LoginForm);
 
 const Main = () =>
     <main className="main">
         <Aside/>
         <Content>
-            <Category cat={{name: 'ЗАГЛУШКА'}}/>
             <CCategory/>
-            <Cart/>
+            <CLoginForm/>
             <CCart/>
         </Content>
     </main>;
@@ -372,4 +425,3 @@ function App() {
 }
 
 export default App;
-;

src/App.scss

@@ -1,7 +1,5 @@
 .App {
   font-family: Georgia sans-serif;
-  padding: 0;
-  margin: 0;
   display: flex;
   flex-direction: column;
 
@@ -12,7 +10,6 @@
 }
 
 .aside{
-  min-width: 20%;
   border-right: 1px solid lightgrey;
   display: flex;
   justify-content: start;
@@ -33,7 +30,6 @@
 
 }
 
-
 .header{
   display: flex;
   justify-content: space-between;
@@ -52,32 +48,40 @@
 }
 
 .Cart{
-  margin: 10px;
+  margin: 30px;
   display: flex;
   justify-content: center;
+  flex-direction: column;
   align-items: center;
+  border: 1px solid #792c9b;
+  width: 100%;
 
-  .wrapperForName{
+  .containerForCart{
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
+
+    .wrapperForName{
+      display: flex;
+      flex-direction: column;
+
+      .name{
+        margin: 10px;
+      }
 
-    .name{
-      margin: 10px;
     }
+    .wrapperForCount{
+      display: flex;
+      flex-direction: column;
 
-  }
-  .wrapperForCount{
-    display: flex;
-    flex-direction: column;
+      .count{
+        margin: 10px;
+      }
+    }
 
-    .count{
+    button{
       margin: 10px;
     }
   }
-
-  button{
-    margin: 10px;
-  }
 }
 
 .Content{
@@ -86,14 +90,12 @@
   align-items: center;
   flex-direction: column;
 
-
   ul, li{
     list-style: none;
     margin: 0;
     padding: 0;
   }
 
-
   .GoodCard{
     display: flex;
     flex-direction: column;
@@ -114,7 +116,7 @@
 }
 
 .Footer{
-  background-color: rebeccapurple;
+  background-color: #792c9b;
   height: 10%;
   border-top: 1px solid lightgrey;
   img{
@@ -123,6 +125,23 @@
   }
 }
 
+.inputWrapper{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  .inputLogin, .inputPsw{
+    background-color: #fff;
+    text-align: center;
+    margin: 5px;
+    width: 280px;
+    height: 40px;
+    font-size: 16px;
+    border: 1px solid #ccc;
+  }
+
+}