-
Notifications
You must be signed in to change notification settings - Fork 20
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
job api integrated #442
base: master
Are you sure you want to change the base?
job api integrated #442
Changes from 2 commits
d7f58f5
5037773
030924a
1fc4392
bea4350
04e93a2
94b01fd
2546ff4
cb80f3c
ce19d74
8ca181c
a60cadc
52a3f8b
281b8e0
c87347c
f41a9ae
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
.apply-btn { | ||
font-family: 'lato'; | ||
color: white !important; | ||
font-size: 14px; | ||
height: 48px; | ||
} | ||
|
||
@media only screen and (max-width: 550px) { | ||
.apply-btn { | ||
height: 40px; | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
import React from 'react' | ||
import { Box, Button } from '@mui/material' | ||
import SendOutlinedIcon from '@mui/icons-material/SendOutlined' | ||
import Link from 'next/link' | ||
|
||
interface ApplyNowBtnInterface { | ||
text?: string | ||
width?: boolean | ||
} | ||
|
||
const ApplyNowBtn: React.FC<ApplyNowBtnInterface> = ({ text, width }) => { | ||
return ( | ||
<Box> | ||
<Button | ||
fullWidth={width} | ||
variant="contained" | ||
endIcon={<SendOutlinedIcon />} | ||
className="apply-btn" | ||
> | ||
<Link | ||
className="btn-text-color" | ||
href="https://stg-erp.prixite.com/job_application/new?job_title=test-job" | ||
> | ||
{text} | ||
</Link> | ||
</Button> | ||
</Box> | ||
) | ||
} | ||
|
||
export default ApplyNowBtn |
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Constants should be coming from any constants utils file. |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,211 @@ | ||
import React from 'react' | ||
import { Container, Box, Typography } from '@mui/material' | ||
import Head from 'next/head' | ||
import ApplyNowBtn from '../../components/Smart/ApplyNowBtn/ApplyNowBtn' | ||
import { jobsData } from '../../data/data' | ||
import { JobProps } from '../../types/interfaces' | ||
import Image from 'next/image' | ||
|
||
export const getServerSideProps = async (context: JobProps) => { | ||
const name = context.params?.jobDetail | ||
const url = `https://stg-erp.prixite.com/api/resource/Job%20Opening?fields=["*"]&filters=[["Job%20Opening","name","=","${name}"]]` | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. base url should be added from env variables. |
||
const res = await fetch(url) | ||
const result = await res.json() | ||
|
||
return { | ||
props: { | ||
result, | ||
}, | ||
} | ||
} | ||
|
||
const JobDetail = ({ result }) => { | ||
const { jobResponsibility, jobPageHeader, aboutRole } = jobsData | ||
return ( | ||
<> | ||
<Head> | ||
<title>{'title'}</title> | ||
<meta name="prixite" content="Prixte" /> | ||
<link rel="icon" href="/favicon.ico" /> | ||
</Head> | ||
<Container maxWidth="xl" className="page-header"> | ||
<Box className="header"> | ||
<Box className="heading"> | ||
<Typography className="heading-text"> | ||
{result?.data[0].job_title} 🚀 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. You should add validation ? after data[0] as well |
||
</Typography> | ||
<Typography className="heading-text"> | ||
{jobPageHeader.slice(0, 11)} | ||
<span style={{ color: 'var(--primary-green)' }}> | ||
{jobPageHeader.slice(11, 18)} | ||
</span> | ||
{jobPageHeader.slice(18, 50)} | ||
</Typography> | ||
</Box> | ||
<Box> | ||
<ApplyNowBtn text="Apply Now" /> | ||
</Box> | ||
</Box> | ||
<Box className="page-content"> | ||
<Container disableGutters maxWidth="xl"> | ||
<div className="post-body"> | ||
<Container className="circle-container" maxWidth="xl"> | ||
<Box className="circle-image"> | ||
<Image | ||
width={80} | ||
height={80} | ||
src={'/images/jobs/circle.png'} | ||
alt="service-image" | ||
/> | ||
</Box> | ||
<Box className="circle-card"> | ||
<Typography className=" job-title"> | ||
{aboutRole.slice(0, 0)} | ||
<span style={{ color: 'var(--primary-green)' }}> | ||
{aboutRole.slice(0, 9)} | ||
</span> | ||
{aboutRole.slice(9, 15)} | ||
</Typography> | ||
</Box> | ||
</Container> | ||
<div | ||
className="heading-text" | ||
dangerouslySetInnerHTML={{ | ||
__html: result?.data[0].description, | ||
}} | ||
/> | ||
|
||
<Box className="job-container"> | ||
<Box className="job-role-container"> | ||
<Box className="job-image-container"> | ||
<Image | ||
width={48} | ||
height={48} | ||
src={'/images/jobs/currency.png'} | ||
alt="service-image" | ||
/> | ||
</Box> | ||
<Box className="job-info"> | ||
<Typography className="content-text">Currency</Typography> | ||
<Typography className="job-text"> | ||
{result?.data[0].currency} | ||
</Typography> | ||
</Box> | ||
</Box> | ||
|
||
<Box className="job-role-container"> | ||
<Box className="job-image-container"> | ||
<Image | ||
width={48} | ||
height={48} | ||
src={'/images/jobs/status.png'} | ||
alt="service-image" | ||
/> | ||
</Box> | ||
<Box className="job-info"> | ||
<Typography className="content-text">Status</Typography> | ||
<Typography className="job-text"> | ||
{result?.data[0].status} | ||
</Typography> | ||
</Box> | ||
</Box> | ||
|
||
<Box className="job-role-container"> | ||
<Box className="job-image-container"> | ||
<Image | ||
width={48} | ||
height={48} | ||
src={'/images/jobs/company.png'} | ||
alt="service-image" | ||
/> | ||
</Box> | ||
<Box className="job-info"> | ||
<Typography className="content-text">Company</Typography> | ||
<Typography className="job-text"> | ||
{result?.data[0].company} | ||
</Typography> | ||
</Box> | ||
</Box> | ||
</Box> | ||
|
||
<Box className="job-container"> | ||
<Box className="job-role-container"> | ||
<Box className="job-image-container"> | ||
<Image | ||
width={48} | ||
height={48} | ||
src={'/images/jobs/designation.png'} | ||
alt="service-image" | ||
/> | ||
</Box> | ||
<Box className="job-info"> | ||
<Typography className="content-text"> | ||
Designation | ||
</Typography> | ||
<Typography className="job-text"> | ||
{result?.data[0].designation} | ||
</Typography> | ||
</Box> | ||
</Box> | ||
|
||
<Box className="job-role-container"> | ||
<Box className="job-image-container"> | ||
<Image | ||
width={48} | ||
height={48} | ||
src={'/images/jobs/vacancy.png'} | ||
alt="service-image" | ||
/> | ||
</Box> | ||
<Box className="job-info"> | ||
<Typography className="content-text">Vacancy</Typography> | ||
<Typography className="job-text"> | ||
{result?.data[0].vacancies} | ||
</Typography> | ||
</Box> | ||
</Box> | ||
|
||
<Box className="job-role-container"> | ||
<Box className="job-image-container"> | ||
<Image | ||
width={48} | ||
height={48} | ||
src={'/images/jobs/salary range.png'} | ||
alt="service-image" | ||
/> | ||
</Box> | ||
<Box className="job-info"> | ||
<Typography className="content-text"> | ||
Salary Range | ||
</Typography> | ||
<Typography className="job-text"> | ||
Range {result?.data[0].lower_range}- | ||
{result?.data[0].upper_range} | ||
</Typography> | ||
</Box> | ||
</Box> | ||
</Box> | ||
|
||
<Box className="job-role-info"> | ||
<Typography className="job-title"> | ||
{jobPageHeader.slice(0, 0)} | ||
<span style={{ color: 'var(--primary-green)' }}> | ||
{jobResponsibility.slice(0, 4)} | ||
</span> | ||
{jobResponsibility.slice(4, 20)} | ||
</Typography> | ||
<div | ||
dangerouslySetInnerHTML={{ | ||
__html: result?.data[0].description, | ||
}} | ||
/> | ||
</Box> | ||
</div> | ||
</Container> | ||
</Box> | ||
</Container> | ||
</> | ||
) | ||
} | ||
|
||
export default JobDetail |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,79 @@ | ||
import { Container, Box, Typography, Grid } from '@mui/material' | ||
import Link from 'next/link' | ||
import Head from 'next/head' | ||
import React from 'react' | ||
import { JobProps } from '../../types/interfaces' | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Can't we add absolute urls here? |
||
|
||
// eslint-disable-next-line | ||
import { jobsData } from '../../data/data' | ||
|
||
export const getServerSideProps = async () => { | ||
const url = | ||
'https://stg-erp.prixite.com/api/resource/Job%20Opening?fields=[%22*%22]' | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. again here |
||
|
||
const response = await fetch(url) | ||
|
||
const data = await response.json() | ||
return { | ||
props: { | ||
data: data, | ||
}, | ||
} | ||
} | ||
|
||
const Jobs = ({ data }: JobProps) => { | ||
const { jobsPageTitle, jobsPageHeader } = jobsData | ||
return ( | ||
<> | ||
<Head> | ||
<title>{jobsPageTitle}</title> | ||
<meta name="prixite" content="Prixte" /> | ||
<link rel="icon" href="/favicon.ico" /> | ||
</Head> | ||
<Container maxWidth="xl" className="page-header"> | ||
<Box className="header"> | ||
<Box className="heading"> | ||
<Typography className="heading-text"> | ||
{jobsPageHeader.slice(0, 10)} | ||
<span style={{ color: 'var(--primary-green)' }}> | ||
{jobsPageHeader.slice(10, 18)} | ||
</span> | ||
{jobsPageHeader.slice(18, 50)} | ||
</Typography> | ||
</Box> | ||
</Box> | ||
<Grid container spacing={{ xs: 2, md: 7 }} columnSpacing={3}> | ||
{data.data.map((curElem) => { | ||
return ( | ||
<div key={curElem.name}> | ||
<Grid item sm={12} md={3} className="job"> | ||
<Box marginBottom="10px"> | ||
<Box className="job-image-container"> | ||
<Link href={`/jobs/${curElem.name}`}> | ||
<Typography | ||
sx={{ fontSize: 15, fontWeight: 600, width: 250 }} | ||
mt="40px" | ||
> | ||
{curElem.name} | ||
</Typography> | ||
|
||
<div | ||
className="job-description description" | ||
dangerouslySetInnerHTML={{ | ||
__html: curElem.description, | ||
}} | ||
/> | ||
</Link> | ||
</Box> | ||
</Box> | ||
</Grid> | ||
</div> | ||
) | ||
})} | ||
</Grid> | ||
</Container> | ||
</> | ||
) | ||
} | ||
|
||
export default Jobs |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Use the env variable for the base url and job_title prop is not dynamic.