Change Restaurant button

Elao · Jan 2, 2024 · 40a8b0f · 40a8b0f
1 parent f136341
commit 40a8b0f
Show file tree

Hide file tree

Showing 8 changed files with 332 additions and 60 deletions.
diff --git a/assets/app.scss b/assets/app.scss
@@ -3,9 +3,3 @@ body {
   flex: 1;
   height: 100vh;
 }
-
-#root {
-  display: flex;
-  flex: 1;
-}
-
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.15.2",
     "@mui/material": "^5.15.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

diff --git a/src/components/UI/Button/RestaurantButton.tsx b/src/components/UI/Button/RestaurantButton.tsx
@@ -0,0 +1,247 @@
+import {
+  Box,
+  Button,
+  ClickAwayListener,
+  Grow,
+  IconButton, MenuItem,
+  MenuList,
+  Paper,
+  Popper,
+  styled,
+  Typography
+} from '@mui/material';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import React from 'react';
+
+interface Props {
+  id: number
+  name: string
+  website: string
+  image: string
+  pickedRestaurantIds: number[]
+  setPickedRestaurantIds: (id: number[]) => void
+}
+
+export function RestaurantButton({
+  id,
+  name,
+  website,
+  image,
+  pickedRestaurantIds,
+  setPickedRestaurantIds,
+}: Props) {
+  const selected = pickedRestaurantIds.includes(id);
+  const selectedStyle = selected ?
+    {
+      width: '300px',
+      margin: '20px',
+      border: '4px solid currentColor'
+    } : {
+      width: '300px',
+      margin: '20px',
+    };
+  const [open, setOpen] = React.useState(false);
+  const anchorRef = React.useRef<HTMLButtonElement>(null);
+
+  function addRestaurantToPool (id: number) {
+    setPickedRestaurantIds([...pickedRestaurantIds, id]);
+  }
+
+  function removeRestaurantFromPool (id: number) {
+    setPickedRestaurantIds(pickedRestaurantIds.filter(restaurantId => id !== restaurantId));
+  }
+
+  function toggleRestaurant (value: boolean) {
+    if (value) {
+      addRestaurantToPool(id);
+    } else {
+      removeRestaurantFromPool(id);
+    }
+  }
+
+  function handleClick () {
+    toggleRestaurant(!selected);
+  }
+
+  const handleToggle = () => {
+    setOpen((prevOpen) => !prevOpen);
+  };
+
+  const handleClose = (event: Event) => {
+    if (
+      anchorRef.current &&
+      anchorRef.current.contains(event.target as HTMLElement)
+    ) {
+      return;
+    }
+
+    setOpen(false);
+  };
+
+  const handleMenuItemClick = (
+    website: string,
+  ) => {
+    window.open(website, '_blank');
+    setOpen(false);
+  };
+
+  return <StyledBox>
+    <StyledButton
+      focusRipple
+      key={name}
+      style={selectedStyle}
+      onClick={handleClick}
+    >
+      <ImageSrc style={{ backgroundImage: `url(${image})` }} />
+      <ImageBackdrop className="MuiImageBackdrop-root" />
+      <Image>
+        <Typography
+          component="span"
+          variant="subtitle1"
+          color="inherit"
+          sx={{
+            position: 'relative',
+            p: 4,
+            pt: 2,
+            pb: (theme) => `calc(${theme.spacing(1)} + 6px)`,
+          }}
+        >
+          {name}
+          <ImageMarked className="MuiImageMarked-root" />
+        </Typography>
+      </Image>
+    </StyledButton>
+    <StyledIconButton
+      color="primary"
+      aria-label="See website"
+      aria-controls={open ? 'split-button-menu' : undefined}
+      aria-expanded={open ? 'true' : undefined}
+      aria-haspopup="menu"
+      onClick={handleToggle}
+      ref={anchorRef}
+      style={!open ? { opacity: 1 } : { opacity: 0 }}
+    >
+      <MoreVertIcon/>
+    </StyledIconButton>
+    <Popper
+      sx={{
+        zIndex: 1,
+      }}
+      open={open}
+      anchorEl={anchorRef.current}
+      role={undefined}
+      transition
+      disablePortal
+      placement="bottom-start"
+    >
+      {({ TransitionProps }) => (
+        <Grow
+          {...TransitionProps}
+        >
+          <Paper>
+            <ClickAwayListener onClickAway={handleClose}>
+              <StyledMenuList id="split-button-menu" autoFocusItem>
+                <StyledMenuItem
+                    onClick={() => handleMenuItemClick(website)}
+                  >
+                    Visit website
+                  </StyledMenuItem>
+              </StyledMenuList>
+            </ClickAwayListener>
+          </Paper>
+        </Grow>
+      )}
+    </Popper>
+  </StyledBox>
+}
+
+const StyledMenuList = styled(MenuList)(({ theme }) => ({
+  color: theme.palette.text.primary,
+  backgroundColor: theme.palette.primary.main,
+  marginTop: '-20px',
+}));
+
+const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
+  color: theme.palette.secondary.contrastText,
+  '&:hover': {
+    color: theme.palette.common.white,
+  },
+}));
+
+const StyledIconButton = styled(IconButton)(({ theme }) => ({
+  color: theme.palette.common.white,
+  backgroundColor: theme.palette.primary.main,
+  width: '40px',
+  height: '40px',
+  position: 'absolute',
+  zIndex: 2,
+}));
+
+const StyledBox = styled(Box)({
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+const StyledButton = styled(Button)(({ theme }) => ({
+  position: 'relative',
+  height: 200,
+  [theme.breakpoints.down('sm')]: {
+    width: '100% !important', // Overrides inline-style
+    height: 100,
+  },
+  '&:hover, &.Mui-focusVisible': {
+    zIndex: 1,
+    '& .MuiImageBackdrop-root': {
+      opacity: 0.15,
+    },
+    '& .MuiImageMarked-root': {
+      opacity: 0,
+    },
+    '& .MuiTypography-root': {
+      border: '4px solid currentColor',
+    },
+  },
+}));
+
+const Image = styled('span')(({ theme }) => ({
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: theme.palette.common.white,
+}));
+
+const ImageBackdrop = styled('span')(({ theme }) => ({
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+  backgroundColor: theme.palette.common.black,
+  opacity: 0.4,
+  transition: theme.transitions.create('opacity'),
+}));
+
+const ImageMarked = styled('span')(({ theme }) => ({
+  height: 3,
+  width: 18,
+  backgroundColor: theme.palette.common.white,
+  position: 'absolute',
+  bottom: -2,
+  left: 'calc(50% - 9px)',
+  transition: theme.transitions.create('opacity'),
+}));
+
+const ImageSrc = styled('span')({
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+  backgroundSize: 'cover',
+  backgroundPosition: 'center 40%',
+});
diff --git a/src/components/UI/Button/ValidateButton.tsx b/src/components/UI/Button/ValidateButton.tsx
@@ -0,0 +1,18 @@
+import { Fab, styled } from '@mui/material'
+
+const FabStyled = styled(Fab)(({ theme }) => ({
+  position: 'fixed',
+  right: 0,
+  backgroundColor: theme.palette.primary.main,
+  '&:hover': {
+    backgroundColor: theme.palette.primary.light,
+  },
+}));
+
+export default function ValidateButton() {
+  return (
+    <FabStyled>
+      Valider
+    </FabStyled>
+  )
+}
diff --git a/src/components/UI/ToggleSwitch.tsx b/src/components/UI/ToggleSwitch.tsx
@@ -18,10 +18,14 @@ export default function ToggleSwitch({
   }
 
   return (
-    <FormGroup>
+    <FormGroup
+      style={{
+        marginBottom: '20px',
+      }}
+    >
       <LabelStyled
         control={
-          <Switch className={checked ? 'on' : 'off'} checked={checked} onChange={handleSwitch} />
+          <Switch checked={checked} onChange={handleSwitch} />
         }
         label={label}
       />
@@ -31,32 +35,8 @@ export default function ToggleSwitch({
 
 
 const LabelStyled = styled(FormControlLabel)(({ theme }) => ({
-  '.MuiSwitch-root': {
-    height: '55px',
-    borderWidth: '2px',
-    borderColor: theme.palette.mode === 'dark' ? '#fff' : theme.palette.primary.main,
-    opacity: '1',
-    '&:before, &:after': {
-      content: '""',
-      color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.primary.main,
-      textTransform: 'uppercase',
-      fontSize: '.9rem',
-      fontWeight: '600',
-      position: 'absolute',
-      top: 18,
-    },
-  },
-  '&:has(.on) .MuiSwitch-track:before': {
-    content: '"Off"',
-    left: 20,
-  },
-  '&:has(.off) .MuiSwitch-track:after': {
-    content: '"On"',
-    right: 20,
-  },
-  '.MuiButtonBase-root.MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
-    opacity: '1',
-    height: '19px',
-    width: '19px',
+  color: theme.palette.secondary.contrastText,
+  '& .MuiSwitch-track': {
+    backgroundColor: theme.palette.secondary.contrastText,
   },
 }));
diff --git a/src/data/restaurants.ts b/src/data/restaurants.ts
@@ -3,21 +3,18 @@ const data = {
     {
       "id": 1,
       "name": "Restaurant 1",
-      "description": "Restaurant 1 description",
       "website": "https://mui.com/material-ui/react-card/",
       "image": "https://mui.com/static/images/cards/contemplative-reptile.jpg"
     },
     {
       "id": 2,
       "name": "Restaurant 2",
-      "description": "Restaurant 2 description",
       "website": "https://mui.com/material-ui/react-card/",
       "image": "https://mui.com/static/images/cards/contemplative-reptile.jpg"
     },
     {
       "id": 3,
       "name": "Restaurant 3",
-      "description": "Restaurant 3 description",
       "website": "https://mui.com/material-ui/react-card/",
       "image": "https://mui.com/static/images/cards/contemplative-reptile.jpg"
     }