Setting Firestore for Jobs and bugbashing (#135)

* created firestore for jobs component and debugged the project * updated tests * used yarn fix to make it prettier
ReCoded-Org · Nov 27, 2022 · 2254560 · 2254560
1 parent 2ace383
commit 2254560
Show file tree

Hide file tree

Showing 40 changed files with 472 additions and 181 deletions.
diff --git a/public/assets/meetOurTeam/Nawal.png b/public/assets/meetOurTeam/Nawal.png
diff --git a/public/assets/meetOurTeam/default.jpeg b/public/assets/meetOurTeam/default.jpeg
diff --git a/src/app/store.js b/src/app/store.js
@@ -1,4 +1,5 @@
 import { configureStore } from "@reduxjs/toolkit";
+import { useDispatch as useReduxDispatch } from 'react-redux';
 import counterReducer from "../features/counter/counterSlice";
 import userReducer from "../features/user/userSlice";
 
@@ -8,3 +9,8 @@ export const store = configureStore({
     user: userReducer,
   },
 });
+
+
+const useDispatch = () => useReduxDispatch();
+
+export { useDispatch };
diff --git a/src/components/About/HowItWorks/HowItWorks.jsx b/src/components/About/HowItWorks/HowItWorks.jsx
@@ -9,9 +9,9 @@ import {
 function HowItWorks() {
   const { t } = useTranslation();
   return (
-    <div className="container px-20 ">
+    <div className="px-20 bg-gray-500/5">
       <div>
-        <h1 className="text-left text-5xl font-inter text-secondary py-10 font-bold">
+        <h1 className="text-center text-5xl font-inter text-secondary py-10 font-bold">
           {t("how-it-works")}
         </h1>
       </div>

diff --git a/src/components/About/HowItWorks/__tests__/__snapshots__/HowItWorks.test.js.snap b/src/components/About/HowItWorks/__tests__/__snapshots__/HowItWorks.test.js.snap
@@ -2,11 +2,11 @@
 
 exports[`renders Custom button correctly 1`] = `
 <div
-  className="container px-20 "
+  className="px-20 bg-gray-500/5"
 >
   <div>
     <h1
-      className="text-left text-5xl font-inter text-secondary py-10 font-bold"
+      className="text-center text-5xl font-inter text-secondary py-10 font-bold"
     >
       how-it-works
     </h1>

diff --git a/src/components/AboutUsComponent.jsx b/src/components/AboutUsComponent.jsx
@@ -2,22 +2,22 @@ import React from "react";
 
 function AboutUsComponent() {
   return (
-    <div className="  large:space-x-10  medium:space-x-10  pt-8 pb-6 small:pt-6">
+    <div className="bg-gray-500/5 large:space-x-10  medium:space-x-10  pt-8 pb-6 small:pt-6">
       <div className="small:text-center medium:text-center large:text-center small:mb-6 medium:pt-4 medium:mb-4">
-        <h1 className="font-semibold text-5xl  ml-56 small:ml-8	medium:ml-8 large:ml-8  text-green-600  ">
+        <h1 className="font-semibold text-accent text-5xl text-center">
           {" "}
-          About <span className="text-secondary  ">Us?</span>
+          About <span className="text-secondary">Us?</span>
         </h1>
       </div>
 
       <div className="md:flex small:pr-3 small:pl-3  md:p-8 text-center md:text-left space-y-4 pb-12 space-x-19 medium:space-x-19 large:space-x-1     ">
         <img
-          className="ml-56 large:ml-36 mx-auto md:w-96 medium:mb-3    small:ml-0	 medium:ml-0 large:ml-0 medium:justify-start"
+          className="ml-20 mr-10 large:ml-36 md:w-96 medium:mb-3    small:ml-0	 medium:ml-0 large:ml-0 medium:justify-start"
           src="/aboutus.jpg"
           alt=""
         />
 
-        <p className="w-3/6 medium:pr-3 text-justify small:justify small:w-fit small:ml-3 small:mr-3	medium:justify medium:w-fit medium:ml-3 medium:mr-3 ">
+        <p className="w-3/6 medium:pr-3 text-justify small:justify small:w-fit small:ml-3 small:mr-3	medium:justify medium:ml-3 medium:mr-3 ">
           Our Mission is to build a bridge those who need a job and the ones who
           needs someone to do the job for them this platform makes connections
           easier and faster, in a community where the tech sector is growing

diff --git a/src/components/CombiningComponents/CombiningFilterComponents.jsx b/src/components/CombiningComponents/CombiningFilterComponents.jsx
@@ -1,23 +1,48 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import JobsFinder from "../Hero/JobsFinder";
 import Filter from "../filter/Filter";
 import FilterResults from "../FilterResults/FilterResults";
-import { filterData } from "../../data/filterData";
+import { useDispatch } from "../../app/store";
+import { getJobsList } from "../../features/jobSlice";
 
 function CombiningFilterComponents() {
-  const [data, setData] = useState(filterData);
+  const dispatch = useDispatch();
+  const [items, setItems] = useState([]);
+  const [data, setData] = useState(items);
+
+  console.log("items", items);
+
+  useEffect(() => {
+    const jobsFetch = async () => {
+      const results = await dispatch(getJobsList());
+      const newData = results.payload;
+      const unique = newData.map((m) => [m.id, m]);
+      //  console.log(unique);
+      const newMap = new Map(unique);
+      // console.log('newMap',newMap);
+      const iterator = newMap.values();
+      // console.log('iterator',iterator)
+      const uniqueJobs = [...iterator];
+      //  console.log('uniqueJobs',uniqueJobs);
+
+      setItems(results.payload);
+      //  console.log('results',results.payload)
+      setData(uniqueJobs);
+    };
+    jobsFetch();
+  }, []);
 
   return (
-    <div className="App bg-gray-200  px-7 bg-gray-200 ">
+    <div className="App bg-gray-200 px-7 bg-gray-200 ">
       <div>
         {" "}
         <JobsFinder setData={setData} />
       </div>
       <div className="flex px-6 small:flex-col-reverse ">
-        <Filter setData={setData} filterData={filterData} />
+        <Filter setData={setData} items={items} />
         {/* here we check if result exists if yes pass it to card else pass the
         data instead */}
-        <FilterResults setData={setData} data={data} />
+        <FilterResults setData={setData} data={data} items={items} />
       </div>
     </div>
   );

diff --git a/src/components/FilterResults/FilterResults.jsx b/src/components/FilterResults/FilterResults.jsx
@@ -4,14 +4,23 @@ import { useTranslation } from "react-i18next";
 import FilterButton from "./FilterButton";
 
 function FilterResults({ setData, data }) {
+  console.log("nu", data);
+
+  // const halfLength = Math.ceil(data.length / 2);
+
+  // const leftSide = data.slice(0,halfLength);
+  //   //  console.log('half',leftSide)
+
   const { t } = useTranslation();
   const handleChange = (props) => {
     const newArray = data?.map((key) => ({
       ...key,
       date: new Date(key.postingDate),
     }));
+    console.log("newArray", newArray);
     if (props === "newest") {
       const sortingDataByNewest = newArray.sort((a, b) => b.date - a.date);
+      console.log("sortingDataByNewest", sortingDataByNewest);
       setData(sortingDataByNewest);
     } else {
       const sortingDataByOldest = newArray.sort((a, b) => a.date - b.date);

diff --git a/src/components/Hero/JobsFinder.jsx b/src/components/Hero/JobsFinder.jsx
@@ -39,7 +39,7 @@ function JobsFinder({ setData }) {
             <input
               type="search"
               placeholder="Type to search "
-              className="rounded-3xl px-6 py-2 outline-none relative left-8"
+              className="rounded-3xl px-6 py-2 outline-none relative md:left-8"
               value={text}
               onChange={handleChange}
             />

diff --git a/src/components/Hero/__snapshots__/JobsFinder.test.js.snap b/src/components/Hero/__snapshots__/JobsFinder.test.js.snap
@@ -28,7 +28,7 @@ exports[`renders correctly when the component matches the snapshot 1`] = `
         onSubmit={[Function]}
       >
         <input
-          className="rounded-3xl px-6 py-2 outline-none relative left-8"
+          className="rounded-3xl px-6 py-2 outline-none relative md:left-8"
           onChange={[Function]}
           placeholder="Type to search "
           type="search"

diff --git a/src/components/MeetOurTeam/_test_/__snapshots__/MeetOurTeam.test.jsx.snap b/src/components/MeetOurTeam/_test_/__snapshots__/MeetOurTeam.test.jsx.snap
@@ -33,7 +33,7 @@ exports[`renders Meet Our Team component correctly 1`] = `
       <h2
         className="text-lg text-gray text-center"
       >
-        Frontend Developer
+        Team Lead | Frontend Developer
         <span
           className="m-2"
         >
@@ -431,6 +431,144 @@ exports[`renders Meet Our Team component correctly 1`] = `
         </span>
       </h2>
     </div>
+    <div
+      className="m-4"
+    >
+      <img
+        alt="Aya Ali png"
+        className="rounded-full"
+        src="/assets/meetOurTeam/default.jpeg"
+      />
+      <h3
+        className="text-3xl font-semibold text-accent m-2 text-center"
+      >
+        Aya Ali
+      </h3>
+      <h2
+        className="text-lg text-gray text-center"
+      >
+        Frontend Developer
+        <span
+          className="m-2"
+        >
+          <a
+            href="https://www.linkedin.com/in/aya-ali-5b46bb180/"
+            rel="noreferrer"
+            target="_blank"
+          >
+            <svg
+              aria-hidden="true"
+              className="svg-inline--fa fa-linkedin hover:text-blue-500 "
+              data-icon="linkedin"
+              data-prefix="fab"
+              focusable="false"
+              role="img"
+              style={Object {}}
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"
+                fill="currentColor"
+                style={Object {}}
+              />
+            </svg>
+          </a>
+        </span>
+      </h2>
+    </div>
+    <div
+      className="m-4"
+    >
+      <img
+        alt="Nawal Muhammed png"
+        className="rounded-full"
+        src="/assets/meetOurTeam/Nawal.png"
+      />
+      <h3
+        className="text-3xl font-semibold text-accent m-2 text-center"
+      >
+        Nawal Muhammed
+      </h3>
+      <h2
+        className="text-lg text-gray text-center"
+      >
+        Frontend Developer
+        <span
+          className="m-2"
+        >
+          <a
+            href="https://www.linkedin.com/in/nawal-muhammad-382b7837/"
+            rel="noreferrer"
+            target="_blank"
+          >
+            <svg
+              aria-hidden="true"
+              className="svg-inline--fa fa-linkedin hover:text-blue-500 "
+              data-icon="linkedin"
+              data-prefix="fab"
+              focusable="false"
+              role="img"
+              style={Object {}}
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"
+                fill="currentColor"
+                style={Object {}}
+              />
+            </svg>
+          </a>
+        </span>
+      </h2>
+    </div>
+    <div
+      className="m-4"
+    >
+      <img
+        alt="Zryan Muhammed png"
+        className="rounded-full"
+        src="/assets/meetOurTeam/default.jpeg"
+      />
+      <h3
+        className="text-3xl font-semibold text-accent m-2 text-center"
+      >
+        Zryan Muhammed
+      </h3>
+      <h2
+        className="text-lg text-gray text-center"
+      >
+        Frontend Developer
+        <span
+          className="m-2"
+        >
+          <a
+            href="https://www.linkedin.com/in/zryan-muhammed-9b5478216/"
+            rel="noreferrer"
+            target="_blank"
+          >
+            <svg
+              aria-hidden="true"
+              className="svg-inline--fa fa-linkedin hover:text-blue-500 "
+              data-icon="linkedin"
+              data-prefix="fab"
+              focusable="false"
+              role="img"
+              style={Object {}}
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"
+                fill="currentColor"
+                style={Object {}}
+              />
+            </svg>
+          </a>
+        </span>
+      </h2>
+    </div>
   </div>
 </section>
 `;
diff --git a/src/components/NameAndLinks/--Test--/__snapshots__/Nameandlinksdesign.test.js.snap b/src/components/NameAndLinks/--Test--/__snapshots__/Nameandlinksdesign.test.js.snap
@@ -2,10 +2,10 @@
 
 exports[`renders  NameAndLinksdesign component correctly 1`] = `
 <div
-  className="max-w-5xl mt-16 mb-24 px-4 flex flex-col gap-4 flex-wrap mx-auto"
+  className="flex flex-col ml-0 md:ml-40 mt-16 mb-24 px-4 gap-4 flex-wrap mx-auto"
 >
   <div
-    className="flex gap-4 items-start"
+    className="flex gap-4  justify items-start"
   >
     <div
       className="text-8xl font-bold pt-4 px-8 pb-6 cursor-pointer bg-blue-100 rounded-xl text-slate-900"

diff --git a/src/components/NameAndLinks/Nameandlinksdesign.js b/src/components/NameAndLinks/Nameandlinksdesign.js
@@ -3,8 +3,8 @@ import { AiFillGithub, AiFillLinkedin, AiFillFacebook } from "react-icons/ai";
 
 const NameAndLinksdesign = () => {
   return (
-    <div className="max-w-5xl mt-16 mb-24 px-4 flex flex-col gap-4 flex-wrap mx-auto">
-      <div className="flex gap-4 items-start">
+    <div className="flex flex-col ml-0 md:ml-40 mt-16 mb-24 px-4 gap-4 flex-wrap mx-auto">
+      <div className="flex gap-4  justify items-start">
         <div className="text-8xl font-bold pt-4 px-8 pb-6 cursor-pointer bg-blue-100 rounded-xl text-slate-900">
           A
         </div>

diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
@@ -64,7 +64,7 @@ const Navbar = () => {
           <FontAwesomeIcon icon={faGlobe} className="mx-5" />
           {isEnglish ? "En" : "Ku"}
         </span>
-        <div className="lg:w-60 md:w-45 flex items-center">
+        <div className="lg:w-50 md:w-45 flex items-center">
           <input
             type="text"
             className="block px-4 md:my-0 my-5 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40 w-full"

diff --git a/src/components/Navbar/__tests__/__snapshots__/Navbar.test.jsx.snap b/src/components/Navbar/__tests__/__snapshots__/Navbar.test.jsx.snap
@@ -99,7 +99,7 @@ exports[`renders Meet Our Team component correctly 1`] = `
       En
     </span>
     <div
-      className="lg:w-60 md:w-45 flex items-center"
+      className="lg:w-50 md:w-45 flex items-center"
     >
       <input
         className="block px-4 md:my-0 my-5 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40 w-full"

diff --git a/src/components/OurCollaborators/OurCollaborators.jsx b/src/components/OurCollaborators/OurCollaborators.jsx
@@ -2,7 +2,7 @@ import CompanyDisplay from "../companyShowcaseComponent/CompanyDisplay";
 
 function OurCollaborators({ showCaseData }) {
   return (
-    <section className="flex flex-col bg-gray-500/5 justify-center items-center">
+    <section className="pt-10 flex flex-col bg-gray-500/5 justify-center items-center">
       <h2 className=" font-inter text-center text-blue-900 font-semibold text-xs mt-5 mb-8 md:text-5xl">
         Our <span className="text-accent">Collaborators</span>
       </h2>

diff --git a/src/components/OurCollaborators/__tests__/__snapshots__/OurCollaborators.test.jsx.snap b/src/components/OurCollaborators/__tests__/__snapshots__/OurCollaborators.test.jsx.snap
@@ -2,7 +2,7 @@
 
 exports[`renders Our Collaborators Component correctly 1`] = `
 <section
-  className="flex flex-col bg-gray-500/5 justify-center items-center"
+  className="pt-10 flex flex-col bg-gray-500/5 justify-center items-center"
 >
   <h2
     className=" font-inter text-center text-blue-900 font-semibold text-xs mt-5 mb-8 md:text-5xl"
-Original file line number
+Diff line change
@@ Expand Up / @@ -99,7 +99,7 @@ exports[`renders Meet Our Team component correctly 1`] = ` @@
           En
         </span>
         <div
-          className="lg:w-60 md:w-45 flex items-center"
+          className="lg:w-50 md:w-45 flex items-center"
         >
           <input
             className="block px-4 md:my-0 my-5 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40 w-full"
@@ Expand Down @@