[fe] chore: Refactor api calls out of app component

helloitsdave · Jan 14, 2024 · 137cceb · 137cceb
1 parent fbcac54
commit 137cceb
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 38 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,13 +1,10 @@
 import { useEffect, useState } from "react";
-import axios from "axios";
 import "./App.css";
 import NoteForm from "./components/NoteForm";
 import NoteGrid from "./components/NoteGrid";
 import Spinner from "./components/Spinner";
 import type NoteType from "./types/note";
-
-const URL =
-  process.env.REACT_APP_API_BASE_URL || "http://localhost:5000/api/notes";
+import { postNote, patchNote, getNotes, removeNote } from "./api/apiService";
 
 function App() {
   const [notes, setNotes] = useState<NoteType[]>([]);
@@ -22,7 +19,7 @@ function App() {
   const fetchNotes = async () => {
     try {
       setIsDataLoading(true);
-      const response = await axios.get(URL);
+      const response = await getNotes();
       const data: NoteType[] = await response.data;
       setIsDataLoading(false);
       setNotes(data);
@@ -36,18 +33,7 @@ function App() {
   const addNote = async (newNote: NoteType) => {
     try {
       setIsDataLoading(true);
-      const response = await axios.post(
-        URL,
-        {
-          title: newNote.title,
-          content: newNote.content,
-        },
-        {
-          headers: {
-            "Content-Type": "application/json",
-          },
-        }
-      );
+      const response = await postNote(newNote);
       await response.data;
       setIsDataLoading(false);
       await fetchNotes();
@@ -60,18 +46,7 @@ function App() {
 
   const updateNote = async (updatedNote: NoteType) => {
     try {
-      const response = await axios.put(
-        `${URL}/${updatedNote.id}`,
-        {
-          title: updatedNote.title,
-          content: updatedNote.content,
-        },
-        {
-          headers: {
-            "Content-Type": "application/json",
-          },
-        }
-      );
+      const response = await patchNote(updatedNote);
       await response.data;
       fetchNotes();
     } catch (error) {
@@ -83,7 +58,7 @@ function App() {
 
   const deleteNote = async (noteId: number) => {
     try {
-      const response = await axios.delete(`${URL}/${noteId}`);
+      const response = await removeNote(noteId);
       await response.data;
       fetchNotes();
     } catch (error) {

diff --git a/frontend/src/api/apiService.ts b/frontend/src/api/apiService.ts
@@ -0,0 +1,50 @@
+import axios from 'axios';
+
+import type NoteType from "../types/note";
+
+const URL =
+  process.env.REACT_APP_API_BASE_URL || "http://localhost:5000/api/notes";
+
+
+export const postNote = async (newNote: NoteType) => {
+  const response = await axios.post(
+    URL,
+    {
+      title: newNote.title,
+      content: newNote.content,
+    },
+    {
+      headers: {
+        "Content-Type": "application/json",
+      },
+    }
+  );
+  return response;
+};
+
+
+export const patchNote = async (updatedNote: NoteType) => {
+    const response = await axios.put(
+        `${URL}/${updatedNote.id}`,
+        {
+        title: updatedNote.title,
+        content: updatedNote.content,
+        },
+        {
+        headers: {
+            "Content-Type": "application/json",
+        },
+        }
+    );
+    return response;
+    };
+
+export const removeNote = async (id: number) => {
+    const response = await axios.delete(`${URL}/${id}`);
+    return response;
+}
+
+export const getNotes = async () => {
+    const response = await axios.get(URL);
+    return response;
+}
diff --git a/playwright/tests/note.spec.ts b/playwright/tests/note.spec.ts
@@ -12,29 +12,26 @@ test.beforeAll(async ({ browser }) => {
   await expect(page).toHaveTitle(/Notes/);
 });
 
-test('Create, View and Delete Note e2e', async () => {
-  await test.step('Add a note', async () => {
+test('Notes App e2e', async () => {
+  await test.step('Should be able to view Notes', async () => {
     await page.getByPlaceholder('Title').fill(NOTE_TITLE);
     await page.getByPlaceholder('Content').fill(NOTE_CONTENT);
     await page.getByRole('button', { name: 'Add Note' }).click();
   });
 
-  await test.step('Verify note was added', async () => {
+  await test.step('Should be able to Add a new Note', async () => {
     await expect(page.getByTestId('note-title').first()).toHaveText(NOTE_TITLE);
     await expect(page.getByTestId('note-content').first()).toHaveText(NOTE_CONTENT);
   });
 
-  await test.step('Delete note', async () => {
+  await test.step('Should be able to Delete a Note', async () => {
     await page.getByTestId('note-delete-button').first().click();
     await expect(page.getByTestId('note-title').first()).not.toHaveText(NOTE_TITLE);
   });
 
-  await test.step('Add a note without a title', async () => {
+  await test.step('Should not be able to add Note without title', async () => {
     await page.getByPlaceholder('Content').fill(NOTE_CONTENT);
     await page.getByRole('button', { name: 'Add Note' }).click();
-  });
-
-  await test.step('Verify note was not added', async () => {
     await expect(page.getByTestId('note-title').first()).not.toHaveText(NOTE_TITLE);
     await expect(page.getByTestId('note-content').first()).not.toHaveText(NOTE_CONTENT);
   });