Merge pull request #83 from fac30/fix-persist-checked-box

Fix persist checked box
fac30 · Dec 15, 2024 · 89e1a1e · 89e1a1e
2 parents 50a7f54 + c29e3e1
commit 89e1a1e
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 42 deletions.
diff --git a/src/app/toolkit/components/SortableItem.tsx b/src/app/toolkit/components/SortableItem.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { Bars3Icon } from "@heroicons/react/24/outline";
+import { Bars3Icon, PhotoIcon } from "@heroicons/react/24/outline";
 import Button from "@/ui/shared/Button";
 import { useState } from "react";
 import Modal from "@/ui/shared/Modal";
@@ -79,23 +79,13 @@ export default function SortableItem({
               className="h-10 w-10 object-cover rounded"
             />
           ) : (
-            <div className="h-10 w-10"></div> // Reserve space when no image
+            <div className="h-10 w-10 flex items-center justify-center bg-twd-background rounded">
+            {/* Use a Heroicon as a placeholder */}
+              <PhotoIcon className="h-10 w-10 text-slate-300" />
+            </div>
+            // <div className="h-10 w-10"></div> // Reserve space when no image
           )}
 
-          {/* Display the link or reserve space */}
-          {/* {isValidUrl(item.infoUrl) ? (
-            <a
-              href={item.infoUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="bg-twd-primary-purple text-sm rounded-full font-normal py-[6px] px-[14px]"
-            >
-              Go to resource
-            </a>
-          ) : (
-            <div className="w-24"></div> // Reserve space for the link (adjust width as needed)
-          )} */}
-
           {isValidUrl(item.infoUrl) ? (
             <Button
               onClick={() => {
@@ -109,24 +99,6 @@ export default function SortableItem({
           )}
 
           {/* Delete button */}
-          {/* <button
-            onClick={(e) => {
-              e.stopPropagation();
-              handleDelete(item.id);
-            }}
-            className="ml-4 text-white"
-          >
-            Delete
-          </button> */}
-          {/* <Button
-            onEventClick={(e) => {
-              e.stopPropagation();
-              handleDelete(item.id);
-            }}
-            label="delete"
-            className="bg-twd-secondary-purple  font-normal py-[6px] px-[14px]"
-          />
-        </div> */}
           <Button
             onEventClick={(e) => {
               e.stopPropagation();

diff --git a/src/app/toolkit/components/ToolList.tsx b/src/app/toolkit/components/ToolList.tsx
@@ -57,7 +57,7 @@ export default function ToolkitList() {
   }, []);
 
   // Toggle item `checked` state
-  const handleToggle = (id: string) => {
+  const handleToggle = async (id: string) => {
     setMainData((prevData) =>
       prevData.map((item) =>
         item.id === id ? { ...item, checked: !item.checked } : item
@@ -68,6 +68,17 @@ export default function ToolkitList() {
         item.id === id ? { ...item, checked: !item.checked } : item
       )
     );
+
+    // Find the item to update
+    const updatedItem = mainData.find((item) => item.id === id);
+    if (updatedItem) {
+      try {
+        // Update in database
+        await database.updateDocument("toolkit_items", id, "checked", !updatedItem.checked );
+      } catch (error) {
+        console.error("Error updating checked status in database:", error);
+      }
+    }
   };
 
   // Delete an item

diff --git a/src/lib/db/DatabaseManager.ts b/src/lib/db/DatabaseManager.ts
@@ -176,7 +176,7 @@ class DatabaseManager {
     collectionName: string,
     docId: string,
     field: string,
-    update: string | object
+    update: string | object | boolean
   ) {
     try {
       const db = await this.accessDatabase();

diff --git a/src/ui/shared/Search.tsx b/src/ui/shared/Search.tsx
@@ -35,12 +35,10 @@ export default function Search({ onSearch, onClear }: SearchProps) {
   };
 
   return (
-    <div className="relative flex items-center space-x-2">
-      {/* Text and magnifying glass on one line */}
-      <div className="flex items-center justify-between">
+      <div className="relative flex items-center justify-between">
+              {/* Text and magnifying glass on one line */}
         <span className="text-white font-normal text-md my-4">
-          Fill your toolkit with things that <span className="">help</span> if
-          you are spiralling
+          Fill your toolkit with things that <span className="">help</span>
         </span>
         {/* Conditionally render the magnifying glass */}
         {!isInputVisible && (
@@ -73,6 +71,6 @@ export default function Search({ onSearch, onClear }: SearchProps) {
           </div>
         )}
       </div>
-    </div>
+
   );
 }