Merge branch 'dev' of github.com:WildCodeSchool/2023-09-JS-BDX-P3-La_…

…Rive_Droite into front_profile Co-authored-by: Marie Delaire <[email protected]>
WildCodeSchool · Jan 23, 2024 · b6cc899 · b6cc899
2 parents 73bfdea + 80f09e0
commit b6cc899
Show file tree

Hide file tree

Showing 23 changed files with 648 additions and 379 deletions.
diff --git a/backend/database/client.js b/backend/database/client.js
@@ -10,6 +10,7 @@ const client = mysql.createPool({
   user: DB_USER,
   password: DB_PASSWORD,
   database: DB_NAME,
+  dateStrings: true,
 });
 
 // Try to get a connection to the database

diff --git a/backend/database/database.sql b/backend/database/database.sql
diff --git a/backend/src/controllers/courseControllers.js b/backend/src/controllers/courseControllers.js
@@ -13,7 +13,7 @@ const getCourse = (_, res) => {
 };
 
 const getCoursesByCvId = (req, res) => {
-  models.experience
+  models.course
     .findAllByCvId(req.params.id)
     .then((rows) => {
       res.send(rows);

diff --git a/backend/src/controllers/cvControllers.js b/backend/src/controllers/cvControllers.js
@@ -3,7 +3,7 @@ const models = require("../models/index");
 const getCv = async (req, res) => {
   const userId = parseInt(req.params.id, 10);
   if (userId !== req.user.id) {
-    return res.status(403).send({ message: "Invalid user" });
+    return res.status(403).send({ message: "Invalid user" }); // <=== Ton erreur vient d'ici
   }
   try {
     const [item] = await models.cv.findCvByUserId(userId);

diff --git a/backend/src/models/CourseManager.js b/backend/src/models/CourseManager.js
@@ -42,6 +42,19 @@ class CourseManager extends AbstractManager {
       return null;
     }
   }
+
+  async findAllByCvId(cvId) {
+    try {
+      const [results] = await this.database.query(
+        `SELECT * FROM ${this.table} WHERE cv_id = ?`,
+        [cvId]
+      );
+      return results;
+    } catch (err) {
+      console.error(err);
+      return null;
+    }
+  }
 }
 
 module.exports = CourseManager;
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -7,6 +7,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.5.1",
     "axios": "^1.6.4",
+    "date-fns": "^3.3.1",
     "jwt-decode": "^4.0.0",
     "mdb-react-ui-kit": "^7.0.0",
     "prop-types": "^15.8.1",

diff --git a/frontend/src/components/CardModel/CardExperience.jsx b/frontend/src/components/CardModel/CardExperience.jsx
@@ -0,0 +1,72 @@
+import PropTypes from "prop-types";
+import { format } from "date-fns";
+
+import "./card-model.css";
+
+function CardExperience({
+  id,
+  title,
+  company,
+  type,
+  city,
+  dateBegin,
+  dateEnd,
+  description,
+  handleExperienceDelete,
+}) {
+  const trimText = (chaine, limite) => {
+    if (chaine.length <= limite) {
+      return chaine;
+    }
+    return `${chaine.slice(0, limite)}...`;
+  };
+
+  const dateBeginObject = new Date(dateBegin);
+  const dateEndObject = new Date(dateEnd);
+
+  // Formater les dates selon le modèle souhaité
+  const formattedDateBegin = format(dateBeginObject, "dd/MM/yyyy");
+  const formattedDateEnd = format(dateEndObject, "dd/MM/yyyy");
+  return (
+    <div className="card-container">
+      <div className="card-icons">
+        <div className="icon-view">
+          <button
+            className="invisible-button"
+            aria-label="toggleFavorite"
+            type="button"
+            onClick={() => {
+              handleExperienceDelete(id);
+            }}
+          >
+            <i className="fa-solid fa-trash-can" />
+          </button>
+        </div>
+      </div>
+      <h4 className="date-poste">
+        {formattedDateBegin} au {formattedDateEnd}
+      </h4>
+      <h3 className="label-offre">{title}</h3>
+      <h4 className="entreprise-champs experience">
+        {company} {city}
+      </h4>
+      <h5 className="poste-champs experience">
+        {type} - {city}
+      </h5>
+      <p className="p-description ">{trimText(description, 250)}</p>
+    </div>
+  );
+}
+CardExperience.propTypes = {
+  id: PropTypes.number.isRequired,
+  title: PropTypes.string.isRequired,
+  company: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  city: PropTypes.string.isRequired,
+  dateBegin: PropTypes.string.isRequired,
+  dateEnd: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  handleExperienceDelete: PropTypes.func.isRequired,
+};
+
+export default CardExperience;
diff --git a/frontend/src/components/CardModel/CardFormation.jsx b/frontend/src/components/CardModel/CardFormation.jsx
@@ -1,22 +1,63 @@
 import "./card-model.css";
-// import axios from "axios";
+import { format } from "date-fns";
+import PropTypes from "prop-types";
+
+function CardFormation({
+  id,
+  domaine,
+  dateBegin,
+  dateEnd,
+  name,
+  level,
+  handleCourseDelete,
+}) {
+  const dateBeginObject = dateBegin ? new Date(dateBegin) : null;
+  const dateEndObject = dateEnd ? new Date(dateEnd) : null;
+
+  // Formater les dates selon le modèle souhaité
+  const formattedDateBegin = dateBeginObject
+    ? format(dateBeginObject, "dd/MM/yyyy")
+    : "Date début invalide";
+  const formattedDateEnd = dateEndObject
+    ? format(dateEndObject, "dd/MM/yyyy")
+    : "Date fin invalide";
 
-function CardFormation() {
-  // const Course = async () => {
-  //   try {
-  //     // const data =
-  //     await axios.get(`http://localhost:3310/api/course/`);
-  //   } catch (err) {
-  //     console.error(err);
-  //   }
-  // };
   return (
     <div className="card-container">
-      <h3 className="diplome">Master 1</h3>
-      <h4 className="dates">11/07/2023 - 25/02/2024</h4>
-      <p className="school">Wild Code School - Bordeaux</p>
+      <div className="card-icons">
+        <div className="icon-view">
+          <button
+            className="invisible-button"
+            aria-label="toggleFavorite"
+            type="button"
+            onClick={() => {
+              handleCourseDelete(id);
+            }}
+          >
+            <i className="fa-solid fa-trash-can" />
+          </button>
+        </div>
+      </div>
+      <h4 className="date-poste">
+        {formattedDateBegin} au {formattedDateEnd}
+      </h4>
+      <h3 className="label-offre ">
+        {level}
+        {domaine}
+      </h3>
+
+      <p className="entreprise-champs formation ">{name}</p>
     </div>
   );
 }
+CardFormation.propTypes = {
+  id: PropTypes.number.isRequired,
+  domaine: PropTypes.string.isRequired,
+  dateBegin: PropTypes.string.isRequired,
+  dateEnd: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  level: PropTypes.string.isRequired,
+  handleCourseDelete: PropTypes.func.isRequired,
+};
 
 export default CardFormation;
diff --git a/frontend/src/components/CardModel/card-model.css b/frontend/src/components/CardModel/card-model.css
@@ -3,7 +3,7 @@
   padding: 30px;
   border-radius: 6px;
   box-shadow: 5px 5px 15px 8px rgba(217, 217, 217, 0.53);
-  margin: 20px 0px;
+  margin: 20px 15px;
   overflow: hidden;
 }
 
@@ -13,9 +13,19 @@
   text-transform: uppercase;
   font-size: 16px;
 }
+
 .entreprise-champs {
   color: var(--second-color);
   font-weight: 400;
+  font-size: 16px;
+}
+
+.entreprise-champs.experience {
+  margin-top: -8px;
+}
+
+.entreprise-champs.formation {
+  margin-top: -8px;
 }
 
 .poste-champs {
@@ -24,6 +34,10 @@
   font-size: 15px;
 }
 
+.poste-champs.experience {
+  font-style: italic;
+}
+
 .p-description {
   line-height: 1.6;
   margin-top: 6px;
@@ -41,6 +55,11 @@
   font-size: 18px;
   color: var(--second-color);
 }
+.card-icons i {
+  margin-left: 10px;
+  cursor: pointer;
+  color: var(--second-color);
+}
 .icon-modify {
   padding: 5px;
 }

diff --git a/frontend/src/components/NavBar/NavBar.jsx b/frontend/src/components/NavBar/NavBar.jsx
@@ -54,12 +54,22 @@ export default function Navbar() {
                 </Link>
                 {user ? (
                   <Link to="/edit-profile">
-                    <span className="navbar-link">Mon Profil</span>
+                    <span className="navbar-link">Mon Compte</span>
                   </Link>
                 ) : null}
-                <Link to="/profile/favorite">
+                {/* <Link to="/profile/favorite">
                   <span className="navbar-link">Favoris</span>
-                </Link>
+                </Link> */}
+                {user ? (
+                  <Link to="/edit-profile/formation">
+                    <span className="navbar-link">Mes Formations</span>
+                  </Link>
+                ) : null}
+                {user ? (
+                  <Link to="/edit-profile/experience">
+                    <span className="navbar-link">Mes Expériences</span>
+                  </Link>
+                ) : null}
                 {isAdmin ? (
                   <Link to="/dashboard">
                     <span className="navbar-link">Espace admin</span>
@@ -69,9 +79,13 @@ export default function Navbar() {
                   {user ? (
                     <div>
                       {/* <p>Bienvenue</p> */}
-                      <button type="button" onClick={handleLogout}>
+                      <Link
+                        to="/"
+                        className="navbar-link"
+                        onClick={handleLogout}
+                      >
                         Se déconnecter
-                      </button>
+                      </Link>
                     </div>
                   ) : (
                     <>

diff --git a/frontend/src/components/NavBar/navBar.css b/frontend/src/components/NavBar/navBar.css
@@ -62,6 +62,7 @@
 }
 .navbar-link:hover {
   transform: scale(0.9);
+  color: white;
 }
 .active {
   color: white;

diff --git a/frontend/src/contexts/GlobalContext.jsx b/frontend/src/contexts/GlobalContext.jsx
@@ -43,7 +43,6 @@ function GlobalContextProvider({ children, apiService }) {
 
   const handleLogout = () => {
     localStorage.setItem("token", null);
-
     apiService.setToken(null);
     setUser(null);
     // eslint-disable-next-line no-alert

diff --git a/frontend/src/contexts/LogContext.jsx b/frontend/src/contexts/LogContext.jsx
@@ -6,14 +6,8 @@ const LogContext = createContext();
 
 function LogContextProvider({ children }) {
   // Messages d'alertes.
-  const {
-    apiService,
-    setUser,
-    // setErrorMsg,
-    // setSuccesMsg,
-    // setMsgContent,
-    navigate,
-  } = useGlobalContext();
+  const { apiService, setUser, setSuccesMsg, setMsgContent, navigate, user } =
+    useGlobalContext();
 
   const [userConnected, setUserConnected] = useState(false);
 
@@ -40,10 +34,17 @@ function LogContextProvider({ children }) {
 
       // alert(`Content de vous revoir ${result.data.email}`);
       setUser(result.data);
-      if (result.data.isAdmin === 1) {
-        return navigate("/dashboard");
-      }
-      return navigate("/");
+      setMsgContent(
+        `Content de vous revoir ${user.firstname} ${user.lastname}! Connexion effectuée avec`
+      );
+      setSuccesMsg(true);
+      setTimeout(() => {
+        setSuccesMsg(false);
+        if (result.data.isAdmin === 1) {
+          return navigate("/dashboard");
+        }
+        return navigate("/");
+      }, 2000);
     } catch (err) {
       console.error(err);
       // alert(err.message);

diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
@@ -118,6 +118,10 @@ const router = createBrowserRouter([
             path: "/edit-profile/experience",
             element: <AddExperience />,
           },
+          {
+            path: "/edit-profile/experience/:id/edit",
+            element: <AddExperience />,
+          },
           {
             path: "/edit-profile/formation",
             element: <AddFormation />,