Merge branch 'main' of https://github.com/Blazity/hygraph-next-enterp…

…rise
Blazity · Oct 18, 2023 · 0e19273 · 0e19273
2 parents 785b12d + 489b37c
commit 0e19273
Show file tree

Hide file tree

Showing 11 changed files with 122 additions and 64 deletions.
diff --git a/src/app/api/og/route.tsx b/src/app/api/og/route.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable @next/next/no-img-element */
 /* eslint-disable jsx-a11y/alt-text */
-import { ImageResponse, NextRequest } from "next/server"
+import { ImageResponse, NextRequest, NextResponse } from "next/server"
 
 export const runtime = "edge"
 
@@ -9,7 +9,10 @@ export async function GET(request: NextRequest) {
   const image = searchParams.get("image")
   const title = searchParams.get("title")
 
-  console.log({ image, title })
+  const isHygraphImage = image?.startsWith("https://media.graphassets.com")
+
+  if (!isHygraphImage)
+    return NextResponse.json({ msg: "An image from an unknown source has been provided" }, { status: 415 })
 
   return new ImageResponse(
     (

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -3,7 +3,6 @@ import { Navigation } from "@/components/Navigation/Navigation"
 import { env } from "@/env.mjs"
 import { i18n, type Locale } from "@/i18n/i18n"
 import "@/styles/tailwind.css"
-
 import { getNavigation } from "@/lib/client"
 import { GoogleAnalytics } from "./GoogleAnalytics"
 import Providers from "./Providers"
@@ -35,7 +34,7 @@ export async function generateMetadata({ params }: { params: { lang: Locale } })
 
 export default async function Layout({ children, params }: { children: React.ReactNode; params: { lang?: Locale } }) {
   const locale = params.lang ?? i18n.defaultLocale
-  const navigation = await getNavigation(locale)
+  const { navigation, footer } = await getNavigation(locale)
 
   return (
     <html lang={locale}>
@@ -49,7 +48,7 @@ export default async function Layout({ children, params }: { children: React.Rea
           </div>
 
           <main className="mx-auto flex w-full max-w-[1200px] flex-1 flex-col px-4 pb-16">{children}</main>
-          <Footer lang={locale} />
+          <Footer footer={footer} lang={locale} />
         </body>
       </Providers>
     </html>

diff --git a/src/components/ArticleCard/ArticleCard.tsx b/src/components/ArticleCard/ArticleCard.tsx
@@ -55,7 +55,7 @@ export function ArticleCard({
   locale,
   isMain = false,
 }: ArticleCardProps) {
-  const mainTag = tags[0]
+  const mainTag = tags?.[0]
   return (
     <Link href={`/${locale}/article/${slug}`} hrefLang={locale} passHref className="w-full">
       <article
@@ -95,7 +95,7 @@ export function ArticleCard({
             <div className="flex w-full flex-wrap justify-between">
               {tagsPosition === "over" && (
                 <div className="flex gap-2">
-                  {tags.slice(0, MAX_TAGS_TO_DISPLAY).map((tag) => {
+                  {tags?.slice(0, MAX_TAGS_TO_DISPLAY).map((tag) => {
                     return <Tag key={tag}>{tag}</Tag>
                   })}
                 </div>

diff --git a/src/components/CategoryArticles/CategoryArticlesInfinite.tsx b/src/components/CategoryArticles/CategoryArticlesInfinite.tsx
@@ -22,7 +22,7 @@ export function RecentArticlesInfinite({ initialArticles, category }: CategoryAr
     fetchNextPage,
     hasNextPage,
   } = useInfiniteQuery({
-    queryKey: ["category-articles" + category],
+    queryKey: ["category-articles", category],
     queryFn: ({ pageParam = 0 }) =>
       listArticlesByCategory({
         locale,

diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -1,27 +1,72 @@
+import { Facebook, Instagram, Twitter, Youtube } from "lucide-react"
+import Image from "next/image"
 import Link from "next/link"
 import { Locale } from "@/i18n/i18n"
-import { getFooter } from "@/lib/client"
+import { DynamicLangSelect } from "../LangSelect/DynamicLangSelect"
+import { GetNavigationReturn } from "../Navigation/Navigation"
 
 type FooterProps = {
+  footer: Pick<GetNavigationReturn, "footer">["footer"]
   lang: Locale
 }
 
-export async function Footer({ lang }: FooterProps) {
-  const footer = await getFooter(lang)
-
+export async function Footer({ lang, footer }: FooterProps) {
+  if (!footer?.contactSection) return null
+  const { street, city, country, postCode } = footer.contactSection
+  const { companyName, links, instagramLink, facebookLink, twitterLink, youtubeLink } = footer
   return (
-    <footer className="flex w-full items-center justify-center border-t border-slate-200">
-      <nav className="w-full max-w-[1200px] p-4">
-        <ul className="flex gap-5">
-          {footer.pages.map((footerElement) => (
-            <li key={footerElement?.slug}>
-              <Link href={`/${lang}/${footerElement?.slug}`} hrefLang={lang}>
-                {footerElement?.title}
-              </Link>
-            </li>
-          ))}
-        </ul>
-      </nav>
+    <footer className="flex w-full items-center justify-center bg-custom-gray-200 py-12">
+      <div className="flex w-full max-w-[1200px] flex-wrap justify-between gap-10 p-4 lg:gap-0">
+        <div className="flex flex-col justify-between gap-10 md:gap-0">
+          <Image src={footer?.logo?.url ?? ""} width={100} height={30} alt="site-logo" quality={100} />
+          <div className="text-sm">
+            <p className="font-bold">{companyName}</p>
+            <p>{street}</p>
+            <div className="flex gap-2">
+              <p>{postCode}</p>
+              <p>{city}</p>
+            </div>
+            <p>{country}</p>
+          </div>
+        </div>
+        <nav className="flex flex-col gap-10 md:gap-7">
+          <div className="flex gap-4">
+            <Link href={twitterLink ?? ""} target="_blank">
+              <Twitter />
+            </Link>
+            <Link href={facebookLink ?? ""} target="_blank">
+              <Facebook />
+            </Link>
+            <Link href={instagramLink ?? ""} target="_blank">
+              <Instagram />
+            </Link>
+            <Link href={youtubeLink ?? ""} target="_blank">
+              <Youtube />
+            </Link>
+          </div>
+          <ul className="grid grid-cols-3 gap-x-10 gap-y-7 text-sm font-semibold md:gap-x-20">
+            {links?.map((footerElement) => {
+              const categoryUrl = footerElement.element?.__typename === "Category" ? "/category" : ""
+              const url = `/${lang}${categoryUrl}/${footerElement?.element?.slug}`
+              return (
+                <li key={footerElement?.element?.slug}>
+                  <Link href={url} hrefLang={lang}>
+                    {footerElement?.element?.title}
+                  </Link>
+                </li>
+              )
+            })}
+          </ul>
+        </nav>
+        <div className="flex flex-col justify-between gap-10 lg:gap-0">
+          <div className="flex w-1/3 justify-end lg:w-full">
+            <DynamicLangSelect />
+          </div>
+          <p className="text-sm text-custom-gray-300">
+            © {new Date().getFullYear()} {companyName} All rights reserved.
+          </p>
+        </div>
+      </div>
     </footer>
   )
 }
diff --git a/src/components/HighlightedCategoryArticles/HighlightedCategoryArticles.tsx b/src/components/HighlightedCategoryArticles/HighlightedCategoryArticles.tsx
@@ -2,7 +2,7 @@ import { Locale } from "@/i18n/i18n"
 import { getRecentArticlesByCategory } from "@/lib/client"
 import { ArticleCard, hygraphArticleToCardProps } from "../ArticleCard/ArticleCard"
 
-export const RECENT_ARTICLES_PER_PAGE = 6
+export const RECENT_ARTICLES_PER_PAGE = 4
 
 type RecentArticlesProps = {
   locale: Locale
@@ -11,23 +11,21 @@ type RecentArticlesProps = {
 }
 
 export async function HighlightedCategoryArticles({ locale, title, categoryId }: RecentArticlesProps) {
-  const { articles } = await getRecentArticlesByCategory({ locale, first: 4, categoryId })
+  const { articles } = await getRecentArticlesByCategory({ locale, first: RECENT_ARTICLES_PER_PAGE, categoryId })
 
   return (
     <section className="w-full">
       <h2 className="py-12 pb-8 text-3xl font-bold">{title}</h2>
       <div className="grid gap-5 lg:grid-cols-2">
-        {articles.map((article) => {
-          return (
-            <ArticleCard
-              orientation="horizontal"
-              key={`category-${article.id}`}
-              article={hygraphArticleToCardProps(article)}
-              locale={locale}
-              lines="3"
-            />
-          )
-        })}
+        {articles.map((article) => (
+          <ArticleCard
+            orientation="horizontal"
+            key={`category-${article.id}`}
+            article={hygraphArticleToCardProps(article)}
+            locale={locale}
+            lines="3"
+          />
+        ))}
       </div>
     </section>
   )

diff --git a/src/components/LangSelect/LangSelect.tsx b/src/components/LangSelect/LangSelect.tsx
@@ -18,7 +18,10 @@ function LangSelect() {
 
   return (
     <Select value={lang} onValueChange={(locale) => router.push(`/${locale}`)}>
-      <SelectTrigger className="w-full min-w-full rounded-xl lg:w-[70px] lg:min-w-[70px]" aria-label="language select">
+      <SelectTrigger
+        className="w-full min-w-full rounded-xl bg-white lg:w-[70px] lg:min-w-[70px]"
+        aria-label="language select"
+      >
         <SelectValue>{lang.toUpperCase()}</SelectValue>
       </SelectTrigger>
       <SelectContent className="bg-white">

diff --git a/src/components/Navigation/Navigation.tsx b/src/components/Navigation/Navigation.tsx
@@ -10,8 +10,10 @@ import { DynamicSearchDialog } from "../Search/DynamicSearchDialog"
 import { Button } from "../ui/Button/Button"
 import { Sheet, SheetContent, SheetTrigger } from "../ui/Sheet/Sheet"
 
+export type GetNavigationReturn = Awaited<ReturnType<typeof getNavigation>>
+
 type NavigationProps = {
-  navigation: Awaited<ReturnType<typeof getNavigation>>
+  navigation: Pick<GetNavigationReturn, "navigation">["navigation"]
   locale: Locale
 }
 

diff --git a/src/lib/client.ts b/src/lib/client.ts
@@ -14,7 +14,7 @@ import {
   listArticlesBySlugQuery,
   listArticlesForSitemapQuery,
 } from "./queries/articles"
-import { getFooterQuery, getHomepageMetadataQuery, getHomepageQuery, getNavigationQuery } from "./queries/components"
+import { getHomepageMetadataQuery, getHomepageQuery, getNavigationQuery } from "./queries/components"
 import { getPageBySlugQuery, getPageMetadataBySlugQuery, listPagesForSitemapQuery } from "./queries/pages"
 import { getQuizQuestionsByIdQuery } from "./queries/quizes"
 import { Tag } from "./tags"
@@ -69,16 +69,6 @@ export async function graphqlFetch<TQuery, TVariables>({
   return parsed.data
 }
 
-export async function getFooter(locale: Locale) {
-  const { footers } = await graphqlFetch({
-    cache: "force-cache",
-    document: getFooterQuery,
-    tags: ["FOOTER", "PAGE"],
-    variables: { locale },
-  })
-  return footers[0] ?? null
-}
-
 export async function getHomepage(locale: Locale) {
   const { homepages, marketStock } = await graphqlFetch({
     document: getHomepageQuery,
@@ -99,14 +89,14 @@ export async function getHomepageMetadata(locale: Locale) {
 }
 
 export async function getNavigation(locale: Locale) {
-  const { navigations } = await graphqlFetch({
+  const { navigations, footers } = await graphqlFetch({
     cache: "force-cache",
     document: getNavigationQuery,
     tags: ["NAVIGATION", "PAGE"],
     variables: { locale },
   })
 
-  return navigations[0] ?? null
+  return { navigation: navigations[0] ?? null, footer: footers[0] ?? null }
 }
 
 export async function getArticlesQuantity(locale: Locale) {

diff --git a/src/lib/queries/components.ts b/src/lib/queries/components.ts
@@ -21,6 +21,36 @@ export const getNavigationQuery = graphql(`
         url
       }
     }
+    footers(locales: $locales, first: 1) {
+      logo {
+        url
+      }
+      companyName
+      youtubeLink
+      twitterLink
+      instagramLink
+      facebookLink
+      contactSection {
+        country
+        city
+        postCode
+        street
+      }
+      links {
+        element {
+          ... on Category {
+            __typename
+            title
+            slug
+          }
+          ... on Page {
+            __typename
+            title
+            slug
+          }
+        }
+      }
+    }
   }
 `)
 
@@ -72,14 +102,3 @@ export const getHomepageMetadataQuery = graphql(`
     }
   }
 `)
-
-export const getFooterQuery = graphql(`
-  query getFooter($locales: [Locale!]!) {
-    footers(locales: $locales, first: 1) {
-      pages {
-        slug
-        title
-      }
-    }
-  }
-`)
diff --git a/src/middleware.ts b/src/middleware.ts
@@ -19,7 +19,6 @@ function getLocale(request: NextRequest) {
 const mapHeadersToObject = (headers: Headers) => fromPairs(Array.from(headers.entries()))
 
 export function middleware(request: NextRequest) {
-  console.log("hello middleware")
   const pathname = request.nextUrl.pathname
   const pathnameIsMissingLocale = i18n.locales.every(
     (locale) => !pathname.startsWith(`/${locale}/`) && pathname !== `/${locale}`