add shopping list to flatastic

src/components/Flatastic/Flatastic.tsx

@@ -1,7 +1,7 @@
 import classNames from "classnames";
 import { useEffect } from "react";
 import { useFlatasticStore } from "@/store/flatastic";
-import type { FlatasticChore, FlatasticUser } from "@/types/flatasticChore";
+import type { FlatasticChore, FlatasticShoppingItem, FlatasticUser } from "@/types/flatasticChore";
 import style from "./style.module.css";
 
 function choreItem(chore: FlatasticChore, idToNameMap: Record<number, string>) {
@@ -84,22 +84,17 @@ export default function Flatastic() {
         return choreItem(chore, idToNameMap);
     });
 
-    // TODO: implement shopping list
-    // const shoppingList = flatasticData?.shoppingList || [];
+    const shoppingList = flatasticData?.shoppingList || [];
 
-    // const shoppingListRender = shoppingList.map((item) => {
-    //     return (
-    //         <li key={item.id} className={style.shoppingListItem}>
-    //             {item.itemName}
-    //         </li>
-    //     );
-    // });
-    // const shoppingListContainer = shoppingList.length > 0 && (
-    //     <div className={style.shoppingListContainer}>
-    //         <h1>Shopping List</h1>
-    //         <ul className={style.shoppingList}>{shoppingListRender}</ul>
-    //     </div>
-    // );
+    const shoppingListRender = shoppingList.map((item) => {
+        return shoppingItem(item);
+    });
+    const shoppingListContainer = shoppingList.length > 0 && (
+        <div className={style.shoppingListContainer}>
+            <h1>Shopping List</h1>
+            <ul className={style.shoppingList}>{shoppingListRender}</ul>
+        </div>
+    );
 
     return (
         <div className={style.container}>
@@ -110,7 +105,16 @@ export default function Flatastic() {
                 </ul>
             </div>
 
-            {/* {shoppingListContainer} */}
+            {shoppingListContainer}
         </div>
     );
 }
+
+
+function shoppingItem(item: FlatasticShoppingItem) {
+    return (
+        <li key={item.id} className={style.shoppingListItem}>
+            {item.itemName}
+        </li>
+    );
+}

src/components/Flatastic/style.module.css

@@ -14,10 +14,23 @@
 }
 
 .shoppingList {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
     list-style-type: none;
     padding: 10px 0;
 }
 
+.shoppingListItem {
+    padding: 5px 10px;
+    text-align: left;
+    border-top: 2px solid white;
+    border-left: 2px solid white;
+    border-bottom: 2px solid #828282;
+    border-right: 2px solid #828282;
+}
+
 .choreList {
     list-style-type: none;
     display: flex;
@@ -55,4 +68,4 @@
 
 .timeLeft {
     font-weight: bold;
-}
+}