Refactor and enhance job-related components and context.

src/app/context/JobsContext.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import {createContext, ReactNode, FC, useState, Dispatch, SetStateAction} from "react";
+import {Job} from "../type";
+
+type JobsContextPayload = {
+	data: Job[]
+	filter?: string
+	setFilter: Dispatch<SetStateAction<string | undefined>>
+} | undefined
+
+export const JobsContext = createContext<JobsContextPayload>(undefined);
+
+type JobsContextProviderProps = {
+	jobs: Job[]
+	children: ReactNode[]
+}
+
+export const JobsProvider: FC<JobsContextProviderProps> = ({children, jobs: data}) => {
+	const [filter, setFilter] = useState<string>()
+
+	return (
+		<JobsContext value={{data, filter, setFilter}}>{children}</JobsContext>
+	)
+}

src/app/context/useJobs.ts

@@ -0,0 +1,25 @@
+"use client"
+
+import {useContext} from "react";
+import {JobsContext} from "./JobsContext";
+
+export const useJobs = () => {
+	const context = useContext(JobsContext)
+	if (!context) {
+		throw new Error('useJobs must be used within a JobsProvider!');
+	}
+
+	const handleFilterJob = (name: string) => {
+		if (name === context.filter) {
+			context.setFilter(undefined)
+		} else {
+			context.setFilter(name)
+		}
+	}
+
+	return {
+		jobs: context.data,
+		filter: context?.filter,
+		filterJobs: handleFilterJob,
+	}
+}