From ac318177d4af7b94535fa315339cbf3e63213f3f Mon Sep 17 00:00:00 2001 From: RaviAnand Mohabir Date: Mon, 26 Aug 2024 23:36:50 +0200 Subject: [PATCH] feat: :sparkles: implement about and contact page fetch localized content from Payload --- src/api/about.ts | 5 ++- src/api/contact.ts | 5 ++- src/api/gallery.ts | 5 ++- src/api/home.ts | 5 ++- src/api/menu.ts | 8 ++-- src/api/openingTimes.ts | 12 +++++- src/app/(frontend)/[locale]/about/page.tsx | 15 ++++---- src/app/(frontend)/[locale]/contact/page.tsx | 9 +++-- src/app/(frontend)/[locale]/gallery.tsx | 5 ++- src/app/(frontend)/[locale]/layout.tsx | 7 ++-- .../[locale]/menu/category-tab-content.tsx | 4 +- src/app/(frontend)/[locale]/menu/page.tsx | 2 +- src/app/(frontend)/[locale]/page.tsx | 10 ++--- src/app/(frontend)/[locale]/shared.ts | 4 +- src/components/layout/footer.tsx | 7 ++-- src/components/layout/navbar.tsx | 5 ++- src/components/rich-text/serialize.tsx | 38 +++++++++++++++---- src/globals/Contact.tsx | 15 +------- src/globals/ContactEmbedNotice.tsx | 6 +++ src/i18n/en.ts | 12 ++++++ src/i18n/settings.ts | 2 + 21 files changed, 115 insertions(+), 66 deletions(-) create mode 100644 src/globals/ContactEmbedNotice.tsx diff --git a/src/api/about.ts b/src/api/about.ts index 6b19593..1fad738 100644 --- a/src/api/about.ts +++ b/src/api/about.ts @@ -1,6 +1,7 @@ +import type { Options } from "node_modules/payload/dist/globals/operations/local/findOne"; import { getPayload } from "@/utils/payload"; -export const getAbout = async () => { +export const getAbout = async (opts: Omit, "slug"> = {}) => { const payload = await getPayload(); - return await payload.findGlobal({ slug: "about" }); + return await payload.findGlobal({ slug: "about", ...opts }); }; diff --git a/src/api/contact.ts b/src/api/contact.ts index 44c00b1..a3eb0d0 100644 --- a/src/api/contact.ts +++ b/src/api/contact.ts @@ -1,6 +1,7 @@ +import type { Options } from "node_modules/payload/dist/globals/operations/local/findOne"; import { getPayload } from "@/utils/payload"; -export const getContact = async () => { +export const getContact = async (opts: Omit, "slug"> = {}) => { const payload = await getPayload(); - return await payload.findGlobal({ slug: "contact" }); + return await payload.findGlobal({ slug: "contact", ...opts }); }; diff --git a/src/api/gallery.ts b/src/api/gallery.ts index 439cc8e..eeb39df 100644 --- a/src/api/gallery.ts +++ b/src/api/gallery.ts @@ -1,6 +1,7 @@ +import type { Options } from "node_modules/payload/dist/globals/operations/local/findOne"; import { getPayload } from "@/utils/payload"; -export const getGallery = async () => { +export const getGallery = async (opts: Omit, "slug"> = {}) => { const payload = await getPayload(); - return await payload.findGlobal({ slug: "gallery" }); + return await payload.findGlobal({ slug: "gallery", ...opts }); }; diff --git a/src/api/home.ts b/src/api/home.ts index a0f3f4e..8c0d718 100644 --- a/src/api/home.ts +++ b/src/api/home.ts @@ -1,6 +1,7 @@ +import type { Options } from "node_modules/payload/dist/globals/operations/local/findOne"; import { getPayload } from "@/utils/payload"; -export const getHome = async () => { +export const getHome = async (opts: Omit, "slug"> = {}) => { const payload = await getPayload(); - return await payload.findGlobal({ slug: "home" }); + return await payload.findGlobal({ slug: "home", ...opts }); }; diff --git a/src/api/menu.ts b/src/api/menu.ts index 1039428..cc37d91 100644 --- a/src/api/menu.ts +++ b/src/api/menu.ts @@ -1,9 +1,11 @@ -import { Options } from "node_modules/payload/dist/collections/operations/local/find"; +import type { Options } from "node_modules/payload/dist/collections/operations/local/find"; import { getPayload } from "@/utils/payload"; -export const getMenuCategories = async () => { +export const getMenuCategories = async ( + opts: Omit, "collection" | "pagination"> = {}, +) => { const payload = await getPayload(); - return payload.find({ collection: "menu-category", pagination: false }); + return payload.find({ collection: "menu-category", pagination: false, ...opts }); }; export const getMenuItems = async (opts: Omit, "collection">) => { diff --git a/src/api/openingTimes.ts b/src/api/openingTimes.ts index 3f11ee3..69a30ad 100644 --- a/src/api/openingTimes.ts +++ b/src/api/openingTimes.ts @@ -1,6 +1,14 @@ +import type { Options } from "node_modules/payload/dist/collections/operations/local/find"; import { getPayload } from "@/utils/payload"; -export const getOpeningTimes = async () => { +export const getOpeningTimes = async ( + opts: Omit, "collection" | "sort" | "pagination">, +) => { const payload = await getPayload(); - return await payload.find({ collection: "opening-time", sort: "from", pagination: false }); + return await payload.find({ + collection: "opening-time", + sort: "from", + pagination: false, + ...opts, + }); }; diff --git a/src/app/(frontend)/[locale]/about/page.tsx b/src/app/(frontend)/[locale]/about/page.tsx index c39a57c..e6d1ee1 100644 --- a/src/app/(frontend)/[locale]/about/page.tsx +++ b/src/app/(frontend)/[locale]/about/page.tsx @@ -1,17 +1,18 @@ -import { Box, styled } from "@styled-system/jsx"; - +import { Container } from "@styled-system/jsx"; import { Metadata } from "next"; +import { Params } from "../shared"; import RichText from "@/components/rich-text"; import { getAbout } from "@/api"; +import { getI18n } from "@/i18n/server"; -export default async function About() { - const about = await getAbout(); +export default async function About({ params: { locale } }: { params: Params }) { + const t = await getI18n(); + const about = await getAbout({ locale }); return ( - - + - + ); } diff --git a/src/app/(frontend)/[locale]/contact/page.tsx b/src/app/(frontend)/[locale]/contact/page.tsx index ba3c97e..0b45961 100644 --- a/src/app/(frontend)/[locale]/contact/page.tsx +++ b/src/app/(frontend)/[locale]/contact/page.tsx @@ -2,16 +2,17 @@ import { Box, HStack, Stack } from "@styled-system/jsx"; import { getAbout, getContact } from "@/api"; import { Heading } from "@/components/ui/heading"; +import { Params } from "../shared"; import { Text } from "@/components/ui/text"; import { getI18n } from "@/i18n/server"; import { getOpeningTimes } from "@/api/openingTimes"; import { styled } from "@styled-system/jsx"; -export default async function Contact() { +export default async function Contact({ params: { locale } }: { params: Params }) { const t = await getI18n(); - const about = await getAbout(); - const contact = await getContact(); - const openingTimes = await getOpeningTimes(); + const about = await getAbout({ locale }); + const contact = await getContact({ locale }); + const openingTimes = await getOpeningTimes({ locale }); return ( diff --git a/src/app/(frontend)/[locale]/gallery.tsx b/src/app/(frontend)/[locale]/gallery.tsx index 0906574..9c772ce 100644 --- a/src/app/(frontend)/[locale]/gallery.tsx +++ b/src/app/(frontend)/[locale]/gallery.tsx @@ -1,9 +1,10 @@ import Carousel from "@/components/ui/carousel"; +import { Locale } from "@/i18n/settings"; import { Media } from "@/payload-types"; import { getGallery } from "@/api"; -export default async function Gallery() { - const { images } = await getGallery(); +export default async function Gallery({ locale }: { locale: Locale }) { + const { images } = await getGallery({ locale }); return image as Media)} w="100%" />; } diff --git a/src/app/(frontend)/[locale]/layout.tsx b/src/app/(frontend)/[locale]/layout.tsx index 59e18d1..93c2f48 100644 --- a/src/app/(frontend)/[locale]/layout.tsx +++ b/src/app/(frontend)/[locale]/layout.tsx @@ -4,6 +4,7 @@ import Footer from "@/components/layout/footer"; import { I18nProviderClient } from "@/i18n/client"; import { Metadata } from "next"; import Navbar from "@/components/layout/navbar"; +import { Params } from "./shared"; import { getAbout } from "@/api"; import localFont from "next/font/local"; import { locales } from "@/i18n/settings"; @@ -18,18 +19,18 @@ export default async function RootLayout({ params: { locale }, children, }: { - params: { locale: string }; + params: Params; children: React.ReactNode; }) { return ( - + {children} -