add yes/no button

Author: CoCo-Japan-pan

atcoder-problems-frontend/src/pages/ListPage/SmallTable.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import { Table } from "reactstrap";
+import React, { useState } from "react";
+import { Table, Button, ButtonGroup } from "reactstrap";
 import { ProblemId } from "../../interfaces/Status";
 import { isAccepted } from "../../utils";
 import { countBy, groupBy } from "../../utils/GroupBy";
@@ -47,6 +47,7 @@ export const getUserPointCounts = (
 };
 
 export const SmallTable: React.FC<Props> = ({ submissions, setFilterFunc }) => {
+  const [grouped, setGrouped] = useState(true);
   const mergedProblemMap =
     useMergedProblemMap().data ?? new Map<ProblemId, MergedProblem>();
   const userPointCountMap = getUserPointCounts(mergedProblemMap, submissions);
@@ -87,47 +88,60 @@ export const SmallTable: React.FC<Props> = ({ submissions, setFilterFunc }) => {
   );
 
   return (
-    <Table striped bordered hover responsive>
-      <thead>
-        <tr>
-          <th>Point</th>
-          {totalCountBy100.map(({ point }) => (
-            <th key={point}>
-              <a
-                href={window.location.hash}
-                onClick={(): void => setFilterFunc(point)}
-              >
-                {`${point}- `}
-              </a>
-            </th>
-          ))}
-        </tr>
-        <tr>
-          <th>Total</th>
-          {totalCountBy100.map(({ point, count }) => (
-            <th key={point}>{count}</th>
-          ))}
-        </tr>
-      </thead>
-      <tbody>
-        {userPointCountMapBy100.map(({ userId, countByPoint }) => (
-          <tr key={userId}>
-            <td>{userId}</td>
-            {totalCountBy100.map(({ point, count }) => (
-              <td
-                key={point}
-                className={
-                  countByPoint.get(point) === count
-                    ? TableColor.Success
-                    : TableColor.None
-                }
-              >
-                {countByPoint.get(point) ?? 0}
-              </td>
+    <>
+      <ButtonGroup className="mb-2">
+        <Button onClick={(): void => setGrouped(!grouped)}>
+          {grouped ? "Grouped" : "All"}
+        </Button>
+      </ButtonGroup>
+      <Table striped bordered hover responsive>
+        <thead>
+          <tr>
+            <th>Point</th>
+            {(grouped ? totalCountBy100 : totalCount).map(({ point }) => (
+              <th key={point}>
+                <a
+                  href={window.location.hash}
+                  onClick={(): void => setFilterFunc(point)}
+                >
+                  {`${point}- `}
+                </a>
+              </th>
             ))}
           </tr>
-        ))}
-      </tbody>
-    </Table>
+          <tr>
+            <th>Total</th>
+            {(grouped ? totalCountBy100 : totalCount).map(
+              ({ point, count }) => (
+                <th key={point}>{count}</th>
+              )
+            )}
+          </tr>
+        </thead>
+        <tbody>
+          {(grouped ? userPointCountMapBy100 : userPointCountMap).map(
+            ({ userId, countByPoint }) => (
+              <tr key={userId}>
+                <td>{userId}</td>
+                {(grouped ? totalCountBy100 : totalCount).map(
+                  ({ point, count }) => (
+                    <td
+                      key={point}
+                      className={
+                        countByPoint.get(point) === count
+                          ? TableColor.Success
+                          : TableColor.None
+                      }
+                    >
+                      {countByPoint.get(point) ?? 0}
+                    </td>
+                  )
+                )}
+              </tr>
+            )
+          )}
+        </tbody>
+      </Table>
+    </>
   );
 };