From cc8b18bbc9b4dc058cd9314a7fc88c6c6ee59b55 Mon Sep 17 00:00:00 2001 From: Tieptk Date: Tue, 25 Mar 2025 14:18:53 +0700 Subject: [PATCH] update 25/03 --- src/app/job/[slug]/page.tsx | 344 +++++++++++++++++++++--------------- src/app/job/page.tsx | 97 +++++++--- 2 files changed, 273 insertions(+), 168 deletions(-) diff --git a/src/app/job/[slug]/page.tsx b/src/app/job/[slug]/page.tsx index 56127f3..bbc805f 100644 --- a/src/app/job/[slug]/page.tsx +++ b/src/app/job/[slug]/page.tsx @@ -1,5 +1,5 @@ "use client"; -import { useState, useEffect } from "react"; +import { Suspense, useState, useEffect } from "react"; import { useParams } from "next/navigation"; import { JobDetailDataType } from "@/types/job"; import { fetchJobDetail } from "@/api/apiService"; @@ -8,6 +8,7 @@ const JobDetails = () => { const [JobDetail, setJobDetail] = useState(null); const [activeTab, setActiveTab] = useState("#info"); const { slug } = useParams(); + const [loadingUi, setLoadingUI] = useState(true); const showTab = (tab: string) => { setActiveTab(tab); @@ -18,6 +19,7 @@ const JobDetails = () => { const getJobDetail = async () => { const data = await fetchJobDetail(slug); setJobDetail(data[0]); + setLoadingUI(false); }; getJobDetail(); } @@ -25,164 +27,212 @@ const JobDetails = () => { return (
- {JobDetail ? ( -
-

{JobDetail.title}

-
-
-
-

Địa điểm

- {JobDetail.location} + + {loadingUi ? ( +
+

+
+
+
+

+ +
+
+

+ +
+
+

+ +
-
-

Hình thức làm việc

- Toàn thời gian cố định -
-
-

Số lượng tuyển

- {JobDetail.applicant_count} +
+
+
+
+
+
+
+
    +
  • +
  • +
  • +
  • +
  • +
+
-
-
-
showTab("#info")} - data-id="#info" - className={`item-tab ${ - activeTab === "#info" ? "active" : "" - }`} - > - Chi tiết -
-
showTab("#formjob")} - data-id="#formjob" - className={`item-tab ${ - activeTab === "#formjob" ? "active" : "" - }`} - > - Nộp hồ sơ -
-
-
- -
- -
-
-
- -

Tải lên sơ yếu lý lịch

+
+ ) : ( +
+ {JobDetail ? ( +
+

{JobDetail.title}

+
+
+
+

Địa điểm

+ {JobDetail.location} +
+
+

Hình thức làm việc

+ Toàn thời gian cố định +
+
+

Số lượng tuyển

+ {JobDetail.applicant_count}
-

- Tải sơ yếu lý lịch của bạn lên đây để tự động điền các - thông tin chính. -

-
- -
- +
+
showTab("#info")} + data-id="#info" + className={`item-tab ${ + activeTab === "#info" ? "active" : "" + }`} > - Upload file + Chi tiết +
+
showTab("#formjob")} + data-id="#formjob" + className={`item-tab ${ + activeTab === "#formjob" ? "active" : "" + }`} + > + Nộp hồ sơ +
+
+
+ +
+ +
+
+
+ +

Tải lên sơ yếu lý lịch

+
+

+ Tải sơ yếu lý lịch của bạn lên đây để tự động điền + các thông tin chính. +

+
+ +
+
+
+
+
+
+ + +
+
+
+ + +
+
+
+ + +
+
+
+ + + Vui lòng chia sẻ bất kỳ điều gì khác bạn muốn chúng + tôi biết, chẳng hạn như động lực của bạn khi ứng tuyển + hoặc các bối cảnh bổ sung liên quan đến hồ sơ của bạn. + + +
+ + Nộp đơn
-
-
-
-
-
- - -
-
-
- - -
-
-
- - -
-
-
- - - Vui lòng chia sẻ bất kỳ điều gì khác bạn muốn chúng tôi - biết, chẳng hạn như động lực của bạn khi ứng tuyển hoặc các - bối cảnh bổ sung liên quan đến hồ sơ của bạn. - - -
- - Nộp đơn -
-
+ ) : ( +
+
+ Không có công việc nào. +
+
+ )}
-
- ) : ( -
-
- Không có công việc nào. -
-
- )} + )} +
); }; diff --git a/src/app/job/page.tsx b/src/app/job/page.tsx index b40f129..0b10b33 100644 --- a/src/app/job/page.tsx +++ b/src/app/job/page.tsx @@ -1,16 +1,18 @@ "use client"; import Link from "next/link"; -import { useState, useEffect } from "react"; +import { Suspense, useState, useEffect } from "react"; import { ListJobDataType } from "@/types/job"; import { fetchListJobs } from "@/api/apiService"; const HomeJob = () => { const [ListJob, setListJob] = useState(null); + const [loadingUi, setLoadingUI] = useState(true); useEffect(() => { const getListJob = async () => { const data = await fetchListJobs(); setListJob(data.list); + setLoadingUI(false); }; getListJob(); @@ -20,30 +22,83 @@ const HomeJob = () => {

Tuyển dụng

- {ListJob && Array.isArray(ListJob) && ListJob.length > 0 ? ( -
- {ListJob.map((item) => ( -
-
- - {item.title} - -
{item.end_date}
+ + {loadingUi ? ( +
+
+
+
+
-
{item.location}
- - Ứng tuyển ngay - +
+
- ))} -
- ) : ( -
- Không có công việc nào. -
- )} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ) : ( +
+ {ListJob && Array.isArray(ListJob) && ListJob.length > 0 ? ( +
+ {ListJob.map((item) => ( +
+
+ + {item.title} + +
{item.end_date}
+
+
+
{item.location}
+ + Ứng tuyển ngay{" "} + + +
+
+ ))} +
+ ) : ( +
+ Không có công việc nào. +
+ )} +
+ )} +
);