Replace button prop with ListItemButton (#168)

thewca · Aug 10, 2023 · b8e5466 · b8e5466
1 parent 1d85976
commit b8e5466
Show file tree

Hide file tree

Showing 10 changed files with 42 additions and 52 deletions.
diff --git a/client/src/components/CompetitionList/CompetitionList.jsx b/client/src/components/CompetitionList/CompetitionList.jsx
@@ -1,7 +1,7 @@
 import { Link } from "react-router-dom";
 import {
   List,
-  ListItem,
+  ListItemButton,
   ListItemIcon,
   ListItemText,
   ListSubheader,
@@ -20,10 +20,9 @@ function CompetitionList({ title, competitions }) {
         items={competitions}
         renderItem={(competition, { style }) => {
           return (
-            <ListItem
+            <ListItemButton
               key={competition.id}
               style={style}
-              button
               component={Link}
               to={`/competitions/${competition.id}`}
             >
@@ -39,7 +38,7 @@ function CompetitionList({ title, competitions }) {
                   competition.endDate
                 )}
               />
-            </ListItem>
+            </ListItemButton>
           );
         }}
       />

diff --git a/client/src/components/CompetitionNavigation/CompetitionEventList.jsx b/client/src/components/CompetitionNavigation/CompetitionEventList.jsx
@@ -4,7 +4,7 @@ import {
   Chip,
   Collapse,
   List,
-  ListItem,
+  ListItemButton,
   ListItemIcon,
   ListItemText,
 } from "@mui/material";
@@ -27,8 +27,7 @@ function CompetitionEventList({ competitionEvents, competitionId }) {
     <List dense={true}>
       {competitionEvents.map((competitionEvent) => (
         <Fragment key={competitionEvent.id}>
-          <ListItem
-            button
+          <ListItemButton
             onClick={(event) =>
               handleCompetitionEventClick(event, competitionEvent)
             }
@@ -38,7 +37,7 @@ function CompetitionEventList({ competitionEvents, competitionId }) {
               <CubingIcon eventId={competitionEvent.event.id} />
             </ListItemIcon>
             <ListItemText primary={competitionEvent.event.name} />
-          </ListItem>
+          </ListItemButton>
           <Collapse
             in={selectedId === competitionEvent.id}
             timeout="auto"
@@ -53,9 +52,8 @@ function CompetitionEventList({ competitionEvents, competitionId }) {
           >
             <List dense={true}>
               {competitionEvent.rounds.map((round) => (
-                <ListItem
+                <ListItemButton
                   key={round.id}
-                  button
                   component={RouterLink}
                   to={`/competitions/${competitionId}/rounds/${round.id}`}
                   disabled={!round.open}
@@ -72,7 +70,7 @@ function CompetitionEventList({ competitionEvents, competitionId }) {
                       }}
                     />
                   )}
-                </ListItem>
+                </ListItemButton>
               ))}
             </List>
           </Collapse>

diff --git a/client/src/components/Competitors/CompetitorList.jsx b/client/src/components/Competitors/CompetitorList.jsx
@@ -5,7 +5,7 @@ import {
   IconButton,
   InputBase,
   List,
-  ListItem,
+  ListItemButton,
   ListItemText,
   ListItemIcon,
   Paper,
@@ -50,9 +50,8 @@ function CompetitorList({ competitors, competitionId }) {
       <Grid item sx={{ width: "100%" }}>
         <List>
           {filteredCompetitors.map((competitor) => (
-            <ListItem
+            <ListItemButton
               key={competitor.id}
-              button
               component={RouterLink}
               to={`/competitions/${competitionId}/competitors/${competitor.id}`}
             >
@@ -63,7 +62,7 @@ function CompetitorList({ competitors, competitionId }) {
                 />
               </ListItemIcon>
               <ListItemText primary={competitor.name} />
-            </ListItem>
+            </ListItemButton>
           ))}
         </List>
       </Grid>

diff --git a/client/src/components/ImportableCompetitions/ImportableCompetitionListItem.jsx b/client/src/components/ImportableCompetitions/ImportableCompetitionListItem.jsx
@@ -1,6 +1,6 @@
 import { gql, useMutation } from "@apollo/client";
 import { useNavigate } from "react-router-dom";
-import { ListItem, ListItemIcon, ListItemText } from "@mui/material";
+import { ListItemButton, ListItemIcon, ListItemText } from "@mui/material";
 import GetAppIcon from "@mui/icons-material/GetApp";
 import { useConfirm } from "material-ui-confirm";
 import useApolloErrorHandler from "../../hooks/useApolloErrorHandler";
@@ -39,9 +39,8 @@ function ImportableCompetitionListItem({ competition }) {
   }
 
   return (
-    <ListItem
+    <ListItemButton
       key={competition.wcaId}
-      button
       onClick={handleClick}
       disabled={loading}
     >
@@ -52,7 +51,7 @@ function ImportableCompetitionListItem({ competition }) {
         primary={competition.name}
         secondary={formatDateRange(competition.startDate, competition.endDate)}
       />
-    </ListItem>
+    </ListItemButton>
   );
 }
 

diff --git a/client/src/components/MyCompetitions/CompetitorsCompetitionList.jsx b/client/src/components/MyCompetitions/CompetitorsCompetitionList.jsx
@@ -1,7 +1,7 @@
 import { Link } from "react-router-dom";
 import {
   List,
-  ListItem,
+  ListItemButton,
   ListItemIcon,
   ListItemText,
   ListSubheader,
@@ -22,10 +22,9 @@ function CompetitorsCompetitionList({ title, competitors }) {
           const competition = person.competition;
 
           return (
-            <ListItem
+            <ListItemButton
               key={competition.id}
               style={style}
-              button
               component={Link}
               to={`/competitions/${competition.id}/competitors/${person.id}`}
             >
@@ -39,7 +38,7 @@ function CompetitorsCompetitionList({ title, competitors }) {
                   competition.endDate
                 )}
               />
-            </ListItem>
+            </ListItemButton>
           );
         }}
       />

diff --git a/client/src/components/MyCompetitions/StaffMembersCompetitionList.jsx b/client/src/components/MyCompetitions/StaffMembersCompetitionList.jsx
@@ -3,7 +3,7 @@ import {
   Box,
   Chip,
   List,
-  ListItem,
+  ListItemButton,
   ListItemIcon,
   ListItemText,
   ListSubheader,
@@ -25,10 +25,9 @@ function StaffMembersCompetitionList({ title, staffMembers }) {
           const competition = staffMember.competition;
 
           return (
-            <ListItem
+            <ListItemButton
               key={competition.id}
               style={style}
-              button
               component={Link}
               to={`/admin/competitions/${competition.id}`}
             >
@@ -58,7 +57,7 @@ function StaffMembersCompetitionList({ title, staffMembers }) {
                   />
                 ))}
               </Box>
-            </ListItem>
+            </ListItemButton>
           );
         }}
       />

diff --git a/client/src/components/RecordList/RecordList.jsx b/client/src/components/RecordList/RecordList.jsx
@@ -2,7 +2,7 @@ import { Link } from "react-router-dom";
 import {
   Box,
   List,
-  ListItem,
+  ListItemButton,
   ListItemIcon,
   ListItemText,
   ListSubheader,
@@ -21,9 +21,8 @@ function RecordList({ title, records }) {
         }}
       >
         {records.map((record) => (
-          <ListItem
+          <ListItemButton
             key={record.id}
-            button
             component={Link}
             to={`/competitions/${record.result.round.competitionEvent.competition.id}/rounds/${record.result.round.id}`}
           >
@@ -44,7 +43,7 @@ function RecordList({ title, records }) {
               }
               secondary={`${record.result.person.name} from ${record.result.person.country.name}`}
             />
-          </ListItem>
+          </ListItemButton>
         ))}
       </Box>
     </List>

diff --git a/client/src/components/admin/AdminCompetitionEvents/AdminRoundListItem.jsx b/client/src/components/admin/AdminCompetitionEvents/AdminRoundListItem.jsx
@@ -1,5 +1,9 @@
 import { Link as RouterLink } from "react-router-dom";
-import { ListItem, ListItemSecondaryAction, ListItemText } from "@mui/material";
+import {
+  ListItemButton,
+  ListItemSecondaryAction,
+  ListItemText,
+} from "@mui/material";
 import OpenRoundButton from "./OpenRoundButton";
 import ClearRoundButton from "./ClearRoundButton";
 
@@ -19,9 +23,8 @@ function roundClearable(round, competitionEvent) {
 
 function AdminRoundListItem({ round, competitionEvent, competitionId }) {
   return (
-    <ListItem
+    <ListItemButton
       key={round.id}
-      button
       component={RouterLink}
       to={`/admin/competitions/${competitionId}/rounds/${round.id}`}
       disabled={!round.open}
@@ -35,7 +38,7 @@ function AdminRoundListItem({ round, competitionEvent, competitionId }) {
           <ClearRoundButton round={round} competitionEvent={competitionEvent} />
         )}
       </ListItemSecondaryAction>
-    </ListItem>
+    </ListItemButton>
   );
 }
 

diff --git a/client/src/components/admin/ImportableCompetitions/ImportableCompetitionListItem.jsx b/client/src/components/admin/ImportableCompetitions/ImportableCompetitionListItem.jsx
@@ -1,6 +1,6 @@
 import { gql, useMutation } from "@apollo/client";
 import { useNavigate } from "react-router-dom";
-import { ListItem, ListItemText } from "@mui/material";
+import { ListItemButton, ListItemText } from "@mui/material";
 import { useConfirm } from "material-ui-confirm";
 import useApolloErrorHandler from "../../../hooks/useApolloErrorHandler";
 import { formatDateRange } from "../../../lib/date";
@@ -38,17 +38,16 @@ function ImportableCompetitionListItem({ competition }) {
   }
 
   return (
-    <ListItem
+    <ListItemButton
       key={competition.wcaId}
-      button
       onClick={handleClick}
       disabled={loading}
     >
       <ListItemText
         primary={competition.name}
         secondary={formatDateRange(competition.startDate, competition.endDate)}
       />
-    </ListItem>
+    </ListItemButton>
   );
 }
 

diff --git a/client/src/components/admin/Synchronization/Synchronization.jsx b/client/src/components/admin/Synchronization/Synchronization.jsx
@@ -3,7 +3,7 @@ import { useParams } from "react-router-dom";
 import {
   Grid,
   List,
-  ListItem,
+  ListItemButton,
   ListItemIcon,
   ListItemText,
   Typography,
@@ -85,8 +85,7 @@ function Synchronization() {
             <ListSubheader sx={{ backgroundColor: "inherit" }}>
               WCA website
             </ListSubheader>
-            <ListItem
-              button
+            <ListItemButton
               component="a"
               href={wcaUrl(`/competitions/${competition.wcaId}/events/edit`)}
               target="_blank"
@@ -99,9 +98,8 @@ function Synchronization() {
                 primary="Change round details"
                 secondary="Manage events and rounds on the WCA website."
               />
-            </ListItem>
-            <ListItem
-              button
+            </ListItemButton>
+            <ListItemButton
               component="a"
               href={wcaUrl(
                 `/competitions/${competition.wcaId}/registrations/add`
@@ -116,12 +114,11 @@ function Synchronization() {
                 primary="Add competitor"
                 secondary="Use a form on the WCA website to register someone during the competition (if applicable)."
               />
-            </ListItem>
+            </ListItemButton>
             <ListSubheader sx={{ backgroundColor: "inherit" }}>
               Additional tools
             </ListSubheader>
-            <ListItem
-              button
+            <ListItemButton
               component="a"
               href={groupifierUrl(`/competitions/${competition.wcaId}`)}
               target="_blank"
@@ -134,9 +131,8 @@ function Synchronization() {
                 primary="Groupifier"
                 secondary="Manage competitor groups and print scorecards."
               />
-            </ListItem>
-            <ListItem
-              button
+            </ListItemButton>
+            <ListItemButton
               component="a"
               href={scramblesMatcherUrl()}
               target="_blank"
@@ -149,7 +145,7 @@ function Synchronization() {
                 primary="Scrambles Matcher"
                 secondary="Use it after the competition to attach scrambles to rounds and proceed with results submission."
               />
-            </ListItem>
+            </ListItemButton>
           </List>
         </Paper>
       </Grid>