From a79578a36ebd3311fa09ef8120c60d6fdc7ecc46 Mon Sep 17 00:00:00 2001 From: Ishant Solanki Date: Mon, 3 Nov 2025 21:29:09 +0000 Subject: [PATCH 1/2] Call endpoint use swr --- package-lock.json | 29 +++++++++++++++++++++++++++++ package.json | 1 + src/Aplications.module.css | 0 src/Applications.tsx | 9 +++++---- src/model/Applications.ts | 10 ++++++++++ src/network/applications.ts | 21 +++++++++++++++++++++ src/network/common.ts | 1 + 7 files changed, 67 insertions(+), 4 deletions(-) delete mode 100644 src/Aplications.module.css create mode 100644 src/model/Applications.ts create mode 100644 src/network/applications.ts create mode 100644 src/network/common.ts diff --git a/package-lock.json b/package-lock.json index 934540f..2ca03a1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,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" }, @@ -2763,6 +2764,14 @@ "node": ">= 0.8" } }, + "node_modules/dequal": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", + "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==", + "engines": { + "node": ">=6" + } + }, "node_modules/destroy": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz", @@ -6549,6 +6558,18 @@ "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==", "dev": true }, + "node_modules/swr": { + "version": "2.3.6", + "resolved": "https://registry.npmjs.org/swr/-/swr-2.3.6.tgz", + "integrity": "sha512-wfHRmHWk/isGNMwlLGlZX5Gzz/uTgo0o2IRuTMcf4CPuPFJZlq0rDaKUx+ozB5nBOReNV1kiOyzMfj+MBMikLw==", + "dependencies": { + "dequal": "^2.0.3", + "use-sync-external-store": "^1.4.0" + }, + "peerDependencies": { + "react": "^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/symbol-tree": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", @@ -6877,6 +6898,14 @@ "requires-port": "^1.0.0" } }, + "node_modules/use-sync-external-store": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz", + "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/utils-merge": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz", diff --git a/package.json b/package.json index c3493bc..24df785 100644 --- a/package.json +++ b/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" }, diff --git a/src/Aplications.module.css b/src/Aplications.module.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/Applications.tsx b/src/Applications.tsx index 8c9f646..f97f886 100644 --- a/src/Applications.tsx +++ b/src/Applications.tsx @@ -1,14 +1,15 @@ 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"; const Applications = () => { - const applications = getSingleApplicationFixture; - + const { data } = useApplications(1, 10); return (
- + {data?.map((application) => ( + + ))}
); }; diff --git a/src/model/Applications.ts b/src/model/Applications.ts new file mode 100644 index 0000000..54fd49b --- /dev/null +++ b/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; +} diff --git a/src/network/applications.ts b/src/network/applications.ts new file mode 100644 index 0000000..b76dd9c --- /dev/null +++ b/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; + +export const useApplications = (page: number, limit: number) => { + return swr( + `${BASE_URL}/applications?page=${page}&limit=${limit}`, + () => getApplications({ page, limit }) + ); +}; diff --git a/src/network/common.ts b/src/network/common.ts new file mode 100644 index 0000000..18a479f --- /dev/null +++ b/src/network/common.ts @@ -0,0 +1 @@ +export const BASE_URL = "http://localhost:3001/api"; From 1bd1865bae443e0c5c07d8d4058d8659fe0fe288 Mon Sep 17 00:00:00 2001 From: Ishant Solanki Date: Mon, 3 Nov 2025 21:40:12 +0000 Subject: [PATCH 2/2] Move files to components and assets folders --- src/App.tsx | 2 +- src/Applications.tsx | 13 +++++++++---- src/{ => assets}/logo.svg.tsx | 0 src/{ => components/Header}/Header.module.css | 0 src/{ => components/Header}/Header.tsx | 2 +- src/components/Header/index.ts | 1 + src/components/Loading/Loading.module.css | 9 +++++++++ src/components/Loading/Loading.tsx | 5 +++++ 8 files changed, 26 insertions(+), 6 deletions(-) rename src/{ => assets}/logo.svg.tsx (100%) rename src/{ => components/Header}/Header.module.css (100%) rename src/{ => components/Header}/Header.tsx (85%) create mode 100644 src/components/Header/index.ts create mode 100644 src/components/Loading/Loading.module.css create mode 100644 src/components/Loading/Loading.tsx diff --git a/src/App.tsx b/src/App.tsx index de815c2..64438c5 100644 --- a/src/App.tsx +++ b/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 ( diff --git a/src/Applications.tsx b/src/Applications.tsx index f97f886..1f21756 100644 --- a/src/Applications.tsx +++ b/src/Applications.tsx @@ -2,14 +2,19 @@ import React from "react"; import SingleApplication from "./SingleApplication"; import styles from "./Applications.module.css"; import { useApplications } from "./network/applications"; +import { Loading } from "./components/Loading/Loading"; const Applications = () => { - const { data } = useApplications(1, 10); + const { data, isLoading } = useApplications(1, 10); return (
- {data?.map((application) => ( - - ))} + {isLoading ? ( + + ) : ( + data?.map((application) => ( + + )) + )}
); }; diff --git a/src/logo.svg.tsx b/src/assets/logo.svg.tsx similarity index 100% rename from src/logo.svg.tsx rename to src/assets/logo.svg.tsx diff --git a/src/Header.module.css b/src/components/Header/Header.module.css similarity index 100% rename from src/Header.module.css rename to src/components/Header/Header.module.css diff --git a/src/Header.tsx b/src/components/Header/Header.tsx similarity index 85% rename from src/Header.tsx rename to src/components/Header/Header.tsx index 206a084..62e619f 100644 --- a/src/Header.tsx +++ b/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 = () => { diff --git a/src/components/Header/index.ts b/src/components/Header/index.ts new file mode 100644 index 0000000..2764567 --- /dev/null +++ b/src/components/Header/index.ts @@ -0,0 +1 @@ +export { default } from "./Header"; diff --git a/src/components/Loading/Loading.module.css b/src/components/Loading/Loading.module.css new file mode 100644 index 0000000..4cf269b --- /dev/null +++ b/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; +} diff --git a/src/components/Loading/Loading.tsx b/src/components/Loading/Loading.tsx new file mode 100644 index 0000000..3a78aa3 --- /dev/null +++ b/src/components/Loading/Loading.tsx @@ -0,0 +1,5 @@ +import styles from "./Loading.module.css"; + +export const Loading = () => { + return
Loading...
; +};