From 9e6b8572e4a2a12ed30fa0f6cf3b53e07c0f2bcb Mon Sep 17 00:00:00 2001 From: MattBarnabo Date: Fri, 10 May 2024 15:25:20 -0500 Subject: [PATCH 1/7] adds date-fns --- package.json | 1 + yarn.lock | 5 +++++ 2 files changed, 6 insertions(+) diff --git a/package.json b/package.json index 4d8a708..2fd56ed 100644 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index 90a091b..b624812 100644 --- a/yarn.lock +++ b/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== + debounce@2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/debounce/-/debounce-2.0.0.tgz#b2f914518a1481466f4edaee0b063e4d473ad549" From b5caad8e7ab097463ca13dd61f427e1744d8f2d4 Mon Sep 17 00:00:00 2001 From: MattBarnabo Date: Fri, 10 May 2024 15:26:39 -0500 Subject: [PATCH 2/7] adds Notescard component and styling to sidebar --- src/components/SideBar.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/SideBar.js b/src/components/SideBar.js index dc6eded..3e220a1 100644 --- a/src/components/SideBar.js +++ b/src/components/SideBar.js @@ -1,11 +1,13 @@ import React from "react" - +import NotesCard from "./NotesCard" const SideBar = ({ notes }) => { return ( <> - {notes?.map((note) => ( -
{note.title}
- ))} +
+ {notes?.map((note) => ( + + ))} +
) } From 1a13adf2c119fd4a3bbc82313ae33c9589110a23 Mon Sep 17 00:00:00 2001 From: MattBarnabo Date: Fri, 10 May 2024 15:28:18 -0500 Subject: [PATCH 3/7] adds Notes card component that renders the card as a link, a title, creator, and date as content --- src/components/NotesCard.js | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 src/components/NotesCard.js diff --git a/src/components/NotesCard.js b/src/components/NotesCard.js new file mode 100644 index 0000000..21fc207 --- /dev/null +++ b/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 ( +
+ +
+

{title}

+
+

+ {" "} + Creator: {user && user.username} +

+

{formattedDate}

+
+
+ +
+ ) +} + +export default NotesCard From 343da954dfdce2f65a13d3424d8d669104d90bdf Mon Sep 17 00:00:00 2001 From: MattBarnabo Date: Fri, 10 May 2024 16:08:06 -0500 Subject: [PATCH 4/7] adds test-id --- src/components/SideBar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SideBar.js b/src/components/SideBar.js index 3e220a1..c33c291 100644 --- a/src/components/SideBar.js +++ b/src/components/SideBar.js @@ -3,7 +3,7 @@ import NotesCard from "./NotesCard" const SideBar = ({ notes }) => { return ( <> -
+
{notes?.map((note) => ( ))} From c6a0b3a3daa480e247f9e5f76e30351ba9b19400 Mon Sep 17 00:00:00 2001 From: MattBarnabo Date: Fri, 10 May 2024 16:10:30 -0500 Subject: [PATCH 5/7] adds test --- src/__tests__/Sidebar.test.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 src/__tests__/Sidebar.test.js diff --git a/src/__tests__/Sidebar.test.js b/src/__tests__/Sidebar.test.js new file mode 100644 index 0000000..1cd530c --- /dev/null +++ b/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( + + + + ) + const sidebarTitle = screen.getByTestId("sidebar-component") + expect(sidebarTitle).toBeInTheDocument() +}) From 55ebe71b6c16047e5d987ad29856c8b61d0d226c Mon Sep 17 00:00:00 2001 From: MattBarnabo Date: Fri, 10 May 2024 16:11:37 -0500 Subject: [PATCH 6/7] adds test --- src/__tests__/NotesCard.test.js | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 src/__tests__/NotesCard.test.js diff --git a/src/__tests__/NotesCard.test.js b/src/__tests__/NotesCard.test.js new file mode 100644 index 0000000..5216d3a --- /dev/null +++ b/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( + + + + ) + const notesCardTitle = screen.getByText(note.title) + expect(notesCardTitle).toBeInTheDocument() + + const notesCardDate = screen.getByText(note.created_at) + expect(notesCardDate).toBeInTheDocument() +}) From 25b414ed5af1cda38aecc52991544858a70277b5 Mon Sep 17 00:00:00 2001 From: MattBarnabo Date: Fri, 10 May 2024 18:43:41 -0500 Subject: [PATCH 7/7] adds border bottom and padding --- src/components/NotesCard.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/NotesCard.js b/src/components/NotesCard.js index 21fc207..63ed0f9 100644 --- a/src/components/NotesCard.js +++ b/src/components/NotesCard.js @@ -10,7 +10,7 @@ const NotesCard = ({ note }) => { const { data } = useFetchGet(`user/${creator}`) const user = data return ( -
+

{title}