feat: adds item details and edit it features

Gather307 · May 26, 2024 · 0385470 · 0385470
1 parent 9109892
commit 0385470
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
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";
 
@@ -142,9 +144,10 @@ 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 +269,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}

diff --git a/frontend/src/components/ItemGroup.tsx b/frontend/src/components/ItemGroup.tsx
@@ -16,8 +16,7 @@ import { IGroup } from "../../../backend/models/groupSchema";
 import { IBasket } from "../../../backend/models/basketSchema";
 import { IItem } from "../../../backend/models/itemSchema";
 import { useEffect } from "react";
-import CompactItem from "./CompactItem";
-import { set } from "mongoose";
+import EditItem from "./EditItem";
 
 type Props = {
   group: IGroup;
@@ -34,7 +33,6 @@ const ItemGroup: React.FC<Props> = ({
   const [items, setItems] = React.useState<IItem[]>([]);
   const [baskets, setBaskets] = React.useState<IBasket[]>([]);
   const [loading, setLoading] = React.useState(true);
-  const [showDetails, setShowDetails] = React.useState(false);
   const category = group.groupName;
 
   const fetchBaskets = async (group: IGroup) => {
@@ -173,7 +171,7 @@ const ItemGroup: React.FC<Props> = ({
                 <Td width="25%">{item.name}</Td>
                 <Td width="50%">{item.notes}</Td>
                 <Td width="8%">
-                  <CompactItem item={items[0]} />
+                  <EditItem itemId={item._id.toString()} />
                 </Td>
                 <Td width="8%">
                   <IconButton