From df7a48fd6f0a7c38688e075ff0ae352e51271493 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Thu, 22 Dec 2022 21:44:32 +0200
Subject: [PATCH] Extract WeaponImageSelector component

---
 .../map-planner/components/Planner.tsx        | 51 +++++++++++--------
 1 file changed, 31 insertions(+), 20 deletions(-)

diff --git a/app/features/map-planner/components/Planner.tsx b/app/features/map-planner/components/Planner.tsx
index be35ffa63..fdfe3ccfc 100644
--- a/app/features/map-planner/components/Planner.tsx
+++ b/app/features/map-planner/components/Planner.tsx
@@ -31,7 +31,7 @@ const BLUEPRINTS_AVAILABLE: Partial<Record<ModeShort, Array<StageId>>> = {
 };
 
 export default function Planner() {
-  const { t } = useTranslation(["common", "weapons"]);
+  const { t } = useTranslation(["common"]);
   const { i18n } = useTranslation();
   const appRef = React.useRef<TldrawApp>();
   const app = appRef.current!;
@@ -126,25 +126,7 @@ export default function Planner() {
   return (
     <>
       <StageBackgroundSelector onAddBackground={handleAddBackgroundImage} />
-      <div className="plans__weapons-section">
-        {mainWeaponIds.map((weaponId) => {
-          return (
-            <Button
-              key={weaponId}
-              variant="minimal"
-              onClick={() => handleAddWeapon(weaponId)}
-            >
-              <Image
-                alt={t(`weapons:MAIN_${weaponId}`)}
-                title={t(`weapons:MAIN_${weaponId}`)}
-                path={mainWeaponImageUrl(weaponId)}
-                width={36}
-                height={36}
-              />
-            </Button>
-          );
-        })}
-      </div>
+      <WeaponImageSelector handleAddWeapon={handleAddWeapon} />
       <div className="plans__powered-by">
         <a href={TLDRAW_URL} target="_blank" rel="noreferrer">
           {t("common:plans.poweredBy", { name: "tldraw" })}
@@ -155,6 +137,35 @@ export default function Planner() {
   );
 }
 
+function WeaponImageSelector({
+  handleAddWeapon,
+}: {
+  handleAddWeapon: (weaponId: MainWeaponId) => void;
+}) {
+  const { t } = useTranslation(["weapons"]);
+  return (
+    <div className="plans__weapons-section">
+      {mainWeaponIds.map((weaponId) => {
+        return (
+          <Button
+            key={weaponId}
+            variant="minimal"
+            onClick={() => handleAddWeapon(weaponId)}
+          >
+            <Image
+              alt={t(`weapons:MAIN_${weaponId}`)}
+              title={t(`weapons:MAIN_${weaponId}`)}
+              path={mainWeaponImageUrl(weaponId)}
+              width={36}
+              height={36}
+            />
+          </Button>
+        );
+      })}
+    </div>
+  );
+}
+
 function StageBackgroundSelector({
   onAddBackground,
 }: {