feat: support click any part of the row to set list open state and change to more beautiful arrow icons

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@material-ui/core": "^4.11.0",
+    "@material-ui/icons": "^4.9.1",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",

src/Female.js

@@ -78,11 +78,14 @@ class Female extends React.Component {
   }
 
   handleCloseModal() {
+    if (this.state.modalTitle !== '加载中') {
       this.setState({'open': false});
     }
+  }
 
   handleClick(program_name) {
     const program_type = '女子';
+    this.openModal('加载中', '');
     fetch('/register', {
       method: 'Post',
       body: JSON.stringify({

src/List.js

@@ -18,6 +18,8 @@ import Fade from "@material-ui/core/Fade";
 import Modal from "@material-ui/core/Modal";
 import {Link} from "react-router-dom";
 import Button from "@material-ui/core/Button";
+import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
 
 const useRowStyles = makeStyles({
   root: {
@@ -35,10 +37,10 @@ function Row(props) {
 
   return (
     <React.Fragment>
-      <TableRow className={classes.root}>
+      <TableRow className={classes.root} onClick={() => setOpen(!open)}>
         <TableCell>
-          <IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
+          <IconButton aria-label="expand row" size="small">
-            {open ? '▲' : '▼'}
+            {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
           </IconButton>
         </TableCell>
         <TableCell component="th" scope="row">

src/Male.js

@@ -81,8 +81,10 @@ class Male extends React.Component {
   }
 
   handleCloseModal() {
+    if (this.state.modalTitle !== '加载中') {
       this.setState({'open': false});
     }
+  }
 
   handleClick(program_name) {
     const program_type = '男子';
@@ -97,10 +99,8 @@ class Male extends React.Component {
       .then(response => response.json())
       .then(json => {
         if (json.result === 'success') {
-          this.handleCloseModal();
           this.openModal('成功', '成功报名男子项目' + program_name);
         } else {
-          this.handleCloseModal();
           this.openModal('失败', '报名男子项目' + program_name + '时失败');
         }
       });

src/Team.js

@@ -69,11 +69,14 @@ class Team extends React.Component {
   }
 
   handleCloseModal() {
+    if (this.state.modalTitle !== '加载中') {
       this.setState({'open': false});
     }
+  }
 
   handleClick(program_name) {
     const program_type = '团体';
+    this.openModal('加载中', '');
     fetch('/register', {
       method: 'Post',
       body: JSON.stringify({

yarn.lock

@@ -1284,6 +1284,13 @@
     react-is "^16.8.0"
     react-transition-group "^4.4.0"
 
+"@material-ui/icons@^4.9.1":
+  version "4.9.1"
+  resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.9.1.tgz#fdeadf8cb3d89208945b33dbc50c7c616d0bd665"
+  integrity sha512-GBitL3oBWO0hzBhvA9KxqcowRUsA0qzwKkURyC8nppnC3fw54KPKZ+d4V1Eeg/UnDRSzDaI9nGCdel/eh9AQMg==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+
 "@material-ui/styles@^4.10.0":
   version "4.10.0"
   resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.10.0.tgz#2406dc23aa358217aa8cc772e6237bd7f0544071"