Always show the Add new tab button

dave-elkan · Jul 7, 2021 · b017d9c · b017d9c
1 parent 0bc1b49
commit b017d9c
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 8 deletions.
diff --git a/src/components/form/AddInitialTabButton.tsx → src/components/form/AddTabButton.tsx b/src/components/form/AddInitialTabButton.tsx → src/components/form/AddTabButton.tsx
@@ -3,24 +3,32 @@ import Button from '@material-ui/core/Button';
 import Grid from '@material-ui/core/Grid';
 import { addTab, TabSansId } from '../../store/tabsSlice';
 import { useDispatch } from 'react-redux';
+import { makeStyles } from '@material-ui/core/styles';
 
 const initialTab: TabSansId = {
   url: '',
 };
 
-const AddInitialTabButton = () => {
+const useStyles = makeStyles((theme) => ({
+  addTabButton: {
+    margin: theme.spacing(4),
+  },
+}));
+
+const AddTabButton = () => {
   const dispatch = useDispatch();
+  const classes = useStyles();
   return (
-    <Grid container justify="center">
+    <Grid className={classes.addTabButton} container justify="center">
       <Button
         variant="contained"
         color="primary"
         onClick={() => dispatch(addTab(initialTab))}
       >
-        Add Tab
+        Add new tab
       </Button>
     </Grid>
   );
 };
 
-export default AddInitialTabButton;
+export default AddTabButton;
diff --git a/src/pages/Page.tsx b/src/pages/Page.tsx
@@ -1,11 +1,15 @@
 import React from 'react';
 import Container from '@material-ui/core/Container';
 import { makeStyles } from '@material-ui/core/styles';
+import AddTabButton from '../components/form/AddTabButton';
 
 const useStyles = makeStyles((theme) => ({
   root: {
     padding: theme.spacing(3),
   },
+  addTabButton: {
+    margin: theme.spacing(4),
+  },
 }));
 
 const Page = ({
@@ -23,6 +27,7 @@ const Page = ({
       <h1>{title}</h1>
       <h4>{description}</h4>
       {children}
+      <AddTabButton />
     </Container>
   );
 };

diff --git a/src/pages/advanced/AdvancedTabList.tsx b/src/pages/advanced/AdvancedTabList.tsx
@@ -3,17 +3,13 @@ import Box from '@material-ui/core/Box';
 import { Tab } from '../../types';
 import AdvancedTabForm from './AdvancedTabForm';
 import { TabsStateType } from '../../store/tabsSlice';
-import AddInitialTabButton from '../../components/form/AddInitialTabButton';
 
 type PropsType = {
   tabs: TabsStateType;
 };
 
 const TabList = ({ tabs }: PropsType) => {
   const tabsArray = Object.values(tabs);
-  if (!tabsArray.length) {
-    return <AddInitialTabButton />;
-  }
 
   return (
     <>