Add remove button for schedule and neaten up a bit

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@fontsource/roboto": "^4.4.5",
     "@material-ui/core": "^4.11.4",
+    "@material-ui/icons": "^4.11.2",
     "@reduxjs/toolkit": "^1.6.0",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",

src/components/form/CrontabsFormControl.tsx

@@ -9,8 +9,6 @@ import FormControl from '@material-ui/core/FormControl';
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     formControl: {
-      marginTop: theme.spacing(1),
-      marginBottom: theme.spacing(1),
       minWidth: 120,
     },
     selectEmpty: {

src/pages/advanced/AdvancedTabList.tsx

@@ -1,20 +1,22 @@
-import Box from '@material-ui/core/Box';
 import React from 'react';
+import Box from '@material-ui/core/Box';
 import { Tab } from '../../types';
 import AdvancedTabForm from './AdvancedTabForm';
 
 type PropsType = {
   tabs: Tab[];
 };
 
-const TabList = ({ tabs }: PropsType) => (
-  <>
-    {tabs.map((tab) => (
-      <Box key={`tab-${tab.id}`}>
-        <AdvancedTabForm tab={tab} />
-      </Box>
-    ))}
-  </>
-);
+const TabList = ({ tabs }: PropsType) => {
+  return (
+    <>
+      {tabs.map((tab) => (
+        <Box key={`tab-${tab.id}`}>
+          <AdvancedTabForm tab={tab} />
+        </Box>
+      ))}
+    </>
+  );
+};
 
 export default TabList;

src/pages/advanced/RemoveScheduleButton.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Schedule } from '../../types';
+import IconButton from '@material-ui/core/IconButton';
+import { removeSchedule } from '../../store/scheduleSlice';
+import { useDispatch } from 'react-redux';
+import RemoveCircleOutlineIcon from '@material-ui/icons/RemoveCircleOutline';
+
+type PropsType = {
+  schedule: Schedule;
+};
+
+const RemoveScheduleButon = ({ schedule }: PropsType) => {
+  const dispatch = useDispatch();
+  const handleRemove = () => {
+    dispatch(removeSchedule(schedule.id));
+  };
+
+  return (
+    <IconButton aria-label="Remove Schedule" onClick={handleRemove}>
+      <RemoveCircleOutlineIcon />
+    </IconButton>
+  );
+};
+
+export default RemoveScheduleButon;

src/pages/advanced/ScheduleForm.tsx

@@ -1,18 +1,35 @@
 import Grid from '@material-ui/core/Grid';
 import TextField from '@material-ui/core/TextField';
+import {
+  createStyles,
+  makeStyles,
+  Theme,
+} from '@material-ui/core/styles';
 import React from 'react';
 import CrontabsFormControl from '../../components/form/CrontabsFormControl';
 import { Schedule } from '../../types';
+import RemoveScheduleButton from './RemoveScheduleButton';
 import ScheduleOperationSelect from './ScheduleOperationSelect';
 
 type PropsType = {
   schedule: Schedule;
 };
 
+const useStyles = makeStyles((theme: Theme) => ({
+  removeButton: {
+    display: 'flex',
+    justifyContent: 'center',
+  },
+  schedule: {
+    paddingRight: theme.spacing(1),
+  },
+}));
+
 const ScheduleForm = ({ schedule }: PropsType) => {
+  const classes = useStyles();
   return (
     <Grid container>
-      <Grid item xs={8}>
+      <Grid item xs={8} className={classes.schedule}>
         <CrontabsFormControl>
           <TextField
             fullWidth
@@ -22,9 +39,14 @@ const ScheduleForm = ({ schedule }: PropsType) => {
           />
         </CrontabsFormControl>
       </Grid>
-      <Grid item xs={4}>
+      <Grid item xs={3}>
         <ScheduleOperationSelect schedule={schedule} />
       </Grid>
+      <Grid item xs={1} className={classes.removeButton}>
+        <div>
+          <RemoveScheduleButton schedule={schedule} />
+        </div>
+      </Grid>
     </Grid>
   );
 };

src/pages/advanced/ScheduleList.tsx

@@ -1,20 +1,40 @@
-import Box from '@material-ui/core/Box';
 import React from 'react';
+import Box from '@material-ui/core/Box';
 import { Schedule } from '../../types';
 import ScheduleForm from './ScheduleForm';
+import {
+  createStyles,
+  makeStyles,
+  Theme,
+} from '@material-ui/core/styles';
 
 type PropsType = {
   schedules: Schedule[];
 };
 
-const ScheduleList = ({ schedules }: PropsType) => (
-  <>
-    {schedules.map((schedule) => (
-      <Box key={`schedule-${schedule.id}`}>
-        <ScheduleForm schedule={schedule} />
-      </Box>
-    ))}
-  </>
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    scheduleListItem: {
+      marginTop: theme.spacing(1),
+      marginBottom: theme.spacing(1),
+    },
+  }),
 );
 
+const ScheduleList = ({ schedules }: PropsType) => {
+  const classes = useStyles();
+  return (
+    <>
+      {schedules.map((schedule) => (
+        <Box
+          className={classes.scheduleListItem}
+          key={`schedule-${schedule.id}`}
+        >
+          <ScheduleForm schedule={schedule} />
+        </Box>
+      ))}
+    </>
+  );
+};
+
 export default ScheduleList;

yarn.lock

@@ -1431,6 +1431,13 @@
     react-is "^16.8.0 || ^17.0.0"
     react-transition-group "^4.4.0"
 
+"@material-ui/icons@^4.11.2":
+  version "4.11.2"
+  resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.11.2.tgz#b3a7353266519cd743b6461ae9fdfcb1b25eb4c5"
+  integrity sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+
 "@material-ui/styles@^4.11.4":
   version "4.11.4"
   resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.4.tgz#eb9dfccfcc2d208243d986457dff025497afa00d"