From e19ee86ae9396820553f4d2b2d7641ce87091c22 Mon Sep 17 00:00:00 2001
From: William Lam <w.lam@honteam.com>
Date: Sun, 1 Jan 2023 06:36:50 -0500
Subject: [PATCH] Ranked Modes checkboxes are now checked by default when
 making a new build (#1199)

* Ranked Modes checkboxes are now checked by default when making a new build

* Fixed the actual logic when taking older builds into account

* Added comment that references Issue 1150

* Rearranged type order so it reads better
---
 app/routes/u.$identifier/builds/new.tsx | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/app/routes/u.$identifier/builds/new.tsx b/app/routes/u.$identifier/builds/new.tsx
index c01013a5a..ee2d28482 100644
--- a/app/routes/u.$identifier/builds/new.tsx
+++ b/app/routes/u.$identifier/builds/new.tsx
@@ -26,6 +26,7 @@ import {
   modesShort,
   shoesGearIds,
 } from "~/modules/in-game-lists";
+import { rankedModesShort } from "~/modules/in-game-lists/modes";
 import type {
   BuildAbilitiesTuple,
   BuildAbilitiesTupleWithUnknown,
@@ -256,6 +257,18 @@ function ModeCheckboxes() {
   const { buildToEdit } = useLoaderData<typeof loader>();
   const { t } = useTranslation("builds");
 
+  let currentBuildModes:
+    | typeof modesShort
+    | typeof rankedModesShort
+    | null
+    | undefined = buildToEdit?.modes;
+
+  // Use the Ranked Modes by default for brand new builds (so that the checkboxes can be checked by default)
+  // See issue for more info: https://github.com/Sendouc/sendou.ink/issues/1150
+  if (!currentBuildModes) {
+    currentBuildModes = rankedModesShort;
+  }
+
   return (
     <div>
       <Label>{t("forms.modes")}</Label>
@@ -269,7 +282,9 @@ function ModeCheckboxes() {
               id={mode}
               name={mode}
               type="checkbox"
-              defaultChecked={buildToEdit?.modes?.includes(mode)}
+              defaultChecked={currentBuildModes?.some(
+                (currentMode) => currentMode == mode
+              )}
               data-cy={`${mode}-checkbox`}
             />
           </div>