refactor searchbar (#13)

januschung · Jun 23, 2024 · 5ffde16 · 5ffde16
1 parent b35c80d
commit 5ffde16
Show file tree

Hide file tree

Showing 7 changed files with 227 additions and 237 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,7 +1,7 @@
 import JobApplicationList from './components/JobApplicationList';
 import CssBaseline from '@mui/material/CssBaseline';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
-import PrimarySearchAppBar from './components/SearchBar';
+import PrimarySearchAppBar from './components/PrimarySearchAppBar';
 import { Route, Routes } from "react-router-dom"
 
 const theme = createTheme();

diff --git a/src/App.test.js b/src/App.test.js
@@ -1,11 +1,11 @@
 import { render, screen } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import App from './App';
-import PrimarySearchAppBar from './components/SearchBar';
+import PrimarySearchAppBar from './components/PrimarySearchAppBar';
 import JobApplicationList from './components/JobApplicationList';
 
 
-jest.mock('./components/SearchBar')
+jest.mock('./components/PrimarySearchAppBar')
 jest.mock('./components/JobApplicationList')
 
 it('Should render Job Application list on default route', async () => {

diff --git a/src/components/MobileMenu.jsx b/src/components/MobileMenu.jsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import IconButton from '@mui/material/IconButton';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import Badge from '@mui/material/Badge';
+import AddCircleIcon from '@mui/icons-material/AddCircle';
+import MailIcon from '@mui/icons-material/Mail';
+import NotificationsIcon from '@mui/icons-material/Notifications';
+import AccountCircle from '@mui/icons-material/AccountCircle';
+
+export default function MobileMenu({ mobileMoreAnchorEl, isMobileMenuOpen, handleMobileMenuClose, handleProfileMenuOpen, handleJobApplicationOpen }) {
+  const mobileMenuId = 'primary-search-account-menu-mobile';
+  return (
+    <Menu
+      anchorEl={mobileMoreAnchorEl}
+      anchorOrigin={{
+        vertical: 'top',
+        horizontal: 'right',
+      }}
+      id={mobileMenuId}
+      keepMounted
+      transformOrigin={{
+        vertical: 'top',
+        horizontal: 'right',
+      }}
+      open={isMobileMenuOpen}
+      onClose={handleMobileMenuClose}
+    >
+      <MenuItem onClick={handleJobApplicationOpen}>
+        <IconButton size="large" aria-label="New" color="inherit">
+          <AddCircleIcon />
+        </IconButton>
+        <p>New</p>
+      </MenuItem>
+      <MenuItem>
+        <IconButton size="large" aria-label="show 4 new mails" color="inherit">
+          <Badge badgeContent={4} color="error">
+            <MailIcon />
+          </Badge>
+        </IconButton>
+        <p>Offers</p>
+      </MenuItem>
+      <MenuItem>
+        <IconButton size="large" aria-label="show 17 new notifications" color="inherit">
+          <Badge badgeContent={17} color="error">
+            <NotificationsIcon />
+          </Badge>
+        </IconButton>
+        <p>Interviews</p>
+      </MenuItem>
+      <MenuItem onClick={handleProfileMenuOpen}>
+        <IconButton size="large" aria-label="account of current user" aria-controls="primary-search-account-menu" aria-haspopup="true" color="inherit">
+          <AccountCircle />
+        </IconButton>
+        <p>Profile</p>
+      </MenuItem>
+    </Menu>
+  );
+}
diff --git a/src/components/PrimarySearchAppBar.jsx b/src/components/PrimarySearchAppBar.jsx
@@ -0,0 +1,122 @@
+import React, { useState } from 'react';
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import Badge from '@mui/material/Badge';
+import EmojiEventsIcon from '@mui/icons-material/EmojiEvents';
+import AddCircleIcon from '@mui/icons-material/AddCircle';
+import MailIcon from '@mui/icons-material/Mail';
+import NotificationsIcon from '@mui/icons-material/Notifications';
+import AccountCircle from '@mui/icons-material/AccountCircle';
+import MoreIcon from '@mui/icons-material/MoreVert';
+import { useQuery } from '@apollo/client';
+import { GET_PROFILE } from '../graphql/query';
+import SearchBar from './SearchBar';
+import JobApplicationDialog from './JobApplicationDialog';
+import ProfileDialog from './ProfileDialog';
+
+export default function PrimarySearchAppBar() {
+  const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = useState(null);
+  const [jobApplicationOpen, setJobApplicationOpen] = useState(false);
+  const [profileOpen, setProfileOpen] = useState(false);
+  const [profile, setProfile] = useState('');
+  const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);
+
+  const id = 1;
+
+  const { error, data, loading } = useQuery(GET_PROFILE, {
+    variables: { id },
+  });
+
+  const handleProfileMenuOpen = () => {
+    setProfileOpen(true);
+    setProfile(data.profileById);
+  };
+
+  const handleProfileClose = () => setProfileOpen(false);
+  const handleMobileMenuClose = () => setMobileMoreAnchorEl(null);
+  const handleJobApplicationOpen = () => setJobApplicationOpen(true);
+  const handleJobApplicationClose = () => setJobApplicationOpen(false);
+
+  return (
+    <Box sx={{ flexGrow: 1 }}>
+      <JobApplicationDialog
+        jobApplication={{ status: 'open' }}
+        open={jobApplicationOpen}
+        handleClose={handleJobApplicationClose}
+        setOpen={setJobApplicationOpen}
+        isNew
+      />
+      <ProfileDialog
+        profile={profile}
+        open={profileOpen}
+        handleClose={handleProfileClose}
+        setOpen={setProfileOpen}
+      />
+      <AppBar position="static">
+        <Toolbar>
+          <EmojiEventsIcon sx={{ mr: 2 }} />
+          <Typography
+            variant="h6"
+            noWrap
+            component="a"
+            href="/"
+            sx={{
+              mr: 2,
+              display: { xs: 'none', md: 'flex' },
+              fontFamily: 'monospace',
+              fontWeight: 700,
+              letterSpacing: '.3rem',
+              color: 'inherit',
+              textDecoration: 'none',
+            }}
+          >
+            JOB WINNER
+          </Typography>
+          <SearchBar />
+          <Box sx={{ flexGrow: 1 }} />
+          <Box sx={{ display: { xs: 'none', md: 'flex' } }}>
+            <IconButton size="large" aria-label="New" color="inherit" onClick={handleJobApplicationOpen}>
+              <AddCircleIcon />
+            </IconButton>
+            <IconButton size="large" aria-label="show 4 new mails" color="inherit">
+              <Badge badgeContent={4} color="error">
+                <MailIcon />
+              </Badge>
+            </IconButton>
+            <IconButton size="large" aria-label="show 17 new notifications" color="inherit">
+              <Badge badgeContent={17} color="error">
+                <NotificationsIcon />
+              </Badge>
+            </IconButton>
+            <IconButton
+              size="large"
+              edge="end"
+              aria-label="account of current user"
+              aria-controls="primary-search-account-menu"
+              aria-haspopup="true"
+              onClick={handleProfileMenuOpen}
+              color="inherit"
+            >
+              <AccountCircle />
+            </IconButton>
+          </Box>
+          <Box sx={{ display: { xs: 'flex', md: 'none' } }}>
+            <IconButton
+              size="large"
+              aria-label="show more"
+              aria-controls="primary-search-account-menu-mobile"
+              aria-haspopup="true"
+              onClick={(event) => setMobileMoreAnchorEl(event.currentTarget)}
+              color="inherit"
+            >
+              <MoreIcon />
+            </IconButton>
+          </Box>
+        </Toolbar>
+      </AppBar>
+    </Box>
+  );
+}
diff --git a/src/components/ProfileDialog.jsx b/src/components/ProfileDialog.jsx
@@ -13,7 +13,6 @@ import { UPDATE_PROFILE } from '../graphql/mutation';
 import { GET_PROFILE } from '../graphql/query';
 import CopyButton from './CopyButton';
 
-
 export default function ProfileDialog({ profile, handleClose, open, setOpen }) {
   const [firstName, setFirstName] = useState('');
   const [lastName, setLastName] = useState('');
@@ -34,17 +33,19 @@ export default function ProfileDialog({ profile, handleClose, open, setOpen }) {
   });
 
   useEffect(() => {
-    setFirstName(profile.firstName);
-    setLastName(profile.lastName);
-    setAddressStreet1(profile.addressStreet1);
-    setAddressStreet2(profile.addressStreet2);
-    setAddressCity(profile.addressCity);
-    setAddressState(profile.addressState);
-    setAddressZip(profile.addressZip);
-    setLinkedin(profile.linkedin);
-    setGithub(profile.github);
-    setPersonalWebsite(profile.personalWebsite);
-  }, [open]);
+    if (profile) {
+      setFirstName(profile.firstName || '');
+      setLastName(profile.lastName || '');
+      setAddressStreet1(profile.addressStreet1 || '');
+      setAddressStreet2(profile.addressStreet2 || '');
+      setAddressCity(profile.addressCity || '');
+      setAddressState(profile.addressState || '');
+      setAddressZip(profile.addressZip || '');
+      setLinkedin(profile.linkedin || '');
+      setGithub(profile.github || '');
+      setPersonalWebsite(profile.personalWebsite || '');
+    }
+  }, [profile, open]);
 
   const [updateProfile] = useMutation(UPDATE_PROFILE, {
     refetchQueries: [{ query: GET_PROFILE, variables: { id } }],