Refactor/general

src/app/insights/components/InsightsDisplay.tsx

@@ -9,10 +9,8 @@ import { useState, useEffect } from "react";
 import Button from "@/ui/shared/Button";
 import clsx from "clsx";
 import MoodStreamGraph from "./StreamGraph";
-import { RxDocument } from "rxdb";
 import BarGraph from "./BarGraph";
 
-
 export interface Insight {
   neurotransmitters: {
     dopamine: number;
@@ -29,21 +27,25 @@ interface Need {
   id: string;
   name: string;
   category: string;
-  selectedTimestamps: string[]; 
-  timestamp: string; 
-  selectedExpiry?: string; 
+  mood?: string;
+  priority?: object;
+  selectedTimestamps: string[];
+  timestamp: string;
+  selectedExpiry?: string;
 }
 
 interface Category {
-  id: string; 
-  name: string; 
-  timestamp: string; 
+  id: string;
+  name: string;
+  timestamp: string;
 }
 
 export default function InsightsDisplay() {
   const database = useDatabase();
   const [insights, setInsights] = useState<Insight[] | null>(null);
-  const [needsData, setNeedsData] = useState<{ name: string; value: number }[] | null>(null);
+  const [needsData, setNeedsData] = useState<
+    { name: string; value: number }[] | null
+  >(null);
 
   const dateOptions = ["day", "week", "month", "year"];
 
@@ -89,9 +91,7 @@ export default function InsightsDisplay() {
   }, [/* useNow, */ selectedButton, now]);
 
   const getInsights = async () => {
-    const insightsResponse = await database.getFromDb<RxDocument<Insight>>(
-      "mood_records"
-    );
+    const insightsResponse = await database.getFromDb("mood_records");
 
     if (!insightsResponse) {
       console.log("No insights found.");
@@ -112,34 +112,38 @@ export default function InsightsDisplay() {
     }
   };
 
-
   const getNeedsData = async () => {
     try {
-      const needsResponse = await database.getFromDb<RxDocument<Need>>("needs");
-      const categoriesResponse = await database.getFromDb<RxDocument<Category>>("needs_categories");
+      const needsResponse = await database.getFromDb("needs");
+      const categoriesResponse = await database.getFromDb("needs_categories");
 
       const needs = needsResponse.map((doc) => doc.toJSON() as Need);
 
-      const categories = categoriesResponse.map((doc) => doc.toJSON() as Category);
+      const categories = categoriesResponse.map(
+        (doc) => doc.toJSON() as Category
+      );
 
       // Aggregate `selectedTimestamps` counts by category
-      const categoryCounts = needs.reduce((acc: Record<string, number>, need: Need) => {
-        const { category, selectedTimestamps } = need;
+      const categoryCounts = needs.reduce(
+        (acc: Record<string, number>, need: Need) => {
+          const { category, selectedTimestamps } = need;
 
-        if (!acc[category]) {
-          acc[category] = 0;
-        }
+          if (!acc[category]) {
+            acc[category] = 0;
+          }
 
-        acc[category] += selectedTimestamps ? selectedTimestamps.length : 0;
-        return acc;
-      }, {});
+          acc[category] += selectedTimestamps ? selectedTimestamps.length : 0;
+          return acc;
+        },
+        {}
+      );
 
       // Map categories to their names with counts
       const needsData = categories.map((category: Category) => ({
         name: category.name,
         value: categoryCounts[category.id] || 0,
       }));
-      
+
       console.log("Final Needs Data for BarGraph:", needsData);
       setNeedsData(needsData);
     } catch (error) {
@@ -152,20 +156,19 @@ export default function InsightsDisplay() {
     getNeedsData();
   }, []);
 
-
   const dummyNeedsData = [
     { name: "Integrity", value: 8 },
     { name: "Celebration", value: 35 },
     { name: "Physical Nurturance", value: 12 },
     { name: "Autonomy", value: 10 },
-    { name: "Harmony", value: 71 },  
+    { name: "Harmony", value: 71 },
     { name: "Play", value: 54 },
     { name: "Interdependence", value: 15 },
   ];
 
   return (
     <>
-      <div className="flex text-center w-full m-auto justify-between bg-twd-background py-2 px-4 sticky top-0 z-50">
+      <div className="flex text-center w-full m-auto justify-between bg-twd-background py-2 px-4 sticky top-0 z-10">
         {dateOptions.map((dateOption, index) => {
           const isActive = selectedButton === dateOption;
           return (
@@ -230,7 +233,7 @@ export default function InsightsDisplay() {
       {/* unmet needs graph */}
       {needsData === null ? (
         <div>Loading Needs Data...</div>
-      ) : needsData.some(item => item.value > 0) ? (
+      ) : needsData.some((item) => item.value > 0) ? (
         <BarGraph data={needsData} />
       ) : (
         <BarGraph data={dummyNeedsData} />

src/app/toolkit/components/CategoriesBar.tsx

@@ -42,8 +42,7 @@ export default function CategoriesBar({
       }
     };
     fetchCategories();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [refreshCategories]);
+  }, [database, refreshCategories]);
 
   const handleCategoriesClick = (category: string) => {
     setSelectedCategories(
@@ -64,11 +63,6 @@ export default function CategoriesBar({
         >
           <PlusCircleIcon className="w-7 m-auto " />
         </button>
-        {/* <Button
-          label="+"
-          onClick={openModal}
-          className="bg-twd-primary-purple"
-        /> */}
       </div>
 
       {/* Scrollable Categories */}

src/app/toolkit/components/ToolList.tsx

@@ -10,7 +10,6 @@ import {
 import SortableItem from "./SortableItem";
 import Search from "@/ui/shared/Search";
 import { useToolkit } from "@/context/ToolkitContext";
-import { RxDocument } from "rxdb";
 
 export interface ToolkitComponentData {
   id: string;
@@ -36,9 +35,7 @@ export default function ToolkitList() {
   useEffect(() => {
     const fetchData = async () => {
       try {
-        const items = await database.getFromDb<
-          RxDocument<ToolkitComponentData>
-        >("toolkit_items");
+        const items = await database.getFromDb("toolkit_items");
         if (items) {
           const toolkitData = items.map(
             (doc) => doc.toJSON() as ToolkitComponentData

src/lib/db/DatabaseManager.ts

@@ -1,4 +1,4 @@
-import { addRxPlugin, RxDocumentData } from "rxdb";
+import { addRxPlugin, RxDocument } from "rxdb";
 import { RxDBDevModePlugin } from "rxdb/plugins/dev-mode";
 import { getRxStorageDexie } from "rxdb/plugins/storage-dexie";
 import { createRxDatabase, RxDatabase } from "rxdb";
@@ -121,7 +121,7 @@ class DatabaseManager {
     }
   }
 
-  async getFromDb<T>(collection: string): Promise<RxDocumentData<T>[]> {
+  async getFromDb<T>(collection: string): Promise<RxDocument<T>[]> {
     const db = await this.accessDatabase();
     const collectionExists = db.collections[collection];
     if (!collectionExists)

src/ui/shared/InfoButton.tsx

@@ -54,7 +54,7 @@ export default function InfoButton({
       {isPopupOpen && (
         <div
           ref={popupRef}
-          className={`absolute z-10 w-64 p-4 bg-gray-800 text-white rounded-lg shadow-lg ${positionClasses[direction]}`}
+          className={`absolute z-20 w-64 p-4 bg-gray-800 text-white rounded-lg shadow-lg ${positionClasses[direction]}`}
         >
           <p className="text-sm">{popupText}</p>
           <div className="flex justify-between">