From 5ffde16eb83526457afb222a07dc2c0997a9c0d6 Mon Sep 17 00:00:00 2001
From: januschung <januschung@gmail.com>
Date: Sat, 22 Jun 2024 22:13:23 -0700
Subject: [PATCH] refactor searchbar (#13)

---
 src/App.js                             |   2 +-
 src/App.test.js                        |   4 +-
 src/components/MobileMenu.jsx          |  59 +++++++
 src/components/PrimarySearchAppBar.jsx | 122 +++++++++++++
 src/components/ProfileDialog.jsx       |  25 +--
 src/components/SearchBar.jsx           | 235 ++-----------------------
 src/graphql/query.js                   |  17 +-
 7 files changed, 227 insertions(+), 237 deletions(-)
 create mode 100644 src/components/MobileMenu.jsx
 create mode 100644 src/components/PrimarySearchAppBar.jsx

diff --git a/src/App.js b/src/App.js
index 8169577..1699bf6 100644
--- 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
index 7cb294a..cebfcb0 100644
--- 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
new file mode 100644
index 0000000..7ee71bc
--- /dev/null
+++ 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
new file mode 100644
index 0000000..e6a042b
--- /dev/null
+++ 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
index fcf9c6f..075a6bd 100644
--- 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 } }],
diff --git a/src/components/SearchBar.jsx b/src/components/SearchBar.jsx
index 9c779f0..9d1b314 100644
--- a/src/components/SearchBar.jsx
+++ b/src/components/SearchBar.jsx
@@ -1,26 +1,7 @@
-import AccountCircle from '@mui/icons-material/AccountCircle';
-import AddCircleIcon from '@mui/icons-material/AddCircle';
-import EmojiEventsIcon from '@mui/icons-material/EmojiEvents';
-import MailIcon from '@mui/icons-material/Mail';
-import MoreIcon from '@mui/icons-material/MoreVert';
-import NotificationsIcon from '@mui/icons-material/Notifications';
-import SearchIcon from '@mui/icons-material/Search';
-import AppBar from '@mui/material/AppBar';
-import Badge from '@mui/material/Badge';
-import Box from '@mui/material/Box';
-import IconButton from '@mui/material/IconButton';
-import InputBase from '@mui/material/InputBase';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
+import React from 'react';
 import { alpha, styled } from '@mui/material/styles';
-import Toolbar from '@mui/material/Toolbar';
-import Typography from '@mui/material/Typography';
-import React, { useState } from 'react';
-import JobApplicationDialog from './JobApplicationDialog';
-import ProfileDialog from './ProfileDialog';
-import { useQuery } from '@apollo/client';
-import { GET_PROFILE } from '../graphql/query';
-
+import InputBase from '@mui/material/InputBase';
+import SearchIcon from '@mui/icons-material/Search';
 
 const Search = styled('div')(({ theme }) => ({
   position: 'relative',
@@ -52,7 +33,6 @@ const StyledInputBase = styled(InputBase)(({ theme }) => ({
   color: 'inherit',
   '& .MuiInputBase-input': {
     padding: theme.spacing(1, 1, 1, 0),
-    // vertical padding + font size from searchIcon
     paddingLeft: `calc(1em + ${theme.spacing(4)})`,
     transition: theme.transitions.create('width'),
     width: '100%',
@@ -62,203 +42,16 @@ const StyledInputBase = styled(InputBase)(({ theme }) => ({
   },
 }));
 
-export default function PrimarySearchAppBar() {
-  const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = React.useState(null);
-  const [jobApplicationOpen, setJobApplicationOpen] = useState(false);
-  const [jobApplication] = useState({status:'open'})
-  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 },
-      // fetchPolicy: 'network-only'
-  });
-
-  const handleProfileMenuOpen = (event) => {
-    setProfileOpen(true)
-    setProfile(data.profileById)
-  };
-
-  const handleProfileClose = () => setProfileOpen(false);
-
-  const handleMobileMenuClose = () => {
-    setMobileMoreAnchorEl(null);
-  };
-
-  const handleMenuClose = () => {
-    handleMobileMenuClose();
-  };
-
-  const handleMobileMenuOpen = (event) => {
-    setMobileMoreAnchorEl(event.currentTarget);
-  };
-
-  function handleJobApplicationOpen() {
-    setJobApplicationOpen(true);
-  }
-
-  const handleJobApplicationClose = () => setJobApplicationOpen(false);
-
-
-  const menuId = 'primary-search-account-menu';
-  const renderMenu = (
-    <Menu
-      anchorOrigin={{
-        vertical: 'top',
-        horizontal: 'right',
-      }}
-      id={menuId}
-      keepMounted
-      transformOrigin={{
-        vertical: 'top',
-        horizontal: 'right',
-      }}
-      onClose={handleMenuClose}
-    >
-    </Menu>
-  );
-
-  const mobileMenuId = 'primary-search-account-menu-mobile';
-  const renderMobileMenu = (
-    <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>
-  );
-
+export default function SearchBar() {
   return (
-    <Box sx={{ flexGrow: 1 }}>
-      <JobApplicationDialog jobApplication={jobApplication} handleClose={handleJobApplicationClose} open={jobApplicationOpen} setOpen={setJobApplicationOpen} isNew={true}/>
-      <ProfileDialog profile={profile} handleClose={handleProfileClose} open={profileOpen} 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>
-          <Search>
-            <SearchIconWrapper>
-              <SearchIcon />
-            </SearchIconWrapper>
-            <StyledInputBase
-              placeholder="Search…"
-              inputProps={{ 'aria-label': 'search' }}
-            />
-          </Search>
-          <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={menuId}
-              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={mobileMenuId}
-              aria-haspopup="true"
-              onClick={handleMobileMenuOpen}
-              color="inherit"
-            >
-              <MoreIcon />
-            </IconButton>
-          </Box>
-        </Toolbar>
-      </AppBar>
-      {renderMobileMenu}
-      {renderMenu}
-    </Box>
+    <Search>
+      <SearchIconWrapper>
+        <SearchIcon />
+      </SearchIconWrapper>
+      <StyledInputBase
+        placeholder="Search…"
+        inputProps={{ 'aria-label': 'search' }}
+      />
+    </Search>
   );
-}
\ No newline at end of file
+}
diff --git a/src/graphql/query.js b/src/graphql/query.js
index 65b81d2..90c6d22 100644
--- a/src/graphql/query.js
+++ b/src/graphql/query.js
@@ -49,4 +49,19 @@ export const GET_PROFILE = gql`
       personalWebsite
     }
   }
-`;
\ No newline at end of file
+`;
+
+const SEARCH_JOB_APPLICATIONS = gql`
+  query SearchJobApplications($companyName: String, $jobTitle: String) {
+    searchJobApplications(companyName: $companyName, jobTitle: $jobTitle) {
+      id
+      companyName
+      jobTitle
+      salaryRange
+      description
+      jobUrl
+      status
+      appliedDate
+    }
+  }
+`;