Add subtitle for SwipeCard

frontend/src/components/LoadingPage.test.tsx

@@ -30,4 +30,10 @@ describe("LoadingPage", () => {
       "bg-pink-700 flex flex-col items-center justify-center h-screen bg-gray-100",
     );
   });
+
+  it("displays a custom loading message when passed as a prop", () => {
+    const customMessage = "Please wait...";
+    render(<LoadingPage message={customMessage} />);
+    expect(screen.getByText(customMessage)).toBeInTheDocument();
+  });
 });

frontend/src/components/LoadingPage.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { GiFlamingo } from "react-icons/gi";
 
-function LoadingPage() {
+function LoadingPage({ message = "Loading..." }) {
   return (
     <div
       className="bg-pink-700 flex flex-col items-center justify-center h-screen bg-gray-100"
@@ -11,7 +11,7 @@ function LoadingPage() {
         className="text-white text-8xl animate-flip"
         data-testid="flamingo-icon"
       />
-      <p className="text-lg text-white mt-4">Loading...</p>
+      <p className="text-lg text-white mt-4">{message}</p>
     </div>
   );
 }

frontend/src/components/SwipeableCard.tsx

@@ -6,11 +6,12 @@ import { GrValidate } from "react-icons/gr";
 import "./SwipeableCard.css";
 
 interface SwipeableCardProps {
+  subtitle: string;
   content: string;
   onSwiped: (dir: string) => void;
 }
 
-function SwipeableCard({ content, onSwiped }: SwipeableCardProps) {
+function SwipeableCard({ subtitle, content, onSwiped }: SwipeableCardProps) {
   const [isFlipped, setIsFlipped] = useState(false);
   const [watermark, setWatermark] = useState<React.ReactNode>(null);
   const [watermarkColor, setWatermarkColor] = useState("");
@@ -73,9 +74,13 @@ function SwipeableCard({ content, onSwiped }: SwipeableCardProps) {
         {...handlers}
         className={`swipeable-card ${isFlipped ? "flipped" : ""} ${swipeClass} justify-center p-8`}
       >
-        <h1 className="font-mono text-4xl font-extrabold swipeable-card-content">
-          {content}
-        </h1>
+        <div className="flex flex-col items-start  swipeable-card-content">
+          <h4 className="text-gray-400 font-mono text-md whitespace-pre-wrap">
+            {subtitle}
+          </h4>
+          <h1 className="font-mono text-4xl font-extrabold">{content}</h1>
+        </div>
+
         <div className="swipeable-card-back">{content} (Back)</div>
       </div>
     </>

frontend/src/components/TopMenu.test.tsx

@@ -1,5 +1,5 @@
 // __tests__/TopMenu.test.tsx
-import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import React from "react";
 import TopMenu from "./TopMenu"; // Adjust the import path as necessary

frontend/src/pages/Home.tsx

@@ -5,9 +5,9 @@ import Menu from "../components/Menu.tsx";
 
 function Home() {
   const [cards] = useState([
-    { id: 1, content: "Brown Fox Leap Over The Box" },
-    { id: 2, content: "Card 2" },
-    { id: 3, content: "Card 3" },
+    { id: 1, content: "Brown Fox Leap Over The Box", subtitle: "sub 1" },
+    { id: 2, content: "Card 2", subtitle: "sub 2" },
+    { id: 3, content: "Card 3", subtitle: "sub 3" },
   ]);
 
   const [currentCardIndex, setCurrentCardIndex] = useState(0);
@@ -28,6 +28,7 @@ function Home() {
         <SwipeableCard
           key={cards[currentCardIndex].id}
           content={cards[currentCardIndex].content}
+          subtitle={cards[currentCardIndex].subtitle}
           onSwiped={handleSwiped}
         />
       )}

frontend/src/pages/Settings.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import { Link } from "react-router-dom";
-import { IoIosSettings } from "react-icons/io";
 
 function Settings() {
   return (

frontend/src/pages/WordList.test.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { MemoryRouter } from "react-router-dom";
+import WordList from "./WordList";
+
+// Mock data for people
+const mockPeople = [
+  {
+    name: "Leslie Alexander",
+    email: "leslie.alexander@example.com",
+    role: "Co-Founder / CEO",
+    imageUrl:
+      "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+    lastSeen: "3h ago",
+    lastSeenDateTime: "2023-01-23T13:23Z",
+  },
+  {
+    name: "Michael Foster",
+    email: "michael.foster@example.com",
+    role: "Co-Founder / CTO",
+    imageUrl:
+      "https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+    lastSeen: "3h ago",
+    lastSeenDateTime: "2023-01-23T13:23Z",
+  },
+  // Add more mock people if necessary
+];
+
+// Helper function to render the component
+const renderComponent = () => {
+  return render(
+    <MemoryRouter>
+      <WordList />
+    </MemoryRouter>,
+  );
+};
+
+describe("WordList Component", () => {
+  beforeEach(() => {
+    // Mock the fetch function
+    global.fetch = vi.fn(() =>
+      Promise.resolve({
+        json: () => Promise.resolve(mockPeople),
+      }),
+    ) as jest.Mock;
+  });
+
+  it("renders the component and shows the loading state initially", () => {
+    renderComponent();
+    expect(screen.getByText(/Showing/i)).toBeInTheDocument();
+  });
+
+  it("fetches and displays data correctly", async () => {
+    renderComponent();
+
+    // Wait for the data to be fetched and rendered
+    await waitFor(() => {
+      mockPeople.forEach((person) => {
+        expect(screen.getByText(person.name)).toBeInTheDocument();
+        expect(screen.getByText(person.email)).toBeInTheDocument();
+        expect(screen.getByText(person.role)).toBeInTheDocument();
+      });
+    });
+  });
+
+  it("displays online status correctly when lastSeen is null", async () => {
+    const mockPeopleWithOnlineStatus = [
+      ...mockPeople,
+      {
+        name: "Tom Cook",
+        email: "tom.cook@example.com",
+        role: "Director of Product",
+        imageUrl:
+          "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+        lastSeen: null,
+      },
+    ];
+
+    global.fetch = vi.fn(() =>
+      Promise.resolve({
+        json: () => Promise.resolve(mockPeopleWithOnlineStatus),
+      }),
+    ) as jest.Mock;
+
+    renderComponent();
+
+    // Wait for the data to be fetched and rendered
+    await waitFor(() => {
+      expect(screen.getByText("Tom Cook")).toBeInTheDocument();
+      expect(screen.getByText("Online")).toBeInTheDocument();
+    });
+  });
+});

frontend/src/pages/WordList.tsx

@@ -1,9 +1,9 @@
-import Settings from "./Settings.tsx";
+import React, { useEffect, useState } from "react";
 import TopMenu from "../components/TopMenu";
 import Menu from "../components/Menu.tsx";
-import { FaChevronRight, FaChevronLeft } from "react-icons/fa";
+import { FaChevronLeft, FaChevronRight } from "react-icons/fa";
 
-const people = [
+const peopleInit = [
   {
     name: "Leslie Alexander",
     email: "leslie.alexander@example.com",
@@ -59,8 +59,26 @@ const people = [
 ];
 
 function WordList() {
+  const [people, setPeople] = useState([]);
   const likeMenu = false;
 
+  useEffect(() => {
+    // Replace with your API endpoint
+    const apiEndpoint = "https://api.example.com/people";
+
+    const fetchData = async () => {
+      try {
+        const response = await fetch(apiEndpoint);
+        const data = await response.json();
+        setPeople(data);
+      } catch (error) {
+        console.error("Error fetching data: ", error);
+      }
+    };
+
+    fetchData();
+  }, []);
+
   return (
     <>
       <TopMenu />
@@ -141,7 +159,6 @@ function WordList() {
                 <span className="sr-only">Previous</span>
                 <FaChevronLeft className="h-5 w-5" aria-hidden="true" />
               </a>
-              {/* Current: "z-10 bg-indigo-600 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600", Default: "text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:outline-offset-0" */}
               <a
                 href="#"
                 aria-current="page"