feat: ✨ display listed jobs in table and navigation for edit…

package.json

@@ -24,6 +24,7 @@
     "react-redux": "^8.1.1",
     "redux": "^4.2.1",
     "resend": "^0.16.0",
+    "supports-color": "^8.1.1",
     "typescript": "5.1.3"
   },
   "devDependencies": {

src/app/api/jobs/route.ts

@@ -4,6 +4,22 @@ import { validateToken } from "@/utility/validateToken";
 import { NextRequest, NextResponse } from "next/server";
 ConnectDB();
 
+export async function GET(req: NextRequest) {
+  try {
+    // add condition later to list all jobs based on the user
+    const jobs = await Job.find();
+    if (!jobs) {
+      throw new Error("No jobs exist!");
+    }
+    return NextResponse.json({
+      message: "Jobs fetched successfully",
+      data: jobs,
+    });
+  } catch (error: any) {
+    return NextResponse.json({ message: error.message }, { status: 500 });
+  }
+}
+
 export async function POST(req: NextRequest) {
   try {
     const userId = await validateToken(req);
@@ -18,3 +34,10 @@ export async function POST(req: NextRequest) {
     return NextResponse.json({ message: error.message }, { status: 500 });
   }
 }
+
+export async function PUT(req: NextRequest) {
+  try {
+  } catch (error: any) {
+    return NextResponse.json({ message: error.message }, { status: 500 });
+  }
+}

src/app/jobs/[create]/page.tsx

@@ -40,7 +40,7 @@ export default function Create() {
             Cancel
           </Button>
           <Button type="primary" htmlType="submit">
-            Post Job
+            Save Job
           </Button>
         </div>
       </Form>

src/app/jobs/edit/[id]/page.tsx

@@ -0,0 +1,34 @@
+"use client";
+import JobForm from "@/components/JobForm";
+import PageTitle from "@/components/PageTitle";
+import { Button, Form } from "antd";
+import { useRouter } from "next/navigation";
+import React from "react";
+
+export default function Edit() {
+  const router = useRouter();
+
+  const onFinish = () => {};
+  return (
+    <div>
+      <div className="flex justify-between">
+        <PageTitle title={"Edit Job"} />
+        <Button type="default" onClick={() => router.back()}>
+          Back
+        </Button>
+      </div>
+
+      <Form layout="vertical" onFinish={onFinish}>
+        <JobForm />
+        <div className="flex justify-end items-center gap-3 py-2">
+          <Button type="default" onClick={() => router.back()}>
+            Cancel
+          </Button>
+          <Button type="primary" htmlType="submit">
+            Save Job
+          </Button>
+        </div>
+      </Form>
+    </div>
+  );
+}

src/app/jobs/page.tsx

@@ -1,12 +1,105 @@
 "use client";
-
+import React, { useEffect, useState } from "react";
 import PageTitle from "@/components/PageTitle";
-import { Button } from "antd";
+import Table from "antd/es/table";
+import axios from "axios";
 import { useRouter } from "next/navigation";
-import React from "react";
+import { SetLoading } from "@/redux/loaderSlice";
+import { Button, message } from "antd";
+import { useDispatch } from "react-redux";
+
+const getFullDate = (date: string): string => {
+  const dateAndTime = date.split("T");
+
+  return dateAndTime[0].split("-").reverse().join("-");
+};
 
 export default function Jobs() {
+  const [jobs, setJobs] = useState([]);
   const router = useRouter();
+  const dispatch = useDispatch();
+
+  const getJobs = async () => {
+    try {
+      dispatch(SetLoading(true));
+      const response = await axios.get("/api/jobs");
+      message.success(response.data.message);
+      setJobs(response.data.data);
+    } catch (error: any) {
+      message.error(error.response.message || "Issue processing request");
+    } finally {
+      dispatch(SetLoading(false));
+    }
+  };
+
+  useEffect(() => {
+    getJobs();
+  }, []);
+
+  const columns = [
+    {
+      title: "Title",
+      dataIndex: "title",
+      key: "title",
+    },
+    {
+      title: "Description",
+      dataIndex: "description",
+      key: "description",
+    },
+    {
+      title: "Job Type",
+      dataIndex: "jobType",
+      key: "jobType",
+    },
+    {
+      title: "Work Type",
+      dataIndex: "workType",
+      key: "workType",
+    },
+    {
+      title: "Location",
+      dataIndex: "location",
+      key: "location",
+    },
+    {
+      title: "Experience",
+      dataIndex: "experience",
+      key: "experience",
+    },
+    {
+      title: "Salary From",
+      dataIndex: "salaryFrom",
+      key: "salaryFrom",
+    },
+    {
+      title: "Salary To",
+      dataIndex: "salaryTo",
+      key: "salaryTo",
+    },
+    {
+      title: "Posted On",
+      dataIndex: "createdAt",
+      key: "createdAt",
+      render: (date: string) => getFullDate(date),
+    },
+    {
+      title: "Actions",
+      dataIndex: "actions",
+      render: (text: any, record: any) => {
+        return (
+          <div className="flex gap-3">
+            <i
+              className="ri-edit-box-line"
+              onClick={() => router.push(`/jobs/edit/${record._id}`)}
+            ></i>
+            <i className="ri-delete-bin-7-line"></i>
+          </div>
+        );
+      },
+    },
+  ];
+
   return (
     <div>
       <div className="flex justify-between">
@@ -15,6 +108,9 @@ export default function Jobs() {
           New Job
         </Button>
       </div>
+      <Table columns={columns} dataSource={jobs} />
     </div>
   );
 }
+
+