Merge pull request #1241 from k-yamasaki-zakisan/feature#1194

Feature#1194 Merge like contest toggle

Author: kenkoooo

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

@@ -14,6 +14,7 @@ import {
 } from "reactstrap";
 import { HelpBadgeTooltip } from "../../components/HelpBadgeTooltip";
 import { ColorMode } from "../../utils/TableColor";
+import { ContestCategory } from "../../utils/ContestClassifier";
 
 interface Props {
   hideCompletedContest: boolean;
@@ -27,6 +28,9 @@ interface Props {
   selectableLanguages: Set<string>;
   selectedLanguages: Set<string>;
   toggleLanguage: (language: string) => void;
+  active: ContestCategory;
+  mergeLikeContest: boolean;
+  setMergeLikeContest: (mergeLikeContest: boolean) => void;
 }
 
 export const Options: React.FC<Props> = (props) => {
@@ -59,6 +63,19 @@ export const Options: React.FC<Props> = (props) => {
             Internal rating to have 50% Solve Probability
           </HelpBadgeTooltip>
         </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,20 +4,30 @@ import {
   ContestCategories,
   ContestCategory,
 } from "../../utils/ContestClassifier";
+import { LikeContestCategories } from "../../utils/LikeContestUtils";
 
 interface Props {
   active: ContestCategory;
   setActive: (next: ContestCategory) => void;
+  mergeLikeContest: boolean;
 }
 
 export const TableTabButtons: React.FC<Props> = (props) => {
-  const { active, setActive } = props;
+  const { active, setActive, mergeLikeContest } = props;
+
+  const filterCategories = (contestCategories: readonly ContestCategory[]) => {
+    if (!mergeLikeContest) return contestCategories;
+
+    return contestCategories.filter(
+      (category) => !LikeContestCategories.includes(category)
+    );
+  };
   return (
     <Row>
       <ButtonGroup className="table-tab">
-        {ContestCategories.map((category, i) => (
+        {filterCategories(ContestCategories).map((category, i) => (
           <Button
-            key={i}
+            key={String(i)}
             color="secondary"
             onClick={(): void => {
               setActive(category);

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

@@ -21,6 +21,7 @@ import {
   classifyContest,
   ContestCategory,
 } from "../../utils/ContestClassifier";
+import { getLikeContestCategory } from "../../utils/LikeContestUtils";
 import { TableTabButtons } from "./TableTab";
 import { Options } from "./Options";
 import { ContestTable } from "./ContestTable";
@@ -52,6 +53,10 @@ export const TablePage: React.FC<OuterProps> = (props) => {
     "showPenalties",
     false
   );
+  const [mergeLikeContest, setMergeLikeContest] = useLocalStorage(
+    "MergeLikeContest",
+    false
+  );
   const [selectedLanguages, setSelectedLanguages] = useState(new Set<string>());
   const userRatingInfo = useRatingInfo(props.userId);
   const contestToProblems =
@@ -76,8 +81,16 @@ export const TablePage: React.FC<OuterProps> = (props) => {
     filteredSubmissions,
     props.userId
   );
+
+  const selectedContestCategories = [activeTab];
+  const likeContestCategory = getLikeContestCategory(activeTab);
+  if (likeContestCategory && mergeLikeContest) {
+    selectedContestCategories.push(likeContestCategory);
+  }
   const filteredContests =
-    contests?.filter((c) => classifyContest(c) === activeTab) ?? [];
+    contests?.filter((c) =>
+      selectedContestCategories.includes(classifyContest(c))
+    ) ?? [];
 
   return (
     <div>
@@ -99,8 +112,15 @@ export const TablePage: React.FC<OuterProps> = (props) => {
           newSet.has(language) ? newSet.delete(language) : newSet.add(language);
           setSelectedLanguages(newSet);
         }}
+        active={activeTab}
+        mergeLikeContest={mergeLikeContest}
+        setMergeLikeContest={setMergeLikeContest}
+      />
+      <TableTabButtons
+        active={activeTab}
+        setActive={setActiveTab}
+        mergeLikeContest={mergeLikeContest}
       />
-      <TableTabButtons active={activeTab} setActive={setActiveTab} />
       {[
         "ABC",
         "ARC",

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

@@ -0,0 +1,21 @@
+import { getLikeContestCategory } from "./LikeContestUtils";
+import { ContestCategory } from "./ContestClassifier";
+
+type GetLikeContestTestType = [ContestCategory, ContestCategory | undefined];
+test.each<GetLikeContestTestType>([
+  ["ABC", "ABC-Like"],
+  ["ARC", "ARC-Like"],
+  ["AGC", "AGC-Like"],
+  ["ABC-Like", undefined],
+  ["ARC-Like", undefined],
+  ["AGC-Like", undefined],
+  ["PAST", undefined],
+  ["JOI", undefined],
+  ["JAG", undefined],
+  ["AHC", undefined],
+  ["Marathon", undefined],
+  ["Other Sponsored", undefined],
+  ["Other Contests", undefined],
+])("Get Like Contest", (contest, result) => {
+  expect(getLikeContestCategory(contest)).toBe(result);
+});

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

@@ -0,0 +1,22 @@
+import { ContestCategory } from "./ContestClassifier";
+
+export const getLikeContestCategory = (
+  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 LikeContestCategories: readonly ContestCategory[] = [
+  "ABC-Like",
+  "ARC-Like",
+  "AGC-Like",
+];

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

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