diff --git a/src/app/ar/contacts/[country]/page.tsx b/src/app/ar/contacts/[country]/page.tsx new file mode 100644 index 0000000..f8245c5 --- /dev/null +++ b/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 ; +} diff --git a/src/app/contacts/[country]/page.tsx b/src/app/contacts/[country]/page.tsx index 3a8dd53..0b9a072 100644 --- a/src/app/contacts/[country]/page.tsx +++ b/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 ( -
- - -
-
- {`${contact.label} Contacts`} -
-
- -
- {contact.entries.map((entry) => ( -
-

- Name: - {entry.name} -

-

- Number: - {entry.number} -

-

- Email: - {entry.email} -

-
- ))} -
-
-
- ); +export default async function Page({ params: { country } }: PageProps) { + return ( + + ); } diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 654283c..205e67b 100644 --- a/src/components/Navbar.tsx +++ b/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" > - + {innerEntry.label} diff --git a/src/templates/AgentContacts.tsx b/src/templates/AgentContacts.tsx new file mode 100644 index 0000000..f0b12dd --- /dev/null +++ b/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 ( +
+ + +
+
+ {`${contact.label} Contacts`} +
+
+ +
+ {contact.entries.map((entry) => ( +
+

+ {translation.name[language]}: + {entry.name} +

+

+ {translation.number[language]}: + {entry.number} +

+

+ {translation.email[language]}: + {entry.email} +

+
+ ))} +
+
+ ); +} diff --git a/src/translation/agentcontacts.json b/src/translation/agentcontacts.json new file mode 100644 index 0000000..0c1fcdb --- /dev/null +++ b/src/translation/agentcontacts.json @@ -0,0 +1,14 @@ +{ + "name": { + "en": "Name", + "ar": " الإسم" + }, + "number": { + "en": "Number", + "ar": "رقم التواصل" + }, + "email": { + "en": "Email", + "ar": " البريد الإلكتروني" + } +}