prepare shopping cart feature

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

@@ -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,33 @@ export default function Flatastic() {
         return choreItem(chore, idToNameMap);
     });
 
+    // TODO: implement shopping list
+    // 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>
+    // );
+
     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>
     );
 }

src/components/Flatastic/style.module.css

@@ -1,5 +1,21 @@
 .container {
     padding: 1px 100px 30px 100px;
+    display: flex;
+    flex-direction: row;
+}
+
+.choreContainer {
+    flex: 7;
+}
+
+.shoppingListContainer {
+    flex: 3;
+    padding-left: 20px;
+}
+
+.shoppingList {
+    list-style-type: none;
+    padding: 10px 0;
 }
 
 .choreList {

src/store/flatastic.ts

@@ -1,7 +1,12 @@
 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,
+    FlatasticShoppingList,
+    FlatasticUser,
+} from "@/types/flatasticChore";
 
 // biome-ignore format: deep
 function parseInformationData(data): FlatasticUser[] {
@@ -17,6 +22,7 @@ const useFlatasticStore = create(
             flatasticData: {
                 chores: [] as FlatasticChore[],
                 users: [] as FlatasticUser[],
+                shoppingList: [] as FlatasticShoppingList[],
             },
             fetch: async () => {
                 if (!import.meta.env.VITE_FLATTASTIC_API_KEY) {
@@ -25,13 +31,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 FlatasticShoppingList[],
                     },
                 });
             },

src/types/flatasticChore.ts

@@ -8,6 +8,16 @@ interface FlatasticUser {
     firstName: string;
 }
 
+interface FlatasticShoppingItem {
+    itemName: string;
+    bought: boolean;
+    id: string;
+}
+
+interface FlatasticShoppingList {
+    items: Array<FlatasticShoppingItem>;
+}
+
 interface FlatasticChore {
     id: number;
     title: string;
@@ -20,4 +30,10 @@ interface FlatasticChore {
     timeLeftNext: number;
 }
 
-export type { Flatastic, FlatasticChore, FlatasticUser };
+export type {
+    Flatastic,
+    FlatasticChore,
+    FlatasticShoppingItem,
+    FlatasticShoppingList,
+    FlatasticUser,
+};