From 00b9f6b0a30f21e44e0704c3fd662d2ddaffcb6a Mon Sep 17 00:00:00 2001 From: Haris Shah Date: Sun, 12 May 2024 16:40:58 +0500 Subject: [PATCH] Feat: Job Posting --- apps/frontend/next.config.js | 11 +- apps/frontend/src/app/post-job/page.tsx | 211 +++++++++++++++++++++--- apps/frontend/src/components/Card.tsx | 9 +- apps/frontend/src/constants/index.ts | 18 ++ apps/frontend/src/types.ts | 8 +- 5 files changed, 226 insertions(+), 31 deletions(-) create mode 100644 apps/frontend/src/constants/index.ts diff --git a/apps/frontend/next.config.js b/apps/frontend/next.config.js index da1bb77..6a20bf8 100644 --- a/apps/frontend/next.config.js +++ b/apps/frontend/next.config.js @@ -1,3 +1,12 @@ module.exports = { reactStrictMode: true, -}; + images: { + remotePatterns: [ + { + protocol: 'https', + hostname: 'i.ibb.co', + port: '', + }, + ], + }, +} diff --git a/apps/frontend/src/app/post-job/page.tsx b/apps/frontend/src/app/post-job/page.tsx index fdd54f3..9b7f998 100644 --- a/apps/frontend/src/app/post-job/page.tsx +++ b/apps/frontend/src/app/post-job/page.tsx @@ -1,30 +1,193 @@ +'use client' + +import { Button } from '@/components/Button' +import { Job } from '@/types' +import { useState } from 'react' +import { languages, tools } from '../../constants' + export default function PostJob() { + const [logoUrl, setLogoUrl] = useState(null) + async function handleFile(event: React.ChangeEvent) { + const file = event.target.files?.[0] + if (file) { + const formData = new FormData() + formData.append('image', file) + fetch( + 'https://api.imgbb.com/1/upload?key=6f8623c19cbd73ef6785b7ba44f0bda4', + { + method: 'POST', + body: formData, + } + ) + .then((res) => res.json()) + .then(({ data }) => { + setLogoUrl(data.url) + console.log(data) + }) + .catch((error) => console.error(error)) + } + } + + async function handleSubmit(event: React.FormEvent) { + event.preventDefault() + const formData = new FormData(event.currentTarget) + const data: Partial = Object.fromEntries(formData) + data.languages = formData.getAll('languages') as string[] + data.tools = formData.getAll('tools') as string[] + data.logo = logoUrl as string + + const response = await fetch(`${process.env.NEXT_PUBLIC_BASE_API}/jobs`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify(data), + }) + } + return ( -
-
+
+

Post a Job

-
- - - - - + +
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+
+

+ Languages +

+
+ {languages.map((language) => ( + + ))} +
+
+ +
+

+ Tools +

+ {tools.map((tool) => ( + + ))} +
+
+
+ + {/* {job.company} */} +
+
diff --git a/apps/frontend/src/components/Card.tsx b/apps/frontend/src/components/Card.tsx index 7e8b40a..a8aa255 100644 --- a/apps/frontend/src/components/Card.tsx +++ b/apps/frontend/src/components/Card.tsx @@ -6,13 +6,14 @@ import { Pill } from '.' export function Card({ job }: { job: Job }) { return (
{job.company} @@ -36,6 +37,10 @@ export function Card({ job }: { job: Job }) {
{job.postedAt} • + {/* + {new Date(job.createdAt).toLocaleDateString()} + + • */} {job.contract} • {job.location} diff --git a/apps/frontend/src/constants/index.ts b/apps/frontend/src/constants/index.ts new file mode 100644 index 0000000..911f4b7 --- /dev/null +++ b/apps/frontend/src/constants/index.ts @@ -0,0 +1,18 @@ +export const languages = [ + 'JavaScript', + 'TypeScript', + 'Python', + 'Java', + 'C#', + 'Ruby', + 'PHP', +] +export const tools = [ + 'React', + 'Vue', + 'Angular', + 'Django', + 'Flask', + 'Spring', + '.NET', +] diff --git a/apps/frontend/src/types.ts b/apps/frontend/src/types.ts index 6e1e6f0..4202102 100644 --- a/apps/frontend/src/types.ts +++ b/apps/frontend/src/types.ts @@ -1,14 +1,14 @@ export type Job = { - _id: string - id: number + _id?: string company: string logo: string new: boolean - featured: boolean + featured?: boolean position: string role: string level: string - postedAt: string + postedAt?: string + createdAt?: string contract: string location: string languages: string[]