registration setting

src/pages/RegistrationSetting/RegistrationSetting.js

@@ -1,68 +1,74 @@
-import React, { useState }  from "react";
+import React, { useState } from "react";
 
 import AuthHeader from "@components/Common/AuthHeader/AuthHeader";
 import { Footer } from "@components/Common/Footer/Footer";
 import SideBar from "@components/SideBar/SideBar";
 
+import qa from "assets/icons/QA.svg";
+import rightArrow from "assets/icons/arrows/arrowRight.svg";
+import curse from "assets/icons/curse.svg";
+import git from "assets/icons/git.svg";
+import myTeam from "assets/icons/myTeam.svg";
+import outstaffing from "assets/icons/outstaffing.svg";
+import tasks from "assets/icons/tasks.svg";
 import arrowInfo from "assets/icons/trackerIntroInfo.svg";
 import registrationImg from "assets/images/trackerRegistrationImg.png";
-import curse from "assets/icons/curse.svg"
-import git from "assets/icons/git.svg"
-import myTeam from "assets/icons/myTeam.svg"
-import outstaffing from "assets/icons/outstaffing.svg"
-import qa from "assets/icons/QA.svg"
-import tasks from "assets/icons/tasks.svg"
-import rightArrow from "assets/icons/arrows/arrowRight.svg";
 
-import "./registrationSetting.scss"
+import "./registrationSetting.scss";
 
 export const RegistrationSetting = () => {
-
   const questions = {
-    countPeople: ['Только я', '2-5', '6-12', '13-40', 'более 50', 'более 100'],
+    countPeople: ["Только я", "2-5", "6-12", "13-40", "более 50", "более 100"],
-    role: ['Лидер команды', 'Член команды', 'Менеджер', 'Программист', 'Владелец бизнеса'],
+    role: [
+      "Лидер команды",
+      "Член команды",
+      "Менеджер",
+      "Программист",
+      "Владелец бизнеса"
+    ],
     environment: [
       {
-        title: 'Задачи и трекер',
+        title: "Задачи и трекер",
-        subtitle: 'Сервис управления проектами и задачами',
+        subtitle: "Сервис управления проектами и задачами",
-        icon: tasks,
+        icon: tasks
       },
       {
-        title: 'Моя команда',
+        title: "Моя команда",
-        subtitle: 'Данные вашего персонала',
+        subtitle: "Данные вашего персонала",
-        icon: myTeam,
+        icon: myTeam
       },
       {
-        title: 'Тестирование ',
+        title: "Тестирование ",
-        subtitle: 'Сотрудники для вашего сервиса',
+        subtitle: "Сотрудники для вашего сервиса",
-        icon: qa,
+        icon: qa
       },
       {
-        title: 'Гит',
+        title: "Гит",
-        subtitle: 'ПО для хостинга IT-проектов и совместной разработки на базе Git',
+        subtitle:
-        icon: git,
+          "ПО для хостинга IT-проектов и совместной разработки на базе Git",
+        icon: git
       },
       {
-        title: 'Аутстафинг',
+        title: "Аутстафинг",
-        subtitle: 'Каталог IT специалистов',
+        subtitle: "Каталог IT специалистов",
-        icon: outstaffing,
+        icon: outstaffing
       },
       {
-        title: 'Курсы IT ',
+        title: "Курсы IT ",
-        subtitle: 'Обучайтесь сами обучайте персонал',
+        subtitle: "Обучайтесь сами обучайте персонал",
-        icon: curse,
+        icon: curse
       }
     ]
-  }
+  };
 
   const [selectedOptions, setSelectedOptions] = useState({
-    countPeople: '',
+    countPeople: "",
-    role: ''
+    role: ""
-  })
+  });
 
-  const [selectedEnvironment, setSelectedEnvironment] = useState([])
+  const [selectedEnvironment, setSelectedEnvironment] = useState([]);
 
-  const [step, setStep] = useState(1)
+  const [step, setStep] = useState(1);
 
   return (
     <div className="registrationSetting">
@@ -71,7 +77,7 @@ export const RegistrationSetting = () => {
       <div className="registrationSetting__content">
         <div className="container">
           <h1 className="registrationSetting__title">
-            Добро пожаловать {" "}
+            Добро пожаловать{" "}
             <span>
               в ITGuild
               <img src={arrowInfo} alt="arrow" />
@@ -93,15 +99,23 @@ export const RegistrationSetting = () => {
             </h3>
             <div className="questionBlock__answers">
               {questions.countPeople.map((item, index) => {
-                return <button
+                return (
-                  onClick={() => setSelectedOptions((prevState) => ({...prevState, countPeople: item}))}
+                  <button
-                  key={index}
+                    onClick={() =>
-                  className={item === selectedOptions.countPeople ? 'active' : ''}
+                      setSelectedOptions((prevState) => ({
-                >
+                        ...prevState,
-                  {item}
+                        countPeople: item
-                </button>
+                      }))
-              })
+                    }
-              }
+                    key={index}
+                    className={
+                      item === selectedOptions.countPeople ? "active" : ""
+                    }
+                  >
+                    {item}
+                  </button>
+                );
+              })}
             </div>
             <img
               className="registrationSetting__question__img"
@@ -109,73 +123,94 @@ export const RegistrationSetting = () => {
               alt="img"
             />
           </div>
-          {step >= 2 &&
+          {step >= 2 && (
             <div className="registrationSetting__question questionBlock">
-              <h3 className="questionBlock__question">
+              <h3 className="questionBlock__question">Какая у тебя роль?</h3>
-                Какая у тебя роль?
-              </h3>
               <div className="questionBlock__answers">
                 {questions.role.map((item, index) => {
-                  return <button
+                  return (
-                    onClick={() => setSelectedOptions((prevState) => ({...prevState, role: item}))}
+                    <button
-                    key={index}
+                      onClick={() =>
-                    className={item === selectedOptions.role ? 'active' : ''}
+                        setSelectedOptions((prevState) => ({
-                  >
+                          ...prevState,
-                    {item}
+                          role: item
-                  </button>
+                        }))
-                })
+                      }
-                }
+                      key={index}
+                      className={item === selectedOptions.role ? "active" : ""}
+                    >
+                      {item}
+                    </button>
+                  );
+                })}
               </div>
             </div>
-          }
+          )}
-          {step >= 3 &&
+          {step >= 3 && (
             <div className="registrationSetting__environment environment">
-              <span className="environment__suptitle">Организуй комфортную среду для продуктивности</span>
+              <span className="environment__suptitle">
-              <h3 className="environment__title">Добавь сервисы для своего рабочего пространства</h3>
+                Организуй комфортную среду для продуктивности
+              </span>
+              <h3 className="environment__title">
+                Добавь сервисы для своего рабочего пространства
+              </h3>
               <div className="environment__items">
                 {questions.environment.map((item, index) => {
-                  return <div
+                  return (
-                    className={selectedEnvironment.includes(item.title) ? "environment__item item item--active" : "environment__item item" }
+                    <div
-                    key={index}
+                      className={
-                    onClick={() => {
+                        selectedEnvironment.includes(item.title)
-                      if (selectedEnvironment.includes(item.title)) {
+                          ? "environment__item item item--active"
-                        setSelectedEnvironment((prevState) => prevState.filter((name) => name !== item.title))
+                          : "environment__item item"
-                      } else {
-                        setSelectedEnvironment((prevState) => [...prevState, item.title])
                       }
-                    }}
+                      key={index}
-                  >
+                      onClick={() => {
-                    <div className="item__head">
+                        if (selectedEnvironment.includes(item.title)) {
-                      <img src={item.icon} alt='icon' />
+                          setSelectedEnvironment((prevState) =>
-                      <h5>{item.title}</h5>
+                            prevState.filter((name) => name !== item.title)
-                    </div>
+                          );
-                    <div className="item__bottom">
+                        } else {
-                      <p>{item.subtitle}</p>
+                          setSelectedEnvironment((prevState) => [
-                      <div className="arrow">
+                            ...prevState,
-                        <img src={rightArrow} alt='arrow' />
+                            item.title
+                          ]);
+                        }
+                      }}
+                    >
+                      <div className="item__head">
+                        <img src={item.icon} alt="icon" />
+                        <h5>{item.title}</h5>
+                      </div>
+                      <div className="item__bottom">
+                        <p>{item.subtitle}</p>
+                        <div className="arrow">
+                          <img src={rightArrow} alt="arrow" />
+                        </div>
                       </div>
                     </div>
-                  </div>
+                  );
-                })
+                })}
-                }
               </div>
-              <button className="registrationSetting__continue registrationSetting__done">Готово</button>
+              <button className="registrationSetting__continue registrationSetting__done">
+                Готово
+              </button>
             </div>
-          }
+          )}
-          {step !== 3 &&
+          {step !== 3 && (
             <button
               onClick={() => {
                 if (step === 1 && selectedOptions.countPeople) {
-                  setStep((prevState) => prevState + 1)
+                  setStep((prevState) => prevState + 1);
                 }
                 if (step === 2 && selectedOptions.role) {
-                  setStep((prevState) => prevState + 1)
+                  setStep((prevState) => prevState + 1);
                 }
               }}
-              className="registrationSetting__continue">
+              className="registrationSetting__continue"
+            >
               Продолжить
             </button>
-          }
+          )}
         </div>
         <Footer />
       </div>