wasedatime · JasonNotJson · Nov 13, 2023 · Nov 7, 2023 · Nov 7, 2023 · Nov 9, 2023
diff --git a/apps/career/src/App.tsx b/apps/career/src/App.tsx
@@ -1,15 +1,15 @@
-import React, { useEffect, useContext } from "react"
+import React, { useEffect, useState } from "react"
 import { HashRouter, Routes, Route } from "react-router-dom"
 import { ThemeContext } from "@app/utils/theme-context"
 import Joblist from "@app/components/joblist/Joblist"
 import Jobdetail from "@app/components/jobdetail/Jobdetail"
 import { useTranslation } from "react-i18next"
 import HeaderWithModal from "@app/components/common/HeaderWithModal"
 import Header from "@app/components/common/Header"
-import { jobData as job } from "./Data/JobData"
-import JobPage from "@app/components/JobPage"
-
-type Props = {}
+import type UserProfile from "./types/userProfile"
+import type CareerComponentProps from "./types/careerComponentProps"
+import API from "@aws-amplify/api"
+import { getIdToken } from "wasedatime-ui"
 
 const App = () => {
   return (
@@ -21,18 +21,107 @@ const App = () => {
   )
 }
 
-const PageRoutes = () => {
+const PageRoutes = ({
+  jobData,
+  profile,
+  setProfile,
+  isRegistered,
+}: CareerComponentProps) => {
   return (
     <Routes>
-      <Route element={<JobPage />} path="/" />
-      <Route element={<Jobdetail />} path="/:jobId" />
+      <Route
+        element={
+          <Joblist
+            jobData={jobData}
+            profile={profile}
+            setProfile={setProfile}
+            isRegistered={isRegistered}
+          />
+        }
+        path="/"
+      />
+      <Route
+        element={
+          <Jobdetail
+            jobData={jobData}
+            profile={profile}
+            setProfile={setProfile}
+            isRegistered={isRegistered}
+          />
+        }
+        path="/:jobId"
+  
10000
    />
     </Routes>
   )
 }
 
-const InnerApp = (props: Props) => {
+const InnerApp = () => {
   const { t, i18n } = useTranslation()
   const { theme, setTheme } = React.useContext(ThemeContext)
+  const [isRegistered, setIsRegistered] = useState(false)
+  const [jobData, setJobData] = useState([])
+
+  const [profile, setProfile] = useState<UserProfile>({
+    name: "",
+    school: "",
+    email: "",
+    year: "",
+    class_of: "",
+    languages: [
+      { language: "", level: "" },
+      { language: "", level: "" },
+    ],
+    interests: [],
+  })
+
+  const fetchUserProfile = async () => {
+    const idToken = await getIdToken()
+
+    try {
+      const res = await API.get("wasedatime-dev", "/profile", {
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: idToken,
+        },
+        response: true,
+      })
+
+      const data = res.data.data
+
+      if (data) {
+        setProfile(data)
+        setIsRegistered(true)
+      } else {
+        setIsRegistered(false)
+      }
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  const fetchCareer = async () => {
+    const idToken = await getIdToken()
+
+    try {
+      const res = await API.get("wasedatime-dev", "/career?type=internship", {
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: idToken,
+        },
+        response: true,
+      })
+      const data = res.data.data.Items
+      setJobData(data)
+      localStorage.setItem("jobs", JSON.stringify(data))
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  useEffect(() => {
+    fetchUserProfile()
+    fetchCareer()
+  }, [])
 
   return (
     <>
@@ -49,10 +138,17 @@ const InnerApp = (props: Props) => {
           changeLang={(lng) => i18n.changeLanguage(lng)}
         />
       </div>
-      <div className="container mx-auto h-[calc(100vh-127px)] overflow-y-auto px-2">
-        {/* md:w-3/5 */}
+      <div className="h-[calc(100vh-127px)] overflow-y-auto lg:h-full">
+        <div className="container mx-auto px-2">
+          {/* md:w-3/5 */}
 
-        <PageRoutes />
+          <PageRoutes
+            jobData={jobData}
+            profile={profile}
+            setProfile={setProfile}
+            isRegistered={isRegistered}
+          />
+        </div>
       </div>
     </>
   )

diff --git a/apps/career/src/Data/JobData.tsx b/apps/career/src/Data/JobData.tsx
diff --git a/apps/career/src/assets/syllabus-icons/art.png b/apps/career/src/assets/syllabus-icons/art.png
diff --git a/apps/career/src/assets/syllabus-icons/art_jp.png b/apps/career/src/assets/syllabus-icons/art_jp.png
diff --git a/apps/career/src/assets/syllabus-icons/ase.png b/apps/career/src/assets/syllabus-icons/ase.png
diff --git a/apps/career/src/assets/syllabus-icons/ase_jp.png b/apps/career/src/assets/syllabus-icons/ase_jp.png
diff --git a/apps/career/src/assets/syllabus-icons/cie.png b/apps/career/src/assets/syllabus-icons/cie.png
diff --git a/apps/career/src/assets/syllabus-icons/cie_jp.png b/apps/career/src/assets/syllabus-icons/cie_jp.png
diff --git a/apps/career/src/assets/syllabus-icons/cjl.png b/apps/career/src/assets/syllabus-icons/cjl.png
diff --git a/apps/career/src/assets/syllabus-icons/cjl_jp.png b/apps/career/src/assets/syllabus-icons/cjl_jp.png
diff --git a/apps/career/src/assets/syllabus-icons/cms.png b/apps/career/src/assets/syllabus-icons/cms.png
diff --git a/apps/career/src/assets/syllabus-icons/cms_jp.png b/apps/career/src/assets/syllabus-icons/cms_jp.png
diff --git a/apps/career/src/assets/syllabus-icons/cse.png b/apps/career/src/assets/syllabus-icons/cse.png
diff --git a/apps/career/src/assets/syllabus-icons/cse_jp.png b/apps/career/src/assets/syllabus-icons/cse_jp.png
diff --git a/apps/career/src/assets/syllabus-icons/edu.png b/apps/career/src/assets/syllabus-icons/edu.png
diff --git a/apps/career/src/assets/syllabus-icons/edu_jp.png b/apps/career/src/assets/syllabus-icons/edu_jp.png
diff --git a/apps/career/src/assets/syllabus-icons/ehum.png b/apps/career/src/assets/syllabus-icons/ehum.png
diff --git a/apps/career/src/assets/syllabus-icons/ehum_jp.png b/apps/career/src/assets/syllabus-icons/ehum_jp.png
diff --git a/apps/career/src/assets/syllabus-icons/fse.png b/apps/career/src/assets/syllabus-icons/fse.png
diff --git a/apps/career/src/assets/syllabus-icons/fse_jp.png b/apps/career/src/assets/syllabus-icons/fse_jp.png
diff --git a/apps/career/src/assets/syllabus-icons/g_ase.png b/apps/career/src/assets/syllabus-icons/g_ase.png
diff --git a/apps/career/src/assets/syllabus-icons/g_ase_jp.png b/apps/career/src/assets/syllabus-icons/g_ase_jp.png
diff --git a/apps/career/src/assets/syllabus-icons/g_cse.png b/apps/career/src/assets/syllabus-icons/g_cse.png
diff --git a/apps/career/src/assets/syllabus-icons/g_cse_jp.png b/apps/career/src/assets/syllabus-icons/g_cse_jp.png
diff --git a/apps/career/src/assets/syllabus-icons/g_e.png b/apps/career/src/assets/syllabus-icons/g_e.png
diff --git a/apps/career/src/assets/syllabus-icons/g_e_jp.png b/apps/career/src/assets/syllabus-icons/g_e_jp.png
diff --git a/apps/career/src/assets/syllabus-icons/g_edu.png b/apps/career/src/assets/syllabus-icons/g_edu.png
diff --git a/apps/career/src/assets/syllabus-icons/g_edu_jp.png b/apps/career/src/assets/syllabus-icons/g_edu_jp.png
diff --git a/apps/career/src/assets/syllabus-icons/g_fse.png b/apps/career/src/assets/syllabus-icons/g_fse.png
diff --git a/apps/career/src/assets/syllabus-icons/g_fse_jp.png b/apps/career/src/assets/syllabus-icons/g_fse_jp.png
diff --git a/apps/career/src/assets/syllabus-icons/hss.png b/apps/career/src/assets/syllabus-icons/hss.png
diff --git a/apps/career/src/assets/syllabus-icons/hss_jp.png b/apps/career/src/assets/syllabus-icons/hss_jp.png
diff --git a/apps/career/src/assets/syllabus-icons/hum.png b/apps/career/src/assets/syllabus-icons/hum.png
diff --git a/apps/career/src/assets/syllabus-icons/hum_jp.png b/apps/career/src/assets/syllabus-icons/hum_jp.png
diff --git a/apps/career/src/assets/syllabus-icons/law.png b/apps/career/src/assets/syllabus-icons/law.png
diff --git a/apps/career/src/assets/syllabus-icons/law_jp.png b/apps/career/src/assets/syllabus-icons/law_jp.png
diff --git a/apps/career/src/assets/syllabus-icons/pse.png b/apps/career/src/assets/syllabus-icons/pse.png
diff --git a/apps/career/src/assets/syllabus-icons/pse_jp.png b/apps/career/src/assets/syllabus-icons/pse_jp.png
diff --git a/apps/career/src/assets/syllabus-icons/sils.png b/apps/career/src/assets/syllabus-icons/sils.png
diff --git a/apps/career/src/assets/syllabus-icons/sils_jp.png b/apps/career/src/assets/syllabus-icons/sils_jp.png
diff --git a/apps/career/src/assets/syllabus-icons/soc.png b/apps/career/src/assets/syllabus-icons/soc.png
diff --git a/apps/career/src/assets/syllabus-icons/soc_jp.png b/apps/career/src/assets/syllabus-icons/soc_jp.png
diff --git a/apps/career/src/assets/syllabus-icons/sps.png b/apps/career/src/assets/syllabus-icons/sps.png
diff --git a/apps/career/src/assets/syllabus-icons/sps_jp.png b/apps/career/src/assets/syllabus-icons/sps_jp.png
diff --git a/apps/career/src/assets/syllabus-icons/sss.png b/apps/career/src/assets/syllabus-icons/sss.png
diff --git a/apps/career/src/assets/syllabus-icons/sss_jp.png b/apps/career/src/assets/syllabus-icons/sss_jp.png
diff --git a/apps/career/src/components/DescriptionPage.tsx b/apps/career/src/components/DescriptionPage.tsx
diff --git a/apps/career/src/components/JobPage.tsx b/apps/career/src/components/JobPage.tsx
diff --git a/apps/career/src/components/common/Breadcrumbs.tsx b/apps/career/src/components/common/Breadcrumbs.tsx
@@ -1,14 +1,8 @@
+import JobProps from "@app/types/job"
 import React from "react"
 import { useLocation, Link } from "react-router-dom"
 
-type props = {
-  job: {
-    jobID: string
-    title: string
-  }
-}
-
-const Breadcrumbs = ({ job }: props) => {
+const Breadcrumbs = ({ job }: { job: JobProps }) => {
   const location = useLocation()
   const pathnames = location.pathname.split("/").filter((x) => x)
 

diff --git a/apps/career/src/components/common/Dropdown.tsx b/apps/career/src/components/common/Dropdown.tsx
@@ -0,0 +1,52 @@
+import React from "react"
+
+type DropdownProps = {
+  name: string
+  value: string | string[]
+  handleChange: (event: React.ChangeEvent<HTMLSelectElement>) => void
+  options: Array<{ label: string; value: string | number }>
+  placeholder: string
+  multiple?: boolean
+  styles?: string
+}
+
+const Dropdown: React.FC<DropdownProps> = ({
+  name,
+  value,
+  handleChange,
+  options,
+  placeholder,
+  styles = "w-full",
+  multiple = false,
+}) => {
+  const handleMultipleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const selectedOptions = Array.from(
+      e.target.selectedOptions,
+      (option) => option.value
+    )
+    handleChange({ target: { name: e.target.name, value: selectedOptions } })
+  }
+  const formatValueForDisplay = (selectedValues: any | "") => {
+    return Array.isArray(selectedValues)
+      ? selectedValues.join(", ")
+      : selectedValues
+  }
+  return (
+    <select
+      name={name}
+      value={multiple ? value : formatValueForDisplay(value)}
+       ? handleMultipleChange : handleChange}
+      multiple={multiple}
+      className={`${styles} standard-style rounded border p-2`}
+    >
+      {!multiple && <option value="">{placeholder}</option>}
+      {options.map((option, index) => (
+        <option key={index} value={option.value}>
+          {option.label}
+        </option>
+      ))}
+    </select>
+  )
+}
+
+export default Dropdown
diff --git a/apps/career/src/components/common/IntersestGrid.tsx b/apps/career/src/components/common/IntersestGrid.tsx
@@ -0,0 +1,27 @@
+import React from "react"
+
+const InterestGrid = ({ options, selectedInterests, onInterestChange }) => {
+  const handleInterestClick = (interest) => {
+    onInterestChange(interest)
+  }
+
+  return (
+    <div className="standard-style relative grid grid-cols-6 items-center justify-items-center gap-4 border-b p-4">
+      {options.map((option) => (
+        <button
+          key={option.value}
+          className={`mb-2 inline-block w-24 overflow-hidden rounded-full px-2 py-1 font-sans ${
+            selectedInterests.includes(option.value)
+              ? "bg-light-card3 dark:bg-dark-card2" // Selected style
+              : "bg-light-card2 dark:bg-dark-card1" // Unselected style
+          }`}
+           => handleInterestClick(option.value)}
+        >
+          <div>{option.label}</div>
+        </button>
+      ))}
+    </div>
+  )
+}
+
+export default InterestGrid