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;
-}
+}

src/store/flatastic.ts

@@ -4,7 +4,6 @@ import Flatastic from "@/api/flatastic";
 import type {
     FlatasticChore,
     FlatasticShoppingItem,
-    FlatasticShoppingList,
     FlatasticUser,
 } from "@/types/flatasticChore";
 
@@ -22,7 +21,7 @@ const useFlatasticStore = create(
             flatasticData: {
                 chores: [] as FlatasticChore[],
                 users: [] as FlatasticUser[],
-                shoppingList: [] as FlatasticShoppingList[],
+                shoppingList: [] as FlatasticShoppingItem[],
             },
             fetch: async () => {
                 if (!import.meta.env.VITE_FLATTASTIC_API_KEY) {
@@ -53,7 +52,7 @@ const useFlatasticStore = create(
                         chores: taskList as FlatasticChore[],
                         users: parseInformationData(generalInformatiom),
                         shoppingList:
-                            filteredShoppingList as FlatasticShoppingList[],
+                            filteredShoppingList as FlatasticShoppingItem[],
                     },
                 });
             },

src/types/flatasticChore.ts

@@ -14,10 +14,6 @@ interface FlatasticShoppingItem {
     id: string;
 }
 
-interface FlatasticShoppingList {
-    items: Array<FlatasticShoppingItem>;
-}
-
 interface FlatasticChore {
     id: number;
     title: string;
@@ -30,10 +26,4 @@ interface FlatasticChore {
     timeLeftNext: number;
 }
 
-export type {
-    Flatastic,
-    FlatasticChore,
-    FlatasticShoppingItem,
-    FlatasticShoppingList,
-    FlatasticUser,
-};
+export type { Flatastic, FlatasticChore, FlatasticShoppingItem, FlatasticUser };