Merge pull request #55 from WildCodeSchool-2023-09/fixModal

Fix modal
WildCodeSchool-2023-09 · Feb 7, 2024 · 81f0f4a · 81f0f4a
2 parents f198a28 + 3cdbb5e
commit 81f0f4a
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 134 deletions.
diff --git a/frontend/src/components/JobCard.jsx b/frontend/src/components/JobCard.jsx
@@ -37,8 +37,8 @@ function JobCard({ job, cardStyle, refresh, isUserPage }) {
         <Link
           to={
             isUserPage && access
-              ? `/jobs/${job.id}`
-              : `/consultants/company/${companyId}/jobs/${job.job_id}`
+              ? `/consultants/company/${companyId}/jobs/${job.job_id}`
+              : `/jobs/${job.id}`
           }
         >
           <h3 className={`${cardStyle}-title`}>{job.title}</h3>

diff --git a/frontend/src/components/headJobs.jsx b/frontend/src/components/headJobs.jsx
@@ -1,7 +1,9 @@
-import React, { useRef } from "react";
+import React, { useContext } from "react";
 import { useLoaderData } from "react-router-dom";
 
-import Modal from "./modal";
+import { AuthContext } from "../contexts/auth";
+import connexion from "../services/connexion";
+
 import "./headJobs.css";
 
 function formatDate(time) {
@@ -10,22 +12,28 @@ function formatDate(time) {
 
 function HeadJob() {
   const job = useLoaderData();
-  const modal = useRef(null);
+  const { connected } = useContext(AuthContext);
 
-  function toggleRefModal() {
-    modal.current.toggleModal();
-  }
+  const handleClick = async () => {
+    const application = { job_id: job.id, user_id: connected.id };
+    try {
+      connexion.post("/application", application);
+    } catch (err) {
+      console.error(err);
+    }
+  };
 
   return (
     <div className="headjob_container">
       <img src="../src/assets/Logohead.svg" alt="Logo" />
       <div className="body_job">
         <div className="offer">
           <h1 className="title">{job.title}</h1>
-          <button type="button" onClick={toggleRefModal} className="btn-modal">
-            Postuler a l'offre
-          </button>
-          <Modal ref={modal} />
+          {connected.role_id && (
+            <button type="button" onClick={handleClick} className="btn-modal">
+              Postuler a l'offre
+            </button>
+          )}
         </div>
         <div className="resume_jobs">
           <ul>

diff --git a/frontend/src/components/modal.css b/frontend/src/components/modal.css
diff --git a/frontend/src/components/modal.jsx b/frontend/src/components/modal.jsx
diff --git a/frontend/src/pages/jobId.css b/frontend/src/pages/jobId.css
@@ -30,4 +30,5 @@
   border: none;
   border-radius: 5px;
   font-weight: bold;
+  cursor: pointer;
 }
diff --git a/frontend/src/pages/jobId.jsx b/frontend/src/pages/jobId.jsx
@@ -1,7 +1,6 @@
-import React, { useRef, useContext } from "react";
+import React, { useContext } from "react";
 import { useLoaderData } from "react-router-dom";
 
-import Modal from "../components/modal";
 import HeadJob from "../components/headJobs";
 import connexion from "../services/connexion";
 import { AuthContext } from "../contexts/auth";
@@ -16,14 +15,8 @@ function formatDate(time) {
 function JobId() {
   const job = useLoaderData();
   const { connected } = useContext(AuthContext);
-  const modal = useRef(null);
-
-  function toggleRefModal() {
-    modal.current.toggleModal();
-  }
 
   const handleClick = async () => {
-    toggleRefModal();
     const application = { job_id: job.id, user_id: connected.id };
     try {
       connexion.post("/application", application);
@@ -56,17 +49,17 @@ function JobId() {
           <p>Type de contrat:{job.working_type}</p>
           <h2>Le processus</h2>
           <p>{job.description_process}</p>
-
           <p>Date de prise de l'emploi:{formatDate(job.starting_date)}</p>
         </div>
         <div className="consultant">
           <h2>Votre consultant</h2>
         </div>
         <div>Veuillez vous connecter pour en savoir plus</div>
-        <Modal ref={modal} />
-        <button type="button" onClick={handleClick} className="btn-modal">
-          Postuler a l'offre
-        </button>
+        {connected.role_id && (
+          <button type="button" onClick={handleClick} className="btn-modal">
+            Postuler a l'offre
+          </button>
+        )}
       </div>
     </div>
   );