feat: finishing up careers page (#496)

* feat: finishing up careers * chore: cleaning console logs * chore: cleaning comments
wasedatime · Nov 16, 2023 · 0dd0f68 · 0dd0f68
1 parent f387f1c
commit 0dd0f68
Show file tree

Hide file tree

Showing 14 changed files with 161 additions and 87 deletions.
diff --git a/apps/career/src/App.tsx b/apps/career/src/App.tsx
@@ -9,7 +9,8 @@ import Header from "@app/components/common/Header"
 import type UserProfile from "./types/userProfile"
 import type CareerComponentProps from "./types/careerComponentProps"
 import API from "@aws-amplify/api"
-import { getIdToken } from "wasedatime-ui"
+import { getIdToken, getUserAttr } from "wasedatime-ui"
+import JobProps from "./types/job"
 
 const App = () => {
   return (
@@ -26,6 +27,7 @@ const PageRoutes = ({
   profile,
   setProfile,
   isRegistered,
+  onJobApplied,
 }: CareerComponentProps) => {
   return (
     <Routes>
@@ -45,8 +47,8 @@ const PageRoutes = ({
           <Jobdetail
             jobData={jobData}
             profile={profile}
-            setProfile={setProfile}
             isRegistered={isRegistered}
+            onJobApplied={onJobApplied}
           />
         }
         path="/:jobId"
@@ -59,7 +61,7 @@ const InnerApp = () => {
   const { t, i18n } = useTranslation()
   const { theme, setTheme } = React.useContext(ThemeContext)
   const [isRegistered, setIsRegistered] = useState(false)
-  const [jobData, setJobData] = useState([])
+  const [jobData, setJobData] = useState<JobProps[]>([])
 
   const [profile, setProfile] = useState<UserProfile>({
     name: "",
@@ -70,6 +72,7 @@ const InnerApp = () => {
     languages: [
       { language: "", level: "" },
       { language: "", level: "" },
+      { language: "", level: "" },
     ],
     interests: [],
   })
@@ -89,6 +92,9 @@ const InnerApp = () => {
       const data = res.data.data
 
       if (data) {
+        while (data.languages.length < 3) {
+          data.languages.push({ language: "", level: "" })
+        }
         setProfile(data)
         setIsRegistered(true)
       } else {
@@ -101,24 +107,38 @@ const InnerApp = () => {
 
   const fetchCareer = async () => {
     const idToken = await getIdToken()
-
-    console.log("Triggered!")
+    const info = await getUserAttr()
+    const uid = info?.id
 
     try {
-      const res = await API.get("wasedatime-dev", "/career?type=internship", {
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: idToken,
-        },
-        response: true,
-      })
+      const res = await API.get(
+        "wasedatime-dev",
+        `/career?type=internship&uid=${uid}`,
+        {
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: idToken,
+          },
+          response: true,
+        }
+      )
       const data = res.data.data.Items
       setJobData(data)
     } catch (error) {
       console.error(error)
     }
   }
 
+  const handleJobApplied = (jobId: string) => {
+    const updatedJobs = jobData.map((job) => {
+      if (job.job_id === jobId) {
+        return { ...job, applied: true }
+      }
+      return job
+    })
+    setJobData(updatedJobs)
+  }
+
   useEffect(() => {
     fetchUserProfile()
     fetchCareer()
@@ -148,6 +168,7 @@ const InnerApp = () => {
             profile={profile}
             setProfile={setProfile}
             isRegistered={isRegistered}
+            onJobApplied={handleJobApplied}
           />
         </div>
       </div>

diff --git a/apps/career/src/components/jobdetail/JobContent.tsx b/apps/career/src/components/jobdetail/JobContent.tsx
@@ -3,26 +3,23 @@ import JobProps from "@app/types/job"
 import AgreeModal from "@app/components/common/AgreeModal"
 import UserProfile from "@app/types/userProfile"
 
-const JobContent = ({
-  job,
-  profile,
-}: {
+interface JobContentProps {
   job: JobProps
   profile: UserProfile
-}) => {
-  const [isAgreeModalOpen, setIsAgreeModalOpen] = useState(false)
-
-  const handleApplyClick = () => {
-    setIsAgreeModalOpen(true)
-  }
-
-  const handleModalAgree = () => {
-    setIsAgreeModalOpen(false)
-  }
+  onApplyClick: () => void
+  isAgreeModalOpen: boolean
+  onModalAgree: () => void
+  onModalDisagree: () => void
+}
 
-  const handleModalDisagree = () => {
-    setIsAgreeModalOpen(false)
-  }
+const JobContent: React.FC<JobContentProps> = ({
+  job,
+  profile,
+  onApplyClick,
+  isAgreeModalOpen,
+  onModalAgree,
+  onModalDisagree,
+}) => {
   const jobContentSections = [
     {
       title: "Job Title",
@@ -54,6 +51,10 @@ const JobContent = ({
     },
     // You can add more sections here as needed
   ]
+
+  const applyButtonClass = job.applied
+    ? "w-full rounded-lg border-transparent bg-light-main p-2 text-center text-xl capitalize text-white cursor-not-allowed opacity-50"
+    : "w-full cursor-pointer rounded-lg border-transparent bg-light-main p-2 text-center text-xl capitalize text-white hover:-translate-y-1.5 hover:bg-light-lighter dark:bg-dark-main dark:hover:bg-dark-lighter"
   return (
     <>
       <div className="standard-style mt-14 rounded-md border">
@@ -84,18 +85,18 @@ const JobContent = ({
         <div className="grid grid-cols-12">
           <div className="col-span-4 col-start-9 mt-8 space-y-2 p-6">
             <div
-              className="w-full cursor-pointer rounded-lg border-transparent bg-light-main p-2 text-center text-xl capitalize text-white hover:-translate-y-1.5 hover:bg-light-lighter dark:bg-dark-main dark:hover:bg-dark-lighter"
-              onClick={handleApplyClick}
+              className={applyButtonClass}
+              onClick={!job.applied ? onApplyClick : undefined}
             >
-              apply now
+              {!job.applied ? "apply now" : "applied"}
             </div>
           </div>
         </div>
       </div>
       {isAgreeModalOpen && (
         <AgreeModal
-          onAgree={handleModalAgree}
-          onDisagree={handleModalDisagree}
+          onAgree={onModalAgree}
+          onDisagree={onModalDisagree}
           job={job}
           profile={profile}
         />

diff --git a/apps/career/src/components/jobdetail/JobOverview.tsx b/apps/career/src/components/jobdetail/JobOverview.tsx
@@ -14,6 +14,15 @@ interface Details {
   icon: JSX.Element
 }
 
+interface JobOverviewProps {
+  job: JobProps
+  profile: UserProfile
+  onApplyClick: () => void
+  isAgreeModalOpen: boolean
+  onModalAgree: () => void
+  onModalDisagree: () => void
+}
+
 const jobDetailStructure: Details[] = [
   {
     key: "title",
@@ -57,26 +66,17 @@ const jobDetailStructure: Details[] = [
   },
 ]
 
-const JobOverview = ({
+const JobOverview: React.FC<JobOverviewProps> = ({
   job,
   profile,
-}: {
-  job: JobProps
-  profile: UserProfile
+  onApplyClick,
+  isAgreeModalOpen,
+  onModalAgree,
+  onModalDisagree,
 }) => {
-  const [isAgreeModalOpen, setIsAgreeModalOpen] = useState(false)
-
-  const handleApplyClick = () => {
-    setIsAgreeModalOpen(true)
-  }
-
-  const handleModalAgree = () => {
-    setIsAgreeModalOpen(false)
-  }
-
-  const handleModalDisagree = () => {
-    setIsAgreeModalOpen(false)
-  }
+  const applyButtonClass = job.applied
+    ? "w-full rounded-lg border-transparent bg-light-main p-2 text-center text-xl capitalize text-white cursor-not-allowed opacity-50"
+    : "w-full cursor-pointer rounded-lg border-transparent bg-light-main p-2 text-center text-xl capitalize text-white hover:-translate-y-1.5 hover:bg-light-lighter dark:bg-dark-main dark:hover:bg-dark-lighter"
 
   return (
     <>
@@ -107,18 +107,18 @@ const JobOverview = ({
           </ul>
           <div className="mt-8 space-y-2">
             <div
-              className="w-full cursor-pointer rounded-lg border-transparent bg-light-main p-2 text-center text-xl capitalize text-white hover:-translate-y-1.5 hover:bg-light-lighter dark:bg-dark-main dark:hover:bg-dark-lighter"
-              onClick={handleApplyClick}
+              className={applyButtonClass}
+              onClick={!job.applied ? onApplyClick : undefined}
             >
-              apply now
+              {!job.applied ? "apply now" : "applied"}
             </div>
           </div>
         </div>
       </div>
       {isAgreeModalOpen && (
         <AgreeModal
-          onAgree={handleModalAgree}
-          onDisagree={handleModalDisagree}
+          onAgree={onModalAgree}
+          onDisagree={onModalDisagree}
           job={job}
           profile={profile}
         />

diff --git a/apps/career/src/components/jobdetail/Jobdetail.tsx b/apps/career/src/components/jobdetail/Jobdetail.tsx
@@ -13,8 +13,11 @@ const Jobdetail: React.FC<CareerComponentProps> = ({
   profile,
   jobData,
   isRegistered,
+  onJobApplied,
 }) => {
   const [isSignInModalOpen, setSignInModalOpen] = useState(false)
+  const [isAgreeModalOpen, setIsAgreeModalOpen] = useState(false)
+
   const { t } = useTranslation()
 
   let { jobId } = useParams()
@@ -34,8 +37,20 @@ const Jobdetail: React.FC<CareerComponentProps> = ({
     return <div>Job not found</div>
   }
 
-  console.log("Job data state : ", job)
-  console.log("Profile data state : ", profile)
+  const handleApplyClick = () => {
+    setIsAgreeModalOpen(true)
+  }
+
+  const handleModalAgree = () => {
+    setIsAgreeModalOpen(false)
+    if (job && onJobApplied) {
+      onJobApplied(job.job_id)
+    }
+  }
+
+  const handleModalDisagree = () => {
+    setIsAgreeModalOpen(false)
+  }
 
   return (
     <>
@@ -47,10 +62,24 @@ const Jobdetail: React.FC<CareerComponentProps> = ({
         {isRegistered ? (
           <>
             <div className="col-span-12 lg:col-span-3">
-              <JobOverview job={job} profile={profile} />
+              <JobOverview
+                job={job}
+                profile={profile}
+                onApplyClick={handleApplyClick}
+                isAgreeModalOpen={isAgreeModalOpen}
+                onModalAgree={handleModalAgree}
+                onModalDisagree={handleModalDisagree}
+              />
             </div>
             <div className="col-span-12 lg:col-span-6">
-              <JobContent job={job} profile={profile} />
+              <JobContent
+                job={job}
+                profile={profile}
+                onApplyClick={handleApplyClick}
+                isAgreeModalOpen={isAgreeModalOpen}
+                onModalAgree={handleModalAgree}
+                onModalDisagree={handleModalDisagree}
+              />
             </div>
             <div className="col-span-12 lg:col-span-3">
               <CompanyOverview job={job} />

diff --git a/apps/career/src/components/joblist/JobCard.tsx b/apps/career/src/components/joblist/JobCard.tsx
@@ -2,6 +2,7 @@ import React from "react"
 import JobCardFooter from "./JobCardFooter"
 import JobProps from "@app/types/job"
 import { timeFormatter } from "@app/utils/timeFormatter"
+import StarIcon from "@mui/icons-material/Star"
 
 interface JobCardProps extends JobProps {
   isRegistered?: boolean
@@ -17,12 +18,18 @@ const JobCard: React.FC<JobCardProps> = ({
   created_at,
   company,
   type,
+  applied,
   isRegistered = false,
 }) => {
   const formattedTime = timeFormatter(created_at)
 
   return (
-    <div className="job-card-standard standard-style h-full">
+    <div className="job-card-standard standard-style">
+      {applied && (
+        <div className="absolute -left-20 -top-[5px] w-48 -rotate-45 bg-light-main p-[6px] text-center text-white">
+          <StarIcon />
+        </div>
+      )}
       <div className="p-4">
         <div className="grid h-auto w-full grid-cols-12 items-center gap-x-11 sm:h-36 sm:gap-24">
           {/* Logo Section */}

diff --git a/apps/career/src/components/joblist/Joblist.tsx b/apps/career/src/components/joblist/Joblist.tsx
@@ -53,6 +53,7 @@ const Joblist: React.FC<CareerComponentProps> = ({
                   location={job.location}
                   created_at={job.created_at}
                   type={job.type}
+                  applied={job.applied}
                   isRegistered={isRegistered}
                 />
               ))}

diff --git a/apps/career/src/components/joblist/PostRegisterProfile.tsx b/apps/career/src/components/joblist/PostRegisterProfile.tsx
@@ -61,12 +61,15 @@ const PostRegisterProfile: React.FC<ProfileComponentProps> = ({
       label: "Languages",
       content: (
         <ul className="ml-4 list-disc pl-4">
-          {profile.languages.map((lang, index) => (
-            <li
-              className=""
-              key={index}
-            >{`${lang.language} - ${lang.level}`}</li>
-          ))}
+          {profile.languages.map(
+            (lang, index) =>
+              lang.language && (
+                <li
+                  className=""
+                  key={index}
+                >{`${lang.language} - ${lang.level}`}</li>
+              )
+          )}
         </ul>
       ),
       icon: (