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 => { + 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([]); + + const getMembers = async () => { + try { + const members = await MembersApi.getMembers(); + setMembers(members); + console.log(members); + } catch (error) { + console.error(error); + } + }; + + useEffect(() => { + getMembers(); + }, []); + + return ( + +

Members

+
    + {members.map((member, index) => ( +
  • +

    {member.lastName}

    +

    {member.description}

    +

    Favorite fruit: {member.favoriteFruit}

    +
  • + ))} +
+
+ ); }