TablePageにproblempointを表示

Author: Balut-moko

atcoder-problems-frontend/src/api/APIClient.ts

@@ -222,6 +222,31 @@ export const useContestToProblems = () => {
   );
 };
 
+export const useContestToMergedProblems = () => {
+  const url = STATIC_API_BASE_URL + "/contest-problem.json";
+  const contestIdToProblemIdArray = useSWRData(url, (url) =>
+    fetchTypedArray(
+      url,
+      (obj): obj is { contest_id: ContestId; problem_id: ProblemId } =>
+        hasPropertyAsType(obj, "contest_id", isString) &&
+        hasPropertyAsType(obj, "problem_id", isString)
+    )
+  );
+  const { data: problemMap } = useMergedProblemMap();
+  return contestIdToProblemIdArray.data?.reduce(
+    (map, { contest_id, problem_id }) => {
+      const problem = problemMap?.get(problem_id);
+      if (problem) {
+        const problems = map.get(contest_id) ?? [];
+        problems.push(problem);
+        map.set(contest_id, problems);
+      }
+      return map;
+    },
+    new Map<ContestId, MergedProblem[]>()
+  );
+};
+
 export const useContestMap = () => {
   const contests = useContests().data;
   return contests?.reduce((map, contest) => {

atcoder-problems-frontend/src/components/Problempoint.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+interface Props {
+  point: number;
+}
+
+const formatPoint = (point: number): string => {
+  const INF_POINT = 1e18;
+  if (point >= INF_POINT) {
+    return "";
+  } else {
+    return point.toString();
+  }
+};
+
+export const ProblemPoint: React.FC<Props> = (props) => {
+  const { point } = props;
+  return <div className="table-problem-point"> {formatPoint(point)} </div>;
+};

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

@@ -3,7 +3,7 @@ import React from "react";
 import { BootstrapTable, TableHeaderColumn } from "react-bootstrap-table";
 import { useProblemModelMap } from "../../api/APIClient";
 import Contest from "../../interfaces/Contest";
-import Problem from "../../interfaces/Problem";
+import MergedProblem from "../../interfaces/MergedProblem";
 import {
   noneStatus,
   ProblemId,
@@ -21,10 +21,11 @@ import { ContestLink } from "../../components/ContestLink";
 import ProblemModel from "../../interfaces/ProblemModel";
 import { SubmitTimespan } from "../../components/SubmitTimespan";
 import { RatingInfo } from "../../utils/RatingInfo";
+import { ProblemPoint } from "../../components/Problempoint";
 
 interface Props {
   contests: Contest[];
-  contestToProblems: Map<string, Problem[]>;
+  contestToProblems: Map<string, MergedProblem[]>;
   hideCompletedContest: boolean;
   showDifficulty: boolean;
   colorMode: ColorMode;
@@ -35,7 +36,7 @@ interface Props {
   userRatingInfo: RatingInfo;
 }
 
-const getProblemHeaderAlphabetFromTitle = (problem: Problem) => {
+const getProblemHeaderAlphabetFromTitle = (problem: MergedProblem) => {
   const list = problem.title.split(".");
   return list.length === 0 ? "" : list[0];
 };
@@ -49,7 +50,7 @@ const AtCoderRegularTableSFC: React.FC<Props> = (props) => {
     problemStatus: Map<
       string,
       {
-        problem: Problem;
+        problem: MergedProblem;
         status: ProblemStatus;
         model?: ProblemModel;
         cellColor: TableColor;
@@ -158,6 +159,8 @@ const AtCoderRegularTableSFC: React.FC<Props> = (props) => {
               const problem = problemStatus.get(c);
               const model = problem ? problem.model : undefined;
               if (problem) {
+                const INF_POINT = 1e18;
+                const point = problem.problem.point ?? INF_POINT;
                 return (
                   <>
                     <ProblemLink
@@ -172,6 +175,9 @@ const AtCoderRegularTableSFC: React.FC<Props> = (props) => {
                       problemModel={model}
                       userRatingInfo={userRatingInfo}
                     />
+                    {props.colorMode === ColorMode.None && (
+                      <ProblemPoint point={point} />
+                    )}
                     {props.colorMode === ColorMode.ContestResult && (
                       <SubmitTimespan
                         contest={contest}

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

@@ -2,18 +2,19 @@ import { Row, Table } from "reactstrap";
 import React from "react";
 import { useProblemModelMap } from "../../api/APIClient";
 import Contest from "../../interfaces/Contest";
-import Problem from "../../interfaces/Problem";
+import MergedProblem from "../../interfaces/MergedProblem";
 import { ProblemId, ProblemStatus, StatusLabel } from "../../interfaces/Status";
 import { ColorMode, statusToTableColor } from "../../utils/TableColor";
 import { ProblemLink } from "../../components/ProblemLink";
 import { ContestLink } from "../../components/ContestLink";
 import { SubmitTimespan } from "../../components/SubmitTimespan";
 import { RatingInfo } from "../../utils/RatingInfo";
 import { isRatedContest } from "../../utils/ContestClassifier";
+import { ProblemPoint } from "../../components/Problempoint";
 
 interface Props {
   contests: Contest[];
-  contestToProblems: Map<string, Problem[]>;
+  contestToProblems: Map<string, MergedProblem[]>;
   hideCompletedContest: boolean;
   showDifficulty: boolean;
   colorMode: ColorMode;
@@ -101,6 +102,8 @@ export const ContestTable: React.FC<Props> = (props) => {
                             selectedLanguages,
                           })
                         : "";
+                      const INF_POINT = 1e18;
+                      const point = problem.point ?? INF_POINT;
                       return (
                         <td
                           key={problem.id}
@@ -120,6 +123,9 @@ export const ContestTable: React.FC<Props> = (props) => {
                             problemModel={model}
                             userRatingInfo={userRatingInfo}
                           />
+                          {props.colorMode === ColorMode.None && (
+                            <ProblemPoint point={point} />
+                          )}
                           {props.colorMode === ColorMode.ContestResult && (
                             <SubmitTimespan
                               contest={contest}

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

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { List } from "immutable";
 import {
   useContests,
-  useContestToProblems,
+  useContestToMergedProblems,
   useRatingInfo,
   useUserSubmission,
   useMultipleUserSubmissions,
@@ -11,7 +11,7 @@ import {
   useLoginState,
   useProgressResetList,
 } from "../../api/InternalAPIClient";
-import Problem from "../../interfaces/Problem";
+import MergedProblem from "../../interfaces/MergedProblem";
 import { constructStatusLabelMap, ContestId } from "../../interfaces/Status";
 import { useLocalStorage } from "../../utils/LocalStorage";
 import { ColorMode } from "../../utils/TableColor";
@@ -55,7 +55,7 @@ export const TablePage: React.FC<OuterProps> = (props) => {
   const [selectedLanguages, setSelectedLanguages] = useState(new Set<string>());
   const userRatingInfo = useRatingInfo(props.userId);
   const contestToProblems =
-    useContestToProblems() ?? new Map<ContestId, Problem[]>();
+    useContestToMergedProblems() ?? new Map<ContestId, MergedProblem[]>();
   const { data: contests } = useContests();
   const selectableLanguages = new Set(
     useUserSubmission(props.userId)?.map((s) => s.language) ?? []

atcoder-problems-frontend/src/style/_custom.scss

@@ -205,6 +205,14 @@ span.difficulty-circle {
   background-color: $success-before-contest-hover-bg-color;
 }
 
+.table-problem-point {
+  position: absolute;
+  right: 0.1rem;
+  bottom: 0;
+  color: #888888;
+  font-size: x-small;
+}
+
 .table-problem-timespan {
   position: absolute;
   right: 0.1rem;