editSkills

src/pages/Summary/Summary.js

@@ -17,10 +17,10 @@ import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
 
 import rightArrow from "assets/icons/arrows/arrowRight.svg";
 import arrow from "assets/icons/arrows/left-arrow.png";
+import arrowDown from "assets/icons/arrows/selectArrow.png";
+import deleteIcon from "assets/icons/closeProjectPersons.svg";
 import gitImgItem from "assets/icons/gitItemImg.svg";
 import avatarMok from "assets/images/avatarMok.png";
-import deleteIcon from "assets/icons/closeProjectPersons.svg";
-import arrowDown from "assets/icons/arrows/selectArrow.png";
 
 import "./summary.scss";
 
@@ -32,10 +32,10 @@ export const Summary = () => {
   const [openGit, setOpenGit] = useState(false);
   const [gitInfo, setGitInfo] = useState([]);
   const [editSummeryOpen, setEditSummeryOpen] = useState(false);
-  const [editSkills, setEditSkills] = useState(false)
+  const [editSkills, setEditSkills] = useState(false);
   const [summery, setSummery] = useState("");
-  const [selectedSkills, setSelectedSkills] = useState([])
+  const [selectedSkills, setSelectedSkills] = useState([]);
-  const [selectSkillsOpen, setSelectSkillsOpen] = useState(false)
+  const [selectSkillsOpen, setSelectSkillsOpen] = useState(false);
   const [skillsList, seSkillsList] = useState([]);
 
   useEffect(() => {
@@ -46,23 +46,22 @@ export const Summary = () => {
 
   useEffect(() => {
     setSummery(profileInfo.vc_text);
-    setSelectedSkills(profileInfo.skillValues)
+    setSelectedSkills(profileInfo.skillValues);
   }, [profileInfo]);
 
-
   useEffect(() => {
     apiRequest(`/skills/get-skills-list`).then((el) => {
       seSkillsList(el);
     });
-  }, [])
+  }, []);
 
   function setSkills() {
     apiRequest("/resume/edit-skills", {
       method: "PUT",
       data: {
-        "UserCard": {
+        UserCard: {
-          "skill": selectedSkills.map((item) => item.skill_id)
+          skill: selectedSkills.map((item) => item.skill_id),
-        }
+        },
       },
     }).then(() => {});
   }
@@ -127,53 +126,70 @@ export const Summary = () => {
                 className={editSkills ? "edit" : ""}
                 onClick={() => {
                   if (editSkills) {
-                    setSkills()
+                    setSkills();
                   }
-                  setEditSkills(!editSkills)
+                  setEditSkills(!editSkills);
                 }}
               >
                 {editSkills ? "Сохранить" : "Редактировать"}
               </button>
             </div>
             <div className="skills__section__items">
-              {editSkills ?
+              {editSkills ? (
-                <div className='editSkills'>
+                <div className="editSkills">
                   {selectedSkills &&
                     selectedSkills.map((skill) => {
-                      return <span key={skill.skill_id}>
+                      return (
+                        <span key={skill.skill_id}>
                           {skill.skill.name}
                           <img
                             src={deleteIcon}
-                          alt='deleteIcon'
+                            alt="deleteIcon"
-                          onClick={() => setSelectedSkills((prevValue) => prevValue.filter((item) => item.skill_id !== skill.skill_id))}
+                            onClick={() =>
+                              setSelectedSkills((prevValue) =>
+                                prevValue.filter(
+                                  (item) => item.skill_id !== skill.skill_id
+                                )
+                              )
+                            }
                           />
                         </span>
-                    })
+                      );
-                  }
+                    })}
-                  <div className='selectSkills'>
+                  <div className="selectSkills">
-                    <div className='selectSkills__name' onClick={() => setSelectSkillsOpen(!selectSkillsOpen)}>
+                    <div
+                      className="selectSkills__name"
+                      onClick={() => setSelectSkillsOpen(!selectSkillsOpen)}
+                    >
                       Выберите скилл
                       <img
                         className={selectSkillsOpen ? "open" : ""}
                         src={arrowDown}
                       />
                     </div>
-                    {selectSkillsOpen &&
+                    {selectSkillsOpen && (
-                      <div className='selectSkills__dropDown'>
+                      <div className="selectSkills__dropDown">
                         {skillsList.map((skill) => {
-                          return <p
+                          return (
-                            onClick={() => setSelectedSkills((prevValue) => [...prevValue, {'skill': skill, 'skill_id': skill.id}])}
+                            <p
+                              onClick={() =>
+                                setSelectedSkills((prevValue) => [
+                                  ...prevValue,
+                                  { skill: skill, skill_id: skill.id },
+                                ])
+                              }
                               key={skill.id}
-                            className='selectSkills__item'>
+                              className="selectSkills__item"
+                            >
                               {skill.name}
                             </p>
-                        })
+                          );
-                        }
+                        })}
                       </div>
-                    }
+                    )}
                   </div>
                 </div>
-                :
+              ) : (
                 <div className="skills__section__items__wrapper">
                   {selectedSkills &&
                     selectedSkills.map((skill, index) => (
@@ -183,7 +199,7 @@ export const Summary = () => {
                       </span>
                     ))}
                 </div>
-              }
+              )}
             </div>
           </div>
         )}