fix(apply-jobpost): incorporate feedback

jkarenzi · jkarenzi · commit e3e91c478648 · 2024-12-04T17:26:32.000+02:00
- disable buttons whn form validation fails - add word count to rich text editor - fix minor design issues [Fixes #293]
diff --git a/src/components/application/ApplicationFilter.tsx b/src/components/application/ApplicationFilter.tsx
@@ -31,7 +31,6 @@ const ApplicationFilter: React.FC<ApplicationFilterProps> = ({
                 <select value={filterStatus} onChange={(e) => setFilterStatus(e.target.value)}
                     className="border dark:border-slate-400 p-[0.5rem] text-sm rounded-md dark:bg-dark-bg dark:text-white " >
                     <option value="All">All Status</option>
-                    <option value="submitted">Submitted</option>
                     <option value="under-review">Under Review</option>
                     <option value="accepted">Accepted</option>
                     <option value="rejected">Rejected</option>
diff --git a/src/pages/Applications/ApplicantApplication.tsx b/src/pages/Applications/ApplicantApplication.tsx
@@ -104,7 +104,6 @@ export const ApplicantApplication = () => {
           <select className="sm:text-sm w-full sm:w-40 lg:w-32 h-10 rounded-bt-rd dark:bg-[#293647] dark:text-ltb" onChange={(e) => setStatus(e.target.value)}>
             <option value='All'>Sort by Status</option>
             <option value="All">All</option>
-            <option value="submitted">Submitted</option>
             <option value="under-review">Under Review</option>
             <option value="accepted">Accepted</option>
             <option value="rejected">Rejected</option>
diff --git a/src/pages/Applications/ViewSingleApplication.tsx b/src/pages/Applications/ViewSingleApplication.tsx
@@ -7,6 +7,7 @@ import WarningModal from '../../components/application/WarningModal'
 import { ApplicationDetailsSkeleton } from '../../skeletons/applicationDetailsSkeleton';
 import axiosClient from '../../redux/actions/axiosconfig'
 import { getStatusClass } from "../../components/application/ApplicationStatus";
+import { IoClose } from "react-icons/io5";
 
 
 interface Application {
@@ -25,6 +26,7 @@ interface Application {
     title:string
   },
   status:string,
+  comment:string,
   resume:string,
   essay:string,
   createdAt: string
@@ -36,6 +38,9 @@ const ApplicationDetails = () => {
   const [isLoading, setIsLoading] = useState(true);
   const [application, setApplication] = useState<Application | null>(null)
   const [status, setStatus] = useState("")
+  const [toggleModal, setToggleModal] = useState(false)
+  const [comment, setComment] = useState("")
+  const [error, setError] = useState("")
 
   const getJobApplication = async() => {
     const query = `query GetOneJobApplication($input: SingleJobApplicationInput!) {
@@ -55,6 +60,7 @@ const ApplicationDetails = () => {
           title
         }
         status
+        comment
         essay
         resume
         createdAt
@@ -94,6 +100,12 @@ const ApplicationDetails = () => {
     if(!status){
       return
     }
+
+    if(status === 'rejected' && !comment){
+      setError('Comment can not be empty')
+      return
+    }
+
     const toastId = toast.loading('Updating status...');
     try{
       const mutation = `mutation ChangeApplicationStatus($input: StatusInput!) {
@@ -113,6 +125,7 @@ const ApplicationDetails = () => {
             title
           }
           status
+          comment
           essay
           resume
           createdAt
@@ -126,7 +139,8 @@ const ApplicationDetails = () => {
           variables:{
             input:{
               applicationId:params.appId,
-              status: status
+              status: status,
+              comment: comment
             }
           }
         },
@@ -140,6 +154,8 @@ const ApplicationDetails = () => {
 
     toast.success('Status updated successfully')  
     setApplication(response.data.data.changeApplicationStatus)
+    setToggleModal(false)
+    setComment("")
     }catch(err){
       toast.dismiss(toastId);
       toast.error('Failed to update status')
@@ -154,6 +170,11 @@ const ApplicationDetails = () => {
   },[])
 
   useEffect(() => {
+    if(status === 'rejected'){
+      setToggleModal(true)
+      return
+    }
+
     if(status && status !== application?.status){
       (async() => {
         await updateStatus()
@@ -164,6 +185,20 @@ const ApplicationDetails = () => {
 
   return (
     <>
+      {toggleModal && <div className="fixed top-0 left-0 flex items-center justify-center w-full h-screen bg-black bg-opacity-50 z-50">
+        <div className="w-80 flex flex-col gap-4 rounded-md items-center bg-primary">
+          <div className="flex py-2 items-center justify-between w-[90%]">
+            <h2 className="text-white">Reject Applicant</h2>
+            <IoClose color="white" size={20} onClick={() => {setStatus("");setToggleModal(false)}}/>
+          </div>
+          <div className="flex gap-2 flex-col w-[90%]">
+            <label className="text-white text-sm">Comment</label>
+            <textarea className="w-full p-1 rounded-sm h-32 bg-transparent border border-white text-white" onChange={(e) => setComment(e.target.value)}></textarea>
+            <div className="text-sm text-red-500">{error}</div>
+          </div>
+          <button disabled={!comment} className={`rounded-md flex items-center justify-center bg-green ${comment ? 'opacity-100 cursor-pointer': 'opacity-70 cursor-not-allowed'} text-white px-4 py-1 mb-6`} onClick={updateStatus}>Submit</button>
+        </div>
+      </div>}
       <div className="flex flex-col min-w-full items-center dark:bg-dark-frame-bg min-h-screen">
         <div className="w-full max-w-6xl mt-10 p-6">          
         {isLoading ? (
@@ -181,18 +216,19 @@ const ApplicationDetails = () => {
                   <p className="text-gray-500 dark:text-gray-300"><span className="font-medium">Gender: </span> {application.userId?.gender}</p>
                   <p className="text-gray-500 dark:text-gray-300"><span className="font-medium">Date of Submission:</span> {application.createdAt}</p>
                   <p className="text-gray-500 dark:text-gray-300 font-medium"> Resume:{" "}<a href={application.resume} target="_blank" rel="noreferrer noopener" className="text-blue-500 font-normal hover:underline"> View Resume </a> </p>
-                  <div className="flex flex-col gap-4">
-                    <h2 className="text-lg text-white">Interest essay:</h2>
-                    <div className="text-white" dangerouslySetInnerHTML={{__html:application.essay}}></div>
-                  </div>
                   <div className="flex items-center gap-2 text-white">
-                    <span className="font-medium">Status:</span>
+                    <span className="font-medium text-gray-500 dark:text-gray-300">Status:</span>
                     <div className={`px-3 h-7 flex items-center justify-center rounded-full text-sm ${getStatusClass(application.status)}`}>{application.status}</div>
                   </div>
+                  {application.comment && <p className="text-gray-500 dark:text-gray-300"><span className="font-medium">Comment:</span> {application.comment}</p>}
                 </div>
                 <div className="space-y-4">
-                  <h3 className="uppercase text-gray-800 dark:text-white font-bold">Job Post</h3>
-                  <p className="text-gray-500 dark:text-gray-300"><span className="font-medium">Title:  </span> {application.jobId?.title}</p>
+                  <h3 className="uppercase text-gray-800 dark:text-white font-bold invisible">Candidate Information</h3>
+                  <p className="text-gray-500 dark:text-gray-300"><span className="font-medium">Job Title:  </span> {application.jobId?.title}</p>
+                  <div className="flex flex-col gap-4 text-gray-500 dark:text-gray-300">
+                    <h2 className="text-base font-medium">Interest essay:</h2>
+                    <div dangerouslySetInnerHTML={{__html:application.essay}}></div>
+                  </div>
                 </div>
               </div>
             </div>
@@ -204,11 +240,10 @@ const ApplicationDetails = () => {
         id=""
         value={status}
         onChange={(e) => setStatus(e.target.value)}
-        disabled={isLoading}
-        className="bg-[#10292C] flex items-center text-white justify-center dark:bg-white hover:bg-[#1f544cef] dark:text-zinc-700 font-bold py-2 px-4 rounded"
+        disabled={isLoading || application?.status === 'rejected'}
+        className={`bg-[#10292C] flex items-center text-white justify-center dark:bg-white ${application?.status === 'rejected' ? 'opacity-70 cursor-not-allowed': 'opacity-100 cursor-pointer'}  hover:bg-[#1f544cef] dark:text-zinc-700 font-bold py-2 px-4 rounded ml-8`}
       >
         <option defaultChecked value="">Update status</option>
-        <option value='submitted'>Submitted</option>
         <option value='under-review'>Under Review</option>
         <option value='accepted'>Accepted</option>
         <option value='rejected'>Rejected</option>
diff --git a/src/pages/ApplyJobPost.tsx b/src/pages/ApplyJobPost.tsx
@@ -119,11 +119,10 @@ const ApplyJobPost:React.FC = () => {
     const [resumeLoading, setResumeLoading] = useState(false)
     const [loading, setLoading] = useState(false)
     const {id} = useParams()
+    const [wordCount, setWordCount] = useState(0)
     const navigate = useNavigate()
 
     
-
-
     const handleSubmit = async(data) => {
         const mutation = `
             mutation CreateNewJobApplication($input: JobApplicationInput!) {
@@ -222,7 +221,9 @@ const ApplyJobPost:React.FC = () => {
             }
         },
         onUpdate: ({ editor }) => {
-          formik.setFieldValue('essay', editor.getHTML(), true)
+          const words = editor.getHTML().trim()  
+          setWordCount(words.split(' ').length)
+          formik.setFieldValue('essay', words, true)
         },
         onBlur: () => {
             formik.handleBlur('essay')
@@ -239,7 +240,7 @@ const ApplyJobPost:React.FC = () => {
                         <ToolBar editor={editor}/> 
                         <EditorContent editor={editor} />  
                     </div>
-                    {/* <textarea className='w-full h-40 rounded-md border border-white bg-transparent' {...formik.getFieldProps('essay')}></textarea> */}
+                    <div className='text-sm'><span className={`${wordCount > 200 || wordCount === 0 ? 'text-red-500': 'text-green'}`}>{wordCount}</span> / 200 words</div>
                     {formik.touched.essay && formik.errors.essay && <div className='text-sm text-red-500'>{formik.errors.essay}</div>}
                 </div>
                 <div className='flex flex-col gap-4'>
@@ -250,7 +251,7 @@ const ApplyJobPost:React.FC = () => {
                     </div>
                     {formik.touched.resume && formik.errors.resume && <div className='text-sm text-red-500'>{formik.errors.resume}</div>}
                 </div>
-                <button disabled={loading} className={`bg-green flex items-center justify-center self-center rounded-md w-28 h-10 mt-4 ${loading ? 'cursor-not-allowed':'cursor-pointer'}`}>{loading ? <Circles height={20} width={20} color='white'/> : 'Submit'}</button>  
+                <button disabled={loading} className={`${formik.isValid && formik.dirty ? 'bg-green cursor-pointer': 'bg-green opacity-70 cursor-not-allowed'}  flex items-center justify-center self-center rounded-md w-28 h-10 mt-4`}>{loading ? <Circles height={20} width={20} color='white'/> : 'Submit'}</button>  
             </form>
         </div>
     )
diff --git a/src/pages/JobPost/applicantJobFiltering.tsx b/src/pages/JobPost/applicantJobFiltering.tsx
@@ -18,6 +18,8 @@ import {
 } from "../../redux/actions/filterJobPost";
 import _ from "lodash"; // lodash for debounce
 import { debounce } from "lodash";
+import axiosClient from '../../redux/actions/axiosconfig'
+
 const ApplicantSeachJobPost = (props: any) => {
   const { theme } = useTheme();
 
@@ -57,6 +59,7 @@ const ApplicantSeachJobPost = (props: any) => {
   const [enteredWord, setEnteredWord] = useState("");
   const [filterAttribute, setFilterAttribute] = useState("");
   const [enteredsubmitWord, setenteredsubmitWord] = useState("");
+  const [jobStatus, setJobStatus] = useState<{[key:string]: boolean} | null>(null)
   const input = {
     page: page + 1,
     itemsPerPage: itemsPerPage,
@@ -133,6 +136,60 @@ const ApplicantSeachJobPost = (props: any) => {
 
   // console.log("JOB POST DATA =>>>>>: ", fetchJobPost);
 
+  const checkIfUserApplied = async(id:string) => {
+    const query = `
+      query CheckIfUserApplied($input: CheckIfUserAppliedInput!) {
+        checkIfUserApplied(input: $input) {
+          status
+        }
+      }
+    `;
+    
+
+    const variables = {
+      input: {
+        jobId: id
+      }  
+    };
+
+    try {
+        const response = await axiosClient.post(
+        '/',
+        {
+            query: query,
+            variables: variables,
+        },
+        );
+        
+        if(response.data.errors){
+            toast.error(response.data.errors[0].message)
+            return
+        }
+
+        return response.data.data.checkIfUserApplied.status
+    } catch (error) {
+      console.log(error)
+      return false
+    }
+  }
+
+  useEffect(() => {
+    (async() => {
+      for(const job of allfilteredjobPosts.data){
+        const res = await checkIfUserApplied(job.id)
+        setJobStatus(prevJobStatus => ({
+          ...prevJobStatus, 
+          [job.id]: res
+        }));
+      }
+    })()
+  },[allfilteredjobPosts])
+
+  useEffect(() => {
+    console.log('AAAAAAAAAAAAAAAAAAAAAAAAAA', jobStatus)
+  },[jobStatus])
+
+
   return (
     <>
       <ToastContainer />
@@ -267,11 +324,13 @@ const ApplicantSeachJobPost = (props: any) => {
                                     <td>
                                       <div className="flex flex-row gap-2 mt-2 justify-center">
                                         <Link
-                                          to={`/applicant/available-job/${item.id}/apply`}
+                                          to={`/applicant/available-job/${item.id}/apply?applied=${jobStatus && jobStatus[item.id]}`}
                                           replace
                                         >
                                           <button className="flex bg-primary dark:bg-[#56C870] rounded-md py-2 px-4 text-white font-medium cursor-pointer">
-                                            Apply
+                                            {
+                                              jobStatus && jobStatus[item.id] ? 'View Details' : 'Apply'
+                                            }
                                           </button>
                                         </Link>
                                       </div>
@@ -296,6 +355,7 @@ const ApplicantSeachJobPost = (props: any) => {
                             Job POST
                           </label>
                           {allfilteredjobPosts?.data &&
+                            jobStatus &&
                             allfilteredjobPosts?.data.length > 0 ? (
                             allfilteredjobPosts?.data?.map((item: any) => (
                               <div
diff --git a/src/pages/SubmitApplication.tsx b/src/pages/SubmitApplication.tsx
@@ -6,7 +6,7 @@ import { connect, useDispatch } from "react-redux";
 import { showErrorToast, showSuccessToast } from "../utils/toast";
 import axios from "axios";
 import jwtDecode from "jwt-decode";
-import { Link } from "react-router-dom";
+import { Link, useSearchParams } from "react-router-dom";
 import { toast } from "react-toastify";
 import axiosClient from '../redux/actions/axiosconfig'
 
@@ -22,51 +22,12 @@ const SubmitApplication: React.FC = (props: any) => {
   const { fetchSingleJobPostStates } = props;
   const dispatch = useDispatch();
   const { id } = useParams();
+  const [searchParams, setSearchParams] = useSearchParams()
+  const applied = searchParams.get('applied') === 'true'
   const loggedUser:data | null = localStorage.getItem('access_token') ? jwtDecode(localStorage.getItem('access_token') as string) : null;
   const [loading, setLoading] = useState(false);
   const [hasApplied, setHasApplied] = useState(false)
   const navigate = useNavigate()
-
-  const checkIfUserApplied = async() => {
-    const query = `
-      query CheckIfUserApplied($input: CheckIfUserAppliedInput!) {
-        checkIfUserApplied(input: $input) {
-          status
-        }
-      }
-    `;
-
-    const variables = {
-      input: {
-        jobId: id
-      }  
-    };
-
-    try {
-        const response = await axiosClient.post(
-        '/',
-        {
-            query: query,
-            variables: variables,
-        },
-        );
-        
-        if(response.data.errors){
-            toast.error(response.data.errors[0].message)
-            return
-        }
-
-        setHasApplied(response.data.data.checkIfUserApplied.status)
-    } catch (error) {
-      console.log(error)
-    }
-  }
-
-  useEffect(() => {
-    (async() => {
-      await checkIfUserApplied()
-    })()
-  },[])
   
   useEffect(() => {
     dispatch(fetchSingleJobPost(id));
@@ -134,17 +95,17 @@ console.log(fetchSingleJobPostStates)
               </div>
 
               {/* FORM */}
-              <div className="flex justify-center w-full mb-8">
+              {!applied && <div className="flex justify-center w-full mb-8">
 
                 <button
                   onClick={handleClick}
-                  disabled={hasApplied}
+                  disabled={applied}
                   className={`bg-primary dark:bg-[#56C870] rounded-md py-2 px-4 
                     text-white font-medium transition-opacity duration-200 ${hasApplied ? 'cursor-not-allowed':'cursor-pointer'}`}
                 >
                   Apply here
                 </button>
-              </div>
+              </div>}
             </div>
           )}
         </div>
