From fe65b42d9f547956c09887d1dfd12b01b887808e Mon Sep 17 00:00:00 2001
From: William Lam <w.lam@honteam.com>
Date: Sun, 27 Nov 2022 10:46:10 -0500
Subject: [PATCH] BuildCard: Link to weapon builds page (#1167)

* Feature Implementation: Weapon icon on build card now links to the builds page that contains all builds corresponding to said weapon

* Refactor to an actual React hook

* Refactored the URL construction for the Weapon Builds page to urls.ts

* Changes

Co-authored-by: Kalle <38327916+Sendouc@users.noreply.github.com>
---
 app/components/BuildCard.tsx | 36 ++++++++++++++++++++++++++----------
 app/utils/urls.ts            |  3 +++
 2 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/app/components/BuildCard.tsx b/app/components/BuildCard.tsx
index 922eb31b5..975d36509 100644
--- a/app/components/BuildCard.tsx
+++ b/app/components/BuildCard.tsx
@@ -8,7 +8,10 @@ import type {
   Ability as AbilityType,
   ModeShort,
 } from "~/modules/in-game-lists";
-import type { BuildAbilitiesTuple } from "~/modules/in-game-lists/types";
+import type {
+  BuildAbilitiesTuple,
+  MainWeaponId,
+} from "~/modules/in-game-lists/types";
 import { databaseTimestampToDate } from "~/utils/dates";
 import { discordFullName, gearTypeToInitial } from "~/utils/strings";
 import {
@@ -16,8 +19,10 @@ import {
   gearImageUrl,
   mainWeaponImageUrl,
   modeImageUrl,
+  mySlugify,
   navIconUrl,
   userBuildsPage,
+  weaponBuildPage,
 } from "~/utils/urls";
 import { Ability } from "./Ability";
 import { Button, LinkButton } from "./Button";
@@ -95,15 +100,7 @@ export function BuildCard({ build, owner, canEdit = false }: BuildProps) {
       </div>
       <div className="build__weapons">
         {weapons.map((weaponSplId) => (
-          <div key={weaponSplId} className="build__weapon">
-            <Image
-              path={mainWeaponImageUrl(weaponSplId)}
-              alt={t(`weapons:MAIN_${weaponSplId}` as any)}
-              title={t(`weapons:MAIN_${weaponSplId}` as any)}
-              height={36}
-              width={36}
-            />
-          </div>
+          <RoundWeaponImage key={weaponSplId} weaponSplId={weaponSplId} />
         ))}
         {weapons.length === 1 && (
           <div className="build__weapon-text">
@@ -192,6 +189,25 @@ export function BuildCard({ build, owner, canEdit = false }: BuildProps) {
   );
 }
 
+function RoundWeaponImage({ weaponSplId }: { weaponSplId: MainWeaponId }) {
+  const { t } = useTranslation(["weapons"]);
+  const slug = mySlugify(t(`weapons:MAIN_${weaponSplId}`, { lng: "en" }));
+
+  return (
+    <div key={weaponSplId} className="build__weapon">
+      <Link to={weaponBuildPage(slug)}>
+        <Image
+          path={mainWeaponImageUrl(weaponSplId)}
+          alt={t(`weapons:MAIN_${weaponSplId}` as any)}
+          title={t(`weapons:MAIN_${weaponSplId}` as any)}
+          height={36}
+          width={36}
+        />
+      </Link>
+    </div>
+  );
+}
+
 function AbilitiesRowWithGear({
   gearType,
   abilities,
diff --git a/app/utils/urls.ts b/app/utils/urls.ts
index a2e3bb6d4..e635e117e 100644
--- a/app/utils/urls.ts
+++ b/app/utils/urls.ts
@@ -90,6 +90,9 @@ export const badgePage = (badgeId: number) => `${BADGES_PAGE}/${badgeId}`;
 export const plusSuggestionPage = (tier?: string | number) =>
   `/plus/suggestions${tier ? `?tier=${tier}` : ""}`;
 
+export const weaponBuildPage = (weaponSlug: string) =>
+  `${BUILDS_PAGE}/${weaponSlug}`;
+
 export const calendarEventPage = (eventId: number) => `/calendar/${eventId}`;
 export const calendarEditPage = (eventId?: number) =>
   `/calendar/new${eventId ? `?eventId=${eventId}` : ""}`;