Still trying to update cart when item is marked as done

almamarie · Jan 14, 2023 · 449693a · 449693a
1 parent c1f4e2d
commit 449693a
Show file tree

Hide file tree

Showing 15 changed files with 391 additions and 240 deletions.
diff --git a/components/all-items/SingleItem.tsx b/components/all-items/SingleItem.tsx
@@ -8,11 +8,7 @@ const SingleItem: React.FC<{ item: Item; category: string }> = (props) => {
   const dispatch = useAppDispatch();
 
   const addItemToCartHandler = () => {
-    const result = addItemToCart(
-      dispatch,
-      props.item.name,
-      props.category
-    );
+    const result = addItemToCart(dispatch, props.item.name, props.category);
     if (!result) {
       console.log("error");
       return;

diff --git a/components/cart/CurrentCart.tsx b/components/cart/CurrentCart.tsx
@@ -1,7 +1,7 @@
 import styles from "./CurrentCart.module.css";
 import { useAppDispatch, useAppSelector } from "../../store";
 import { detailsPaneActions } from "../../store/details-pane-slice";
-import { Fragment, useState } from "react";
+import { Fragment, useEffect, useState } from "react";
 import EmptyCart from "./EmptyCart";
 import Footer from "./Footer";
 import CompletingCartCategory from "./completing-state/CompletingCartCategory";
@@ -10,6 +10,8 @@ import { cartActions } from "../../store/cart-slice";
 
 const CurrentCart = () => {
   const dispatch = useAppDispatch();
+  const [isInitialRender, setIsInitialRender] = useState(true);
+
   // fetch cart id from store
   const [totalQuantity, cartTitle, cartItems, isEditingCart] = useAppSelector(
     (state) => {
@@ -21,6 +23,7 @@ const CurrentCart = () => {
       ];
     }
   );
+
   const [cartState, setCartState] = useState("");
 
   const addItemHandler = () => {

diff --git a/components/cart/Footer.tsx b/components/cart/Footer.tsx
@@ -1,41 +1,51 @@
-import { stat } from "fs";
 import { Fragment, useState } from "react";
+import { updateCart } from "../../public/utils/update-cart";
 import { useAppDispatch, useAppSelector } from "../../store";
-import { cartActions } from "../../store/cart-slice";
+import { cartActions, CurrentCartUploadType } from "../../store/cart-slice";
 import Button from "../ui/buttons/Button";
 import styles from "./Footer.module.css";
 
 const Footer: React.FC<{ isEditingCart: boolean }> = (props) => {
   const dispatch = useAppDispatch();
-  const [cartIsEmpty, cartTitle] = useAppSelector((state) => {
-    return [state.cart.items.length === 0, state.cart.cartTitle];
-  });
+  const [cartIsEmpty, cartTitle, totalQuantity, cartState, items] =
+    useAppSelector((state) => {
+      return [
+        state.cart.items.length === 0,
+        state.cart.cartTitle,
+        state.cart.totalQuantity,
+        state.cart.cartState,
+
+        state.cart.items,
+      ];
+    });
   const [currentCartName, setCurrentCartName] = useState(cartTitle);
-  const [disableBtn, setDisableBtn] = useState(true);
 
   //   functions
-  function saveCartHandler() {
+  async function saveCartHandler() {
     dispatch(cartActions.setCartTitle({ cartName: currentCartName }));
     dispatch(cartActions.toggleIsEditingCart());
+
+    const cartData: CurrentCartUploadType = {
+      cartTitle: currentCartName,
+      items,
+      totalQuantity,
+      cartState,
+      isEditingCart: false,
+    };
+
+    console.log("CartData: ", cartData);
+    const response = await updateCart(cartData);
+
+    console.log(response);
   }
 
   function cartNameChangeHandler(event: React.FormEvent<HTMLInputElement>) {
     const newName = event.currentTarget.value;
-    if (
-      newName === "" ||
-      newName === cartTitle ||
-      newName === "New Shopping List"
-    ) {
-      setDisableBtn(true);
-      return;
-    }
     setCurrentCartName(newName);
-    setDisableBtn(false);
   }
 
   function generateBtnCategory() {
-    let btnCategory;
-    if (disableCart || disableBtn) {
+    if (disableCart) {
       return "empty";
     }
     return "submit";
@@ -47,17 +57,13 @@ const Footer: React.FC<{ isEditingCart: boolean }> = (props) => {
     disableCart ? styles["empty-cart"] : ""
   }`;
 
-  console.log("New Shopping List" === cartTitle);
-  const cartName =
-    cartTitle === "New Shopping List" ? "enter a name" : cartTitle;
-
   function generateButton() {
     return (
       <Fragment>
         <input
           onChange={cartNameChangeHandler}
           type="text"
-          placeholder={cartName}
+          placeholder="enter new name"
           disabled={disableCart ? true : false}
         />
         <div onClick={saveCartHandler}>

diff --git a/components/cart/completing-state/CompletingCarItem.tsx b/components/cart/completing-state/CompletingCarItem.tsx
@@ -1,22 +1,53 @@
 import styles from "./CompletingCartItem.module.css";
-import { cartActions, CartSliceItem } from "../../../store/cart-slice";
-import { useAppDispatch } from "../../../store";
+import {
+  cartActions,
+  CartSliceItem,
+  CurrentCartUploadType,
+} from "../../../store/cart-slice";
+import { useAppDispatch, useAppSelector } from "../../../store";
+import { updateCart } from "../../../public/utils/update-cart";
 
 const CompletingCartItem: React.FC<{
   item: CartSliceItem;
   category: string;
 }> = (props) => {
   const dispatch = useAppDispatch();
-
   const { itemId, quantity, isCompleted } = props.item;
+  const [cartTitle, items, totalQuantity, cartState, isEditingCart] =
+    useAppSelector((state) => {
+      return [
+        state.cart.cartTitle,
+        state.cart.items,
+        state.cart.totalQuantity,
+        state.cart.cartState,
+        state.cart.isEditingCart,
+      ];
+    });
 
-  function toggleItemIsCompletedState() {
+  async function toggleItemIsCompletedState() {
     dispatch(
       cartActions.toggleIsCompletedState({
         itemId,
         categoryName: props.category,
       })
     );
+
+    // update cart in firebase
+    // ================================================
+
+    // For some
+
+    const cartData: CurrentCartUploadType = {
+      cartTitle,
+      items,
+      totalQuantity,
+      cartState,
+      isEditingCart,
+    };
+    console.log("CartData: ", cartData);
+    const response = updateCart(cartData);
+
+    // ================================================
   }
 
   return (

diff --git a/components/cart/editing-state/EditingCarItem.tsx b/components/cart/editing-state/EditingCarItem.tsx
@@ -3,7 +3,6 @@ import { CartSliceItem } from "../../../store/cart-slice";
 import { useRef, useState } from "react";
 import { useAppDispatch } from "../../../store";
 import {
-  addItemToCart,
   decreaseItemInCart,
   increaseItemInCart,
   removeItemFromCart,

diff --git a/components/details-pane/AddNewItem.tsx b/components/details-pane/AddNewItem.tsx
@@ -1,36 +1,21 @@
-import {
-  ChangeEventHandler,
-  FormEventHandler,
-  KeyboardEventHandler,
-  MouseEventHandler,
-  useRef,
-  useState,
-} from "react";
-// import { useDispatch } from "react-redux";
+import { useRouter } from "next/router";
+import { FormEventHandler, MouseEventHandler, useRef, useState } from "react";
+import { POST_AJAX } from "../../public/utils/http";
 import { useAppDispatch, useAppSelector } from "../../store";
 import { detailsPaneActions } from "../../store/details-pane-slice";
+import { itemsActions, ItemsType } from "../../store/items-slice";
 import Button from "../ui/buttons/Button";
 import styles from "./AddNewItem.module.css";
 
 const AddNewItem = () => {
-  //   const [showCategories, setShowCategories] = useState(true);
-  //   const categoryRef;
-  //   const showCategoriesDiv = () => {
-  //     setShowCategories((prev) => {
-  //       return true;
-  //     });
-  //   };
-  //   const removeCategoriesDiv = () => {
-  //     setShowCategories((prev) => {
-  //       return false;
-  //     });
-  //   };
-
   const categoryRef = useRef<HTMLInputElement>(null);
   const dispatch = useAppDispatch();
-  const categories = useAppSelector((state) => state.items.categories);
-  const categoriesStyle = styles["categories-wrapper"]; // `${styles["categories-wrapper"]} ${showCategories ? "" : styles.hide}`;
+  const [categories, items] = useAppSelector((state) => {
+    return [state.items.categories, state.items.items];
+  });
+  const categoriesStyle = styles["categories-wrapper"];
   const [currentCategory, setCurrentCategory] = useState("");
+  const router = useRouter();
   const categoryChangeHandler = () => {
     const value = categoryRef.current?.value || "";
     setCurrentCategory(value);
@@ -41,10 +26,52 @@ const AddNewItem = () => {
     setCurrentCategory(category);
   };
 
-  const formSubmitHandler: FormEventHandler = (event) => {
+  const formSubmitHandler: FormEventHandler = async (event) => {
     event.preventDefault();
-    dispatch(detailsPaneActions.setShowing("show selected item"));
+
+    const target = event.target as typeof event.target & {
+      name: { value: string };
+      note: { value: string };
+      image: { value: string };
+      category: { value: string };
+    };
+
+    const newItem: ItemsType = {
+      name: target.name.value.trim(),
+      note: target.note.value.trim(),
+      image: target.image.value.trim(),
+      category: target.category.value.trim(),
+    };
+
+    console.log(newItem);
+
+    // check if item is already in database
+    const tmpItem = items.find((item) => {
+      console.log(
+        `item.name.toLowerCase() ${item.name.toLowerCase()} === newItem.name.toLowerCase() ${newItem.name.toLowerCase()} ${
+          item.name.toLowerCase() === newItem.name.toLowerCase()
+        }`
+      );
+      return item.name.toLowerCase() === newItem.name.toLowerCase();
+    });
+
+    if (tmpItem) {
+      console.log("item found: ", tmpItem);
+      return;
+    }
+
+    const response = await POST_AJAX("all-items", newItem);
+
+    console.log(response);
+
+    dispatch(itemsActions.addItem(tmpItem));
+
+    dispatch(detailsPaneActions.setShowing("show current cart"));
   };
+
+  function routetoCart() {
+    dispatch(detailsPaneActions.setShowing("show current cart"));
+  }
   return (
     <form className={styles.wrapper} onSubmit={formSubmitHandler}>
       <h3 className={styles.heading}>Add a new item</h3>
@@ -100,21 +127,13 @@ const AddNewItem = () => {
           value={currentCategory}
           ref={categoryRef}
           onChange={categoryChangeHandler}
-          //   onFocus={showCategoriesDiv}
-          //   onBlur={removeCategoriesDiv}
         />
       </div>
-      <div
-        className={categoriesStyle}
-        // onFocus={showCategoriesDiv}
-        // onBlur={removeCategoriesDiv}
-      >
+      <div className={categoriesStyle}>
         <ul>
           {categories.map((category) => {
             return (
               <li
-                //   onFocus={showCategoriesDiv}
-                //   onBlur={removeCategoriesDiv}
                 onClick={selectCategoryHandler}
                 key={category}
                 className={styles.category}
@@ -126,10 +145,11 @@ const AddNewItem = () => {
           })}
         </ul>
       </div>
-      <div className={styles.buttons}>
+      <div className={styles.buttons} onClick={routetoCart}>
         <Button type="button" category="cancel">
           cancel
         </Button>
+
         <Button type="submit" category="submit">
           Save
         </Button>

diff --git a/components/details-pane/CurrentItemDetails.tsx b/components/details-pane/CurrentItemDetails.tsx
@@ -8,7 +8,7 @@ import styles from "./CurrentItemDetails.module.css";
 
 const CurrentItemDetails = () => {
   const dispatch = useAppDispatch();
-  const items = useAppSelector(state=>state.items.items)
+  const items = useAppSelector((state) => state.items.items);
   const goBackHandler = () => {
     dispatch(detailsPaneActions.historyPop());
   };
@@ -26,6 +26,7 @@ const CurrentItemDetails = () => {
 
   function addItemToCartHandler() {
     addItemToCart(dispatch, itemId, itemDetails?.category!);
+
   }
 
   if (!itemDetails) {
@@ -70,7 +71,7 @@ const CurrentItemDetails = () => {
 
       <div className={styles.detail}>
         <h3>note</h3>
-        <p>{itemDetails.notes}</p>
+        <p>{itemDetails.note}</p>
       </div>
       <div className={styles.buttons}>
         <div className={styles["delete-btn-wrapper"]}>