Merged in feature-homepage-contacts-languages (pull request #10)

Improved support for languages on the contacts display feature

Approved-by: Tiago Ribeiro

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

@@ -0,0 +1,19 @@
+import { AgentContacts, generateStaticParamsHelper} from "@/templates/AgentContacts";
+
+interface PageProps {
+  params: {
+    country: string;
+  };
+}
+
+const language = "ar";
+
+export async function generateStaticParams() {
+  return generateStaticParamsHelper(language);
+}
+
+export default async function Page({
+  params: { country },
+}: PageProps) {
+  return <AgentContacts country={country} page={`/contacts/${country}`} language={language} />;
+}

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

@@ -1,73 +1,26 @@
-import Footer from "@/components/Footer";
-import Navbar from "@/components/Navbar";
-import Title from "@/components/Title";
-import {Contact} from "@/types/contact";
-
-type Language = "en" | "ar";
+import {
+  AgentContacts,
+  generateStaticParamsHelper,
+} from "@/templates/AgentContacts";
 
 interface PageProps {
-	params: {
-		country: string;
-	};
-	searchParams: {
-		page: string;
-		language: Language;
-	};
+  params: {
+    country: string;
+  };
 }
 
-async function getCountryManagers(country: string) {
-	const res = await fetch(`https://platform.encoach.com/api/users/agents/${country}`);
-
-	if (!res.ok) {
-		throw new Error("Failed to fetch contacts");
-	}
-
-	return res.json();
-}
+const language = "en";
 
 export async function generateStaticParams() {
-	const contacts = (await fetch(`https://platform.encoach.com/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
-
-	// do not forget the actually render this as multiple languages
-	return contacts.map(({key}) => ({
-		country: key.toLowerCase().replaceAll(" ", ""),
-	}));
+  return generateStaticParamsHelper(language);
 }
 
-export default async function Page({params: {country}, searchParams: {page = "/contacts", language = "en"}}: PageProps) {
-	const contact = (await getCountryManagers(country)) as Contact;
-	return (
-		<main className="text-mti-black flex h-screen w-full flex-col bg-white">
-			<Navbar currentPage={page} language={language} />
-
-			<section className="bg-mti-purple h-full w-full p-8 text-center text-white md:p-16">
-				<div className="flex h-full w-full flex-col items-center justify-center">
-					<Title>{`${contact.label} Contacts`}</Title>
-				</div>
-			</section>
-
-			<section className="bg-white h-full w-full p-8 md:p-16 flex gap-16 justify-center flex-wrap">
-				{contact.entries.map((entry) => (
-					<div key={entry.name}>
-						<h2>
-							<strong>Name: </strong>
-							{entry.name}
-						</h2>
-						<p>
-							<strong>Number: </strong>
-							{entry.number}
-						</p>
-						<p>
-							<strong>Email: </strong>
-							{entry.email}
-						</p>
-					</div>
-				))}
-			</section>
-			<Footer language={language} />
-		</main>
-	);
+export default async function Page({ params: { country } }: PageProps) {
+  return (
+    <AgentContacts
+      country={country}
+      page={`/contacts/${country}`}
+      language={language}
+    />
+  );
 }

src/components/Navbar.tsx

@@ -20,8 +20,8 @@ interface Item {
 
 }
 
-async function getCountryManagers() {
-  const res = await fetch(`${process.env.NEXT_PUBLIC_APP_URL}/api/users/agents`);
+async function getCountryManagers(language: "en" | "ar" = "en") {
+  const res = await fetch(`${process.env.NEXT_PUBLIC_APP_URL}/api/users/agents?language=${language}`);
 
   if(!res.ok) {
     throw new Error("Failed to fetch contacts");
@@ -41,13 +41,13 @@ export default function Navbar({
   const [contacts, setContacts] = useState([]);
 
   useEffect(() => {
-    getCountryManagers()
+    getCountryManagers(language)
       .then((contacts) => setContacts(contacts.map((data: Contact) => ({
         key: data.key,
         label: data.label,
       }))))
       .catch(console.error);
-  }, []);
+  }, [language]);
 
   const items = [
     { page: "/", key: "home" },
@@ -86,7 +86,7 @@ export default function Navbar({
                 key={innerEntry.key}
                 className="px-4 py-2 hover:bg-gray-600 whitespace-nowrap h-12 flex items-center"
               >
-                <Link href={`${item.page}/${innerEntry.key}`} className="w-full h-full flex items-center">
+                <Link href={`${language === 'ar' ? '/ar' : ''}${item.page}/${innerEntry.key}`} className="w-full h-full flex items-center">
                   {innerEntry.label}
                 </Link>
               </li>

src/templates/AgentContacts.tsx

@@ -0,0 +1,68 @@
+import Footer from "@/components/Footer";
+import Navbar from "@/components/Navbar";
+import Title from "@/components/Title";
+import { Contact } from "@/types/contact";
+import translation from "@/translation/agentcontacts.json";
+type Language = "en" | "ar";
+
+interface Props {
+  country: string;
+  page: string;
+  language: Language;
+}
+
+async function getCountryManagers(country: string, language: Language = "en") {
+  const res = await fetch(
+    `${process.env.NEXT_PUBLIC_APP_URL}/api/users/agents/${country}?language=${language}`
+  );
+
+  if (!res.ok) {
+    throw new Error("Failed to fetch contacts");
+  }
+
+  return res.json();
+}
+
+export async function generateStaticParamsHelper(language: Language = "en") {
+  const contacts = (await fetch(
+    `${process.env.NEXT_PUBLIC_APP_URL}/api/users/agents?language=${language}`
+  ).then((res) => res.json())) as Contact[];
+  return contacts.map(({ key }) => ({
+    country: key.toLowerCase().replaceAll(" ", ""),
+  }));
+}
+export async function AgentContacts({ language, page, country }: Props) {
+  const contact = (await getCountryManagers(country, language)) as Contact;
+
+  return (
+    <main className="text-mti-black flex h-screen w-full flex-col bg-white">
+      <Navbar currentPage={page} language={language} />
+
+      <section className="bg-mti-purple h-full w-full p-8 text-center text-white md:p-16">
+        <div className="flex h-full w-full flex-col items-center justify-center">
+          <Title>{`${contact.label} Contacts`}</Title>
+        </div>
+      </section>
+
+      <section className="bg-white h-full w-full p-8 md:p-16 flex gap-16 justify-center flex-wrap">
+        {contact.entries.map((entry) => (
+          <div key={entry.name}>
+            <h2>
+              <strong>{translation.name[language]}: </strong>
+              {entry.name}
+            </h2>
+            <p>
+              <strong>{translation.number[language]}: </strong>
+              {entry.number}
+            </p>
+            <p>
+              <strong>{translation.email[language]}: </strong>
+              {entry.email}
+            </p>
+          </div>
+        ))}
+      </section>
+      <Footer language={language} />
+    </main>
+  );
+}

src/translation/agentcontacts.json

@@ -0,0 +1,14 @@
+{
+  "name": {
+    "en": "Name",
+    "ar": " الإسم"
+  },
+  "number": {
+    "en": "Number",
+    "ar": "رقم التواصل"
+  },
+  "email": {
+    "en": "Email",
+    "ar": " البريد الإلكتروني"
+  }
+}