renamed editBox coponent to MentorEditLearningObj

client/src/App.css

@@ -187,7 +187,6 @@ li {
 .default-skill-display {
   color: rgb(255, 255, 255);
   font-size: 24px;
-  line-height: 50px;
 }
 
 .default-skill-display:hover {
@@ -199,6 +198,7 @@ li {
   background-color: rgb(255, 255, 255);
   padding: 8px;
   border-radius: 5px;
+  padding-right: 0px;
 }
 .skills-container A {
   display: flex;
@@ -214,14 +214,14 @@ li {
   border-radius: 4px;
   text-decoration: none;
 } */
-
+/* 
 .skills-container .edit-btn:not A:hover {
   border-radius: 4px;
   color: white;
   text-decoration: none;
   border-bottom: 1px solid whites;
   text-align: center;
-}
+} */
 
 .skills-container {
   background-color: #495464;

client/src/Pages/MentorsEdit.js

@@ -5,7 +5,7 @@ import {
   Route,
   NavLink,
 } from "react-router-dom";
-import EditBox from "../components/EditBox";
+import MentorEditLearningObj from "../components/MentorEditLearningObj";
 import Header from "../components/Header";
 import Footer from "../components/Footer";
 // import { skills, skillLabel } from "../components/consts/skillsConst";
@@ -96,7 +96,10 @@ export default function MentorsEdit() {
         </div>
 
         <Switch>
-          <Route path="/mentorsedit/:id" children={<EditBox />} />
+          <Route
+            path="/mentorsedit/:skill"
+            children={<MentorEditLearningObj />}
+          />
         </Switch>
       </div>
       <Footer />

client/src/components/EditBox.js → client/src/components/MentorEditLearningObj.js

@@ -1,21 +1,18 @@
 import React, { useState, useEffect } from "react";
-// import fakeData from "../fakeData.json";
 import AddForm from "./AddForm";
 import { useParams } from "react-router-dom";
-import { skills } from "../components/consts/skillsConst";
+import { skills } from "./consts/skillsConst";
 
-export default function EditBox() {
-  let { id } = useParams();
-  // const skills = fakeData[id];
-  const [deleted, setDeleted] = useState(skills);
+export default function MentorEditLearningObj() {
+  let { skill } = useParams();
   const [learningObj, setLearningObj] = useState([]);
   const [updateLO, setUpdateLO] = useState("");
   const [text, setText] = useState("");
 
   const token = window.localStorage.getItem("token");
 
   const getLearningObj = () => {
-    fetch(`/api/learningobjectives/${id}`, { headers: { token } })
+    fetch(`/api/learningobjectives/${skill}`, { headers: { token } })
       .then((response) => response.json())
       .then((data) => {
         if (data.error) {
@@ -27,7 +24,7 @@ export default function EditBox() {
   };
   useEffect(() => {
     getLearningObj();
-  }, [id]);
+  }, [skill]);
 
   const deleteLearningOb = (LearningID) => {
     fetch(`/api/learningobjectives/${LearningID}`, {

client/src/components/consts/skillsConst.js

@@ -1,13 +1,11 @@
-export const  skillsLabelsBySkill =  {
-    html: "HTML",
-    css: "CSS",
-    git: "Git",
-    javascript: "JavaScript",
-    react: "React",
-    node: "Node.js",
-    sql: "SQL",
-  };
-  export const skills = Object.keys(skillsLabelsBySkill);
-  export const skillLabel = (skill) => skillsLabelsBySkill[skill];
-
-
+export const skillsLabelsBySkill = {
+  html: "HTML",
+  css: "CSS",
+  git: "Git",
+  javascript: "JavaScript",
+  react: "React",
+  node: "Node.js",
+  sql: "SQL",
+};
+export const skills = Object.keys(skillsLabelsBySkill);
+export const skillLabel = (skill) => skillsLabelsBySkill[skill];