like contestも一緒に表示するトグルスイッチ追加

Author: k-yamasaki-zakisan

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

@@ -14,6 +14,8 @@ import {
 } from "reactstrap";
 import { HelpBadgeTooltip } from "../../components/HelpBadgeTooltip";
 import { ColorMode } from "../../utils/TableColor";
+import { ContestCategory } from "../../utils/ContestClassifier";
+import { getLikeContest } from "../../utils/LikeContestUtils";
 
 interface Props {
   hideCompletedContest: boolean;
@@ -27,9 +29,22 @@ interface Props {
   selectableLanguages: Set<string>;
   selectedLanguages: Set<string>;
   toggleLanguage: (language: string) => void;
+  active: ContestCategory;
+  setSelectedContests: (contest: ContestCategory[]) => void;
+  showableShowLikeContest: boolean;
+  showLikeContest: boolean;
+  setShowLikeContest: (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">
@@ -59,6 +74,22 @@ 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>
+        )}
         {props.colorMode === ColorMode.ContestResult && (
           <FormGroup check inline>
             <Label check>

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

@@ -4,14 +4,24 @@ import {
   ContestCategories,
   ContestCategory,
 } from "../../utils/ContestClassifier";
+import { getLikeContest } from "../../utils/LikeContestUtils";
 
 interface Props {
   active: ContestCategory;
   setActive: (next: ContestCategory) => void;
+  setSelectedContests: (contest: ContestCategory[]) => void;
+  showLikeContest: boolean;
 }
 
 export const TableTabButtons: React.FC<Props> = (props) => {
-  const { active, setActive } = props;
+  const { active, setActive, setSelectedContests, showLikeContest } = props;
+
+  const resetSelectedContests = (category: ContestCategory) => {
+    const selectContests = [category];
+    const likeContest = getLikeContest(category);
+    if (likeContest && showLikeContest) selectContests.push(likeContest);
+    setSelectedContests(selectContests);
+  };
   return (
     <Row>
       <ButtonGroup className="table-tab">
@@ -21,6 +31,7 @@ export const TableTabButtons: React.FC<Props> = (props) => {
             color="secondary"
             onClick={(): void => {
               setActive(category);
+              resetSelectedContests(category);
             }}
             active={active === category}
           >

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

@@ -21,6 +21,7 @@ import {
   classifyContest,
   ContestCategory,
 } from "../../utils/ContestClassifier";
+import { hasLikeContest, getLikeContest } from "../../utils/LikeContestUtils";
 import { TableTabButtons } from "./TableTab";
 import { Options } from "./Options";
 import { ContestTable } from "./ContestTable";
@@ -52,7 +53,17 @@ export const TablePage: React.FC<OuterProps> = (props) => {
     "showPenalties",
     false
   );
+  const [showLikeContest, setShowLikeContest] = useLocalStorage(
+    "showLikeContest",
+    false
+  );
   const [selectedLanguages, setSelectedLanguages] = useState(new Set<string>());
+  const selectContests = [activeTab];
+  const likeContest = getLikeContest(activeTab);
+  if (likeContest && showLikeContest) selectContests.push(likeContest);
+  const [selectedContests, setSelectedContests] = useState<ContestCategory[]>([
+    ...selectContests,
+  ]);
   const userRatingInfo = useRatingInfo(props.userId);
   const contestToProblems =
     useContestToMergedProblems() ?? new Map<ContestId, MergedProblem[]>();
@@ -77,7 +88,8 @@ export const TablePage: React.FC<OuterProps> = (props) => {
     props.userId
   );
   const filteredContests =
-    contests?.filter((c) => classifyContest(c) === activeTab) ?? [];
+    contests?.filter((c) => selectedContests.includes(classifyContest(c))) ??
+    [];
 
   return (
     <div>
@@ -99,8 +111,18 @@ export const TablePage: React.FC<OuterProps> = (props) => {
           newSet.has(language) ? newSet.delete(language) : newSet.add(language);
           setSelectedLanguages(newSet);
         }}
+        active={activeTab}
+        setSelectedContests={setSelectedContests}
+        showableShowLikeContest={hasLikeContest(activeTab)}
+        showLikeContest={showLikeContest}
+        setShowLikeContest={setShowLikeContest}
+      />
+      <TableTabButtons
+        active={activeTab}
+        setActive={setActiveTab}
+        setSelectedContests={setSelectedContests}
+        showLikeContest={showLikeContest}
       />
-      <TableTabButtons active={activeTab} setActive={setActiveTab} />
       {[
         "ABC",
         "ARC",

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

@@ -0,0 +1,20 @@
+import { ContestCategory } from "./ContestClassifier";
+
+export const getLikeContest = (
+  contestCategory: ContestCategory
+): ContestCategory | undefined => {
+  switch (contestCategory) {
+    case "ABC":
+      return "ABC-Like";
+    case "ARC":
+      return "ARC-Like";
+    case "AGC":
+      return "AGC-Like";
+    default:
+      break;
+  }
+};
+
+export const hasLikeContest = (contestCategory: ContestCategory): boolean => {
+  return ["ABC", "ARC", "AGC"].includes(contestCategory);
+};

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

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