Feature/needs page

__tests__/NeedsDisplay.test.tsx

@@ -0,0 +1,68 @@
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import NeedsDisplay from "@/app/needs/components/NeedsDisplay";
+import { needs, needsCategories } from "@/lib/db/seed/needs";
+
+jest.mock("@/context/DatabaseContext", () => ({
+  useDatabase: jest.fn(() => ({
+    getFromDb: jest.fn((table) => {
+      if (table === "needs_categories") {
+        return Promise.resolve(
+          needsCategories.map((category) => ({
+            ...category,
+            toJSON: () => category,
+          }))
+        );
+      }
+      if (table === "needs") {
+        return Promise.resolve(
+          needs.map((need) => ({ ...need, toJSON: () => need }))
+        );
+      }
+    }),
+    updateDocument: jest.fn(),
+  })),
+}));
+
+jest.mock("next/navigation", () => ({
+  useRouter: jest.fn(() => ({
+    push: jest.fn(),
+  })),
+}));
+
+describe("NeedsDisplay Component", () => {
+  const mockUpdateDocument = jest
+    .requireMock("@/context/DatabaseContext")
+    .useDatabase().updateDocument;
+
+  test("handles modal interactions for unselected needs", async () => {
+    render(<NeedsDisplay />);
+    const unselectedNeed = needs.find((need) => !need.selectedExpiry);
+    if (!unselectedNeed) return;
+
+    fireEvent.click(await screen.findByText(unselectedNeed.name));
+    expect(
+      await screen.findByText(`You have selected ~${unselectedNeed.name}~`)
+    ).toBeInTheDocument();
+  });
+
+  test("updates the database correctly when deselecting a need", async () => {
+    render(<NeedsDisplay />);
+    const selectedNeed = needs.find(
+      (need) =>
+        need.selectedExpiry && new Date(need.selectedExpiry) > new Date()
+    );
+    if (!selectedNeed) return;
+
+    fireEvent.click(await screen.findByText(selectedNeed.name));
+    fireEvent.click(await screen.findByText("Yes"));
+
+    await waitFor(() => {
+      expect(mockUpdateDocument).toHaveBeenCalledWith(
+        "needs",
+        selectedNeed.id,
+        "selectedExpiry",
+        expect.any(String)
+      );
+    });
+  });
+});

__tests__/NeedsModal.test.tsx

@@ -0,0 +1,134 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import NeedsModal from "@/app/needs/components/NeedsModal";
+
+describe("NeedsModal Component", () => {
+  const mockHandleCloseClick = jest.fn();
+  const mockHandleBackClick = jest.fn();
+  const mockHandlePositiveClick = jest.fn();
+  const mockHandleNegativeClick = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test("closes the modal on close icon click", () => {
+    render(
+      <NeedsModal
+        modalOpen={true}
+        title="Test Need"
+        needsStep={2}
+        urgent={0}
+        effortful={0}
+        worthDoing={0}
+        positiveLabel="Next"
+        negativeLabel="Skip"
+        handlePositiveClick={mockHandlePositiveClick}
+        handleNegativeClick={mockHandleNegativeClick}
+        handleBackClick={mockHandleBackClick}
+        handleCloseClick={mockHandleCloseClick}
+      />
+    );
+
+    const closeButton = screen.getByRole("button", { name: "Close" });
+    fireEvent.click(closeButton);
+    expect(mockHandleCloseClick).toHaveBeenCalled();
+  });
+
+  test("renders modal content correctly", () => {
+    render(
+      <NeedsModal
+        modalOpen={true}
+        title="Test Need"
+        needsStep={1}
+        urgent={0}
+        effortful={0}
+        worthDoing={0}
+        positiveLabel="Next"
+        negativeLabel="Skip"
+        handlePositiveClick={mockHandlePositiveClick}
+        handleNegativeClick={mockHandleNegativeClick}
+        handleBackClick={mockHandleBackClick}
+        handleCloseClick={mockHandleCloseClick}
+      />
+    );
+
+    expect(screen.getByText("Step 1 of 3")).toBeInTheDocument();
+    expect(screen.getByText("Test Need")).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        "Select the button that best describes meeting this need right now."
+      )
+    ).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Skip" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Next" })).toBeInTheDocument();
+  });
+
+  test("handles the back button click on step 2 or higher", () => {
+    render(
+      <NeedsModal
+        modalOpen={true}
+        title="Test Need"
+        needsStep={2}
+        urgent={0}
+        effortful={0}
+        worthDoing={0}
+        positiveLabel="Next"
+        negativeLabel="Skip"
+        handlePositiveClick={mockHandlePositiveClick}
+        handleNegativeClick={mockHandleNegativeClick}
+        handleBackClick={mockHandleBackClick}
+        handleCloseClick={mockHandleCloseClick}
+      />
+    );
+
+    const backButton = screen.getByRole("button", { name: "Back" });
+    fireEvent.click(backButton);
+    expect(mockHandleBackClick).toHaveBeenCalled();
+  });
+
+  test("handles positive button click", () => {
+    render(
+      <NeedsModal
+        modalOpen={true}
+        title="Test Need"
+        needsStep={1}
+        urgent={0}
+        effortful={0}
+        worthDoing={0}
+        positiveLabel="Next"
+        negativeLabel="Skip"
+        handlePositiveClick={mockHandlePositiveClick}
+        handleNegativeClick={mockHandleNegativeClick}
+        handleBackClick={mockHandleBackClick}
+        handleCloseClick={mockHandleCloseClick}
+      />
+    );
+
+    const positiveButton = screen.getByRole("button", { name: "Next" });
+    fireEvent.click(positiveButton);
+    expect(mockHandlePositiveClick).toHaveBeenCalled();
+  });
+
+  test("handles negative button click", () => {
+    render(
+      <NeedsModal
+        modalOpen={true}
+        title="Test Need"
+        needsStep={1}
+        urgent={0}
+        effortful={0}
+        worthDoing={0}
+        positiveLabel="Next"
+        negativeLabel="Skip"
+        handlePositiveClick={mockHandlePositiveClick}
+        handleNegativeClick={mockHandleNegativeClick}
+        handleBackClick={mockHandleBackClick}
+        handleCloseClick={mockHandleCloseClick}
+      />
+    );
+
+    const negativeButton = screen.getByRole("button", { name: "Skip" });
+    fireEvent.click(negativeButton);
+    expect(mockHandleNegativeClick).toHaveBeenCalled();
+  });
+});

__tests__/Section.test.tsx

@@ -0,0 +1,56 @@
+import Section from "@/app/needs/components/Section";
+import { render, screen, fireEvent } from "@testing-library/react";
+
+describe("Section Component", () => {
+  const mockHandleOpen = jest.fn();
+  const mockCategoryData = {
+    key: "Category 1",
+    items: [
+      {
+        id: "1",
+        name: "Need 1",
+        highlighted: true,
+        label: "Need 1",
+        mood: "joy",
+      },
+      {
+        id: "2",
+        name: "Need 2",
+        highlighted: false,
+        label: "Need 2",
+        mood: "",
+      },
+    ],
+  };
+
+  test("renders section with items", () => {
+    render(
+      <Section categoryData={mockCategoryData} handleOpen={mockHandleOpen} />
+    );
+
+    expect(screen.getByText("Category 1")).toBeInTheDocument();
+    expect(screen.getByText("Need 1")).toBeInTheDocument();
+    expect(screen.getByText("Need 2")).toBeInTheDocument();
+  });
+
+  test("applies correct styles for highlighted and non-highlighted items", () => {
+    render(
+      <Section categoryData={mockCategoryData} handleOpen={mockHandleOpen} />
+    );
+
+    const highlightedButton = screen.getByText("Need 1");
+    const nonHighlightedButton = screen.getByText("Need 2");
+
+    expect(highlightedButton).toHaveClass("bg-twd-mood-joy-yellow");
+    expect(nonHighlightedButton).toHaveClass("bg-gray-600");
+  });
+
+  test("calls handleOpen when item is clicked", () => {
+    render(
+      <Section categoryData={mockCategoryData} handleOpen={mockHandleOpen} />
+    );
+
+    fireEvent.click(screen.getByText("Need 1"));
+    expect(mockHandleOpen).toHaveBeenCalledWith(mockCategoryData.items[0]);
+  });
+});

package.json

@@ -41,6 +41,7 @@
     "@types/react-plotly.js": "^2.6.3",
     "eslint": "^8",
     "eslint-config-next": "15.0.3",
+    "eslint-plugin-react-hooks": "^5.1.0-rc-79ddf5b5-20241210",
     "husky": "^9.1.7",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",

src/app/insights/components/InsightsDisplay.tsx

@@ -4,12 +4,12 @@
 import { useDatabase } from "@/context/DatabaseContext";
 import LineGraph from "./LineGraph";
 import MoodAreaChart from "./AreaChart";
-import retrieveDataObject from "@/lib/utils/retrieveDataObject";
 import { useState, useEffect } from "react";
 
 import Button from "@/ui/shared/Button";
 import clsx from "clsx";
 import MoodStreamGraph from "./StreamGraph";
+import { RxDocument } from "rxdb";
 
 export interface Insight {
   neurotransmitters: {
@@ -71,19 +71,21 @@ export default function InsightsDisplay() {
   }, [/* useNow, */ selectedButton, now]);
 
   const getInsights = async () => {
-    const myInsights = await database.getFromDb("mood_records");
+    const insightsResponse = await database.getFromDb<RxDocument<Insight>>(
+      "mood_records"
+    );
 
-    if (!myInsights) {
+    if (!insightsResponse) {
       console.log("No insights found.");
       setInsights([]);
       return;
     }
-    const goodInsights = retrieveDataObject(myInsights);
 
-    setInsights(goodInsights);
+    const insightsData = insightsResponse.map((doc) => doc.toJSON() as Insight);
+    setInsights(insightsData);
 
-    if (goodInsights.length > 0) {
-      const latestInsight = goodInsights.reduce((acc, curr) => {
+    if (insightsData.length > 0) {
+      const latestInsight = insightsData.reduce((acc, curr) => {
         return new Date(curr.timestamp) > new Date(acc.timestamp) ? curr : acc;
       });
       setNow(new Date(latestInsight.timestamp));