Skip to content

Commit

Permalink
added loading icons
Browse files Browse the repository at this point in the history
  • Loading branch information
@palldas
palldas committed Jun 4, 2024
1 parent 15cf4f0 commit 27ce39e
Show file tree
Hide file tree
Showing 6 changed files with 216 additions and 146 deletions.
2 changes: 1 addition & 1 deletion frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
"dotenv": "^16.4.5",
"framer-motion": "^11.1.9",
"framer-motion": "^11.2.10",
"mongoose": "^8.4.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
Expand Down
148 changes: 82 additions & 66 deletions frontend/src/components/Friends_List_Component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ import {
MenuList,
MenuItem,
Text,
Spinner,
Flex,
} from "@chakra-ui/react";
import { IGroup } from "../../../backend/models/groupSchema";
import { IUser } from "../../../backend/models/userSchema";
Expand Down Expand Up @@ -46,6 +48,7 @@ const Friends_List: React.FC<Props> = ({
const [friends, setFriends] = useState<IUser[]>([]);
const [userId, setUserId] = useState(initialUserId);
const [errorMessage, setErrorMessage] = useState("");
const [loading, setLoading] = useState(true);

useEffect(() => {
const fetchFriendsAndGroups = async () => {
Expand All @@ -65,6 +68,8 @@ const Friends_List: React.FC<Props> = ({
}
} catch (error) {
console.error("Error fetching friends:", error);
} finally {
setLoading(false);
}
};

Expand Down Expand Up @@ -186,74 +191,85 @@ const Friends_List: React.FC<Props> = ({
</FormControl>
</Box>
<TableContainer>
<Table variant="simple">
<Thead>
<Tr>
<Th>Friend's Username</Th>
<Th>Actions</Th>
</Tr>
</Thead>
<Tbody>
{friends.map((friend) => (
<Tr key={friend._id.toString()}>
<Td>{friend.username}</Td>
<Td>
<Box
display="flex"
justifyContent="center"
alignItems="center"
>
<Menu>
<MenuButton
as={Button}
colorScheme="teal"
rightIcon={<FaChevronDown />}
>
Add to Group
</MenuButton>
<MenuList bg="#dfe2e1">
{groups.length > 0 ? (
groups.map((group) => (
<MenuItem
bg="#dfe2e1"
_hover={{ bg: "#bfc2c1" }}
key={group._id.toString()}
onClick={() =>
handleGroupClick(
group._id.toString(),
friend._id,
)
}
>
{group.groupName}
</MenuItem>
))
) : (
<MenuItem disabled>No groups available</MenuItem>
)}
</MenuList>
</Menu>
</Box>
</Td>
<Td>
<Button
colorScheme="red"
onClick={() => removeFriend(friend._id.toString())}
>
<DeleteIcon />
</Button>
</Td>
</Tr>
))}
{friends.length === 0 && (
{loading ? (
<Flex justifyContent="center" alignItems="center" minHeight="200px">
<Spinner
size="lg"
thickness="4px"
speed="0.65s"
color="var(--col-secondary)"
/>
</Flex>
) : (
<Table variant="simple">
<Thead>
<Tr>
<Td colSpan={2} textAlign="center">
No friends currently
</Td>
<Th>Friend's Username</Th>
<Th>Actions</Th>
</Tr>
)}
</Tbody>
</Table>
</Thead>
<Tbody>
{friends.map((friend) => (
<Tr key={friend._id.toString()}>
<Td>{friend.username}</Td>
<Td>
<Box
display="flex"
justifyContent="center"
alignItems="center"
>
<Menu>
<MenuButton
as={Button}
colorScheme="teal"
rightIcon={<FaChevronDown />}
>
Add to Group
</MenuButton>
<MenuList bg="#dfe2e1">
{groups.length > 0 ? (
groups.map((group) => (
<MenuItem
bg="#dfe2e1"
_hover={{ bg: "#bfc2c1" }}
key={group._id.toString()}
onClick={() =>
handleGroupClick(
group._id.toString(),
friend._id,
)
}
>
{group.groupName}
</MenuItem>
))
) : (
<MenuItem disabled>No groups available</MenuItem>
)}
</MenuList>
</Menu>
</Box>
</Td>
<Td>
<Button
colorScheme="red"
onClick={() => removeFriend(friend._id.toString())}
>
<DeleteIcon />
</Button>
</Td>
</Tr>
))}
{friends.length === 0 && (
<Tr>
<Td colSpan={2} textAlign="center">
No friends currently
</Td>
</Tr>
)}
</Tbody>
</Table>
)}
</TableContainer>
</Box>
);
Expand Down
150 changes: 84 additions & 66 deletions frontend/src/components/ItemGroup.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from "react";
import React, { useEffect } from "react";
import {
Box,
Heading,
Expand All @@ -16,13 +16,15 @@ import {
MenuItem,
Button,
TableContainer,
Spinner,
Text,
Flex,
} from "@chakra-ui/react";
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";
import {
Expand Down Expand Up @@ -131,72 +133,88 @@ const ItemGroup: React.FC<Props> = ({
</Box>
</Box>
<Divider mt={2} mb={4} />
<TableContainer>
<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) => (
console.log(item),
(
<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>
)
),
)
) : (
{loading ? (
<Flex justifyContent="center" alignItems="center" minHeight="100px">
<Spinner
size="lg"
thickness="4px"
speed="0.65s"
color="var(--col-secondary)"
/>
</Flex>
) : (
<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>
</TableContainer>
</Thead>
<Tbody>
{items.length > 0 ? (
items.map(
(item, index) => (
console.log(item),
(
<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
Loading

0 comments on commit 27ce39e

Please sign in to comment.