Merge pull request #1333 from kenkoooo/chore/staging

Chore/staging

Author: kenkoooo

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

@@ -14,6 +14,12 @@ import {
 } from "./ListPaginationPanel";
 import { NewTabLink } from "./NewTabLink";
 
+const problemTitle = (
+  problemName: string | undefined,
+  { problemIndex }: { problemIndex?: string }
+): string =>
+  problemIndex ? `${problemIndex}. ${problemName || ""}` : problemName || "";
+
 interface Props {
   submissions: Submission[];
   userRatingInfo?: RatingInfo;
@@ -113,7 +119,7 @@ export const SubmissionListTable: React.FC<Props> = (props) => {
         Date
       </TableHeaderColumn>
       <TableHeaderColumn
-        filterFormatted
+        filterValue={problemTitle}
         dataSort
         dataField="name"
         dataFormat={(

atcoder-problems-frontend/src/pages/Internal/MyAccountPage/ApiClient.ts

@@ -1,4 +1,8 @@
-import { PROGRESS_RESET_ADD, PROGRESS_RESET_DELETE } from "../ApiUrl";
+import {
+  PROGRESS_RESET_ADD,
+  PROGRESS_RESET_DELETE,
+  USER_UPDATE,
+} from "../ApiUrl";
 import { getCurrentUnixtimeInSecond } from "../../../utils/DateUtil";
 
 export const addResetProgress = (problemId: string) =>
@@ -23,3 +27,14 @@ export const deleteResetProgress = (problemId: string) =>
       problem_id: problemId,
     }),
   });
+
+export const updateUserInfo = (userId: string) =>
+  fetch(USER_UPDATE, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      atcoder_user_id: userId,
+    }),
+  });

atcoder-problems-frontend/src/pages/Internal/MyAccountPage/index.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import { connect, PromiseState, PropsMapInner } from "react-refetch";
 import { Nav, NavItem, NavLink, Spinner } from "reactstrap";
 import {
   Redirect,
@@ -10,25 +9,29 @@ import {
   useLocation,
 } from "react-router-dom";
 import { useLoginState } from "../../../api/InternalAPIClient";
-import { USER_UPDATE } from "../ApiUrl";
 import { UserProblemListPage } from "../UserProblemListPage";
 import { MyContestList } from "./MyContestList";
 import { ResetProgress } from "./ResetProgress";
 import { UserIdUpdate } from "./UserIdUpdate";
+import { updateUserInfo } from "./ApiClient";
 
-interface InnerProps {
-  updateUserInfo: (atcoderUser: string) => void;
-  updateUserInfoResponse: PromiseState<Record<string, unknown> | null>;
-}
-
-const InnerMyAccountPage = (props: InnerProps): JSX.Element => {
-  const { updateUserInfoResponse } = props;
+export const MyAccountPage = (): JSX.Element => {
   const loginState = useLoginState();
 
   const [userId, setUserId] = useState("");
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [isValidResponse, setIsValidResponse] = useState<boolean>();
   const { path } = useRouteMatch();
   const { pathname } = useLocation();
 
+  const handleSubmit = async (userId: string) => {
+    setIsUpdating(true);
+    await updateUserInfo(userId).then((response) => {
+      setIsValidResponse(response.status === 200);
+    });
+    setIsUpdating(false);
+  };
+
   useEffect(() => {
     if (loginState.data) {
       setUserId(loginState.data.atcoder_user_id ?? "");
@@ -37,16 +40,12 @@ const InnerMyAccountPage = (props: InnerProps): JSX.Element => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [!!loginState.data]);
 
-  if (loginState.error || updateUserInfoResponse.rejected) {
+  if (loginState.error || isValidResponse === false) {
     return <Redirect to="/" />;
   } else if (!loginState.data) {
     return <Spinner style={{ width: "3rem", height: "3rem" }} />;
   } else {
-    const updating = updateUserInfoResponse.refreshing;
-    const updated =
-      !updating &&
-      updateUserInfoResponse.fulfilled &&
-      updateUserInfoResponse.value !== null;
+    const updated = !isUpdating && isValidResponse;
 
     return (
       <>
@@ -90,8 +89,8 @@ const InnerMyAccountPage = (props: InnerProps): JSX.Element => {
             <UserIdUpdate
               userId={userId}
               setUserId={setUserId}
-              onSubmit={() => props.updateUserInfo(userId)}
-              status={updating ? "updating" : updated ? "updated" : "open"}
+              onSubmit={() => handleSubmit(userId)}
+              status={isUpdating ? "updating" : updated ? "updated" : "open"}
             />
           </Route>
           <Route exact path={`${path}/contests`}>
@@ -108,20 +107,3 @@ const InnerMyAccountPage = (props: InnerProps): JSX.Element => {
     );
   }
 };
-
-export const MyAccountPage = connect<unknown, InnerProps>(() => ({
-  updateUserInfo: (
-    atcoderUser: string
-  ): PropsMapInner<Pick<InnerProps, "updateUserInfoResponse">> => ({
-    updateUserInfoResponse: {
-      force: true,
-      refreshing: true,
-      url: USER_UPDATE,
-      method: "POST",
-      body: JSON.stringify({ atcoder_user_id: atcoderUser }),
-    },
-  }),
-  updateUserInfoResponse: {
-    value: null,
-  },
-}))(InnerMyAccountPage);

atcoder-problems-frontend/src/pages/UserPage/ProgressChartBlock/index.tsx

@@ -27,6 +27,7 @@ import { useLocalStorage } from "../../../utils/LocalStorage";
 import {
   countUniqueAcByDate,
   countTeeByDate,
+  countTeeMovingAverage,
 } from "../../../utils/StreakCounter";
 import Submission from "../../../interfaces/Submission";
 import { ProblemId } from "../../../interfaces/Status";
@@ -146,6 +147,8 @@ export const ProgressChartBlock: React.FC<Props> = (props) => {
     return list;
   }, [] as { dateSecond: number; count: number }[]);
 
+  const teeMovingAverage = countTeeMovingAverage(dailyTeeCount);
+
   const dateColorCountMap = Array.from(submissionsByProblem.values())
     .map((submissionsOfProblem) => {
       const accepted = submissionsOfProblem
@@ -277,6 +280,11 @@ export const ProgressChartBlock: React.FC<Props> = (props) => {
       </Row>
       <TeeChart climbingData={teeClimbing} />
 
+      <Row className="my-2 border-bottom">
+        <h1>TEE Moving Average (30 days)</h1>
+      </Row>
+      <TeeChart climbingData={teeMovingAverage} />
+
       <Row className="my-2 border-bottom">
         <h1>Heatmap</h1>
       </Row>

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

@@ -111,3 +111,49 @@ export const countTeeByDate = (
     .map(([dateLabel, count]) => ({ dateLabel, count }))
     .sort((a, b) => a.dateLabel.localeCompare(b.dateLabel));
 };
+
+export const countTeeMovingAverage = (
+  dailyTeeCount: {
+    dateLabel: string;
+    count: number;
+  }[]
+) => {
+  const DURATION = 30;
+  if (!Array.isArray(dailyTeeCount) || dailyTeeCount.length === 0) {
+    return [];
+  }
+
+  const minDateLabel = dailyTeeCount[0].dateLabel;
+  const maxDateLabel = dailyTeeCount[dailyTeeCount.length - 1].dateLabel;
+  const dateDelta =
+    1 +
+    (new Date(maxDateLabel).getTime() - new Date(minDateLabel).getTime()) /
+      1000 /
+      86400;
+
+  const differentiatedTees = Array.from(Array(dateDelta)).map((__, i) => {
+    const nextDate = new Date(minDateLabel);
+    nextDate.setDate(nextDate.getDate() + i);
+    const nextDateLabel = nextDate.toISOString().substring(0, 10);
+    const found = dailyTeeCount.find((tee) => tee.dateLabel === nextDateLabel);
+    if (found) {
+      return found;
+    } else {
+      return { dateLabel: nextDateLabel, count: 0 };
+    }
+  });
+
+  return differentiatedTees
+    .map(({ dateLabel }, i) => {
+      const dateSecond = parseDateLabel(dateLabel).unix();
+      const begin = Math.max(i - (DURATION - 1), 0);
+      const total = differentiatedTees
+        .slice(begin, i + 1)
+        .reduce((tot, data) => data.count + tot, 0);
+      if (!total) {
+        return null;
+      }
+      return { dateSecond, count: total / DURATION };
+    })
+    .filter((data): data is { dateSecond: number; count: number } => !!data);
+};