From dd78ce40d911fca552bc7bf50ad5bec1a6007c18 Mon Sep 17 00:00:00 2001
From: KaylynTV39 <kaylynvannorstrand@navapbc.com>
Date: Tue, 11 Mar 2025 13:38:43 -0400
Subject: [PATCH] Ticket 116 - mockup for API call

---
 template/{{app_name}}/src/api/MembersApi.ts   | 18 ++++++++++
 .../src/app/[locale]/health/page.tsx          | 36 ++++++++++++++++++-
 2 files changed, 53 insertions(+), 1 deletion(-)
 create mode 100644 template/{{app_name}}/src/api/MembersApi.ts

diff --git a/template/{{app_name}}/src/api/MembersApi.ts b/template/{{app_name}}/src/api/MembersApi.ts
new file mode 100644
index 00000000..4dbc42d9
--- /dev/null
+++ b/template/{{app_name}}/src/api/MembersApi.ts
@@ -0,0 +1,18 @@
+const baseUrl: string = 'https://63d006cc8a780ae6e681fea9.mockapi.io/api/members';
+
+export interface Member {
+  firstName: any;
+  lastName: string;
+  description: string;
+  favoriteFruit: string;
+}
+
+export const MembersApi = {
+  getMembers: async (): Promise<Member[]> => {
+    const response = await fetch(baseUrl);
+    if (!response.ok) {
+      throw new Error('Failed to fetch members data');
+    }
+    return response.json();
+  },
+};
\ No newline at end of file
diff --git a/template/{{app_name}}/src/app/[locale]/health/page.tsx b/template/{{app_name}}/src/app/[locale]/health/page.tsx
index adbd9f30..17b12e3a 100644
--- a/template/{{app_name}}/src/app/[locale]/health/page.tsx
+++ b/template/{{app_name}}/src/app/[locale]/health/page.tsx
@@ -1,3 +1,37 @@
+'use client'
+
+import { Member, MembersApi } from "src/api/MembersApi";
+import React, { useEffect, useState } from "react";
+
 export default function Page() {
-  return <>healthy</>;
+  const [members, setMembers] = useState<Member[]>([]);
+
+  const getMembers = async () => {
+    try {
+      const members = await MembersApi.getMembers();
+      setMembers(members);
+      console.log(members);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  useEffect(() => {
+    getMembers();
+  }, []);
+
+  return (
+    <React.Fragment>
+      <h1>Members</h1>
+      <ul>
+        {members.map((member, index) => (
+          <li key={index}>
+            <h2>{member.lastName}</h2>
+            <p>{member.description}</p>
+            <p>Favorite fruit: {member.favoriteFruit}</p>
+          </li>
+        ))}
+      </ul>
+    </React.Fragment>
+  );
 }