Merge pull request #118 from Gather307/ItemsPageButtons

Adds items page buttons
Gather307 · May 29, 2024 · a7626bd · a7626bd
2 parents ff5b9b0 + 20ff47f
commit a7626bd
Show file tree

Hide file tree

Showing 7 changed files with 268 additions and 190 deletions.
diff --git a/backend/itemSchema.ts b/backend/itemSchema.ts
diff --git a/backend/routes/basketRoutes.ts b/backend/routes/basketRoutes.ts
@@ -18,20 +18,6 @@ router.get("/", async (req: Request, res: Response) => {
     res.status(500).send("Internal Server Error"); // Handle any unexpected errors
   }
 });
-router.get("/:bid", async (req: Request, res: Response) => {
-  connectDB();
-  // Use findById correctly with the id parameter from the request
-  const basket = await Basket.findById(req.params.bid).maxTimeMS(2000);
-
-  // Check if group is null or undefined
-  if (!basket) {
-    return res.status(404).send("No basket found."); // Use return to exit the function after sending the response
-  }
-
-  // Send the found user
-  res.send(basket);
-  console.log("Sent Group");
-});
 
 router.get("/:basketid", async (req: Request, res: Response) => {
   // Ensure the database connection

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -117,7 +117,10 @@ function App() {
             {/* added route for individual group page */}
             <Route
               path="/items"
-              element={<ItemsPage stateVariable={{ user, token }} />}
+              element={<ItemsPage 
+                stateVariable={{ user, token }}
+              />
+            }
             />
             <Route
               path="/groups"

diff --git a/frontend/src/components/CompactItem.tsx b/frontend/src/components/CompactItem.tsx
@@ -1,5 +1,5 @@
 import {
-  Button,
+  IconButton,
   Popover,
   PopoverContent,
   PopoverTrigger,
@@ -9,38 +9,33 @@ import {
   PopoverBody,
   VStack,
   Box,
-  IconButton,
 } from "@chakra-ui/react";
-import { EditIcon } from "@chakra-ui/icons";
-
-interface Props {
-  name: string;
-  desc: string;
-  quant: number;
-  price: number;
-  pub: boolean;
-  assigned: boolean;
-}
+import { EditIcon, SearchIcon } from "@chakra-ui/icons";
+import { IItem } from "../../../backend/models/itemSchema";
 
-const CompactItem = ({ name, desc, quant, price, pub }: Props) => {
+const CompactItem = ({ item }: { item: IItem }) => {
   // Note: Colors not added yet, just basic structure
   return (
     <Popover>
       <PopoverTrigger>
-        <Button>Some clickable item component / more button</Button>
+        <IconButton aria-label="More" icon={<SearchIcon />} />
       </PopoverTrigger>
       <PopoverContent>
         <PopoverArrow />
         <PopoverCloseButton />
-        <PopoverHeader>{name}</PopoverHeader>
+        <PopoverHeader>{item.name}</PopoverHeader>
         <PopoverBody>
           <VStack alignItems="flex-end">
             <VStack alignItems="flex-start">
-              <Box>Description: {desc}</Box>
-              <Box>Quantity: {quant}</Box>
-              <Box>Price (per item): {price}</Box>
-              {quant > 1 ? <Box>{`\nTotal price: ${price * quant}`}</Box> : ""}
-              <Box>Viewability: {pub ? "Public" : "Private"}</Box>
+              <Box>Description: {item.notes}</Box>
+              <Box>Quantity: {item.quantity}</Box>
+              <Box>Price (per item): {item.price}</Box>
+              {item.quantity > 1 ? (
+                <Box>{`\nTotal price: ${item.price * item.quantity}`}</Box>
+              ) : (
+                ""
+              )}
+              <Box>Viewability: {item.isPrivate ? "Public" : "Private"}</Box>
             </VStack>
             <IconButton aria-label="Edit item" icon={<EditIcon />} />
           </VStack>

diff --git a/frontend/src/components/EditItem.tsx b/frontend/src/components/EditItem.tsx
@@ -22,7 +22,9 @@ import {
   Radio,
   RadioGroup,
   Text,
+  IconButton,
 } from "@chakra-ui/react";
+import { SearchIcon } from "@chakra-ui/icons";
 import React, { useState, useEffect } from "react";
 import {} from "@chakra-ui/react";
 
@@ -87,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 = {
@@ -134,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);
     }
@@ -142,9 +131,7 @@ const EditItem: React.FC<Props> = ({ itemId }) => {
   return (
     <Popover>
       <PopoverTrigger>
-        <Button onClick={() => setIsEditing(false)}>
-          Some clickable item component / more button
-        </Button>
+        <IconButton aria-label="More" icon={<SearchIcon />} />
       </PopoverTrigger>
 
       <PopoverContent
@@ -266,7 +253,7 @@ const EditItem: React.FC<Props> = ({ itemId }) => {
                     </RadioGroup>
                   </FormControl>
                   <FormControl>
-                    <FormLabel fontWeight="bold">Is this sharable?</FormLabel>
+                    <FormLabel fontWeight="bold">Sharable?</FormLabel>
                     <RadioGroup
                       onChange={setEditedSharable}
                       value={editedSharable}
@@ -315,36 +302,27 @@ 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"
                       _hover={{
                         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