Single profile (#10)

README.md

@@ -9,7 +9,7 @@ To keep track of job applications:
 
 1. Use Google Spreadsheet (I am using it before this project). It is ugly, hard to maintain and easy to mess up the layout.
 1. Use online tool like huntr.co. But it can only track 40 jobs and I don't want to spend a dime for the premium service.
-1. Use pen and paper. It works but I can't copy and paste information such as link job link and utilize it later.
+1. Use pen and paper. It works but I can't copy and paste information such as the job url link and utilize it later.
 
 None of the about is fun or totally fit my use case.
 
@@ -19,7 +19,7 @@ That's the reason for me to build something for myself, and potentially you, to
 
 With Job Winner, you can keep track of how many job applications you want, for free, without paying for a fee and have your personal data being sold.
 
-Another feature of Job Winner is the profile page. With that one can store useful information a job application usually asks for (eg. LinkedIn url) in a single section. Besides that, the profile page provides a handy feature to automatically copy the field that you click on to your clipboard.
+Another feature of Job Winner is the `Profile Page`. With that one can store useful information a job application usually asks for (eg. LinkedIn url) in a single section. Besides that, the `Profile Page` provides a handy feature to automatically copy the field that you click on to your clipboard.
 
 ## Features
 

src/components/JobApplicationDialog.jsx

@@ -31,7 +31,7 @@ export default function JobApplicationDialog({jobApplication, handleClose, open,
     const [description, setDescription] = useState('');
     const [jobUrl, setJobUrl] = useState('');
     const [status, setStatus] = useState('open');
-    const [appliedDate, setAppliedDate] = useState(dayjs(new Date()).format('YYYY-MM-DD'));
+    const [appliedDate, setAppliedDate] = useState(dayjs(new Date()).format('MM/DD/YYYY'));
     const [dialogTitle, setDialogTitle] = useState('Edit Job Application')
     const [newJobApplication] = useMutation(ADD_JOB_APPLICATION, {
         refetchQueries: [
@@ -41,7 +41,7 @@ export default function JobApplicationDialog({jobApplication, handleClose, open,
 
     useEffect(()=> {
         if(isNew){
-            setStatus('open')
+            // setStatus('open')
             setAppliedDate(dayjs(new Date()).format('YYYY-MM-DD'))
             setDialogTitle('Add Job Application')
         }
@@ -154,6 +154,7 @@ export default function JobApplicationDialog({jobApplication, handleClose, open,
 
                         <LocalizationProvider dateAdapter={AdapterDayjs}>
                             <DesktopDatePicker
+                            id="appliedDate"
                             label="Applied Date"
                             inputFormat="MM/DD/YYYY"
                             variant="standard"

src/components/ProfileDialog.jsx

@@ -5,7 +5,7 @@ import CancelIcon from '@mui/icons-material/Cancel';
 import SaveIcon from '@mui/icons-material/Save';
 import Button from '@mui/material/Button';
 import { UPDATE_PROFILE } from '../graphql/mutation';
-import { GET_PROFILES } from '../graphql/query';
+import { GET_PROFILE } from '../graphql/query';
 
 import Dialog from '@mui/material/Dialog';
 import DialogActions from '@mui/material/DialogActions';
@@ -29,9 +29,13 @@ export default function ProfileDialog({profile, handleClose, open, setOpen}){
     const [github, setGithub] = useState('');
     const [personalWebsite, setPersonalWebsite] = useState('');
 
-    const { error, data, loading } = useQuery(GET_PROFILES, {
+
+    const id = 1;
+
+    const { error, data, loading } = useQuery(GET_PROFILE, {
+        variables: { id },
         fetchPolicy: 'network-only'
-    });
+      });
 
     useEffect(()=> {
         setFirstName(profile.firstName)
@@ -48,7 +52,7 @@ export default function ProfileDialog({profile, handleClose, open, setOpen}){
 
     const [updateProfile] = useMutation(UPDATE_PROFILE, {
         refetchQueries: [
-            {query: GET_PROFILES}
+            {query: GET_PROFILE, variables: { id }}
         ]
     });
 

src/components/SearchBar.jsx

@@ -19,7 +19,7 @@ import React, { useState } from 'react';
 import JobApplicationDialog from './JobApplicationDialog';
 import ProfileDialog from './ProfileDialog';
 import { useQuery } from '@apollo/client';
-import { GET_PROFILES } from '../graphql/query';
+import { GET_PROFILE } from '../graphql/query';
 
 
 const Search = styled('div')(({ theme }) => ({
@@ -70,13 +70,16 @@ export default function PrimarySearchAppBar() {
   const [profile, setProfile] = useState('')
   const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);
 
-  const { error, data, loading } = useQuery(GET_PROFILES, {
-    fetchPolicy: 'network-only'
+  const id = 1;
+
+  const { error, data, loading } = useQuery(GET_PROFILE, {
+      variables: { id },
+      // fetchPolicy: 'network-only'
   });
 
   const handleProfileMenuOpen = (event) => {
     setProfileOpen(true)
-    setProfile(data.allProfile[0])
+    setProfile(data.profileById)
   };
 
   const handleProfileClose = () => setProfileOpen(false);

src/graphql/query.js

@@ -2,17 +2,51 @@
 import { gql } from '@apollo/client';
 
 export const GET_JOB_APPLICATIONS = gql`
-  query {
-      allJobApplication {
-          id, companyName, description, jobTitle, jobUrl, appliedDate, salaryRange, status
-      }
+  query GetJobApplications {
+    allJobApplication {
+      id
+      companyName
+      description
+      jobTitle
+      jobUrl
+      appliedDate
+      salaryRange
+      status
+    }
   }
-`
+`;
 
 export const GET_PROFILES = gql`
-  query {
-      allProfile {
-          id, firstName, lastName, addressStreet1, addressStreet2, addressCity, addressState, addressZip, linkedin, github, personalWebsite
-      }
+  query GetProfiles {
+    allProfile {
+      id
+      firstName
+      lastName
+      addressStreet1
+      addressStreet2
+      addressCity
+      addressState
+      addressZip
+      linkedin
+      github
+      personalWebsite
+    }
   }
 `
+export const GET_PROFILE = gql`
+  query GetProfile($id: ID!) {
+    profileById(id: $id) {
+      id
+      firstName
+      lastName
+      addressStreet1
+      addressStreet2
+      addressCity
+      addressState
+      addressZip
+      linkedin
+      github
+      personalWebsite
+    }
+  }
+`;