refactor: Add support for Zenless API in dataApi

This commit adds support for the Zenless API in the dataApi module. It imports the ZENLESS_API_URL constant from the constants module and includes it in the getZenlessData function. This allows fetching data from the Zenless API using the specified resource parameter. The addition of this functionality expands the data retrieval capabilities of the application.
dvaJi · Jul 22, 2024 · a782765 · a782765
1 parent 3c2bbfa
commit a782765
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 44 deletions.
diff --git a/app/[lang]/zenless/bangboos/[slug]/page.tsx b/app/[lang]/zenless/bangboos/[slug]/page.tsx
@@ -1,36 +1,23 @@
-import { i18n } from "i18n-config";
 import type { Metadata } from "next";
 import importDynamic from "next/dynamic";
 import { notFound } from "next/navigation";
 
 import Image from "@components/zenless/Image";
 import type { Bangboos } from "@interfaces/zenless/bangboos";
 import { AD_ARTICLE_SLOT } from "@lib/constants";
-import { getRemoteData } from "@lib/localData";
+import { getZenlessData } from "@lib/dataApi";
 
 const Ads = importDynamic(() => import("@components/ui/Ads"), { ssr: false });
 const FrstAds = importDynamic(() => import("@components/ui/FrstAds"), {
   ssr: false,
 });
 
 export const dynamic = "force-static";
-export const revalidate = 43200;
+export const dynamicParams = true;
+export const revalidate = 86400;
 
 export async function generateStaticParams() {
-  const routes: { lang: string; slug: string }[] = [];
-
-  for await (const lang of i18n.locales) {
-    const data = await getRemoteData<Bangboos[]>("zenless", "bangboos");
-
-    routes.push(
-      ...data.map((c) => ({
-        lang,
-        slug: c.id,
-      }))
-    );
-  }
-
-  return routes;
+  return [];
 }
 
 export async function generateMetadata({
@@ -39,17 +26,19 @@ export async function generateMetadata({
   params: { slug: string };
 }): Promise<Metadata | undefined> {
   const slug = params.slug;
-  const data = await getRemoteData<Bangboos[]>("zenless", "bangboos");
-  const character = data.find((c) => c.id === slug);
+  const bangboo = await getZenlessData<Bangboos>({
+    resource: "bangboos",
+    filter: { id: slug },
+  });
 
-  if (!character) {
+  if (!bangboo) {
     return;
   }
 
-  const title = `${character.name} Zenless Zone Zero`;
-  const description = `Learn about the ${character.name} Bangboo in Zenless Zone Zero. Also included are their skills, upgrade costs, and more.`;
+  const title = `${bangboo.name} Zenless Zone Zero`;
+  const description = `Learn about the ${bangboo.name} Bangboo in Zenless Zone Zero. Also included are their skills, upgrade costs, and more.`;
   const publishedTime = new Date().toISOString();
-  const image = `/zenless/bangboos/${character.id}.png`;
+  const image = `/zenless/bangboos/${bangboo.id}.png`;
 
   const ogImage = `https://genshin-builds.com/api/og?image=${image}&title=${title}&description=${description}`;
 
@@ -83,9 +72,10 @@ export default async function BangbooPage({
   params: { slug: string };
 }) {
   const slug = params.slug;
-  const data = await getRemoteData<Bangboos[]>("zenless", "bangboos");
-
-  const bangboo = data.find((c) => c.id === slug);
+  const bangboo = await getZenlessData<Bangboos>({
+    resource: "bangboos",
+    filter: { id: slug },
+  });
 
   if (!bangboo) {
     return notFound();

diff --git a/app/[lang]/zenless/bangboos/page.tsx b/app/[lang]/zenless/bangboos/page.tsx
@@ -6,7 +6,7 @@ import Link from "next/link";
 import Image from "@components/zenless/Image";
 import type { Bangboos } from "@interfaces/zenless/bangboos";
 import { AD_ARTICLE_SLOT } from "@lib/constants";
-import { getRemoteData } from "@lib/localData";
+import { getZenlessData } from "@lib/dataApi";
 
 const Ads = importDynamic(() => import("@components/ui/Ads"), { ssr: false });
 const FrstAds = importDynamic(() => import("@components/ui/FrstAds"), {
@@ -34,7 +34,9 @@ type Props = {
 };
 
 export default async function BangboosPage({ params }: Props) {
-  const data = await getRemoteData<Bangboos[]>("zenless", "bangboos");
+  const data = await getZenlessData<Bangboos[]>({
+    resource: "bangboos",
+  });
   return (
     <div>
       <h1 className="text-4xl font-semibold">

diff --git a/app/[lang]/zenless/characters/[...slug]/page.tsx b/app/[lang]/zenless/characters/[...slug]/page.tsx
@@ -6,7 +6,7 @@ import { notFound } from "next/navigation";
 import Image from "@components/zenless/Image";
 import type { Characters } from "@interfaces/zenless/characters";
 import { AD_ARTICLE_SLOT } from "@lib/constants";
-import { getRemoteData } from "@lib/localData";
+import { getZenlessData } from "@lib/dataApi";
 
 const Ads = importDynamic(() => import("@components/ui/Ads"), { ssr: false });
 const FrstAds = importDynamic(() => import("@components/ui/FrstAds"), {
@@ -20,7 +20,9 @@ export async function generateStaticParams() {
   const routes: { lang: string; slug: string[] }[] = [];
 
   for await (const lang of i18n.locales) {
-    const data = await getRemoteData<Characters[]>("zenless", "characters");
+    const data = await getZenlessData<Characters[]>({
+      resource: "characters",
+    });
 
     routes.push(
       ...data.map((c) => ({
@@ -39,8 +41,11 @@ export async function generateMetadata({
   params: { slug: string[] };
 }): Promise<Metadata | undefined> {
   const slug = decodeURI(params.slug.join("/"));
-  const data = await getRemoteData<Characters[]>("zenless", "characters");
-  const character = data.find((c) => c.id === slug);
+
+  const character = await getZenlessData<Characters>({
+    resource: "characters",
+    filter: { id: slug },
+  });
 
   if (!character) {
     return;
@@ -81,9 +86,10 @@ export default async function CharactersPage({
   params: { slug: string[] };
 }) {
   const slug = decodeURI(params.slug.join("/"));
-  const data = await getRemoteData<Characters[]>("zenless", "characters");
-
-  const character = data.find((c) => c.id === slug);
+  const character = await getZenlessData<Characters>({
+    resource: "characters",
+    filter: { id: slug },
+  });
 
   if (!character) {
     return notFound();
@@ -166,7 +172,11 @@ export default async function CharactersPage({
                 </div>
                 <p
                   className="whitespace-pre-line"
-                  dangerouslySetInnerHTML={{ __html: skill.description }}
+                  dangerouslySetInnerHTML={{
+                    __html: skill.description
+                      .replaceAll("color: #ffffff", "font-weight: bold")
+                      .replaceAll("\\\\n", "<br>"),
+                  }}
                 />
               </div>
             </div>
@@ -198,7 +208,15 @@ export default async function CharactersPage({
                 <div className="flex">
                   <h4 className="font-semibold">{skill.name}</h4>
                 </div>
-                <p className="whitespace-pre-line">{skill.description}</p>
+                <p
+                  className="whitespace-pre-line"
+                  dangerouslySetInnerHTML={{
+                    __html: skill.description.replaceAll(
+                      "color: #ffffff",
+                      "font-weight: bold"
+                    ),
+                  }}
+                />
               </div>
             </div>
           ))}

diff --git a/app/[lang]/zenless/characters/page.tsx b/app/[lang]/zenless/characters/page.tsx
@@ -6,7 +6,7 @@ import Link from "next/link";
 import Image from "@components/zenless/Image";
 import type { Characters } from "@interfaces/zenless/characters";
 import { AD_ARTICLE_SLOT } from "@lib/constants";
-import { getRemoteData } from "@lib/localData";
+import { getZenlessData } from "@lib/dataApi";
 
 const Ads = importDynamic(() => import("@components/ui/Ads"), { ssr: false });
 const FrstAds = importDynamic(() => import("@components/ui/FrstAds"), {
@@ -35,7 +35,9 @@ type Props = {
 };
 
 export default async function CharactersPage({ params }: Props) {
-  const data = await getRemoteData<Characters[]>("zenless", "characters");
+  const data = await getZenlessData<Characters[]>({
+    resource: "characters",
+  });
   return (
     <div className="relative">
       <h1 className="text-6xl font-semibold">Characters</h1>

diff --git a/app/[lang]/zenless/disk-drives/page.tsx b/app/[lang]/zenless/disk-drives/page.tsx
@@ -5,7 +5,7 @@ import importDynamic from "next/dynamic";
 import Image from "@components/zenless/Image";
 import type { DiskDrives } from "@interfaces/zenless/diskDrives";
 import { AD_ARTICLE_SLOT } from "@lib/constants";
-import { getRemoteData } from "@lib/localData";
+import { getZenlessData } from "@lib/dataApi";
 
 const Ads = importDynamic(() => import("@components/ui/Ads"), { ssr: false });
 const FrstAds = importDynamic(() => import("@components/ui/FrstAds"), {
@@ -27,7 +27,9 @@ export const metadata: Metadata = {
 };
 
 export default async function BangboosPage() {
-  const data = await getRemoteData<DiskDrives[]>("zenless", "disk-drives");
+  const data = await getZenlessData<DiskDrives[]>({
+    resource: "diskDrives",
+  });
   return (
     <div className="relative z-0">
       <h1 className="text-4xl font-semibold">

diff --git a/app/[lang]/zenless/w-engines/page.tsx b/app/[lang]/zenless/w-engines/page.tsx
@@ -6,7 +6,7 @@ import Badge from "@components/ui/Badge";
 import Image from "@components/zenless/Image";
 import type { WEngines } from "@interfaces/zenless/wEngines";
 import { AD_ARTICLE_SLOT } from "@lib/constants";
-import { getRemoteData } from "@lib/localData";
+import { getZenlessData } from "@lib/dataApi";
 
 const Ads = importDynamic(() => import("@components/ui/Ads"), { ssr: false });
 const FrstAds = importDynamic(() => import("@components/ui/FrstAds"), {
@@ -29,7 +29,9 @@ export const metadata: Metadata = {
 };
 
 export default async function BangboosPage() {
-  const data = await getRemoteData<WEngines[]>("zenless", "w-engines");
+  const data = await getZenlessData<WEngines[]>({
+    resource: "w-engines",
+  });
   return (
     <div className="relative z-0">
       <h1 className="text-4xl font-semibold">

diff --git a/lib/constants.ts b/lib/constants.ts
@@ -6,3 +6,4 @@ export const PRADS_ID = process.env.NEXT_PUBLIC_PRADS_ID || "";
 export const GENSHIN_API_URL = process.env.GENSHIN_API_URL || "";
 export const HSR_API_URL = process.env.HSR_API_URL || "";
 export const WW_API_URL = process.env.WW_API_URL || "";
+export const ZENLESS_API_URL = process.env.ZENLESS_API_URL || "";
diff --git a/lib/dataApi.ts b/lib/dataApi.ts
@@ -1,4 +1,9 @@
-import { GENSHIN_API_URL, HSR_API_URL, WW_API_URL } from "./constants";
+import {
+  GENSHIN_API_URL,
+  HSR_API_URL,
+  WW_API_URL,
+  ZENLESS_API_URL,
+} from "./constants";
 
 type APIOptions = {
   resource: string;
@@ -23,6 +28,10 @@ export async function getWWData<T>(options: APIOptions) {
   return getData<T>(WW_API_URL, options, ["ww-data"]);
 }
 
+export async function getZenlessData<T>(options: APIOptions) {
+  return getData<T>(ZENLESS_API_URL, options, ["zenless-data"]);
+}
+
 async function getData<T>(
   url: string,
   options: APIOptions,