#44 fix: use constant for expand and selected

MetaCell · Nov 8, 2022 · 8d3ec47 · 8d3ec47
1 parent 8a9c070
commit 8d3ec47
Show file tree

Hide file tree

Showing 3 changed files with 398 additions and 12 deletions.
diff --git a/src/components/common/Breadcrumbs.js b/src/components/common/Breadcrumbs.js
@@ -77,6 +77,8 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
+const expand = 'expand';
+
 function Crumb({ id, text, handleClick, href, last = false }) {
   const classes = useStyles();
 
@@ -104,8 +106,6 @@ function Crumb({ id, text, handleClick, href, last = false }) {
   );
 }
 
-const expand = { id: 'expandButton', text: 'expand' };
-
 export const CustomBreadcrumbsWithMenu = ({ breadcrumbs }) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = React.useState(null);
@@ -136,7 +136,10 @@ export const CustomBreadcrumbsWithMenu = ({ breadcrumbs }) => {
         const restCrumbs = breadcrumbs.slice(1, breadcrumbs.length - 4);
         const lastFourCrumbs = breadcrumbs.slice(-4);
 
-        const newBreadCrumbs = firstItemCrumbs.concat([expand], lastFourCrumbs);
+        const newBreadCrumbs = firstItemCrumbs.concat(
+          [{ id: expand }],
+          lastFourCrumbs
+        );
         setCollapsedCrumbs(restCrumbs);
 
         return newBreadCrumbs;
@@ -176,7 +179,7 @@ export const CustomBreadcrumbsWithMenu = ({ breadcrumbs }) => {
           _breadcrumbs.map((crumb, idx) => {
             const index = idx + 1;
 
-            if (crumb.id === 'expandButton') {
+            if (crumb.id === expand) {
               return (
                 <Box>
                   <IconButton

diff --git a/src/components/common/Header.js b/src/components/common/Header.js
@@ -113,11 +113,14 @@ const listItems = [
 const Header = () => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = React.useState(null);
+  const [selected, setSelected] = React.useState('Build');
   const open = Boolean(anchorEl);
 
-  const handleClick = (event) => {
+  const handleClick = (event, value) => {
     if (event) {
-      setAnchorEl(event.currentTarget);
+      if (value === 'Composition') {
+        setAnchorEl(event.currentTarget);
+      }
     }
   };
 
@@ -162,14 +165,10 @@ const Header = () => {
             {listItems.map((item) => {
               return (
                 <ListItemButton
-                  selected={item.label === 'Build'}
+                  selected={item.label === selected}
                   disableRipple
                   disabled={item.soon}
-                  onClick={(e) => {
-                    if (item.label === 'Composition') {
-                      handleClick(e);
-                    }
-                  }}
+                  onClick={(e) => handleClick(e, item.label)}
                 >
                   <Typography>{item.label}</Typography>
                   {item.soon && <Chip label="SOON" />}