Merge pull request #94 from Blazity/g-translations

feat: add global translations
Blazity · Nov 9, 2023 · 7d2c955 · 7d2c955
2 parents 2efb2be + ec147a5
commit 7d2c955
Show file tree

Hide file tree

Showing 17 changed files with 164 additions and 18 deletions.
diff --git a/src/app/Providers.tsx b/src/app/Providers.tsx
@@ -3,8 +3,16 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import { ReactNode, useState } from "react"
 import { TooltipProvider } from "@/components/ui/Tooltip/Tooltip"
+import { GlobalTranslations } from "@/i18n/setTranslations"
+import { TranslationsProvider } from "@/i18n/useTranslations"
 
-export default function Providers({ children }: { children: ReactNode }) {
+export default function Providers({
+ children,
+ translations,
+}: {
+ children: ReactNode
+ translations: GlobalTranslations
+}) {
  const [queryClient] = useState(
  () =>
  new QueryClient({
@@ -18,7 +26,9 @@ export default function Providers({ children }: { children: ReactNode }) {
  )
  return (
  <QueryClientProvider client={queryClient}>
- <TooltipProvider>{children}</TooltipProvider>
+ <TranslationsProvider translations={translations}>
+ <TooltipProvider>{children}</TooltipProvider>
+ </TranslationsProvider>
  </QueryClientProvider>
  )
 }
diff --git a/src/app/[lang]/category/[slug]/page.tsx b/src/app/[lang]/category/[slug]/page.tsx
@@ -1,6 +1,8 @@
 import { Metadata } from "next/types"
+import { unstable_setRequestLocale } from "next-intl/server"
 import { CategoryArticles } from "@/components/CategoryArticles/CategoryArticles"
 import { Locale } from "@/i18n/i18n"
+import { setTranslations } from "@/i18n/setTranslations"
 import { getMatadataObj } from "@/utils/getMetadataObj"
 
 type ArticlePageProps = { params: { slug: string; lang: Locale } }
@@ -9,6 +11,9 @@ export async function generateMetadata({ params: { slug } }: ArticlePageProps):
  return getMatadataObj({ title: `Category - ${slug}` })
 }
 
-export default async function Web({ params: { slug } }: ArticlePageProps) {
+export default async function Web({ params: { slug, lang } }: ArticlePageProps) {
+ unstable_setRequestLocale(lang)
+ await setTranslations(lang)
+
  return <CategoryArticles category={slug} />
 }
diff --git a/src/app/[lang]/layout.tsx b/src/app/[lang]/layout.tsx
@@ -6,6 +6,7 @@ import { Navigation } from "@/components/Navigation/Navigation"
 import { env } from "@/env.mjs"
 import { i18n, type Locale } from "@/i18n/i18n"
 import "@/styles/tailwind.css"
+import { setTranslations } from "@/i18n/setTranslations"
 import { getNavigation } from "@/lib/client"
 import { GoogleAnalytics } from "../GoogleAnalytics"
 import Providers from "../Providers"
@@ -40,13 +41,13 @@ export default async function Layout({ children, params }: { children: React.Rea
  const isValidLocale = i18n.locales.some((cur) => cur === locale)
  if (!isValidLocale) notFound()
  unstable_setRequestLocale(locale)
-
+ const translations = await setTranslations(locale)
  const { navigation, footer, logo } = await getNavigation(locale)
 
  return (
  <html lang={locale}>
  <GoogleAnalytics />
- <Providers>
+ <Providers translations={translations}>
  <body className="flex min-h-screen flex-col items-center ">
  <div className="z-50 flex w-full justify-center border-b bg-white">
  <nav className="flex w-full max-w-[1200px] items-center justify-end gap-4 py-4">

diff --git a/src/app/[lang]/page.tsx b/src/app/[lang]/page.tsx
@@ -8,6 +8,7 @@ import { RecentArticles } from "@/components/RecentArticles/RecentArticles"
 import { StockDisplay } from "@/components/StockDisplay/StockDisplay"
 import { TrendingArticles } from "@/components/TrendingArticles/TrendingArticles"
 import { i18n, Locale } from "@/i18n/i18n"
+import { setTranslations } from "@/i18n/setTranslations"
 import { getHomepage, getHomepageMetadata } from "@/lib/client"
 import { getMatadataObj } from "@/utils/getMetadataObj"
 
@@ -25,6 +26,7 @@ export async function generateMetadata({ params }: { params: { lang: Locale } })
 export default async function Web({ params }: { params: { lang: Locale } }) {
  unstable_setRequestLocale(params.lang)
  const homepage = await getHomepage(params.lang)
+ await setTranslations(params.lang)
 
  return (
  <>

diff --git a/src/components/ArticleCard/ArticleCard.tsx b/src/components/ArticleCard/ArticleCard.tsx
@@ -89,14 +89,14 @@ export function ArticleCard({
  quality={100}
  sizes="(max-width: 220px) 82px, 480px, (max-width: 640px) 480px, 780px, (max-width: 1024px) 780px, 1020px"
  className={cn(
- "h-[82px] min-h-[82px] w-full rounded-xl object-cover text-center brightness-90 md:h-[264px] md:min-h-[264px] md:rounded-none",
+ "h-[82px] min-h-[82px] w-full rounded-xl bg-gradient-to-br from-gray-200 to-gray-300 object-cover text-center brightness-90 md:h-[264px] md:min-h-[264px] md:rounded-none",
  isMain && "h-[264px] min-h-[264px] rounded-none"
  )}
  />
  )}
  <div
  className={cn(
- "absolute inset-0 z-20 hidden w-full flex-col items-start justify-end p-6 md:flex",
+ "absolute inset-0 z-20 hidden w-full flex-col items-start justify-end  p-6 md:flex",
  isMain && "flex"
  )}
  >

diff --git a/src/components/CategoryArticles/CategoryArticles.tsx b/src/components/CategoryArticles/CategoryArticles.tsx
@@ -3,6 +3,7 @@ import { NextIntlClientProvider } from "next-intl"
 import { useLocale } from "@/i18n/i18n"
 import { listArticlesByCategory } from "@/lib/client"
 import { CategoryArticlesInfiniteDynamic } from "./CategoryArticlesInfiniteDynamic"
+import { getTranslations } from "@/i18n/setTranslations"
 
 export const CATEGORY_ARTICLES_PER_PAGE = 4
 
@@ -12,6 +13,7 @@ type CategoryArticlesProps = {
 
 export async function CategoryArticles({ category }: CategoryArticlesProps) {
  const locale = useLocale()
+ const translations = getTranslations()
  const articles = await listArticlesByCategory({
  locale: locale,
  categorySlug: category,
@@ -22,8 +24,8 @@ export async function CategoryArticles({ category }: CategoryArticlesProps) {
  return (
  <section className="w-full">
  <div className="mb-10 w-full border-b-[1px] py-14">
- <h2 className="mb-6 text-3xl font-bold">Search Category</h2>
- <p className="mb-2 text-xs">Showing {articles.count} results for: </p>
+ <h2 className="mb-6 text-3xl font-bold">{translations.searchCategory}</h2>
+ <p className="mb-2 text-xs">{`${translations.showing} ${articles.count} ${translations.resultsFor}`}</p>
  <p className="text-xl font-bold">&quot;{category}&quot;</p>
  </div>
  <div className="mx-auto w-full">

diff --git a/src/components/CategoryArticles/CategoryArticlesInfinite.tsx b/src/components/CategoryArticles/CategoryArticlesInfinite.tsx
@@ -4,6 +4,7 @@ import { useInfiniteQuery } from "@tanstack/react-query"
 import { Button } from "@/components/ui/Button/Button"
 import { ListArticlesByCategoryQuery } from "@/gql/graphql"
 import { useLocale } from "@/i18n/i18n"
+import { useTranslations } from "@/i18n/useTranslations"
 import { listArticlesByCategory } from "@/lib/client"
 import { CATEGORY_ARTICLES_PER_PAGE } from "./CategoryArticles"
 import { ArticlesGrid } from "../ArticlesGrid/ArticlesGrid"
@@ -15,6 +16,7 @@ export type CategoryArticlesInfiniteProps = {
 
 export function RecentArticlesInfinite({ initialArticles, category }: CategoryArticlesInfiniteProps) {
  const locale = useLocale()
+ const translations = useTranslations()
 
  const {
  data: categoryArticlesQuery,
@@ -41,7 +43,7 @@ export function RecentArticlesInfinite({ initialArticles, category }: CategoryAr
  })
 
  const articles = categoryArticlesQuery?.pages.flatMap((page) => page.articles)
- const buttonText = isFetchingNextPage ? "Loading" : "See more"
+ const buttonText = isFetchingNextPage ? translations.loading : translations.showMore
 
  return (
  <>

diff --git a/src/components/RecentArticles/RecentArticlesInfinite.tsx b/src/components/RecentArticles/RecentArticlesInfinite.tsx
@@ -4,6 +4,7 @@ import { useInfiniteQuery } from "@tanstack/react-query"
 import { Button } from "@/components/ui/Button/Button"
 import { GetRecentArticlesQuery } from "@/gql/graphql"
 import { useLocale } from "@/i18n/i18n"
+import { useTranslations } from "@/i18n/useTranslations"
 import { getRecentArticles } from "@/lib/client"
 import { RECENT_ARTICLES_PER_PAGE } from "./RecentArticles"
 import { ArticleCard, hygraphArticleToCardProps } from "../ArticleCard/ArticleCard"
@@ -14,6 +15,7 @@ export type RecentArticlesInfiniteProps = {
 
 export function RecentArticlesInfinite({ initialArticles }: RecentArticlesInfiniteProps) {
  const locale = useLocale()
+ const translations = useTranslations()
 
  const {
  data: recentArticlesQuery,
@@ -51,7 +53,7 @@ export function RecentArticlesInfinite({ initialArticles }: RecentArticlesInfini
  </div>
  {hasNextPage && (
  <Button className="w-full rounded-xl border p-4" disabled={isFetchingNextPage} onClick={() => fetchNextPage()}>
- See more
+ {translations.showMore}
  </Button>
  )}
  </section>

diff --git a/src/components/RecommendedArticles/RecommendedArticles.tsx b/src/components/RecommendedArticles/RecommendedArticles.tsx
@@ -2,13 +2,15 @@
 
 import { useQuery } from "@tanstack/react-query"
 import { useLocale } from "@/i18n/i18n"
+import { useTranslations } from "@/i18n/useTranslations"
 import { getArticleRecommendedArticles } from "@/lib/client"
 import { ArticleCard, hygraphArticleToCardProps } from "../ArticleCard/ArticleCard"
 
 type RecommendedArticlesProps = { id: string }
 
 export function RecommendedArticles({ id }: RecommendedArticlesProps) {
  const locale = useLocale()
+ const translations = useTranslations()
  const { data: recommendedArticles, isLoading } = useQuery({
  queryKey: [`recommended-articles`, id],
  queryFn: () => getArticleRecommendedArticles({ locale, id }),
@@ -17,7 +19,7 @@ export function RecommendedArticles({ id }: RecommendedArticlesProps) {
  if (!isLoading && recommendedArticles?.length === 0) return null
  return (
  <section className="w-full py-4">
- <h2 className="mb-8 text-2xl font-bold">Related articles</h2>
+ <h2 className="mb-8 text-2xl font-bold">{translations.relatedArticles}</h2>
  <div className={`grid gap-8 md:grid-cols-3`}>
  {isLoading &&
  Array.from(Array(3).keys()).map((idx) => {

diff --git a/src/components/Search/RefinementCombobox.tsx b/src/components/Search/RefinementCombobox.tsx
@@ -8,11 +8,13 @@ import { Button } from "@/components/ui/Button/Button"
 
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from "@/components/ui/Command/Command"
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/Popover/Popover"
+import { useTranslations } from "@/i18n/useTranslations"
 import { cn } from "@/utils/cn"
 
 type RefinementComboboxProps = UseRefinementListProps
 
 export function RefinementCombobox(props: RefinementComboboxProps) {
+ const translations = useTranslations()
  const { items, refine } = useRefinementList(props)
  const [open, setOpen] = React.useState(false)
 
@@ -26,7 +28,7 @@ export function RefinementCombobox(props: RefinementComboboxProps) {
  aria-expanded={open}
  className="w-[150px] justify-between bg-gray-100 text-gray-400"
  >
- {"Select tag..."}
+ {`${translations.selectTag}...`}
  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
  </Button>
  </PopoverTrigger>
@@ -49,7 +51,7 @@ export function RefinementCombobox(props: RefinementComboboxProps) {
  <PopoverContent className="ml-6 w-[200px] bg-white p-0">
  <Command>
  <CommandInput placeholder="Search tags.." />
- <CommandEmpty>No tags found.</CommandEmpty>
+ <CommandEmpty>{translations.noTagsFound}</CommandEmpty>
  <CommandGroup value={"value"}>
  {items
  .sort((a, b) => a.label.localeCompare(b.label))

diff --git a/src/components/Search/SearchDialog.tsx b/src/components/Search/SearchDialog.tsx
@@ -20,6 +20,7 @@ import { Dialog, DialogContent, DialogHeader, DialogTrigger } from "@/components
 import { Input } from "@/components/ui/Input/Input"
 import { env } from "@/env.mjs"
 import { Locale, useLocale } from "@/i18n/i18n"
+import { useTranslations } from "@/i18n/useTranslations"
 import { RefinementCombobox } from "./RefinementCombobox"
 import { Tag } from "../ArticleCard/Buttons/Tag"
 import { Popover } from "../ui/Popover/Popover"
@@ -125,11 +126,12 @@ function NoResultsBoundary({ children, fallback }: { children: ReactNode; fallba
 
 function NoResults() {
  const { indexUiState } = useInstantSearch()
+ const translations = useTranslations()
 
  return (
  <div className="flex w-full justify-center px-2 py-4">
  <p className=" text-sm text-slate-600">
- No results for <q>{indexUiState.query}</q>.
+ {translations.noResultsFor} <q>{indexUiState.query}</q>.
  </p>
  </div>
  )
@@ -140,6 +142,7 @@ const queryHook: UseSearchBoxProps["queryHook"] = (query, search) => {
 }
 
 function DebouncedSearchBox() {
+ const translations = useTranslations()
  const { refine, query } = useSearchBox({
  queryHook,
  })
@@ -153,7 +156,15 @@ function DebouncedSearchBox() {
  debouncedRefine(value)
  }
 
- return <Input type="search" value={inputValue} onChange={onChange} placeholder="Search..." aria-label="Search" />
+ return (
+ <Input
+ type="search"
+ value={inputValue}
+ onChange={onChange}
+ placeholder={`${translations.search}...`}
+ aria-label={translations.search}
+ />
+ )
 }
 
 export default SearchDialogContent
diff --git a/src/components/ShareOnSocial/ShareOnSocial.tsx b/src/components/ShareOnSocial/ShareOnSocial.tsx
@@ -1,12 +1,15 @@
 import { Facebook, Linkedin, Twitter } from "lucide-react"
 import { useLocale } from "@/i18n/i18n"
+import { getTranslations } from "@/i18n/setTranslations"
 
 type ShareOnSocialProps = {
  articleTitle: string
  articleUrl: string
 }
 
 export function ShareOnSocial({ articleTitle, articleUrl }: ShareOnSocialProps) {
+ const translations = getTranslations()
+
  const locale = useLocale()
  const encodedTitle = encodeURIComponent(articleTitle)
  const encodedUrl = encodeURIComponent(articleUrl)
@@ -17,7 +20,7 @@ export function ShareOnSocial({ articleTitle, articleUrl }: ShareOnSocialProps)
 
  return (
  <div className="flex items-center justify-between gap-2 py-5 lg:justify-normal">
- <p className="pr-3 text-sm opacity-60">Share on social:</p>
+ <p className="pr-3 text-sm opacity-60">{translations.shareOnSocial}:</p>
  <div className="flex items-center gap-2">
  <a href={twitterShareUrl} aria-label="Twitter" hrefLang={locale} className="rounded-xl bg-black p-2">
  <Twitter fill="white" stroke="none" />

diff --git a/src/i18n/setTranslations.ts b/src/i18n/setTranslations.ts
@@ -0,0 +1,46 @@
+import pickBy from "lodash/pickBy"
+import { cache } from "react"
+import { GetGlobalTranslationsQuery } from "@/gql/graphql"
+import { getGlobalTranslations } from "@/lib/client"
+import { Locale } from "./i18n"
+
+type NonNullableProperty<T> = { [P in keyof T]: NonNullable<T[P]> }
+type RequiredNonNullable<T> = Required<NonNullableProperty<T>>
+export type GlobalTranslations = RequiredNonNullable<
+ Omit<NonNullable<NonNullable<GetGlobalTranslationsQuery["translationsSingleton"]>["translations"]>, "__typename">
+>
+
+export const defaultTranslations = {
+ showMore: "Show More (fallback)",
+ showing: "Showing",
+ resultsFor: "results for",
+ searchCategory: "Search Category",
+ search: "Search (fallback)",
+ selectTag: "Select tag (fallback)",
+ shareOnSocial: "Share on social",
+ relatedArticles: "Related articles",
+ noTagsFound: "No tags found.",
+ noResultsFor: "No results for",
+ loading: "Loading",
+}
+
+const getCache = cache(() => {
+ const value: { translations: GlobalTranslations } = {
+ translations: defaultTranslations,
+ }
+ return value
+})
+
+export async function setTranslations(locale: Locale) {
+ const translations = await getGlobalTranslations({ locale })
+
+ const merged = translations
+ ? { ...defaultTranslations, ...pickBy(translations, (val) => Boolean(val)) }
+ : defaultTranslations
+ getCache().translations = merged
+ return merged
+}
+
+export function getTranslations() {
+ return getCache().translations
+}
diff --git a/src/i18n/useTranslations.tsx b/src/i18n/useTranslations.tsx
@@ -0,0 +1,24 @@
+"use client"
+import { createContext, ReactNode, useContext } from "react"
+import { GlobalTranslations } from "./setTranslations"
+
+const TranslationsContext = createContext<GlobalTranslations | null>(null)
+
+export const TranslationsProvider = ({
+ children,
+ translations,
+}: {
+ children: ReactNode
+ translations: GlobalTranslations
+}) => {
+ return <TranslationsContext.Provider value={translations}>{children}</TranslationsContext.Provider>
+}
+
+export const useTranslations = () => {
+ const context = useContext(TranslationsContext)
+ if (!context) {
+ throw new Error("useTranslations must be used within a TranslationsProvider")
+ }
+
+ return context
+}