Begin job details cards.

client/src/pages/jobs/jobs.page.jsx

@@ -1,11 +1,13 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { useSubscription } from "@apollo/react-hooks";
 import AlertComponent from "../../components/alert/alert.component";
 import { Col } from "antd";
 import { SUBSCRIPTION_ALL_OPEN_JOBS } from "../../graphql/jobs.queries";
 import { useTranslation } from "react-i18next";
 import JobsList from "../../components/jobs-list/jobs-list.component";
+import JobDetailCards from "../../components/job-detail-cards/job-detail-cards.component";
 
+//TODO: Implement pagination for this.
 export default function JobsPage() {
   const { loading, error, data } = useSubscription(SUBSCRIPTION_ALL_OPEN_JOBS, {
     fetchPolicy: "network-only"
@@ -16,11 +18,19 @@ export default function JobsPage() {
     document.title = t("titles.jobs");
   }, [t]);
 
-  if (error) return <AlertComponent message={error.message} />;
+  const [selectedJob, setSelectedJob] = useState(null);
 
+  if (error) return <AlertComponent message={error.message} />;
+  console.log(selectedJob);
   return (
     <Col span={22} offset={1}>
-      <JobsList loading={loading} jobs={data ? data.jobs : null} />
+      <JobsList
+        loading={loading}
+        selectedJob={selectedJob}
+        setSelectedJob={setSelectedJob}
+        jobs={data ? data.jobs : null}
+      />
+      <JobDetailCards selectedJob={selectedJob} />
     </Col>
   );
 }

client/src/pages/profile/profile.page.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Layout, Menu, Icon } from "antd";
+import { Layout } from "antd";
 import ProfileSideBar from "../../components/profile-sidebar/profile-sidebar.component";
 import ProfileContent from "../../components/profile-content/profile-content.component";