Merge branch 'master' of https://github.com/harypham/react-for-nest

TienPhuc02 · Jun 14, 2023 · 3ffd2b5 · 3ffd2b5
2 parents 06b2c4d + 6521e0e
commit 3ffd2b5
Show file tree

Hide file tree

Showing 5 changed files with 126 additions and 10 deletions.
diff --git a/.env.production b/.env.production
@@ -1,3 +1,3 @@
 NODE_ENV=production
 PORT=3000
-VITE_BACKEND_URL=
+VITE_BACKEND_URL=http://localhost:8000
diff --git a/src/components/client/card/job.card.tsx b/src/components/client/card/job.card.tsx
@@ -1,5 +1,5 @@
 import { callFetchJob } from '@/config/api';
-import { LOCATION_LIST, convertSlug } from '@/config/utils';
+import { LOCATION_LIST, convertSlug, getLocationName } from '@/config/utils';
 import { IJob } from '@/types/backend';
 import { EnvironmentOutlined, ThunderboltOutlined } from '@ant-design/icons';
 import { Card, Col, Empty, Pagination, Row, Spin } from 'antd';
@@ -50,11 +50,7 @@ const JobCard = (props: IProps) => {
         setIsLoading(false)
     }
 
-    const getLocationName = (value: string) => {
-        const locationFilter = LOCATION_LIST.filter(item => item.value === value);
-        if (locationFilter.length) return locationFilter[0].label;
-        return 'unknown'
-    }
+
 
     const handleOnchangePage = (pagination: { current: number, pageSize: number }) => {
         if (pagination && pagination.current !== current) {

diff --git a/src/config/utils.ts b/src/config/utils.ts
@@ -60,4 +60,10 @@ export const convertSlug = (str: string) => {
         .replace(/-+/g, '-'); // collapse dashes
 
     return str;
+}
+
+export const getLocationName = (value: string) => {
+    const locationFilter = LOCATION_LIST.filter(item => item.value === value);
+    if (locationFilter.length) return locationFilter[0].label;
+    return 'unknown'
 }
diff --git a/src/pages/job/detail.tsx b/src/pages/job/detail.tsx
@@ -4,7 +4,13 @@ import { IJob } from "@/types/backend";
 import { callFetchJobById } from "@/config/api";
 import styles from 'styles/client.module.scss';
 import parse from 'html-react-parser';
-import { Col, Row, Skeleton } from "antd";
+import { Col, Divider, Row, Skeleton, Tag } from "antd";
+import { DollarOutlined, EnvironmentOutlined, HistoryOutlined } from "@ant-design/icons";
+import { getLocationName } from "@/config/utils";
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+dayjs.extend(relativeTime)
+
 
 const ClientJobDetailPage = (props: any) => {
     const [jobDetail, setJobDetail] = useState<IJob | null>(null);
@@ -29,18 +35,56 @@ const ClientJobDetailPage = (props: any) => {
     }, [id]);
 
     return (
-        <div className={styles["container"]}>
+        <div className={`${styles["container"]} ${styles["detail-job-section"]}`}>
             {isLoading ?
                 <Skeleton />
                 :
                 <Row gutter={[20, 20]}>
                     {jobDetail && jobDetail._id &&
                         <>
                             <Col span={24} md={16}>
+                                <div className={styles["header"]}>
+                                    {jobDetail.name}
+                                </div>
+                                <div>
+                                    <button className={styles["btn-apply"]}>Apply Now</button>
+                                </div>
+                                <Divider />
+                                <div className={styles["skills"]}>
+                                    {jobDetail?.skills?.map((item, index) => {
+                                        return (
+                                            <Tag key={`${index}-key`} color="gold" >
+                                                {item}
+                                            </Tag>
+                                        )
+                                    })}
+                                </div>
+                                <div className={styles["salary"]}>
+                                    <DollarOutlined />
+                                    <span>&nbsp;{(jobDetail.salary + "")?.replace(/\B(?=(\d{3})+(?!\d))/g, ',')} đ</span>
+                                </div>
+                                <div className={styles["location"]}>
+                                    <EnvironmentOutlined style={{ color: '#58aaab' }} />&nbsp;{getLocationName(jobDetail.location)}
+                                </div>
+                                <div>
+                                    <HistoryOutlined /> {dayjs(jobDetail.updatedAt).fromNow()}
+                                </div>
+                                <Divider />
                                 {parse(jobDetail.description)}
                             </Col>
+
                             <Col span={24} md={8}>
-                                afadfadf
+                                <div className={styles["company"]}>
+                                    <div>
+                                        <img
+                                            alt="example"
+                                            src={`${import.meta.env.VITE_BACKEND_URL}/images/company/${jobDetail.company?.logo}`}
+                                        />
+                                    </div>
+                                    <div>
+                                        {jobDetail.company?.name}
+                                    </div>
+                                </div>
                             </Col>
                         </>
                     }

diff --git a/src/styles/client.module.scss b/src/styles/client.module.scss
@@ -234,4 +234,74 @@
         margin-top: 20px;
         margin-bottom: 20px;
     }
+}
+
+.detail-job-section {
+    .header {
+        margin: 20px 0;
+        color: #353535;
+        font-size: 27px;
+    }
+
+    .btn-apply {
+        width: 100%;
+        cursor: pointer;
+        text-align: center;
+        color: #fff;
+        text-decoration: none;
+        -webkit-font-smoothing: antialiased;
+        font-size: 20px;
+        padding: 10px 15px;
+        border: 0;
+        border-radius: 5px;
+        background-color: #ea1e30;
+        -webkit-font-smoothing: antialiased;
+        outline: 0;
+
+        &:hover {
+            background-color: #d82727;
+        }
+    }
+
+    .salary {
+        padding: 15px 0;
+    }
+
+    .location {
+        padding-bottom: 15px;
+    }
+
+    h2 {
+        font-size: 23px;
+        color: #353535;
+        font-weight: 400;
+        margin: 25px 0 0;
+    }
+
+    ul {
+        padding-left: 2rem;
+    }
+
+    li {
+        line-height: 2em;
+    }
+
+    p {
+        color: #3a3a3a;
+        font-size: 16px;
+        line-height: 1.7em;
+        width: 100%;
+        line-height: 2em;
+    }
+
+    .company {
+        margin: 20px 0;
+        color: #353535;
+        font-size: 27px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        width: 100%;
+        align-items: center;
+    }
 }