Merged in nested-country-managers (pull request #9)

Contacts are now dynamically loaded

Approved-by: Alvaro Doria

src/app/contacts/[country]/page.tsx

@@ -1,17 +1,7 @@
 import Footer from "@/components/Footer";
 import Navbar from "@/components/Navbar";
 import Title from "@/components/Title";
-import contacts from "../../../contacts.json";
+import { Contact } from "@/types/contact";
-
-interface Contact {
-  key: string;
-  label: string;
-  entries: {
-    name: string;
-    number: string;
-    email: string;
-  }[];
-}
 
 type Language = "en" | "ar";
 
@@ -25,7 +15,19 @@ interface PageProps {
   };
 }
 
-export function generateStaticParams() {
+async function getCountryManagers(country: string) {
+  const res = await fetch(`${process.env.NEXT_PUBLIC_APP_URL}/api/users/agents/${country}`);
+
+  if(!res.ok) {
+    throw new Error("Failed to fetch contacts");
+  }
+
+  return res.json();
+}
+
+export async function generateStaticParams() {
+  const contacts = await fetch(`${process.env.NEXT_PUBLIC_APP_URL}/api/users/agents`).then((res) => res.json()) as Contact[];
+
   // down the line, this is required to be loaded from a CMS
   // for now, we'll just use a JSON file
 
@@ -35,15 +37,11 @@ export function generateStaticParams() {
   }));
 }
 
-export default function Page({
+export default async function Page({
   params: { country },
   searchParams: { page = "/contacts", language = "en" },
 }: PageProps) {
-  // this approach will not be viable later on when we have multiple languages
+  const contact = await getCountryManagers(country) as Contact;
-  // or use the data from the server
-  // replace this with a fetch to the CMS
-  const contact = contacts.find(({ key }) => key === country) as Contact;
-
   return (
     <main className="text-mti-black flex h-screen w-full flex-col bg-white">
       <Navbar currentPage={page} language={language} />

src/components/Navbar.tsx

@@ -9,8 +9,7 @@ import { Fragment, useEffect, useState } from "react";
 import { Dialog, Menu, Transition } from "@headlessui/react";
 import { useRouter } from "next/navigation";
 import translation from "@/translation/navbar.json";
-import contacts from "@/contacts.json";
+import { Contact } from "@/types/contact";
-
 interface Item {
   page: string;
   key: string;
@@ -21,7 +20,36 @@ interface Item {
 
 }
 
-const items = [
+async function getCountryManagers() {
+  const res = await fetch(`${process.env.NEXT_PUBLIC_APP_URL}/api/users/agents`);
+
+  if(!res.ok) {
+    throw new Error("Failed to fetch contacts");
+  }
+
+  return res.json();
+}
+
+export default function Navbar({
+  currentPage,
+  language,
+}: {
+  currentPage: string;
+  language: "en" | "ar";
+}) {
+
+  const [contacts, setContacts] = useState([]);
+
+  useEffect(() => {
+    getCountryManagers()
+      .then((contacts) => setContacts(contacts.map((data: Contact) => ({
+        key: data.key,
+        label: data.label,
+      }))))
+      .catch(console.error);
+  }, []);
+
+  const items = [
     { page: "/", key: "home" },
     { page: "/services", key: "services" },
     { page: "/price", key: "price" },
@@ -31,20 +59,12 @@ const items = [
     {
       key: "country_manager",
       page: "/contacts",
-    entries: contacts.map((data) => ({
+      entries: contacts,
-      key: data.key,
-      label: data.label,
-    })),
     },
-] as Item[];
+  ] as Item[];
+
+  
 
-export default function Navbar({
-  currentPage,
-  language,
-}: {
-  currentPage: string;
-  language: "en" | "ar";
-}) {
   const [isOpen, setIsOpen] = useState(false);
 
   const renderItem = (item: Item, className: string) => {

src/contacts.json

@@ -1,36 +0,0 @@
-[
-  {
-    "label": "Egypt",
-    "key": "egypt",
-    "entries": [
-      {
-        "name": "Modern Technology",
-        "number": "+226578480830",
-        "email": "egypt@encoach.com"
-      }
-    ]
-  },
-  {
-    "label": "Oman",
-    "key": "oman",
-    "entries": [
-      {
-        "name": "Smartway education",
-        "number": "+9689944094",
-        "email": "oman@encoach.com"
-      },
-      { "name": "MTI", "number": "+9687445609", "email": "mti@encoach.com" }
-    ]
-  },
-  {
-    "label": "Saudi Arabia",
-    "key": "saudiarabia",
-    "entries": [
-      {
-        "name": "Edutrach services",
-        "number": "+96658499347",
-        "email": "edu@encoach.com"
-      }
-    ]
-  }
-]

src/types/contact.ts

@@ -0,0 +1,9 @@
+export interface Contact {
+    key: string;
+    label: string;
+    entries: {
+      name: string;
+      number: string;
+      email: string;
+    }[];
+  }