From 20ff47f5acf21122b5f368de7f0d5d715a6a0082 Mon Sep 17 00:00:00 2001
From: Jason <Jason1@jelincic.com>
Date: Sun, 26 May 2024 14:20:12 -0700
Subject: [PATCH] feat: adds add item button, weird copying of items bug and
 every action requires a refresh or the useeffect enters a infinate loop

---
 frontend/src/components/EditItem.tsx       |  34 +----
 frontend/src/components/ItemGroup.tsx      | 149 ++++++++++++---------
 frontend/src/components/NewItemOptions.tsx |  42 +++---
 3 files changed, 108 insertions(+), 117 deletions(-)

diff --git a/frontend/src/components/EditItem.tsx b/frontend/src/components/EditItem.tsx
index 84ff66c..bc0c92f 100644
--- a/frontend/src/components/EditItem.tsx
+++ b/frontend/src/components/EditItem.tsx
@@ -89,20 +89,6 @@ const EditItem: React.FC<Props> = ({ itemId }) => {
   const format = (val: any) => `$` + val;
   const parse = (val: any) => val.replace(/^\$/, "");
 
-  const handleDelete = async () => {
-    try {
-      const response = await fetch(`http://localhost:3001/items/${itemId}`, {
-        method: "DELETE",
-      });
-      if (!response.ok) {
-        throw new Error(`Error: ${response.statusText}`);
-      }
-      console.log("Item deleted successfully");
-    } catch (error) {
-      console.error("There was an error deleting the item", error);
-    }
-  };
-
   const handleSaveChanges = async () => {
     try {
       const updatedItem = {
@@ -136,6 +122,7 @@ const EditItem: React.FC<Props> = ({ itemId }) => {
       } else {
         console.error("Failed to update profile");
       }
+      window.location.reload();
     } catch (error) {
       console.error("Error updating profile:", error);
     }
@@ -315,7 +302,11 @@ const EditItem: React.FC<Props> = ({ itemId }) => {
                       </Stack>
                     </RadioGroup>
                   </FormControl>
-                  <HStack width="100%" spacing={4}>
+                  <HStack 
+                    display={"flex"}
+                    width="100%" 
+                    justifyContent="space-around"
+                  >
                     <Button
                       bgColor="var(--col-secondary)"
                       color="white"
@@ -323,28 +314,15 @@ const EditItem: React.FC<Props> = ({ itemId }) => {
                         bg: "var(--col-tertiary)",
                         color: "var(--col-dark)",
                       }}
-                      mt={2}
-                      ml="auto"
                       onClick={handleSaveChanges}
                     >
                       Save
                     </Button>
                     <Button
-                      colorScheme="red"
-                      _hover={{ bg: "#ff8366", color: "var(--col-dark)" }}
-                      mt={2}
-                      ml="auto"
-                      onClick={handleDelete}
-                    >
-                      Delete
-                    </Button>
-                    <Button
-                      mt={2}
                       _hover={{
                         bg: "var(--col-tertiary)",
                         color: "var(--col-dark)",
                       }}
-                      ml="auto"
                       onClick={() => setIsEditing(false)}
                     >
                       Cancel
diff --git a/frontend/src/components/ItemGroup.tsx b/frontend/src/components/ItemGroup.tsx
index 2c3b996..a64e744 100644
--- a/frontend/src/components/ItemGroup.tsx
+++ b/frontend/src/components/ItemGroup.tsx
@@ -15,14 +15,16 @@ import {
   MenuList,
   MenuItem,
   Button,
+  TableContainer,
 } from "@chakra-ui/react";
-import { DeleteIcon, AddIcon } from "@chakra-ui/icons";
+import { DeleteIcon } from "@chakra-ui/icons";
 import { FaChevronDown } from "react-icons/fa";
 import { IGroup } from "../../../backend/models/groupSchema";
 import { IBasket } from "../../../backend/models/basketSchema";
 import { IItem } from "../../../backend/models/itemSchema";
 import { useEffect } from "react";
 import EditItem from "./EditItem";
+import NewItemOptions from "./NewItemOptions";
 
 type Props = {
   group: IGroup;
@@ -38,6 +40,7 @@ const ItemGroup: React.FC<Props> = ({
 }) => {
   const [items, setItems] = React.useState<IItem[]>([]);
   const [baskets, setBaskets] = React.useState<IBasket[]>([]);
+  const [basket, setBasket] = React.useState<IBasket>();
   const [userBaskets, setUserBaskets] = React.useState<IBasket[]>([]);
   const [loading, setLoading] = React.useState(true);
   const category = group.groupName;
@@ -92,6 +95,7 @@ const ItemGroup: React.FC<Props> = ({
       if (stateVariable.user) {
         const fetchedBaskets = await fetchBaskets(group);
         setBaskets(fetchedBaskets);
+        setBasket(fetchedBaskets[0]);
         const tempItems: IItem[] = [];
 
         for (const basket of fetchedBaskets) {
@@ -112,6 +116,12 @@ const ItemGroup: React.FC<Props> = ({
     });
   }, [stateVariable.user]);
 
+  useEffect(() => {
+    if (basket) {
+      setBaskets([basket, ...baskets.slice(1)]);
+    }
+  }, [basket]);
+
   const removeItem = async (item: IItem) => {
     baskets.forEach(async (basket) => {
       if (basket.items.includes(item._id)) {
@@ -139,6 +149,7 @@ const ItemGroup: React.FC<Props> = ({
         }
       }
     });
+    window.location.reload();
   };
 
   const moveItem = async (basket: IBasket, item: IItem) => {
@@ -227,77 +238,81 @@ const ItemGroup: React.FC<Props> = ({
           {category}
         </Heading>
         <Box display="flex" alignItems="center">
-          <Heading as="h3" fontWeight="normal" size="sm" marginRight="10px">
-            Add Item
-          </Heading>
-          <IconButton
-            aria-label="Add Basket"
-            colorScheme="teal"
-            size={"sm"}
-            icon={<AddIcon />}
-          ></IconButton>
+            { !loading && baskets.length > 0 ? ( 
+              <NewItemOptions 
+                basket={baskets[0]._id.toString()} 
+                updateBasket={setBasket} 
+              />
+            ) : (
+              <Heading as="h3" fontWeight="normal" size="sm" marginRight="10px">
+                No baskets available
+              </Heading>
+            )
+            }
         </Box>
       </Box>
       <Divider mt={2} mb={4} />
-      <Table variant="simple" width="full">
-        <Thead>
-          <Tr>
-            <Th width="25%">Name</Th>
-            <Th width="50%">Description</Th>
-            <Th width="8%">More</Th>
-            <Th width="8%">Move</Th>
-            <Th width="9%">Delete</Th>
-          </Tr>
-        </Thead>
-        <Tbody>
-          {!loading && items.length > 0 ? (
-            items.map((item, index) => (
-              <Tr key={index}>
-                <Td width="25%">{item.name}</Td>
-                <Td width="50%">{item.notes}</Td>
-                <Td width="8%">
-                  <EditItem itemId={item._id.toString()} />
-                </Td>
-                <Td width="8%">
-                  <Menu>
-                    <MenuButton as={Button} rightIcon={<FaChevronDown />}>
-                      Select Basket
-                    </MenuButton>
-                    <MenuList>
-                      {userBaskets.length > 0 ? (
-                        console.log(userBaskets),
-                        userBaskets.map((basket) => (
-                          <MenuItem
-                            key={basket._id.toString()}
-                            onClick={() => handleMove(basket, item)}
-                            _hover={{ textColor: "black" }}
-                          >
-                            {basket.basketName}
-                          </MenuItem>
-                        ))
-                      ) : (
-                        <MenuItem disabled>No baskets available</MenuItem>
-                      )}
-                    </MenuList>
-                  </Menu>
-                </Td>
-                <Td width="9%">
-                  <IconButton
-                    aria-label="Delete"
-                    icon={<DeleteIcon />}
-                    colorScheme="red"
-                    onClick={() => removeItem(item)}
-                  />
-                </Td>
-              </Tr>
-            ))
-          ) : (
+      <TableContainer>
+        <Table variant="simple" width="full">
+          <Thead>
             <Tr>
-              <Td colSpan={5}>No items found.</Td>
+              <Th width="25%">Name</Th>
+              <Th width="50%">Description</Th>
+              <Th width="8%">More</Th>
+              <Th width="8%">Move</Th>
+              <Th width="9%">Delete</Th>
             </Tr>
-          )}
-        </Tbody>
-      </Table>
+          </Thead>
+          <Tbody>
+            {!loading && items.length > 0 ? (
+              items.map((item, index) => (
+                <Tr key={index}>
+                  <Td width="25%">{item.name}</Td>
+                  <Td width="50%">{item.notes}</Td>
+                  <Td width="8%">
+                    <EditItem itemId={item._id.toString()} />
+                  </Td>
+                  <Td width="8%">
+                    <Menu>
+                      <MenuButton as={Button} rightIcon={<FaChevronDown />}>
+                        Select Basket
+                      </MenuButton>
+                      <MenuList>
+                        {userBaskets.length > 0 ? (
+                          console.log(userBaskets),
+                          userBaskets.map((basket) => (
+                            <MenuItem
+                              key={basket._id.toString()}
+                              onClick={() => handleMove(basket, item)}
+                              _hover={{ textColor: "black" }}
+                            >
+                              {basket.basketName}
+                            </MenuItem>
+                          ))
+                        ) : (
+                          <MenuItem disabled>No baskets available</MenuItem>
+                        )}
+                      </MenuList>
+                    </Menu>
+                  </Td>
+                  <Td width="9%">
+                    <IconButton
+                      aria-label="Delete"
+                      icon={<DeleteIcon />}
+                      colorScheme="red"
+                      onClick={() => removeItem(item)}
+                    />
+                  </Td>
+                </Tr>
+              ))
+            ) : (
+              <Tr>
+                <Td colSpan={5}>No items found.</Td>
+              </Tr>
+            )}
+          </Tbody>
+        </Table>
+      </TableContainer>
     </Box>
   );
 };
diff --git a/frontend/src/components/NewItemOptions.tsx b/frontend/src/components/NewItemOptions.tsx
index 0ac14fc..79a70c1 100644
--- a/frontend/src/components/NewItemOptions.tsx
+++ b/frontend/src/components/NewItemOptions.tsx
@@ -1,7 +1,8 @@
 import {
-  Button,
+  IconButton,
   Flex,
   Box,
+  Heading,
   Popover,
   PopoverCloseButton,
   PopoverContent,
@@ -18,12 +19,13 @@ import {
 } from "@chakra-ui/react";
 import { FormEvent, useState } from "react";
 import "../styles/JoinGroup.css";
+import { AddIcon } from "@chakra-ui/icons";
 
 const NewItemOptions = ({
   basket,
   updateBasket,
 }: {
-  basket: any;
+  basket: string;
   updateBasket: any;
 }) => {
   const createItem = async (
@@ -86,15 +88,16 @@ const NewItemOptions = ({
         }
       }
     }
+    window.location.reload();
   };
 
   return (
-    <Flex
-      justifyContent="space-between"
-      alignItems="bottom"
-      marginTop="10px"
-      width="15%"
+    <Flex 
+      alignItems="center"
     >
+      <Heading as="h3" fontWeight="normal" size="sm" marginRight="10px">
+            Add Item
+      </Heading>
       <CreateItem postItem={createItem} />
     </Flex>
   );
@@ -179,25 +182,20 @@ const CreateItem = ({ postItem }: CreateProps) => {
           setError({ state: false, msg: "" });
           onClose();
         }}
-        placement="bottom-end"
+        placement="auto"
         autoFocus
         closeOnBlur
       >
         <PopoverTrigger>
-          <Button
-            color="var(--col-dark)"
-            borderRadius="30px"
-            borderColor="var(--col-secondary)"
-            borderWidth="3px"
-            width="100px"
-            height="30px"
-            marginRight="2px"
-            fontWeight="300"
-            fontSize="14px"
-            letterSpacing="1px"
-          >
-            ADD ITEM
-          </Button>
+          <IconButton
+            marginRight="10px"
+            display={"flex"}
+            justifyContent="center"
+            alignSelf={"center"}
+            aria-label="Add Item"
+            icon={<AddIcon />}
+            colorScheme="teal"
+          />
         </PopoverTrigger>
         <PopoverContent
           bgColor="var(--col-bright)"