Sidebar

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
+    "date-fns": "^3.6.0",
     "flowbite-react": "^0.9.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

src/__tests__/NotesCard.test.js

@@ -0,0 +1,23 @@
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import { BrowserRouter } from "react-router-dom"
+import NotesCard from "../components/NotesCard"
+
+test("renders the NotesCard component", () => {
+  const note = {
+    id: 1,
+    title: "Wary message for Rhea Pollster",
+    creator: 1,
+    created_at: "May 10, 2024"
+  }
+  render(
+    <BrowserRouter>
+      <NotesCard key={note.id} note={note} />
+    </BrowserRouter>
+  )
+  const notesCardTitle = screen.getByText(note.title)
+  expect(notesCardTitle).toBeInTheDocument()
+
+  const notesCardDate = screen.getByText(note.created_at)
+  expect(notesCardDate).toBeInTheDocument()
+})

src/__tests__/Sidebar.test.js

@@ -0,0 +1,14 @@
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import { BrowserRouter } from "react-router-dom"
+import Sidebar from "../components/SideBar"
+
+test("renders the Sidebar component", () => {
+  render(
+    <BrowserRouter>
+      <Sidebar />
+    </BrowserRouter>
+  )
+  const sidebarTitle = screen.getByTestId("sidebar-component")
+  expect(sidebarTitle).toBeInTheDocument()
+})

src/components/NotesCard.js

@@ -0,0 +1,30 @@
+import React from "react"
+import { format } from "date-fns"
+import { Link } from "react-router-dom"
+import { useFetchGet } from "../utilities/useFetchGet"
+
+const NotesCard = ({ note }) => {
+  const { title, creator, created_at } = note
+  const formattedDate = format(created_at, "MMMM dd, yyyy")
+
+  const { data } = useFetchGet(`user/${creator}`)
+  const user = data
+  return (
+    <div className=" p1 border-b p-1">
+      <Link>
+        <div>
+          <h1 className="text-ellipsis text-nowrap font-extrabold">{title}</h1>
+          <div className=" flex justify-between p-1">
+            <h3 className="text-xs opacity-40">
+              {" "}
+              Creator: {user && user.username}
+            </h3>
+            <h3 className="text-xs opacity-40">{formattedDate}</h3>
+          </div>
+        </div>
+      </Link>
+    </div>
+  )
+}
+
+export default NotesCard

src/components/SideBar.js

@@ -1,11 +1,13 @@
 import React from "react"
-
+import NotesCard from "./NotesCard"
 const SideBar = ({ notes }) => {
   return (
     <>
-      {notes?.map((note) => (
-        <div key={note.id}>{note.title}</div>
-      ))}
+      <div data-testid="sidebar-component" className="h-screen overflow-scroll">
+        {notes?.map((note) => (
+          <NotesCard key={note.id} note={note} />
+        ))}
+      </div>
     </>
   )
 }

yarn.lock

@@ -3764,6 +3764,11 @@ data-view-byte-offset@^1.0.0:
     es-errors "^1.3.0"
     is-data-view "^1.0.1"
 
+date-fns@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-3.6.0.tgz#f20ca4fe94f8b754951b24240676e8618c0206bf"
+  integrity sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==
+
 [email protected]:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/debounce/-/debounce-2.0.0.tgz#b2f914518a1481466f4edaee0b063e4d473ad549"