likeコンテストのmergeトグルスイッチの常時表示化対応

Author: k-yamasaki-zakisan

atcoder-problems-frontend/src/pages/TablePage/Options.tsx

@@ -15,7 +15,6 @@ import {
 import { HelpBadgeTooltip } from "../../components/HelpBadgeTooltip";
 import { ColorMode } from "../../utils/TableColor";
 import { ContestCategory } from "../../utils/ContestClassifier";
-import { getLikeContest } from "../../utils/LikeContestUtils";
 
 interface Props {
   hideCompletedContest: boolean;
@@ -30,21 +29,11 @@ interface Props {
   selectedLanguages: Set<string>;
   toggleLanguage: (language: string) => void;
   active: ContestCategory;
-  setSelectedContests: (contest: ContestCategory[]) => void;
-  showableShowLikeContest: boolean;
-  showLikeContest: boolean;
-  setShowLikeContest: (showLikeContest: boolean) => void;
+  mergeLikeContest: boolean;
+  setMergeLikeContest: (showLikeContest: boolean) => void;
 }
 
 export const Options: React.FC<Props> = (props) => {
-  const changeShowLikeContest = (checked: boolean) => {
-    const likeContest = getLikeContest(props.active);
-    if (checked && likeContest) {
-      props.setSelectedContests([props.active, likeContest]);
-    } else {
-      props.setSelectedContests([props.active]);
-    }
-  };
   return (
     <>
       <Row className="my-4">
@@ -74,22 +63,19 @@ export const Options: React.FC<Props> = (props) => {
             Internal rating to have 50% Solve Probability
           </HelpBadgeTooltip>
         </FormGroup>
-        {props.showableShowLikeContest && (
-          <FormGroup check inline class="my-4">
-            <Label check>
-              <CustomInput
-                type="switch"
-                id="showLikeContest"
-                label="Show Like Contest"
-                checked={props.showLikeContest}
-                onChange={(e) => {
-                  changeShowLikeContest(e.target.checked);
-                  props.setShowLikeContest(!props.showLikeContest);
-                }}
-              />
-            </Label>
-          </FormGroup>
-        )}
+        <FormGroup check inline class="my-4">
+          <Label check>
+            <CustomInput
+              type="switch"
+              id="mergeLikeContest"
+              label="Merge Like Contest"
+              checked={props.mergeLikeContest}
+              onChange={() => {
+                props.setMergeLikeContest(!props.mergeLikeContest);
+              }}
+            />
+          </Label>
+        </FormGroup>
         {props.colorMode === ColorMode.ContestResult && (
           <FormGroup check inline>
             <Label check>

atcoder-problems-frontend/src/pages/TablePage/TableTab.tsx

@@ -4,34 +4,33 @@ import {
   ContestCategories,
   ContestCategory,
 } from "../../utils/ContestClassifier";
-import { getLikeContest } from "../../utils/LikeContestUtils";
+import { LikeContestCategories } from "../../utils/LikeContestUtils";
 
 interface Props {
   active: ContestCategory;
   setActive: (next: ContestCategory) => void;
-  setSelectedContests: (contest: ContestCategory[]) => void;
-  showLikeContest: boolean;
+  mergeLikeContest: boolean;
 }
 
 export const TableTabButtons: React.FC<Props> = (props) => {
-  const { active, setActive, setSelectedContests, showLikeContest } = props;
+  const { active, setActive, mergeLikeContest } = props;
 
-  const resetSelectedContests = (category: ContestCategory) => {
-    const selectContests = [category];
-    const likeContest = getLikeContest(category);
-    if (likeContest && showLikeContest) selectContests.push(likeContest);
-    setSelectedContests(selectContests);
+  const filterLikeContest = (contestCategories: readonly ContestCategory[]) => {
+    if (!mergeLikeContest) return contestCategories;
+
+    return contestCategories.filter(
+      (category) => !LikeContestCategories.includes(category)
+    );
   };
   return (
     <Row>
       <ButtonGroup className="table-tab">
-        {ContestCategories.map((category, i) => (
+        {filterLikeContest(ContestCategories).map((category, i) => (
           <Button
-            key={i}
+            key={String(i)}
             color="secondary"
             onClick={(): void => {
               setActive(category);
-              resetSelectedContests(category);
             }}
             active={active === category}
           >

atcoder-problems-frontend/src/pages/TablePage/index.tsx

@@ -21,7 +21,7 @@ import {
   classifyContest,
   ContestCategory,
 } from "../../utils/ContestClassifier";
-import { hasLikeContest, getLikeContest } from "../../utils/LikeContestUtils";
+import { getLikeContest } from "../../utils/LikeContestUtils";
 import { TableTabButtons } from "./TableTab";
 import { Options } from "./Options";
 import { ContestTable } from "./ContestTable";
@@ -53,17 +53,16 @@ export const TablePage: React.FC<OuterProps> = (props) => {
     "showPenalties",
     false
   );
-  const [showLikeContest, setShowLikeContest] = useLocalStorage(
-    "showLikeContest",
+  const [mergeLikeContest, setMergeLikeContest] = useLocalStorage(
+    "MergeLikeContest",
     false
   );
   const [selectedLanguages, setSelectedLanguages] = useState(new Set<string>());
-  const selectContests = [activeTab];
+
+  const selectedContests = [activeTab];
   const likeContest = getLikeContest(activeTab);
-  if (likeContest && showLikeContest) selectContests.push(likeContest);
-  const [selectedContests, setSelectedContests] = useState<ContestCategory[]>([
-    ...selectContests,
-  ]);
+  if (likeContest && mergeLikeContest) selectedContests.push(likeContest);
+
   const userRatingInfo = useRatingInfo(props.userId);
   const contestToProblems =
     useContestToMergedProblems() ?? new Map<ContestId, MergedProblem[]>();
@@ -112,16 +111,13 @@ export const TablePage: React.FC<OuterProps> = (props) => {
           setSelectedLanguages(newSet);
         }}
         active={activeTab}
-        setSelectedContests={setSelectedContests}
-        showableShowLikeContest={hasLikeContest(activeTab)}
-        showLikeContest={showLikeContest}
-        setShowLikeContest={setShowLikeContest}
+        mergeLikeContest={mergeLikeContest}
+        setMergeLikeContest={setMergeLikeContest}
       />
       <TableTabButtons
         active={activeTab}
         setActive={setActiveTab}
-        setSelectedContests={setSelectedContests}
-        showLikeContest={showLikeContest}
+        mergeLikeContest={mergeLikeContest}
       />
       {[
         "ABC",

atcoder-problems-frontend/src/utils/LikeContestUtils.test.ts

@@ -1,4 +1,4 @@
-import { getLikeContest, hasLikeContest } from "./LikeContestUtils";
+import { getLikeContest } from "./LikeContestUtils";
 import { ContestCategory } from "./ContestClassifier";
 
 type GetLikeContestTestType = [ContestCategory, ContestCategory | undefined];
@@ -19,22 +19,3 @@ test.each<GetLikeContestTestType>([
 ])("Get Like Contest", (contest, result) => {
   expect(getLikeContest(contest)).toBe(result);
 });
-
-type HasLikeContestTestType = [ContestCategory, boolean];
-test.each<HasLikeContestTestType>([
-  ["ABC", true],
-  ["ARC", true],
-  ["AGC", true],
-  ["ABC-Like", false],
-  ["ARC-Like", false],
-  ["AGC-Like", false],
-  ["PAST", false],
-  ["JOI", false],
-  ["JAG", false],
-  ["AHC", false],
-  ["Marathon", false],
-  ["Other Sponsored", false],
-  ["Other Contests", false],
-])(`Has Like Contest`, (contest, result) => {
-  expect(hasLikeContest(contest)).toBe(result);
-});

atcoder-problems-frontend/src/utils/LikeContestUtils.ts

@@ -15,6 +15,8 @@ export const getLikeContest = (
   }
 };
 
-export const hasLikeContest = (contestCategory: ContestCategory): boolean => {
-  return ["ABC", "ARC", "AGC"].includes(contestCategory);
-};
+export const LikeContestCategories: readonly ContestCategory[] = [
+  "ABC-Like",
+  "ARC-Like",
+  "AGC-Like",
+];

atcoder-problems-frontend/src/utils/LocalStorage.tsx

@@ -17,7 +17,7 @@ const LocalStorageKeys = [
   "recommendOption",
   "recommendExperimental",
   "recoomendExcludeOption",
-  "showLikeContest",
+  "MergeLikeContest",
 ] as const;
 type LocalStorageKey = typeof LocalStorageKeys[number];