From 0fd2d0590232f9672f72a2300102de8c48d28539 Mon Sep 17 00:00:00 2001
From: Arif Hasanic <arif@hasanic.com>
Date: Sat, 27 Jun 2026 21:20:12 +0200
Subject: [PATCH] add shopping list to flatastic

---
 src/components/Flatastic/Flatastic.tsx    | 38 +++++++++++++----------
 src/components/Flatastic/style.module.css | 15 ++++++++-
 src/store/flatastic.ts                    |  5 ++-
 src/types/flatasticChore.ts               | 12 +------
 4 files changed, 38 insertions(+), 32 deletions(-)

diff --git a/src/components/Flatastic/Flatastic.tsx b/src/components/Flatastic/Flatastic.tsx
index 496ab73..7115285 100644
--- a/src/components/Flatastic/Flatastic.tsx
+++ b/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>
+    );
+}
\ No newline at end of file
diff --git a/src/components/Flatastic/style.module.css b/src/components/Flatastic/style.module.css
index 75a1daa..79bbc1e 100644
--- a/src/components/Flatastic/style.module.css
+++ b/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;
-}
+}
\ No newline at end of file
diff --git a/src/store/flatastic.ts b/src/store/flatastic.ts
index fca3b45..83d0768 100644
--- a/src/store/flatastic.ts
+++ b/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[],
                     },
                 });
             },
diff --git a/src/types/flatasticChore.ts b/src/types/flatasticChore.ts
index d276780..f0888ce 100644
--- a/src/types/flatasticChore.ts
+++ b/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 };