feat: job apply functionality is set

apps/career/src/App.tsx

@@ -112,7 +112,6 @@ const InnerApp = () => {
       })
       const data = res.data.data.Items
       setJobData(data)
-      localStorage.setItem("jobs", JSON.stringify(data))
     } catch (error) {
       console.error(error)
     }

apps/career/src/components/jobdetail/CompanyOverview.tsx

@@ -41,7 +41,7 @@ const CompanyOverview = ({ job }: { job: JobProps }) => {
               {info.isLink ? (
                 <a
                   href={
-                    /^https?:\/\//i.test(info.content)
+                    /^https?:\/\//i.test(info.content || "")
                       ? info.content
                       : `http://${info.content}`
                   }

apps/career/src/components/jobdetail/JobContent.tsx

@@ -70,7 +70,14 @@ const JobContent = ({ job }: { job: JobProps }) => {
         </div>
         <div className="grid grid-cols-12">
           <div className="col-span-4 col-start-9 mt-8 space-y-2 p-6">
-            <div className="btn w-full border-transparent bg-blue-300 p-2 text-xl capitalize text-blue-900 hover:-translate-y-1.5">
+            <div
+              className="btn w-full cursor-pointer border-transparent bg-blue-300 p-2 text-xl capitalize text-blue-900 hover:-translate-y-1.5"
+              onClick={() => {
+                if (job && job.apply) {
+                  window.open(job.apply, "_blank")
+                }
+              }}
+            >
               apply now
             </div>
           </div>

apps/career/src/components/jobdetail/JobOverview.tsx

@@ -1,13 +1,18 @@
 import React from "react"
-import { useParams } from "react-router-dom"
-import jobData from "@app/constants/dummy.json"
 import BadgeIcon from "@mui/icons-material/Badge"
 import LocationOnIcon from "@mui/icons-material/LocationOn"
 import HistoryIcon from "@mui/icons-material/History"
 import PaidIcon from "@mui/icons-material/Paid"
 import JobProps from "@app/types/job"
+import { timeFormatter } from "@app/utils/timeFormatter"
 
-const jobDetailStructure = [
+interface Details {
+  key: keyof JobProps
+  label: string
+  icon: JSX.Element
+}
+
+const jobDetailStructure: Details[] = [
   {
     key: "title",
     label: "Job Title",
@@ -60,7 +65,11 @@ const JobOverview = ({ job }: { job: JobProps }) => {
           <h1 className="m-2 text-2xl font-bold">Job Overview</h1>
           <ul>
             {jobDetailStructure.map((detail) => {
-              const value = job[detail.key]
+              let value = job[detail.key]
+
+              if (detail.key === "created_at") {
+                value = timeFormatter(value)
+              }
               return (
                 <li key={detail.key}>
                   <div className="mt-6 flex items-center">
@@ -77,7 +86,14 @@ const JobOverview = ({ job }: { job: JobProps }) => {
             })}
           </ul>
           <div className="mt-8 space-y-2">
-            <div className="btn w-full border-transparent bg-blue-300 p-2  text-xl capitalize text-blue-900 hover:-translate-y-1.5">
+            <div
+              className="btn w-full cursor-pointer border-transparent bg-blue-300 p-2 text-xl capitalize text-blue-900 hover:-translate-y-1.5"
+              onClick={() => {
+                if (job && job.apply) {
+                  window.open(job.apply, "_blank")
+                }
+              }}
+            >
               apply now
             </div>
           </div>

apps/career/src/components/jobdetail/Jobdetail.tsx

@@ -1,51 +1,74 @@
-import React from "react"
+import React, { useState } from "react"
 import { useParams } from "react-router-dom"
-import jobData from "@app/constants/dummy.json"
 import CompanyOverview from "./CompanyOverview"
 import JobOverview from "./JobOverview"
 import JobContent from "./JobContent"
 import Breadcrumbs from "../common/Breadcrumbs"
 import CareerComponentProps from "@app/types/careerComponentProps"
+import type JobProps from "@app/types/job"
+import { SignInModal } from "wasedatime-ui"
+import { useTranslation } from "react-i18next"
+
+const Jobdetail: React.FC<CareerComponentProps> = ({
+  jobData,
+  isRegistered,
+}) => {
+  const [isSignInModalOpen, setSignInModalOpen] = useState(false)
+  const { t } = useTranslation()
 
-const Jobdetail: React.FC<CareerComponentProps> = ({ jobData }) => {
   let { jobId } = useParams()
 
   let job
   if (jobData && jobData.length > 0) {
-    // Find the job that matches the jobID from the state
     job = jobData.find((j) => j.job_id === jobId)
   } else {
-    // Try to get the data from localStorage
-    const storedJobData = localStorage.getItem("jobData")
+    const storedJobData = localStorage.getItem("jobs")
+    console.log(storedJobData)
     if (storedJobData) {
-      const parsedJobData = JSON.parse(storedJobData)
+      const parsedJobData = JSON.parse(storedJobData) as JobProps[]
       job = parsedJobData.find((j) => j.job_id === jobId)
     }
   }
 
   if (!job) {
-    // Handle the case where the job is not found
     return <div>Job not found</div>
   }
 
   console.log(jobData)
 
   return (
-    <div className="grid grid-cols-12 gap-y-10 lg:gap-10 lg:gap-y-0">
-      <div className="col-span-12">
-        <h1 className="pt-7 text-center text-8xl font-bold">Careers</h1>
-        <Breadcrumbs job={job} />
-      </div>
-      <div className="col-span-12 lg:col-span-3">
-        <JobOverview job={job} />
-      </div>
-      <div className="col-span-12 lg:col-span-6">
-        <JobContent job={job} />
-      </div>
-      <div className="col-span-12 lg:col-span-3">
-        <CompanyOverview job={job} />
+    <>
+      <div className="grid grid-cols-12 gap-y-10 lg:gap-10 lg:gap-y-0">
+        <div className="col-span-12">
+          <h1 className="pt-7 text-center text-8xl font-bold">Careers</h1>
+          <Breadcrumbs job={job} />
+        </div>
+        {isRegistered ? (
+          <>
+            <div className="col-span-12 lg:col-span-3">
+              <JobOverview job={job} />
+            </div>
+            <div className="col-span-12 lg:col-span-6">
+              <JobContent job={job} />
+            </div>
+            <div className="col-span-12 lg:col-span-3">
+              <CompanyOverview job={job} />
+            </div>
+          </>
+        ) : (
+          <div className="col-span-12 flex h-[calc(100vh-200px)] items-center justify-center text-center">
+            <p className="text-3xl font-bold">
+              Please sign in to view the job details.
+            </p>
+          </div>
+        )}
       </div>
-    </div>
+      <SignInModal
+        isModalOpen={isSignInModalOpen}
+        closeModal={() => setSignInModalOpen(false)}
+        t={t}
+      />
+    </>
   )
 }
 

apps/career/src/components/joblist/JobCard.tsx

@@ -1,13 +1,10 @@
-import React, { useState } from "react"
-import WorkIcon from "@mui/icons-material/Work"
-import { Link } from "react-router-dom"
+import React from "react"
 import JobCardFooter from "./JobCardFooter"
 import JobProps from "@app/types/job"
 import { timeFormatter } from "@app/utils/timeFormatter"
 
 interface JobCardProps extends JobProps {
-  isLoggedIn: boolean
-  isRegistered: boolean
+  isRegistered?: boolean
 }
 
 // Props needed, company logo, title, company, salary, location, datePosted, job Type
@@ -19,8 +16,8 @@ const JobCard: React.FC<JobCardProps> = ({
   location,
   created_at,
   company,
-  isRegistered,
-  // Include additional props as necessary
+  type,
+  isRegistered = false,
 }) => {
   const formattedTime = timeFormatter(created_at)
 
@@ -73,6 +70,13 @@ const JobCard: React.FC<JobCardProps> = ({
               <h2 className="text-2xl font-bold">{formattedTime}</h2>
             </div>
           </div>
+          <div className="col-span-12 lg:col-span-2">
+            <div className="flex flex-wrap gap-1.5">
+              <span className=" rounded bg-green-500/20 px-2 py-0.5 font-medium capitalize text-green-500">
+                {type}
+              </span>
+            </div>
+          </div>
           {/* Additional sections can be added here */}
         </div>
       </div>

apps/career/src/components/joblist/JobCardFooter.tsx

@@ -1,5 +1,4 @@
 import React from "react"
-import KeyboardDoubleArrowDownIcon from "@mui/icons-material/KeyboardDoubleArrowDown"
 import KeyboardDoubleArrowRightIcon from "@mui/icons-material/KeyboardDoubleArrowRight"
 import { Link } from "react-router-dom"
 

apps/career/src/components/joblist/Joblist.tsx

@@ -1,11 +1,10 @@
 import React, { useState, useEffect } from "react"
 import JobCard from "@app/components/joblist/JobCard"
 import PostRegisterProfile from "./PostRegisterProfile"
-import { getUserAttr, getIdToken, SignInModal } from "wasedatime-ui"
+import { getIdToken, SignInModal } from "wasedatime-ui"
 import { useTranslation } from "react-i18next"
 import PreRegisterProfile from "./PreRegisterProfile"
 import type CareerComponentProps from "@app/types/careerComponentProps"
-import API from "@aws-amplify/api"
 
 type Props = {}
 
@@ -50,10 +49,10 @@ const Joblist: React.FC<CareerComponentProps> = ({
                   company_logo={job.company_logo}
                   company={job.company}
                   title={job.title}
-                  job_description={job.description}
+                  job_description={job.job_description}
                   location={job.location}
                   created_at={job.created_at}
-                  isLoggedIn={isLoggedIn}
+                  type={job.type}
                   isRegistered={isRegistered}
                 />
               ))}

apps/career/src/components/joblist/PostRegisterProfile.tsx

@@ -6,11 +6,10 @@ import GradeIcon from "@mui/icons-material/Grade"
 import LanguageIcon from "@mui/icons-material/Language"
 import StarBorderIcon from "@mui/icons-material/StarBorder"
 import SchoolIcon from "@mui/icons-material/School"
-import type UserProfile from "@app/types/userProfile"
 import ProfileModal from "./ProfileModal"
-import CareerComponentProps from "@app/types/careerComponentProps"
+import ProfileComponentProps from "@app/types/profileComponentProps"
 
-const PostRegisterProfile: React.FC<CareerComponentProps> = ({
+const PostRegisterProfile: React.FC<ProfileComponentProps> = ({
   profile,
   setProfile,
   isRegistered,

apps/career/src/components/joblist/PreRegisterProfile.tsx

@@ -2,10 +2,9 @@ import React, { useState } from "react"
 import AccountCircleIcon from "@mui/icons-material/AccountCircle"
 import ProfileModal from "./ProfileModal"
 import CareerComponentProps from "@app/types/careerComponentProps"
+import ProfileComponentProps from "@app/types/profileComponentProps"
 
-type Props = {}
-
-const PreRegisterProfile: React.FC<CareerComponentProps> = ({
+const PreRegisterProfile: React.FC<ProfileComponentProps> = ({
   profile,
   setProfile,
 }) => {

apps/career/src/components/joblist/ProfileModal.tsx

@@ -1,8 +1,6 @@
 import React, { useEffect, useState } from "react"
 import SchoolFilterForm from "../common/SchoolFilter"
 import getSchoolIconPath from "@app/utils/get-school-icon-path"
-import { profile } from "console"
-import CareerComponentProps from "@app/types/careerComponentProps"
 import Dropdown from "../common/Dropdown"
 import {
   JaLevelOptions,
@@ -16,8 +14,9 @@ import InterestGrid from "../common/IntersestGrid"
 import UserProfile from "@app/types/userProfile"
 import API from "@aws-amplify/api"
 import { getIdToken } from "wasedatime-ui"
+import ProfileComponentProps from "@app/types/profileComponentProps"
 
-interface ProfileModalProps extends CareerComponentProps {
+interface ProfileModalProps extends ProfileComponentProps {
   closeModal: () => void
 }
 
@@ -28,7 +27,6 @@ const ProfileModal: React.FC<ProfileModalProps> = ({
   isRegistered,
 }) => {
   const [expandSchool, setExpandSchool] = useState(false)
-  const [localProfile, setLocalProfile] = useState(profile)
   const [userToken, setUserToken] = useState("")
 
   const getUserIdToken = async () => {