From 3c2bbfae752adc4ae69c5a3e8ebd14e60ba07a86 Mon Sep 17 00:00:00 2001
From: dvaJi <francisco_p@outlook.com>
Date: Mon, 22 Jul 2024 18:14:31 -0400
Subject: [PATCH] refactor: Optimize dynamicParams generation in character page

This commit refactors the dynamicParams generation in the character page to improve performance. Instead of sorting the characters array after retrieving them from the API, the sorting is now done directly in the API call by adding the "sort" parameter. This reduces the amount of data transferred and improves the overall efficiency of the page.
---
 .../(genshin)/teams/[character]/page.tsx      | 55 +++++++++----------
 components/genshin/TeamCard.tsx               |  4 +-
 components/go-to.tsx                          | 22 ++++++++
 3 files changed, 49 insertions(+), 32 deletions(-)
 create mode 100644 components/go-to.tsx

diff --git a/app/[lang]/(genshin)/teams/[character]/page.tsx b/app/[lang]/(genshin)/teams/[character]/page.tsx
index f9b06e5c..b45a7df4 100644
--- a/app/[lang]/(genshin)/teams/[character]/page.tsx
+++ b/app/[lang]/(genshin)/teams/[character]/page.tsx
@@ -9,13 +9,14 @@ import { Fragment } from "react";
 
 import { genPageMetadata } from "@app/seo";
 import ElementIcon from "@components/genshin/ElementIcon";
+import Image from "@components/genshin/Image";
+import GoTo from "@components/go-to";
 import Button from "@components/ui/Button";
 import FrstAds from "@components/ui/FrstAds";
 import useTranslations from "@hooks/use-translations";
 import type { Artifact, Beta, Character, Weapon } from "@interfaces/genshin";
 import { AD_ARTICLE_SLOT } from "@lib/constants";
 import { getGenshinData } from "@lib/dataApi";
-import { getUrl } from "@lib/imgUrl";
 import { getData, getRemoteData } from "@lib/localData";
 import { capitalize } from "@utils/capitalize";
 import { localeToLang } from "@utils/locale-to-lang";
@@ -68,7 +69,7 @@ export async function generateMetadata({
       id: params.character,
     },
   });
-  const _betaCharacter = beta[locale].characters.find(
+  const _betaCharacter = beta[locale]?.characters?.find(
     (c: any) => c.id === params.character
   );
 
@@ -140,7 +141,7 @@ export default async function GenshinCharacterTeams({ params }: Props) {
   });
 
   return (
-    <div className="relative mx-auto max-w-screen-md">
+    <div className="relative mx-auto max-w-screen-lg">
       <Ads className="mx-auto my-0" adSlot={AD_ARTICLE_SLOT} />
       <FrstAds
         placementName="genshinbuilds_billboard_atf"
@@ -155,9 +156,11 @@ export default async function GenshinCharacterTeams({ params }: Props) {
                 `genshin-bg-rarity-${character.rarity}`
               )}
             >
-              <img
-                src={getUrl(`/characters/${character.id}/image.png`, 100, 100)}
+              <Image
+                src={`/characters/${character.id}/image.png`}
                 alt={character.name}
+                width={100}
+                height={100}
               />
             </div>
             <div className="mr-2 flex items-center">
@@ -199,10 +202,10 @@ export default async function GenshinCharacterTeams({ params }: Props) {
           </h2>
           <div className="">
             {characterTeams.teams.map((team: TeamData, index: number) => (
-              <a
-                href={`#team_${index}`}
+              <GoTo
+                elementId={`#team_${index}`}
                 key={team.name}
-                className="container card grid grid-cols-[350px_auto] gap-5 hover:bg-vulcan-700"
+                className="container card grid gap-5 hover:bg-vulcan-700 md:grid-cols-[350px_auto]"
               >
                 <div className="flex items-center gap-4">
                   <div className="text-center text-lg">
@@ -238,13 +241,9 @@ export default async function GenshinCharacterTeams({ params }: Props) {
                           `genshin-bg-rarity-${characters[char.id].rarity}`
                         )}
                       >
-                        <img
+                        <Image
                           className="rounded-full"
-                          src={getUrl(
-                            `/characters/${char.id}/image.png`,
-                            100,
-                            100
-                          )}
+                          src={`/characters/${char.id}/image.png`}
                           alt={characters[char.id].name}
                           width={100}
                           height={100}
@@ -264,7 +263,7 @@ export default async function GenshinCharacterTeams({ params }: Props) {
                     </Link>
                   ))}
                 </div>
-              </a>
+              </GoTo>
             ))}
           </div>
         </div>
@@ -287,22 +286,18 @@ export default async function GenshinCharacterTeams({ params }: Props) {
                   {team.characters.map((char) => (
                     <div
                       key={char.id}
-                      className="container grid grid-cols-[120px_220px_auto] gap-5 border-b border-vulcan-600 py-4 last:border-b-0"
+                      className="grid grid-cols-1 border-b border-vulcan-600 md:container last:border-b-0 md:grid-cols-[120px_220px_auto] md:gap-5 md:py-4"
                     >
-                      <div className="block aspect-square text-center">
+                      <div className="block text-center md:aspect-square">
                         <div className="font-bold text-slate-200">
                           {t({
                             id: char.role.toLowerCase(),
                             defaultMessage: char.role,
                           })}
                         </div>
-                        <img
-                          className="mx-auto mt-2 aspect-square rounded-full object-cover"
-                          src={getUrl(
-                            `/characters/${char.id}/image.png`,
-                            100,
-                            100
-                          )}
+                        <Image
+                          className="mx-auto mt-2 rounded-full object-cover md:aspect-square"
+                          src={`/characters/${char.id}/image.png`}
                           alt={characters[char.id].name}
                           width={100}
                           height={100}
@@ -327,7 +322,7 @@ export default async function GenshinCharacterTeams({ params }: Props) {
                           {characters[char.id].element}
                         </div>
                       </div>
-                      <div className="block aspect-square text-center">
+                      <div className="block text-center md:aspect-square">
                         <h4 className="text-center font-bold text-slate-200">
                           {t("char_role_build", {
                             name: characters[char.id].name,
@@ -346,8 +341,8 @@ export default async function GenshinCharacterTeams({ params }: Props) {
                               <h6 className="text-sm">
                                 {artifactsMap[art].name}
                               </h6>
-                              <img
-                                src={getUrl(`/artifacts/${art}.png`)}
+                              <Image
+                                src={`/artifacts/${art}.png`}
                                 alt={artifactsMap[art].name}
                                 width={36}
                                 height={36}
@@ -394,8 +389,8 @@ export default async function GenshinCharacterTeams({ params }: Props) {
                               <h6 className="text-sm">
                                 {weaponsMap[weapon].name}
                               </h6>
-                              <img
-                                src={getUrl(`/weapons/${weapon}.png`)}
+                              <Image
+                                src={`/weapons/${weapon}.png`}
                                 alt={weapon}
                                 width={36}
                                 height={36}
@@ -405,7 +400,7 @@ export default async function GenshinCharacterTeams({ params }: Props) {
                           ))}
                         </div>
                       </div>
-                      <div className="flex aspect-square items-center text-zinc-400">
+                      <div className="mb-6 flex items-center text-zinc-400 md:mb-0 md:aspect-square">
                         {char.description}
                       </div>
                     </div>
diff --git a/components/genshin/TeamCard.tsx b/components/genshin/TeamCard.tsx
index 81d14680..2fd6d745 100644
--- a/components/genshin/TeamCard.tsx
+++ b/components/genshin/TeamCard.tsx
@@ -29,7 +29,7 @@ const TeamCard = ({ team, mainName, asyncLoad = true }: TeamCardProps) => {
       <div className="grid grid-cols-4 gap-2">
         {team.characters.map((block, i) => (
           <div key={`${block.role}${block.id}${i}`} className="flex flex-col">
-            <div className="text-center text-xs lg:text-sm">
+            <div className="md:min-h-auto min-h-10 text-center text-xs lg:text-sm">
               {t({ id: block.role.toLowerCase(), defaultMessage: block.role })}
             </div>
             <div className="flex justify-center text-center">
@@ -48,7 +48,7 @@ const TeamCard = ({ team, mainName, asyncLoad = true }: TeamCardProps) => {
                     loading={asyncLoad ? "lazy" : "eager"}
                   />
                   <ElementIcon
-                    type={block.element}
+                    type={t(block.element)}
                     height={20}
                     width={20}
                     className="absolute right-3 top-3 rounded-full bg-vulcan-700 lg:right-5 lg:top-5"
diff --git a/components/go-to.tsx b/components/go-to.tsx
new file mode 100644
index 00000000..1cd868d2
--- /dev/null
+++ b/components/go-to.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
+type Props = {
+  elementId: string;
+  children: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+export default function GoTo({ elementId, children, ...props }: Props) {
+  const router = useRouter();
+
+  const handleNavigation = (url: string) => {
+    router.push(url);
+  };
+
+  return (
+    <div role="button" onClick={() => handleNavigation(elementId)} {...props}>
+      {children}
+    </div>
+  );
+}