Multiple results

package.json

@@ -20,6 +20,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "7.45.1",
+    "swr": "^2.3.6",
     "ts-node": "^10.9.1",
     "typescript": "5.1.6"
   },

src/App.tsx

@@ -1,6 +1,6 @@
 import "./App.css";
 import Applications from "./Applications";
-import Header from "./Header";
+import Header from "./components/Header";
 
 function App() {
   return (

src/Applications.tsx

@@ -1,14 +1,20 @@
 import React from "react";
 import SingleApplication from "./SingleApplication";
-import { getSingleApplicationFixture } from "./__fixtures__/applications.fixture";
 import styles from "./Applications.module.css";
+import { useApplications } from "./network/applications";
+import { Loading } from "./components/Loading/Loading";
 
 const Applications = () => {
-  const applications = getSingleApplicationFixture;
-
+  const { data, isLoading } = useApplications(1, 10);
   return (
     <div className={styles.Applications}>
-      <SingleApplication application={applications[0]} />
+      {isLoading ? (
+        <Loading />
+      ) : (
+        data?.map((application) => (
+          <SingleApplication key={application.guid} application={application} />
+        ))
+      )}
     </div>
   );
 };

src/Header.tsx → src/components/Header/Header.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import LogoSvg from "./logo.svg";
+import LogoSvg from "../../assets/logo.svg";
 import styles from "./Header.module.css";
 
 const Header = () => {

src/components/Header/index.ts

@@ -0,0 +1 @@
+export { default } from "./Header";

src/components/Loading/Loading.module.css

@@ -0,0 +1,9 @@
+.LoadingContainer {
+  background-color: white;
+  box-shadow: 0px 5px 16px 0px rgba(173, 200, 215, 0.25);
+  border-radius: 10px;
+  margin-bottom: 1rem;
+  padding: 1rem;
+  text-align: center;
+  font-weight: bold;
+}

src/components/Loading/Loading.tsx

@@ -0,0 +1,5 @@
+import styles from "./Loading.module.css";
+
+export const Loading = () => {
+  return <div className={styles.LoadingContainer}>Loading...</div>;
+};

src/model/Applications.ts

@@ -0,0 +1,10 @@
+export interface ApplicationDTO {
+  guid: string;
+  loan_amount: number;
+  first_name: string;
+  last_name: string;
+  company: string;
+  email: string;
+  date_created: string;
+  expiry_date: string;
+}

src/network/applications.ts

@@ -0,0 +1,21 @@
+import swr from "swr";
+import { ApplicationDTO } from "../model/Applications";
+import { BASE_URL } from "./common";
+
+export const getApplications = ({
+  page,
+  limit,
+}: {
+  page: number;
+  limit: number;
+}) =>
+  fetch(`${BASE_URL}/applications?page=${page}&limit=${limit}`).then((res) =>
+    res.json()
+  ) as Promise<ApplicationDTO[]>;
+
+export const useApplications = (page: number, limit: number) => {
+  return swr<ApplicationDTO[], Error>(
+    `${BASE_URL}/applications?page=${page}&limit=${limit}`,
+    () => getApplications({ page, limit })
+  );
+};

src/network/common.ts

@@ -0,0 +1 @@
+export const BASE_URL = "http://localhost:3001/api";