Merge pull request #26 from MiguelMRojas/_FinalFixes

Final fixes

src/components/CartDialog/CartDialog.module.css

@@ -55,6 +55,8 @@
 }
 
 .dialog__button {
+  text-decoration: none;
+  text-align: center;
   display: block;
   width: 100%;
   margin-block: 16px 12px;

src/components/CartDialog/CartDialog.tsx

@@ -1,15 +1,18 @@
 import Styles from './CartDialog.module.css';
 import { useContext } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
 import { SessionContext } from '../../context/SessionContext';
 import { FiX } from 'react-icons/fi';
 import { CartDialogRow } from './CartDialogRow/CartDialogRow';
+import { toast } from 'react-toastify';
 
 interface IProps {
   closeCallback: () => void;
 }
 
 export function CartDialog(props: IProps) {
-  const { cart } = useContext(SessionContext);
+  const { isLoggedIn, cart, makeOrder } = useContext(SessionContext);
+  const navigate = useNavigate();
 
   const GetCartTotal = () => {
     const price = cart.reduce((acc, curr) => {
@@ -43,8 +46,63 @@ export function CartDialog(props: IProps) {
         <p className={Styles.rowText}>Total</p>
         <p>{GetCartTotal()}</p>
       </div>
-      <button className={Styles.dialog__button}>Ir al carrito</button>
-      <button className={Styles.dialog__button}>Realizar pedido</button>
+      <Link className={Styles.dialog__button} to='/cart'>
+        Ir al carrito
+      </Link>
+      <button
+        className={Styles.dialog__button}
+        onClick={() => {
+          // Redirects to login if the user is not authenticated
+          if (!isLoggedIn) {
+            toast.warn('Log in to create orders.', {
+              position: 'top-right',
+              autoClose: 2500,
+              pauseOnHover: true,
+              theme: 'light',
+            });
+
+            navigate('/login');
+            return;
+          }
+
+          // Function to create an order
+          const process = async () => {
+            const done = await makeOrder();
+            if (done) {
+              toast.success('Order was created successfully', {
+                position: 'top-right',
+                autoClose: 2500,
+                pauseOnHover: true,
+                theme: 'light',
+              });
+            } else {
+              toast.error('Unable to create a new order. Try again.', {
+                position: 'top-right',
+                autoClose: 2500,
+                pauseOnHover: true,
+                theme: 'light',
+              });
+            }
+          };
+
+          // Use the function if there are somethint in the cart
+          if (cart.length > 0) {
+            process();
+          } else {
+            toast.warn(
+              'Your cart is empty, please, add some product before trying to create a new order',
+              {
+                position: 'top-right',
+                autoClose: 2500,
+                pauseOnHover: true,
+                theme: 'light',
+              },
+            );
+          }
+        }}
+      >
+        Realizar pedido
+      </button>
     </article>
   );
 }

src/components/CartDialog/CartDialogRow/CartDialogRow.tsx

@@ -1,6 +1,9 @@
+import { useContext } from 'react';
+import { SessionContext } from '../../../context/SessionContext';
 import Styles from './CartDialogRow.module.css';
 
 interface IProduct {
+  id: string;
   image: string;
   name: string;
   units: string;
@@ -13,6 +16,8 @@ interface Iprops {
 }
 
 export function CartDialogRow(props: Iprops) {
+  const { updateCart } = useContext(SessionContext);
+
   return (
     <div className={Styles.cartItem}>
       <img className={Styles.cartItem__image} src={props.product.image} alt={props.product.name} />
@@ -27,6 +32,11 @@ export function CartDialogRow(props: Iprops) {
               name={props.product.name}
               id={props.product.name}
               value={props.product.quantity}
+              onChange={(e) => {
+                // Update value on session
+                const value = e.target.value;
+                updateCart({ id: props.product.id, amount: value });
+              }}
             ></input>
           </div>
           <span className={Styles.cartItem__price}>{props.product.price}</span>

src/components/dynamicForm/DynamicForm.tsx

@@ -29,9 +29,14 @@ interface Props {
   rules?: Array<Rule>;
 }
 
+type TValues = {
+  [key: string]: string;
+};
+
 export function DynamicForm(props: Props) {
   // Store form current values
-  const [values, setValues] = useState({});
+  const init: TValues = {};
+  const [values, setValues] = useState(init);
 
   // Update form values state when some input change
   const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
@@ -73,6 +78,20 @@ export function DynamicForm(props: Props) {
   // and use the callback
   const handleSubmit = () => {
     let allFieldsOk = true;
+    const isSignup = props.fields.some((field) => field.name === 'password2');
+
+    if (isSignup) {
+      if (values['password'] != values['password2']) {
+        toast.error('Passords are not equals', {
+          position: 'top-right',
+          autoClose: 2500,
+          pauseOnHover: true,
+          theme: 'light',
+        });
+
+        return;
+      }
+    }
 
     if (props.rules) {
       props.rules.forEach((rule) => {

src/components/navbar/Navbar.tsx

@@ -1,18 +1,27 @@
 import Styles from './Navbar.module.css';
 import { useContext, ChangeEvent, useRef, useState } from 'react';
-import { NavLink, Link } from 'react-router-dom';
+import { NavLink, Link, useNavigate } from 'react-router-dom';
 import { SessionContext } from '../../context/SessionContext';
-import { FiHeart, FiUser, FiShoppingCart, FiSearch, FiLock, FiUserCheck } from 'react-icons/fi';
+import {
+  FiHeart,
+  FiUser,
+  FiShoppingCart,
+  FiSearch,
+  FiLock,
+  FiUserCheck,
+  FiUserX,
+} from 'react-icons/fi';
 import { FilterContext } from '../../context/FilterContext';
 import { CartDialog } from '../CartDialog/CartDialog';
 
 export function Navbar() {
   // Fucntion from the provider
   const { setCriteria, filterProducts } = useContext(FilterContext);
   const [openCartDialog, setOpenCartDialog] = useState(false);
+  const { isLoggedIn, logout } = useContext(SessionContext);
 
-  const { isLoggedIn } = useContext(SessionContext);
   const floatingOptions = useRef<HTMLUListElement | null>(null);
+  const navigate = useNavigate();
 
   // Update provider's criteria
   const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
@@ -33,34 +42,33 @@ export function Navbar() {
     return (
       <>
         <li>
-          <Link className={Styles.navigation__floatItem} to='/'>
+          <Link className={Styles.navigation__floatItem} to='#'>
             <FiUser color={'#2f2f2f'} />
             <span>Mi Cuenta</span>
           </Link>
         </li>
         <li>
-          <Link className={Styles.navigation__floatItem} to='/'>
+          <Link className={Styles.navigation__floatItem} to='#'>
             <FiHeart color={'#2f2f2f'} />
             <span>Mis favoritos</span>
           </Link>
         </li>
         <li>
-          <Link className={Styles.navigation__floatItem} to='/'>
+          <Link className={Styles.navigation__floatItem} to='/cart'>
             <FiShoppingCart color={'#2f2f2f'} />
             <span>Mi Carrito</span>
           </Link>
         </li>
         <li>
-          <Link className={Styles.navigation__floatItem} to='/login'>
-            <FiLock color={'#2f2f2f'} />
-            <span>Entrar</span>
-          </Link>
-        </li>
-        <li>
-          <Link className={Styles.navigation__floatItem} to='/signup'>
-            <FiUserCheck color={'#2f2f2f'} />
-            <span>Crear cuenta</span>
-          </Link>
+          <div
+            className={Styles.navigation__floatItem}
+            onClick={() => {
+              logout();
+            }}
+          >
+            <FiUserX color={'#2f2f2f'} />
+            <span>Cerrar sesión</span>
+          </div>
         </li>
       </>
     );
@@ -107,6 +115,7 @@ export function Navbar() {
                   if (e.key == 'Enter') {
                     console.log('Filtering because of enter key pressed');
                     filterProducts();
+                    navigate('/');
                   }
                 }}
               ></input>
@@ -116,6 +125,7 @@ export function Navbar() {
                 id={Styles.searchIcon}
                 onClick={() => {
                   filterProducts();
+                  navigate('/');
                 }}
               />
             </div>

src/components/productCard/ProductCard.tsx

@@ -3,6 +3,7 @@ import { Iproduct, ICartItem } from '../../interfaces/interfaces';
 import { FiShoppingCart, FiHeart } from 'react-icons/fi';
 import { FaHeart } from 'react-icons/fa';
 import { useContext } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { SessionContext } from '../../context/SessionContext';
 import { toast } from 'react-toastify';
 
@@ -15,7 +16,10 @@ interface props {
 // producto: producto
 // dialogcallback: funcion para abrir el modal
 export function ProductCard(props: props) {
-  const { addToCart, favorites, addToFavorites, removeFromFavorites } = useContext(SessionContext);
+  const { isLoggedIn, addToCart, favorites, addToFavorites, removeFromFavorites } =
+    useContext(SessionContext);
+
+  const navigate = useNavigate();
 
   const HandleAddToCart = async () => {
     const CartItem: ICartItem = {
@@ -63,7 +67,18 @@ export function ProductCard(props: props) {
           color={'red'}
           size={'1.4em'}
           onClick={() => {
-            addToFavorites(props.product.id);
+            if (isLoggedIn) {
+              addToFavorites(props.product.id);
+            } else {
+              navigate('/login');
+
+              toast.warn('Log in to manage your favorites', {
+                position: 'top-right',
+                autoClose: 2500,
+                pauseOnHover: true,
+                theme: 'light',
+              });
+            }
           }}
         />
       )}
@@ -83,7 +98,18 @@ export function ProductCard(props: props) {
       <button
         className={Styles.product__button}
         onClick={() => {
-          HandleAddToCart();
+          if (isLoggedIn) {
+            HandleAddToCart();
+          } else {
+            navigate('/login');
+
+            toast.warn('Log in to manage your cart', {
+              position: 'top-right',
+              autoClose: 2500,
+              pauseOnHover: true,
+              theme: 'light',
+            });
+          }
         }}
       >
         <FiShoppingCart /> Add to cart