Optimize admin results table.

thewca · Aug 5, 2019 · 9bf8070 · 9bf8070
1 parent 4c61ef6
commit 9bf8070
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 75 deletions.
diff --git a/client/src/components/AdminCompetition/AdminResultsTable/AdminResultsTable.js b/client/src/components/AdminCompetition/AdminResultsTable/AdminResultsTable.js
@@ -29,85 +29,81 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-const AdminResultsTable = ({
-  results,
-  format,
-  eventId,
-  competitionId,
-  onResultClick,
-}) => {
-  const classes = useStyles();
+const AdminResultsTable = React.memo(
+  ({ results, format, eventId, competitionId, onResultClick }) => {
+    const classes = useStyles();
 
-  const stats = statsToDisplay(format, eventId);
+    const stats = statsToDisplay(format, eventId);
 
-  return (
-    <Table size="small">
-      <TableHead>
-        <TableRow>
-          <TableCell align="right" className={classes.ranking}>
-            #
-          </TableCell>
-          <TableCell align="right">ID</TableCell>
-          <TableCell>Name</TableCell>
-          {times(format.solveCount, index => (
-            <TableCell key={index} align="right">
-              {index + 1}
+    return (
+      <Table size="small">
+        <TableHead>
+          <TableRow>
+            <TableCell align="right" className={classes.ranking}>
+              #
             </TableCell>
-          ))}
-          {stats.map(({ name }) => (
-            <TableCell key={name} align="right">
-              {name}
-            </TableCell>
-          ))}
-        </TableRow>
-      </TableHead>
-      <TableBody>
-        {results.map(result => (
-          <TableRow
-            key={result.person.id}
-            hover
-            className={classes.row}
-            onClick={event => onResultClick(event, result)}
-          >
-            <TableCell
-              align="right"
-              className={classNames(classes.ranking, {
-                [classes.advancable]: result.advancable,
-              })}
-            >
-              {result.ranking}
-            </TableCell>
-            <TableCell align="right">{result.person.id}</TableCell>
-            <TableCell>{result.person.name}</TableCell>
+            <TableCell align="right">ID</TableCell>
+            <TableCell>Name</TableCell>
             {times(format.solveCount, index => (
               <TableCell key={index} align="right">
-                {formatResult(result.attempts[index] || 0, eventId)}
+                {index + 1}
+              </TableCell>
+            ))}
+            {stats.map(({ name }) => (
+              <TableCell key={name} align="right">
+                {name}
               </TableCell>
             ))}
-            {stats.map(({ name, fn, type }, index) => (
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {results.map(result => (
+            <TableRow
+              key={result.person.id}
+              hover
+              className={classes.row}
+              onClick={event => onResultClick(event, result)}
+            >
               <TableCell
-                key={name}
                 align="right"
-                className={classNames({
-                  [classes.mainStat]: index === 0,
+                className={classNames(classes.ranking, {
+                  [classes.advancable]: result.advancable,
                 })}
               >
-                <ResultWithRecordTag
-                  result={formatResult(
-                    fn(result.attempts, eventId),
-                    eventId,
-                    type === 'average'
-                  )}
-                  recordTag={result.recordTags[type]}
-                  showPb={false}
-                />
+                {result.ranking}
               </TableCell>
-            ))}
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  );
-};
+              <TableCell align="right">{result.person.id}</TableCell>
+              <TableCell>{result.person.name}</TableCell>
+              {times(format.solveCount, index => (
+                <TableCell key={index} align="right">
+                  {formatResult(result.attempts[index] || 0, eventId)}
+                </TableCell>
+              ))}
+              {stats.map(({ name, fn, type }, index) => (
+                <TableCell
+                  key={name}
+                  align="right"
+                  className={classNames({
+                    [classes.mainStat]: index === 0,
+                  })}
+                >
+                  <ResultWithRecordTag
+                    result={formatResult(
+                      fn(result.attempts, eventId),
+                      eventId,
+                      type === 'average'
+                    )}
+                    recordTag={result.recordTags[type]}
+                    showPb={false}
+                  />
+                </TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    );
+  }
+);
 
 export default AdminResultsTable;
diff --git a/client/src/components/AdminCompetition/AdminRound/AdminRound.js b/client/src/components/AdminCompetition/AdminRound/AdminRound.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useCallback } from 'react';
 import gql from 'graphql-tag';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
@@ -69,6 +69,13 @@ const AdminRound = ({ match }) => {
   const { competitionId, roundId } = match.params;
   const [resultMenuProps, setResultMenuProps] = useState({});
 
+  const handleResultClick = useCallback((event, result) => {
+    setResultMenuProps({
+      position: { left: event.clientX, top: event.clientY },
+      result,
+    });
+  }, []);
+
   return (
     <CustomQuery query={ROUND_QUERY} variables={{ competitionId, roundId }}>
       {({ data: { round } }) => (
@@ -99,12 +106,7 @@ const AdminRound = ({ match }) => {
                 format={round.format}
                 eventId={round.event.id}
                 competitionId={competitionId}
-                onResultClick={(event, result) => {
-                  setResultMenuProps({
-                    position: { left: event.clientX, top: event.clientY },
-                    result,
-                  });
-                }}
+                onResultClick={handleResultClick}
               />
             </Grid>
           </Grid>