Merge pull request #109 from CA-G12/106-authorization-cart

check the authorization in cart page relates #106
CA-G12 · Oct 1, 2022 · 6f7ca5e · 6f7ca5e
2 parents ba7e2c4 + 1a2f1c6
commit 6f7ca5e
Show file tree

Hide file tree

Showing 14 changed files with 183 additions and 108 deletions.
diff --git a/client/src/components/Pages/Cart/Cart.jsx b/client/src/components/Pages/Cart/Cart.jsx
@@ -4,29 +4,33 @@ import { Link } from 'react-router-dom';
 import fetchUrl from '../../../utils/fetch';
 import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
-import { useOutletContext } from 'react-router-dom';
+import { useNavigate, useOutletContext } from 'react-router-dom';
 function Cart() {
   const [productCarts, setCart] = useState([]);
   const [count, setCount] = useState(0);
-  const [title, setPageName] = useOutletContext();
+  const [title, setPageName, user, setUser] = useOutletContext();
+
+  setPageName('Cart');
+  const navigate = useNavigate();
   const changeValue = (e, quantity) => {
     const id = e.target.id;
     setCount(quantity);
+    if (quantity === 0) deleteProduct(e);
     fetchUrl('PUT', '/cart', {
       productId: id,
-      userId: 1,
+      userId: user.id,
       count: quantity,
     }).then((data) => {
       console.log('product', data);
     });
   };
-  setPageName('Cart');
+
   const deleteProduct = (e) => {
     const id = e.target.id;
     setCount(+id + 1);
     fetchUrl('DELETE', '/cart', {
       productId: id,
-      userId: 1,
+      userId: user.id,
     }).then((data) => {
       console.log('product', data, 444);
       toast.error('Product Deleted!', {
@@ -42,16 +46,21 @@ function Cart() {
   };
 
   useEffect(() => {
-    fetch('/cart/1', {
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    })
-      .then((data) => data.json())
-      .then((data) => {
-        console.log(data);
-        setCart(data);
-      });
+    console.log('tokennn', user);
+    if (user.token) {
+      fetch(`/cart/${user.id}`, {
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      })
+        .then((data) => data.json())
+        .then((data) => {
+          console.log(data);
+          setCart(data);
+        });
+    } else {
+      navigate('/');
+    }
   }, [count]);
   return (
     <>
@@ -62,38 +71,42 @@ function Cart() {
           <div>Quantity</div>
           <div>Total</div>
         </div>
-        {productCarts.map((ele) => (
-          <div className="item" key={ele.id}>
-            <div className="product-img">
-              <i
-                className="fa-solid fa-xmark"
-                id={ele.id}
-                onClick={(e) => {
-                  deleteProduct(e);
-                }}
-              ></i>
-              <Link to={`/products/${ele.id}`}>
-                <img src={ele.image} alt={ele.title} />
-              </Link>
-              <p>{ele.title}</p>
-            </div>
-            <div className="price">${ele.price}</div>
-            <div className="quantity">
-              <i
-                className="fa-solid fa-minus"
-                id={ele.id}
-                onClick={(e) => changeValue(e, +ele.count - 1)}
-              ></i>
-              <span>{ele.count}</span>
-              <i
-                className="fa-solid fa-plus"
-                id={ele.id}
-                onClick={(e) => changeValue(e, +ele.count + 1)}
-              ></i>
+        {productCarts.length === 0 ? (
+          <h2>No products</h2>
+        ) : (
+          productCarts.map((ele) => (
+            <div className="item" key={ele.id}>
+              <div className="product-img">
+                <i
+                  className="fa-solid fa-xmark"
+                  id={ele.id}
+                  onClick={(e) => {
+                    deleteProduct(e);
+                  }}
+                ></i>
+                <Link to={`/products/${ele.id}`}>
+                  <img src={ele.image} alt={ele.title} />
+                </Link>
+                <p>{ele.title}</p>
+              </div>
+              <div className="price">${ele.price}</div>
+              <div className="quantity">
+                <i
+                  className="fa-solid fa-minus"
+                  id={ele.id}
+                  onClick={(e) => changeValue(e, +ele.count - 1)}
+                ></i>
+                <span>{ele.count}</span>
+                <i
+                  className="fa-solid fa-plus"
+                  id={ele.id}
+                  onClick={(e) => changeValue(e, +ele.count + 1)}
+                ></i>
+              </div>
+              <div>${ele.count * ele.price}</div>
             </div>
-            <div>${ele.count * ele.price}</div>
-          </div>
-        ))}
+          ))
+        )}
       </section>
       <section className="total">
         <div>

diff --git a/client/src/components/Pages/ProductDetails/ProductDetails.jsx b/client/src/components/Pages/ProductDetails/ProductDetails.jsx
@@ -9,7 +9,7 @@ function ProductDetails() {
   const { id } = useParams();
   const [productDetails, setProductDetails] = useState([]);
   const [quantity, setQuantity] = useState(1);
-  const [titlee, setPageName] = useOutletContext();
+  const [titlee, setPageName, user, setUser] = useOutletContext();
 
   useEffect(() => {
     fetch(`/product/${id}`, {
@@ -24,27 +24,40 @@ function ProductDetails() {
   const navigate = useNavigate();
 
   const addToCart = (e) => {
-    fetchUrl('POST', '/cart', {
-      productId: id,
-      userId: 1,
-      count: quantity,
-    })
-      .then((data) => {
-        if (data) {
-          console.log(data);
-          toast.success('Product added successfully!', {
-            position: 'top-left',
-            autoClose: 2000,
-            hideProgressBar: false,
-            closeOnClick: true,
-            pauseOnHover: true,
-            draggable: true,
-            progress: undefined,
-          });
-          // navigate(`/cart`);
-        }
+    if (user.token) {
+      fetchUrl('POST', '/cart', {
+        productId: id,
+        userId: user.id,
+        count: quantity,
       })
-      .catch(console.log);
+        .then((data) => {
+          if (data) {
+            console.log(data);
+            toast.success('Product added successfully!', {
+              position: 'top-left',
+              autoClose: 2000,
+              hideProgressBar: false,
+              closeOnClick: true,
+              pauseOnHover: true,
+              draggable: true,
+              progress: undefined,
+            });
+            // navigate(`/cart`);
+          }
+        })
+        .catch(console.log);
+    } else {
+      // navigate('/users/signup');
+      toast.error('You Have To Sign Up!', {
+        position: 'top-left',
+        autoClose: 2000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+      });
+    }
   };
 
   console.log(quantity);

diff --git a/client/src/components/Pages/ProductsContainer/Products/ProductCard.jsx b/client/src/components/Pages/ProductsContainer/Products/ProductCard.jsx
@@ -5,32 +5,46 @@ import { ToastContainer, toast } from 'react-toastify';
 
 function ProductCard(props) {
   const { id, title, image, price } = props.productCard;
+  const user = props.user;
   const navigate = useNavigate();
 
   const addToCart = (e) => {
     const id = e.target.id;
     console.log(e.target.id);
-
-    fetchUrl('POST', '/cart', {
-      productId: id,
-      userId: 1,
-      count: 1,
-    })
-      .then((data) => {
-        if (data) {
-          toast.success('Product added successfully!', {
-            position: 'top-left',
-            autoClose: 2000,
-            hideProgressBar: false,
-            closeOnClick: true,
-            pauseOnHover: true,
-            draggable: true,
-            progress: undefined,
-          });
-          // navigate(`/cart`);
-        }
+    // if (user.token === false) navigate('/users/signup');
+    if (user.token) {
+      fetchUrl('POST', '/cart', {
+        productId: id,
+        userId: user.id,
+        count: 1,
       })
-      .catch(console.log);
+        .then((data) => {
+          if (data) {
+            toast.success('Product added successfully!', {
+              position: 'top-left',
+              autoClose: 2000,
+              hideProgressBar: false,
+              closeOnClick: true,
+              pauseOnHover: true,
+              draggable: true,
+              progress: undefined,
+            });
+            // navigate(`/cart`);
+          }
+        })
+        .catch(console.log);
+    } else {
+      // navigate('/users/signup');
+      toast.error('You Have To Sign Up!', {
+        position: 'top-left',
+        autoClose: 2000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+      });
+    }
   };
 
   return (

diff --git a/client/src/components/Pages/ProductsContainer/Products/ProductList.jsx b/client/src/components/Pages/ProductsContainer/Products/ProductList.jsx
@@ -1,16 +1,16 @@
 import ProductCard from './ProductCard';
 
 function ProductList(props) {
-  const { productList } = props;
-  console.log('props', props);
-  console.log('products', props.productList);
+  const { productList, user } = props;
+  // console.log('props', props);
+  // console.log('products', props.productList);
 
   return (
     <div className="products">
       {productList ? (
         productList.map((item) => {
-          console.log(item);
-          return <ProductCard productCard={item} key={item.id} />;
+          // console.log(item);
+          return <ProductCard productCard={item} user={user} key={item.id} />;
         })
       ) : (
         <div>Loading....</div>

diff --git a/client/src/components/Pages/ProductsContainer/ProductsContainer.jsx b/client/src/components/Pages/ProductsContainer/ProductsContainer.jsx
@@ -9,7 +9,7 @@ import './ProductContainer.css';
 import fetchUrl from '../../../utils/fetch';
 
 function ProductsContainer() {
-  const [title, setPageName] = useOutletContext();
+  const [title, setPageName, user, setUser] = useOutletContext();
   const [category, setCategory] = useState('');
   const [priceMin, setPriceMin] = useState(0);
   const [priceMax, setPriceMax] = useState(100);
@@ -58,7 +58,7 @@ function ProductsContainer() {
           priceMax={priceMax}
           setPriceMax={setPriceMax}
         />
-        <ProductList productList={currentPosts} />
+        <ProductList productList={currentPosts} user={user} />
       </div>
       <Pagination
         postsPerPage={postsPerPage}

diff --git a/client/src/components/Pages/signup/signup.jsx b/client/src/components/Pages/signup/signup.jsx
@@ -4,6 +4,7 @@ import * as yup from 'yup';
 import { useNavigate } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
+import { useOutletContext } from 'react-router-dom';
 
 import './signup.css';
 const signSh = yup.object().shape({
@@ -31,6 +32,8 @@ function Signup() {
   const [password, setPassword] = useState('');
   const [confirmPassword, setConfPassword] = useState('');
   const [avatar, setAvatar] = useState('');
+  const [title, setPageName, user, setUser] = useOutletContext();
+  setPageName('Sign Up');
   const register = async (e) => {
     try {
       e.preventDefault();

diff --git a/client/src/components/Pages/users/SignIn.component.jsx b/client/src/components/Pages/users/SignIn.component.jsx
@@ -22,8 +22,9 @@ const loginValidationSchema = yup
   .required();
 
 function SignIn() {
-  const [isLogged, setIsLogged] = useOutletContext();
-
+  const [title, setPageName, user, setUser, isLogged, setIsLogged] =
+    useOutletContext();
+  setPageName('Log In');
   const navigate = useNavigate();
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');

diff --git a/client/src/root.jsx b/client/src/root.jsx
@@ -13,6 +13,21 @@ function Root() {
   const [title, setTitle] = useState('');
   const [pageName, setPageName] = useState('');
   const [isLogged, setIsLogged] = useState(false);
+  const [user, setUser] = useState({ token: false });
+
+  useEffect(() => {
+    fetch('/users/checkAuth')
+      .then((data) => data.json())
+      .then((data) => {
+        console.log('check auth data', data);
+        if (data.isLogged) {
+          setUser({ token: true, ...data });
+        } else {
+          setUser({ token: false });
+        }
+      });
+  }, []);
+
   useEffect(() => {
     localStorage.getItem('logged');
     setIsLogged(localStorage.getItem('logged'));
@@ -26,7 +41,9 @@ function Root() {
       <Header />
       <SecondHeader title={title} setTitle={setTitle} />
       <PageTitle pageName={pageName} />
-      <Outlet context={[title, setPageName, isLogged, setIsLogged]} />
+      <Outlet
+        context={[title, setPageName, user, setUser, isLogged, setIsLogged]}
+      />
 
       <Footer />
     </>