update genre to show localized name

prisma/schema.prisma

@@ -102,12 +102,24 @@ model BookOtherNames {
 model Genre {
   id   String @id
   slug String @unique
-  name String
+
+  nameTranslations GenreName[]
+  transliteration  String?
 
   numberOfBooks Int    @default(0)
   books         Book[]
 }
 
+model GenreName {
+  locale String
+  text   String
+
+  genreId String
+  genre   Genre  @relation(fields: [genreId], references: [id], onDelete: Cascade, onUpdate: Cascade)
+
+  @@id([genreId, locale])
+}
+
 enum LocationType {
   Died
   Born

src/app/[locale]/(entityPages)/genre/[genreSlug]/opengraph-image.tsx

@@ -3,6 +3,7 @@ import { loadFileOnEdge } from "@/lib/edge";
 import { notFound } from "next/navigation";
 import { ImageResponse } from "next/og";
 import { findGenreBySlug } from "@/server/services/genres";
+import { getPrimaryLocalizedText } from "@/server/db/localization";
 
 export const runtime = "edge";
 
@@ -30,10 +31,12 @@ export async function generateImageMetadata({
   const genre = await findGenreBySlug(genreSlug);
   if (!genre) return [];
 
+  const primaryText = getPrimaryLocalizedText(genre.nameTranslations, "en");
+
   return [
     {
       id: "main",
-      alt: genre.name,
+      alt: primaryText,
       contentType: "image/png",
       size,
     },
@@ -51,6 +54,8 @@ export default async function Image({
     notFound();
   }
 
+  const primaryText = getPrimaryLocalizedText(genre.nameTranslations, "en");
+
   // Font
   const [calSans, family] = await Promise.all([
     loadFileOnEdge.asArrayBuffer(fonts.calSans),
@@ -71,7 +76,7 @@ export default async function Image({
             fontFamily: "Cal Sans",
           }}
         >
-          {genre.name}
+          {primaryText}
         </h1>
 
         {/* <p

src/app/[locale]/(entityPages)/genre/[genreSlug]/page.tsx

@@ -14,6 +14,8 @@ import { gregorianYearToHijriYear } from "@/lib/date";
 import RegionsFilter from "@/components/regions-filter";
 import { getTranslations } from "next-intl/server";
 import { getMetadata } from "@/lib/seo";
+import { getPrimaryLocalizedText } from "@/server/db/localization";
+import { getPathLocale } from "@/lib/locale/server";
 
 const YearFilter = dynamic(() => import("@/components/year-filter"), {
   ssr: false,
@@ -28,10 +30,13 @@ export const generateMetadata = async ({
   const genre = await findGenreBySlug(genreSlug);
   if (!genre) return;
 
+  const locale = await getPathLocale();
+  const primaryText = getPrimaryLocalizedText(genre.nameTranslations, locale);
+
   return getMetadata({
     hasImage: true,
     pagePath: navigation.genres.bySlug(genreSlug),
-    title: genre.name,
+    title: primaryText,
   });
 };
 
@@ -41,6 +46,7 @@ async function GenrePage({
   routeParams: { genreSlug },
   searchParams,
 }: GenrePageProps) {
+  const locale = await getPathLocale();
   const genre = await findGenreBySlug(decodeURIComponent(genreSlug));
 
   if (!genre) {
@@ -63,7 +69,7 @@ async function GenrePage({
     },
   });
 
-  const primaryName = genre.name;
+  const primaryName = getPrimaryLocalizedText(genre.nameTranslations, locale);
   const secondaryName = null;
 
   return (

src/app/[locale]/t/[bookId]/_components/content-tab/index.tsx

@@ -321,7 +321,10 @@ export default function ContentTab({ bookResponse }: TabProps) {
                         variant="secondary"
                         className="font-normal"
                       >
-                        {genre.name}
+                        {getPrimaryLocalizedText(
+                          genre.nameTranslations,
+                          pathLocale,
+                        )}
                       </Badge>
                     </Link>
                   ))}

src/components/genres-filter/client.tsx

@@ -8,6 +8,8 @@ import FilterContainer from "@/components/search-results/filter-container";
 import { useSearchParams, type ReadonlyURLSearchParams } from "next/navigation";
 import { useFormatter, useTranslations } from "next-intl";
 import type { findAllGenresWithBooksCount } from "@/server/services/genres";
+import { getPrimaryLocalizedText } from "@/server/db/localization";
+import { usePathLocale } from "@/lib/locale/utils";
 
 const DEBOUNCE_DELAY = 300;
 
@@ -50,6 +52,7 @@ export default function _GenresFilter({
   const { replace } = useRouter();
   const searchParams = useSearchParams();
   const [size, setSize] = useState(10);
+  const locale = usePathLocale();
 
   const genreIdToGenreName = useMemo(() => {
     return Object.fromEntries(genres.map((item) => [item.id, item]));
@@ -152,7 +155,11 @@ export default function _GenresFilter({
           // const count = genreIdToBooksCount[genre.genreId.toLowerCase()] ?? 0;
           const booksCount = formatter.number(genre._count.books);
 
-          const title = `${genre.name} (${booksCount})`;
+          const primaryText = getPrimaryLocalizedText(
+            genre.nameTranslations,
+            locale,
+          );
+          const title = `${primaryText} (${booksCount})`;
 
           return (
             <FilterContainer.Checkbox
@@ -163,7 +170,7 @@ export default function _GenresFilter({
               checked={selectedGenres.includes(genre.id)}
               onCheckedChange={() => handleChange(genre.id)}
             >
-              {genre.name}
+              {primaryText}
             </FilterContainer.Checkbox>
           );
         })}

src/server/services/books.ts

@@ -43,7 +43,9 @@ const getBook = async (id: string, locale: string) => {
           bioTranslations: localeWhere,
         },
       },
-      genres: true,
+      genres: {
+        include: { nameTranslations: localeWhere },
+      },
       primaryNameTranslations: localeWhere,
       otherNameTranslations: localeWhere,
     },

src/server/services/genres.ts

@@ -3,35 +3,54 @@
 import { cache } from "react";
 import { db } from "../db";
 import { unstable_cache } from "next/cache";
+import { PathLocale } from "@/lib/locale/utils";
+import { getLocaleWhereClause } from "../db/localization";
 
-export const findAllGenres = cache(async () => {
-  return await db.genre.findMany();
-});
+export const findAllGenres = cache(async (locale: PathLocale = "en") => {
+  const localeWhere = getLocaleWhereClause(locale);
 
-export const findGenreBySlug = cache(async (slug: string) => {
-  const genreRecord = await db.genre.findUnique({
-    where: {
-      slug,
+  return await db.genre.findMany({
+    include: {
+      nameTranslations: localeWhere,
     },
   });
+});
 
-  if (!genreRecord) {
-    return;
-  }
+export const findGenreBySlug = cache(
+  async (slug: string, locale: PathLocale = "en") => {
+    const localeWhere = getLocaleWhereClause(locale);
 
-  return genreRecord;
-});
+    const genreRecord = await db.genre.findUnique({
+      where: {
+        slug,
+      },
+      include: {
+        nameTranslations: localeWhere,
+      },
+    });
+
+    if (!genreRecord) {
+      return;
+    }
+
+    return genreRecord;
+  },
+);
 
 export const findAllGenresWithBooksCount = cache(
   async ({
     yearRange,
     authorId,
     regionId,
+    locale = "en",
   }: {
     yearRange?: [number, number];
     authorId?: string;
     regionId?: string;
+    locale?: PathLocale;
   } = {}) => {
+    const localeWhere = getLocaleWhereClause(locale);
+
     const base = await db.genre.findMany({
       include: {
         _count: {
@@ -64,6 +83,7 @@ export const findAllGenresWithBooksCount = cache(
             },
           },
         },
+        nameTranslations: localeWhere,
       },
     });