Merge pull request #1272 from kenkoooo/staging

publish changes

Author: kenkoooo

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

@@ -27,6 +27,8 @@ interface Props {
   selectableLanguages: Set<string>;
   selectedLanguages: Set<string>;
   toggleLanguage: (language: string) => void;
+  mergeLikeContest: boolean;
+  setMergeLikeContest: (mergeLikeContest: boolean) => void;
 }
 
 export const Options: React.FC<Props> = (props) => {
@@ -38,7 +40,7 @@ export const Options: React.FC<Props> = (props) => {
             <CustomInput
               type="switch"
               id="hideCompletedContest"
-              label="Hide Completed Contest"
+              label="Hide Completed Contests"
               checked={props.hideCompletedContest}
               onChange={props.toggleHideCompletedContest}
             />
@@ -59,6 +61,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" Contests'
+              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

@@ -1,23 +1,32 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { Row, ButtonGroup, Button } from "reactstrap";
 import {
   ContestCategories,
   ContestCategory,
 } from "../../utils/ContestClassifier";
+import { isLikeContest } 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 filteredCategories = useMemo(() => {
+    return ContestCategories.filter(
+      (category) => !mergeLikeContest || !isLikeContest(category)
+    );
+  }, [mergeLikeContest]);
+
   return (
     <Row>
       <ButtonGroup className="table-tab">
-        {ContestCategories.map((category, i) => (
+        {filteredCategories.map((category) => (
           <Button
-            key={i}
+            key={category}
             color="secondary"
             onClick={(): void => {
               setActive(category);

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

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import { List } from "immutable";
 import {
   useContests,
@@ -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,21 @@ export const TablePage: React.FC<OuterProps> = (props) => {
     filteredSubmissions,
     props.userId
   );
-  const filteredContests =
-    contests?.filter((c) => classifyContest(c) === activeTab) ?? [];
+
+  const filteredContests = useMemo(() => {
+    if (!contests) {
+      return [];
+    }
+    return contests.filter((contest) => {
+      const contestType = classifyContest(contest);
+      if (contestType === activeTab) {
+        return true;
+      }
+      return (
+        mergeLikeContest && getLikeContestCategory(activeTab) === contestType
+      );
+    });
+  }, [contests, activeTab, mergeLikeContest]);
 
   return (
     <div>
@@ -99,8 +117,14 @@ export const TablePage: React.FC<OuterProps> = (props) => {
           newSet.has(language) ? newSet.delete(language) : newSet.add(language);
           setSelectedLanguages(newSet);
         }}
+        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,25 @@
+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;
+  }
+};
+
+const LikeContestCategories: readonly ContestCategory[] = [
+  "ABC-Like",
+  "ARC-Like",
+  "AGC-Like",
+];
+export const isLikeContest = (category: ContestCategory) => {
+  return LikeContestCategories.includes(category);
+};

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

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