add shopping list to flatastic

biome.json

@@ -16,7 +16,7 @@
     "linter": {
         "enabled": true,
         "rules": {
-            "recommended": true
+            "preset": "recommended"
         }
     },
     "javascript": {

src/components/Dashboard/Dashboard.tsx

@@ -83,19 +83,6 @@ export default function Dashboard() {
                         <Card icon="🍁" name="420">
                             <FourTwenty />
                         </Card>
-                        <Card icon="🌐" name="GCP Dot">
-                            <iframe
-                                src="https://global-mind.org/gcpdot/gcp.html"
-                                title="GCP Dot"
-                                style={{
-                                    width: "112",
-                                    height: "112",
-                                    border: "none",
-                                    margin: "0",
-                                    scrollbarWidth: "none",
-                                }}
-                            ></iframe>
-                        </Card>
                     </CardRow>
 
                     <Card icon="🔔" name="Terminal" active={true}>

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>) {
@@ -43,6 +43,9 @@ function choreItem(chore: FlatasticChore, idToNameMap: Record<number, string>) {
 export default function Flatastic() {
     const fetchFlatasticData = useFlatasticStore((state) => state.fetch);
     const flatasticData = useFlatasticStore((state) => state.flatasticData);
+
+    console.log("flatasticData", flatasticData);
+
     const chores = (flatasticData?.chores as FlatasticChore[]) || [];
     const regularChores: FlatasticChore[] = [];
     const irregularChores: FlatasticChore[] = [];
@@ -81,12 +84,37 @@ export default function Flatastic() {
         return choreItem(chore, idToNameMap);
     });
 
+    const shoppingList = flatasticData?.shoppingList || [];
+
+    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}>
-            <h1>Chores</h1>
-            <ul className={style.choreList}>
-                {[...regularChoresRender, ...irregularChoresRender]}
-            </ul>
+            <div className={style.choreContainer}>
+                <h1>Chores</h1>
+                <ul className={style.choreList}>
+                    {[...regularChoresRender, ...irregularChoresRender]}
+                </ul>
+            </div>
+
+            {shoppingListContainer}
         </div>
     );
 }
+
+
+function shoppingItem(item: FlatasticShoppingItem) {
+    return (
+        <li key={item.id} className={style.shoppingListItem}>
+            {item.itemName}
+        </li>
+    );
+}

src/components/Flatastic/style.module.css

@@ -1,5 +1,34 @@
 .container {
     padding: 1px 100px 30px 100px;
+    display: flex;
+    flex-direction: row;
+}
+
+.choreContainer {
+    flex: 7;
+}
+
+.shoppingListContainer {
+    flex: 3;
+    padding-left: 20px;
+}
+
+.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 {
@@ -39,4 +68,4 @@
 
 .timeLeft {
     font-weight: bold;
-}
+}

src/store/flatastic.ts

@@ -1,7 +1,11 @@
 import { create } from "zustand";
 import { devtools } from "zustand/middleware";
 import Flatastic from "@/api/flatastic";
-import type { FlatasticChore, FlatasticUser } from "@/types/flatasticChore";
+import type {
+    FlatasticChore,
+    FlatasticShoppingItem,
+    FlatasticUser,
+} from "@/types/flatasticChore";
 
 // biome-ignore format: deep
 function parseInformationData(data): FlatasticUser[] {
@@ -17,6 +21,7 @@ const useFlatasticStore = create(
             flatasticData: {
                 chores: [] as FlatasticChore[],
                 users: [] as FlatasticUser[],
+                shoppingList: [] as FlatasticShoppingItem[],
             },
             fetch: async () => {
                 if (!import.meta.env.VITE_FLATTASTIC_API_KEY) {
@@ -25,13 +30,29 @@ const useFlatasticStore = create(
                 const flatastic = new Flatastic(
                     import.meta.env.VITE_FLATTASTIC_API_KEY,
                 );
-                const data = await flatastic.getTaskList();
-                const dataB = await flatastic.getInformation();
+                const taskList = await flatastic.getTaskList();
+                const generalInformatiom = await flatastic.getInformation();
+                const shoppingList = await flatastic.getShoppingList();
+
+                const filteredShoppingList = [];
+
+                for (const item of shoppingList) {
+                    if (!item.bought) {
+                        const shoppingItem: FlatasticShoppingItem = {
+                            itemName: item.itemName,
+                            bought: item.bought,
+                            id: item.id,
+                        };
+                        filteredShoppingList.push(shoppingItem);
+                    }
+                }
 
                 set({
                     flatasticData: {
-                        chores: data as FlatasticChore[],
-                        users: parseInformationData(dataB),
+                        chores: taskList as FlatasticChore[],
+                        users: parseInformationData(generalInformatiom),
+                        shoppingList:
+                            filteredShoppingList as FlatasticShoppingItem[],
                     },
                 });
             },

src/types/flatasticChore.ts

@@ -8,6 +8,12 @@ interface FlatasticUser {
     firstName: string;
 }
 
+interface FlatasticShoppingItem {
+    itemName: string;
+    bought: boolean;
+    id: string;
+}
+
 interface FlatasticChore {
     id: number;
     title: string;
@@ -20,4 +26,4 @@ interface FlatasticChore {
     timeLeftNext: number;
 }
 
-export type { Flatastic, FlatasticChore, FlatasticUser };
+export type { Flatastic, FlatasticChore, FlatasticShoppingItem, FlatasticUser };