Skip to content

Commit

Permalink
feat: adds add item button, weird copying of items bug and every acti…
Browse files Browse the repository at this point in the history 
…on requires a refresh or the useeffect enters a infinate loop
  • Loading branch information
@SilveerDusk
SilveerDusk committed May 26, 2024
1 parent 0863b3c commit 20ff47f
Show file tree
Hide file tree
Showing 3 changed files with 108 additions and 117 deletions.
34 changes: 6 additions & 28 deletions frontend/src/components/EditItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -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
Expand Down
149 changes: 82 additions & 67 deletions frontend/src/components/ItemGroup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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) {
Expand All @@ -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)) {
Expand Down Expand Up @@ -139,6 +149,7 @@ const ItemGroup: React.FC<Props> = ({
}
}
});
window.location.reload();
};

const moveItem = async (basket: IBasket, item: IItem) => {
Expand Down Expand Up @@ -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>
);
};
Expand Down
42 changes: 20 additions & 22 deletions frontend/src/components/NewItemOptions.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import {
Button,
IconButton,
Flex,
Box,
Heading,
Popover,
PopoverCloseButton,
PopoverContent,
Expand All @@ -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 (
Expand Down Expand Up @@ -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>
);
Expand Down Expand Up @@ -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)"
Expand Down

0 comments on commit 20ff47f

Please sign in to comment.