Refactor/pages and endpoint

.eslintrc.yml

@@ -16,9 +16,7 @@ plugins:
   - react
   - "@typescript-eslint"
 rules:
-  "no-shadow": "off"
   "@typescript-eslint/no-unused-vars": 1
-  "@typescript-eslint/no-shadow": ["error"]
   "@typescript-eslint/consistent-type-definitions": ["error", "type"]
   "react/jsx-filename-extension": [1, { "extensions": [".tsx"] }]
   react/function-component-definition: 0
@@ -27,6 +25,10 @@ rules:
   no-restricted-exports: 0
   no-unused-vars: 1
   "react/jsx-props-no-spreading": 0
+  "no-shadow": "off"
+  "@typescript-eslint/no-shadow": ["error"]
+  "react/require-default-props": 0
+  "object-curly-spacing": ["error", "always"]
   "import/extensions":
     - "error"
     - "ignorePackages"

.github/reviewer-lottery.yml

@@ -4,6 +4,5 @@ groups:
     internal_reviewers: 0
     usernames:
       - RealDyllon
-      - tayalaks2001
       - yankai14
       - ashwin2201

package.json

@@ -8,6 +8,7 @@
     "@chakra-ui/react": "^1.8.3",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
+    "@tanstack/react-query": "^4.0.10",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",

src/App.tsx

@@ -8,19 +8,24 @@ import "swiper/css/lazy";
 import "./App.css";
 import { ChakraProvider } from "@chakra-ui/react";
 import { BrowserRouter } from "react-router-dom";
-import { CartProvider } from "./context/cart";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import Routes from "./routes";
 import chakraTheme from "./config/theme";
+import { CartProvider } from "./context/cart";
+
+const queryClient = new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false } } });
 
 const App = () => {
   return (
-    <ChakraProvider theme={chakraTheme}>
-      <BrowserRouter>
-        <CartProvider>
-          <Routes />
-        </CartProvider>
-      </BrowserRouter>
-    </ChakraProvider>
+    <QueryClientProvider client={queryClient}>
+      <ChakraProvider theme={chakraTheme}>
+        <BrowserRouter>
+          <CartProvider>
+            <Routes />
+          </CartProvider>
+        </BrowserRouter>
+      </ChakraProvider>
+    </QueryClientProvider>
   );
 };
 

src/components/CartCard.tsx

@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+import { Flex, FlexProps, Text, Divider } from "@chakra-ui/react";
+
+type CartCardProps = FlexProps & {
+  title?: string;
+  children: ReactNode;
+};
+
+const CartCard = ({ children, title, ...props }: CartCardProps) => {
+  return (
+    <Flex px={3} py={4} gap={4} flexDir="column" borderWidth="1px" borderRadius="lg" {...props}>
+      <Text fontWeight={600}>{title} </Text>
+      <Divider />
+      {children}
+    </Flex>
+  );
+};
+
+export default CartCard;

src/components/Footer.tsx

@@ -48,7 +48,7 @@ function Footer() {
           <FooterLink href="/">Resources</FooterLink>
         </Grid>
       </Box>
-      <Image src="./images/vercellogo.svg" w={48} objectFit="contain" my={5} />
+      <Image src="/images/vercellogo.svg" w={48} objectFit="contain" my={5} />
     </Flex>
   );
 }

src/components/Header.tsx

@@ -1,6 +1,7 @@
 import { HamburgerIcon } from "@chakra-ui/icons";
+import { AiOutlineShoppingCart } from "react-icons/ai";
 import {
-  Link,
+  Badge,
   Flex,
   Heading,
   Button,
@@ -17,39 +18,44 @@ import {
   DrawerBody,
   Grid,
   Hide,
+  Icon,
 } from "@chakra-ui/react";
-import React, { useRef } from "react";
+import React, { useRef, useState, useEffect } from "react";
 import { Link as RouterLink } from "react-router-dom";
 import CognitoClient from "../utils/aws/cognito/cognitoClient";
+import routes from "../utils/constants/routes";
+import { useCartStore } from "../context/cart";
+import { CartItemType } from "../typings/cart";
 
-const HeaderDrawer = () => {
+type HeaderDrawerProp = {
+  cartLength?: number;
+};
+
+const HeaderDrawer: React.FC<HeaderDrawerProp> = ({ cartLength = 0 }) => {
   const btnRef = useRef<HTMLButtonElement>(null);
   const { isOpen, onOpen, onClose } = useDisclosure();
 
   return (
     <>
-      <IconButton
-        ref={btnRef}
-        onClick={onOpen}
-        aria-label="Toggle Header Menu"
-        icon={<HamburgerIcon />}
-      />
-      <Drawer
-        isOpen={isOpen}
-        placement="right"
-        onClose={onClose}
-        finalFocusRef={btnRef}
-      >
+      <RouterLink to={routes.CART}>
+        <Flex alignItems="center" gap={1} mr={4}>
+          <Icon as={AiOutlineShoppingCart} w={5} h={5} />
+          {cartLength > 0 && <Badge>{cartLength > 99 ? "99+" : cartLength}</Badge>}
+        </Flex>
+      </RouterLink>
+      <IconButton ref={btnRef} onClick={onOpen} aria-label="Toggle Header Menu" icon={<HamburgerIcon />} />
+      <Drawer isOpen={isOpen} placement="right" onClose={onClose} finalFocusRef={btnRef}>
         <DrawerOverlay />
         <DrawerContent>
           <DrawerCloseButton size="lg" />
-
           <DrawerBody pt={8}>
             <Grid rowGap={4}>
-              <Heading size="lg">Home</Heading>
-              <Heading size="lg">Projects</Heading>
-              <Heading size="lg">About Us</Heading>
-              <Heading size="lg">Merchandise</Heading>
+              <RouterLink to={routes.HOME}>
+                <Heading size="lg">Home</Heading>
+              </RouterLink>
+              <RouterLink to={routes.MERCHANDISE_LIST}>
+                <Heading size="lg">Merchandise</Heading>
+              </RouterLink>
             </Grid>
           </DrawerBody>
         </DrawerContent>
@@ -59,38 +65,53 @@ const HeaderDrawer = () => {
 };
 
 const Header = () => {
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const cartContext = useCartStore();
+  const { state: cartState } = cartContext;
+  const cartLength = cartState.items.reduce((acc: number, cur: CartItemType) => acc + cur.quantity, 0);
 
-  const [isAuthenticated, setIsAuthenticated] = React.useState(false);
-  React.useEffect(() => {
+  useEffect(() => {
     CognitoClient.isUserSignedIn().then((isSignedIn) => {
-      setIsAuthenticated(isSignedIn)
+      setIsAuthenticated(isSignedIn);
     });
   }, []);
-  
+
   return (
     <Flex py={4} px={{ base: 4, md: 4, lg: 16 }} align="center">
       <HStack spacing={2}>
-        <Image src="/images/SCSE-Logo.png" alt="SCSE Logo" boxSize={14} />
-        <Heading>SCSE CLUB</Heading>
+        <RouterLink to={routes.HOME}>
+          <Flex alignItems="center">
+            <Image src="/images/SCSE-Logo.png" alt="SCSE Logo" boxSize={14} />
+            <Heading ml={1}>SCSE CLUB</Heading>
+          </Flex>
+        </RouterLink>
       </HStack>
 
       <Spacer />
       <Show below="xl">
-        <HeaderDrawer />
+        <HeaderDrawer cartLength={cartLength} />
       </Show>
       <Hide below="xl">
-        <HStack spacing={5}>
-          <Link href="/" fontWeight="700">
-            Home
-          </Link>
-          {/* <Link href="/">Projects</Link> */}
-          {/* <Link href="/">About Us</Link> */}
-          <Link href="/merchandise-list">Merchandise</Link>
-          {!isAuthenticated && (<><Button to="/sign-in" as={RouterLink} variant="outline" px={12}>
-            Sign in
-          </Button><Button to="/sign-up" as={RouterLink} variant="solid">
-              Create an Account
-            </Button></>)}
+        <HStack spacing={5} alignItems="center">
+          <RouterLink to={routes.HOME}>Home</RouterLink>
+          <RouterLink to={routes.MERCHANDISE_LIST}>Merchandise</RouterLink>
+          <RouterLink to={routes.CART}>
+            <Flex alignItems="center" gap={1}>
+              <Icon as={AiOutlineShoppingCart} w={5} h={5} />
+              {cartLength > 0 && <Badge>{cartLength > 99 ? "99+" : cartLength}</Badge>}
+            </Flex>
+          </RouterLink>
+          {/* TODO: Sign Out */}
+          {!isAuthenticated && (
+            <>
+              <Button to="/sign-in" as={RouterLink} variant="outline" px={12}>
+                Sign in
+              </Button>
+              <Button to="/sign-up" as={RouterLink} variant="solid">
+                Create an Account
+              </Button>
+            </>
+          )}
         </HStack>
       </Hide>
     </Flex>

src/components/OrderItem.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Flex, Grid, GridItem, Image, Text, Divider } from "@chakra-ui/react";
+import { Flex, Grid, GridItem, Image, Text, Divider, Box } from "@chakra-ui/react";
 import { OrderItemType } from "../typings/order";
 
 export type OrderItemProps = {
@@ -18,40 +18,40 @@ const OrderItem: React.FC<OrderItemProps> = (props: OrderItemProps) => {
 
   return (
     <>
-      <Flex my="4" justifyContent="left">
-        <Image width="100" height="100" objectFit="cover" src={data.imgUrl} />
-        <Grid
-          flex={1}
-          templateColumns={!isMobile ? "3fr repeat(3, 1fr)" : "3fr"}
-        >
+      <Flex my="4" justifyContent="center">
+        <Box boxShadow="sm" borderRadius={5} maxW={isMobile ? 150 : 100}>
+          <Image w="100%" borderRadius={5} src={data?.image} fallbackSrc="https://via.placeholder.com/100" />
+        </Box>
+        <Grid flex={1} templateColumns={!isMobile ? "3fr repeat(3, 1fr)" : "1fr"} rowGap={2}>
           <GridItem pl="4">
-            <Flex h={isMobile ? "auto" : 100} alignItems="center">
-              <Text fontSize={isMobile ? "xs" : "md"}>
-                {data.itemName}
-                <br />
-                Size: {data.size}
-              </Text>
+            <Flex h={isMobile ? "auto" : 100} flexDir="column" fontWeight="600" fontSize={isMobile ? "sm" : "md"}>
+              <Text color="primary.600">{data?.name}</Text>
+              <Flex color="grey">
+                Size:
+                <Text ml={1} textTransform="uppercase">
+                  {data.size}
+                </Text>
+              </Flex>
             </Flex>
           </GridItem>
           <GridItem pl="4">
             <Flex {...flexItemConfig}>
-              <Text fontSize={isMobile ? "xs" : "md"}>
-                {isMobile && "Unit Price:"} ${data.price.toFixed(2)}
+              <Text fontSize={isMobile ? "sm" : "md"} fontWeight={500}>
+                {isMobile && "Unit Price:"} ${data?.price?.toFixed(2) ?? 0}
               </Text>
             </Flex>
           </GridItem>
           <GridItem pl="4">
             <Flex {...flexItemConfig}>
-              <Text fontSize={isMobile ? "xs" : "md"}>
-                {isMobile && "Quantity:"} {`x${data.quantity}`}
+              <Text fontSize={isMobile ? "sm" : "md"} fontWeight={500}>
+                {isMobile && "Quantity:"} x{data?.quantity ?? 0}
               </Text>
             </Flex>
           </GridItem>
           <GridItem pl="4">
             <Flex {...flexItemConfig}>
-              <Text fontSize={isMobile ? "xs" : "md"}>
-                {isMobile && "Subtotal:"} $
-                {(data.price * data.quantity).toFixed(2)}
+              <Text fontSize={isMobile ? "sm" : "md"} fontWeight={500}>
+                {isMobile && "Subtotal:"} ${(data.price * data.quantity).toFixed(2)}
               </Text>
             </Flex>
           </GridItem>