refactoring

src/App.js

@@ -8,7 +8,7 @@ const HomePage = lazy(() => import('./pages/HomePage'));
 const CandidatePage = lazy(() => import('./pages/CandidatePage'));
 
 const App = () => {
-  const [isAuth, setIsAuth] = useState(false);
+  const [isAuth, setIsAuth] = useState(true);
 
   useEffect(() => {
     const auth = localStorage.getItem('auth');

src/components/Blocks/OutstaffingBlock.jsx

@@ -1,19 +0,0 @@
-import style from '../../components/Home/sections/Outstaffing.module.css';
-
-const OutstaffingBlock = ({ header , image, data }) => {
-    return (
-      <div className="col-4">
-        <div className={style.outstaffing__box}>
-          <img src={image} alt={header} />
-          <p>{header}</p>
-          <ul className={style.items}>
-            {data.map((item, index) => (
-              <li key={index.toString()} onClick={() => console.log(item, index)}>{index + 1} {item}</li>
-            ))}
-          </ul>
-        </div>
-      </div>
-    );
-  };
-
-  export default OutstaffingBlock

src/components/Candidate/Candidate.js

@@ -5,7 +5,7 @@ import { candidatesList } from '../Home/Home';
 import icon from '../../images/front_end.png';
 import arrow from '../../images/right-arrow.png';
 import rectangle from '../../images/rectangle_secondPage.png';
-import Sidebar from './sections/Sidebar';
+import Sidebar from '../Sidebar/Sidebar';
 import SectionOne from './sections/SectionOne';
 import SectionTwo from './sections/SectionTwo';
 import SectionThree from './sections/SectionThree';

src/components/Candidate/sections/Section.module.css

@@ -0,0 +1,123 @@
+
+  .SectionOne > h3 {
+    font-family: 'GT Eesti Pro Display';
+    font-size: 2.2em;
+    font-weight: 400;
+    font-style: normal;
+    letter-spacing: normal;
+    line-height: 36px;
+    text-align: left;
+  }
+
+  .SectionOne > p {
+    font-family: 'GT Eesti Pro Display - Thin';
+    font-size: 1.8em;
+    font-weight: 400;
+    font-style: normal;
+    letter-spacing: normal;
+    line-height: 28px;
+    text-align: left;
+    color: #444444;
+  }
+
+  .SectionOne > h4 {
+    font-family: 'GT Eesti Pro Display';
+    font-size: 1.8em;
+    font-weight: 700;
+    font-style: normal;
+    letter-spacing: normal;
+    line-height: 36px;
+    text-align: left;
+  }
+
+  .SectionTwo > p {
+    font-family: 'GT Eesti Pro Display';
+    font-size: 1.8em;
+    font-weight: 400;
+    font-style: normal;
+    letter-spacing: normal;
+    line-height: 28px;
+    text-align: left;
+    color: #444444;
+  }
+
+  .SectionThree > h3 {
+    font-family: 'GT Eesti Pro Display';
+    font-size: 2.2em;
+    font-weight: 400;
+    font-style: normal;
+    letter-spacing: normal;
+    line-height: 36px;
+    text-align: left;
+  }
+
+  .SectionThree > p {
+    font-family: 'GT Eesti Pro Display - Thin';
+    font-size: 1.8em;
+    font-weight: 400;
+    font-style: normal;
+    letter-spacing: normal;
+    line-height: 28px;
+    text-align: left;
+    color: #444444;
+  }
+
+  .SectionThree > h4 {
+    font-family: 'GT Eesti Pro Display';
+    font-size: 1.8em;
+    font-weight: 700;
+    font-style: normal;
+    letter-spacing: normal;
+    line-height: 36px;
+    text-align: left;
+  }
+
+  .SectionFour > p {
+    font-family: 'GT Eesti Pro Display';
+    font-size: 1.8em;
+    font-weight: 400;
+    font-style: normal;
+    letter-spacing: normal;
+    line-height: 18px;
+    text-align: left;
+  }
+
+  .SectionFive > p {
+    font-family: 'GT Eesti Pro Display';
+    font-size: 1.8em;
+    font-weight: 400;
+    font-style: normal;
+    letter-spacing: normal;
+    line-height: 16px;
+    text-align: left;
+  }
+
+  .SectionSkills {
+    border: 1px solid #69bf2c;
+    padding: 28px 40px 16px 30px;
+    margin-top: 60px;
+    border-radius: 10px;
+    margin-bottom: 60px;
+    
+  }
+  
+  .SectionSkills > h3 {
+    font-family: 'GT Eesti Pro Display';
+    font-size: 1.8em;
+    font-weight: 700;
+    font-style: normal;
+    letter-spacing: normal;
+    line-height: 28px;
+    text-align: left;
+  }
+  
+  .SectionSkills > p {
+    font-family: 'GT Eesti Pro Display - Thin';
+    font-size: 2em;
+    font-weight: 400;
+    font-style: normal;
+    letter-spacing: normal;
+    line-height: 28px;
+    text-align: left;
+    color: #444444;
+  }

src/components/Candidate/sections/SectionFive.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import style from './SectionFive.module.css';
+import style from './Section.module.css';
 
 const SectionFive = () => {
   return (

src/components/Candidate/sections/SectionFive.module.css

@@ -1,9 +0,0 @@
-.SectionFive > p {
-  font-family: 'GT Eesti Pro Display';
-  font-size: 1.8em;
-  font-weight: 400;
-  font-style: normal;
-  letter-spacing: normal;
-  line-height: 16px;
-  text-align: left;
-}

src/components/Candidate/sections/SectionFour.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import style from './SectionFour.module.css';
+import style from './Section.module.css';
 
 const SectionFour = () => {
   return (

src/components/Candidate/sections/SectionFour.module.css

@@ -1,9 +0,0 @@
-.SectionFour > p {
-  font-family: 'GT Eesti Pro Display';
-  font-size: 1.8em;
-  font-weight: 400;
-  font-style: normal;
-  letter-spacing: normal;
-  line-height: 18px;
-  text-align: left;
-}

src/components/Candidate/sections/SectionOne.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import style from './SectionOne.module.css';
+import style from './Section.module.css';
 
 const SectionOne = () => {
   return (

src/components/Candidate/sections/SectionOne.module.css

@@ -1,32 +0,0 @@
-
-  .SectionOne > h3 {
-    font-family: 'GT Eesti Pro Display';
-    font-size: 2.2em;
-    font-weight: 400;
-    font-style: normal;
-    letter-spacing: normal;
-    line-height: 36px;
-    text-align: left;
-  }
-
-  .SectionOne > p {
-    font-family: 'GT Eesti Pro Display - Thin';
-    font-size: 1.8em;
-    font-weight: 400;
-    font-style: normal;
-    letter-spacing: normal;
-    line-height: 28px;
-    text-align: left;
-    color: #444444;
-  }
-
-  .SectionOne > h4 {
-    font-family: 'GT Eesti Pro Display';
-    font-size: 1.8em;
-    font-weight: 700;
-    font-style: normal;
-    letter-spacing: normal;
-    line-height: 36px;
-    text-align: left;
-  }
-

src/components/Candidate/sections/SectionSkills.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import style from './SectionSkills.module.css';
+import style from './Section.module.css';
 
 const SectionSkills = () => {
   return (

src/components/Candidate/sections/SectionSkills.module.css

@@ -1,29 +0,0 @@
-.SectionSkills {
-  border: 1px solid #69bf2c;
-  padding: 28px 40px 16px 30px;
-  margin-top: 60px;
-  border-radius: 10px;
-  margin-bottom: 60px;
-  
-}
-
-.SectionSkills > h3 {
-  font-family: 'GT Eesti Pro Display';
-  font-size: 1.8em;
-  font-weight: 700;
-  font-style: normal;
-  letter-spacing: normal;
-  line-height: 28px;
-  text-align: left;
-}
-
-.SectionSkills > p {
-  font-family: 'GT Eesti Pro Display - Thin';
-  font-size: 2em;
-  font-weight: 400;
-  font-style: normal;
-  letter-spacing: normal;
-  line-height: 28px;
-  text-align: left;
-  color: #444444;
-}

src/components/Candidate/sections/SectionThree.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import style from './SectionThree.module.css';
+import style from './Section.module.css';
 
 const SectionThree = () => {
   return (

src/components/Candidate/sections/SectionThree.module.css

@@ -1,32 +0,0 @@
-
-  .SectionThree > h3 {
-    font-family: 'GT Eesti Pro Display';
-    font-size: 2.2em;
-    font-weight: 400;
-    font-style: normal;
-    letter-spacing: normal;
-    line-height: 36px;
-    text-align: left;
-  }
-
-  .SectionThree > p {
-    font-family: 'GT Eesti Pro Display - Thin';
-    font-size: 1.8em;
-    font-weight: 400;
-    font-style: normal;
-    letter-spacing: normal;
-    line-height: 28px;
-    text-align: left;
-    color: #444444;
-  }
-
-  .SectionThree > h4 {
-    font-family: 'GT Eesti Pro Display';
-    font-size: 1.8em;
-    font-weight: 700;
-    font-style: normal;
-    letter-spacing: normal;
-    line-height: 36px;
-    text-align: left;
-  }
-

src/components/Candidate/sections/SectionTwo.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import style from './SectionTwo.module.css';
+import style from './Section.module.css';
 
 const SectionTwo = () => {
   return (

src/components/Candidate/sections/SectionTwo.module.css

@@ -1,12 +0,0 @@
- 
-  .SectionTwo > p {
-    font-family: 'GT Eesti Pro Display';
-    font-size: 1.8em;
-    font-weight: 400;
-    font-style: normal;
-    letter-spacing: normal;
-    line-height: 28px;
-    text-align: left;
-    color: #444444;
-  }
-

src/components/Description/Description.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import style from './Description.module.css';
-import photo from '../../../images/medium_male.png';
-import rectangle from '../../../images/rectangle_secondPage.png';
-import arrowLeft from '../../../images/arrow_left.png';
-import arrowRight from '../../../images/arrow_right.png';
+import photo from '../../images/medium_male.png';
+import rectangle from '../../images/rectangle_secondPage.png';
+import arrowLeft from '../../images/arrow_left.png';
+import arrowRight from '../../images/arrow_right.png';
 import { Link } from 'react-router-dom';
 
 const Description = ({ arr }) => {

src/components/Home/Home.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import Outstaffing from './sections/Outstaffing';
-import Description from './sections/Description';
-import TagSelect from '../Select/Select';
+import Outstaffing from '../Outstaffing/Outstaffing';
+import Description from '../Description/Description';
+// import TagSelect from '../Select/TagSelect';
 
 export const candidatesList = [
   { id: 1, name: 'Frontend' },
@@ -12,7 +12,7 @@ const Home = () => {
   return (
     <>
       <Outstaffing />
-      <TagSelect />
+      {/* <TagSelect /> */}
       <Description arr={candidatesList} />
     </>
   );

src/components/Home/sections/Outstaffing.js

@@ -1,39 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import style from './Outstaffing.module.css';
-import front from '../../../images/front_end.png';
-import back from '../../../images/back_end.png';
-import design from '../../../images/design.png';
-import OutstaffingBlock from '../../Blocks/OutstaffingBlock';
-
-const Outstaffing = () => {
-  const [data, setData] = useState([]);
-
-  useEffect(() => {
-    const tempData = ['Ruby on Rails', 'Nginx', 'Docker', 'PostgreSQL', 'Git', 'Typescript', 'ReactJS'];
-    setData(tempData);
-  }, []);
-
-  return (
-    <section className={style.outstaffing}>
-      <div className="container">
-        <div className="row">
-          <div className="col-12">
-            <div className={style.outstaffing__title}>
-              <h2>
-                <span>Аутстаффинг</span> it-персонала
-              </h2>
-            </div>
-          </div>
-        </div>
-
-        <div className="row">
-          <OutstaffingBlock image={front} data={data} header={'# Популярный стек'} />
-          <OutstaffingBlock image={back} data={data} header={'# Популярный стек'} />
-          <OutstaffingBlock image={design} data={data} header={'# Популярный стек'} />
-        </div>
-      </div>
-    </section>
-  );
-};
-
-export default Outstaffing;

src/components/Outstaffing/Outstaffing.js

@@ -0,0 +1,120 @@
+import React, { useState, useEffect, useRef } from 'react';
+import style from './Outstaffing.module.css';
+import front from '../../images/front_end.png';
+import back from '../../images/back_end.png';
+import design from '../../images/design.png';
+import OutstaffingBlock from './OutstaffingBlock';
+// import TagSelect from '../Select/TagSelect';
+import Select from 'react-select';
+
+const options = [
+  { value: 'Ruby on Rails', label: 'Ruby on Rails' },
+  { value: 'Nginx', label: 'Nginx' },
+  { value: 'Docker', label: 'Docker' },
+  { value: 'PostgreSQL', label: 'PostgreSQL' },
+  { value: 'Vue.js', label: 'Vue.js' },
+  { value: 'Typescript', label: 'Typescript' },
+  { value: 'ReactJ', label: 'ReactJ' },
+];
+
+const Outstaffing = () => {
+  const [data, setData] = useState([]);
+  const [arr, setArr] = useState([]);
+
+  useEffect(() => {
+    const tempData = ['Ruby on Rails', 'Nginx', 'Docker', 'PostgreSQL', 'Vue.js', 'Typescript', 'ReactJS'];
+    setData(tempData);
+  }, []);
+
+  const [items, setItems] = useState([]);
+
+  const inputEl = useRef(null);
+
+  const test = (index) => {
+    let arrr = options[index];
+    console.log('DDDDD', arrr);
+
+    setArr([arrr]);
+  };
+
+  const handle = (arr) => {
+    console.log(arr);
+    inputEl.current.select.setValue(arr);
+  };
+
+  const handleChange = (values) => {
+    const selectItems = values.map((value) => value);
+
+    setItems(selectItems);
+
+    console.log('items', items);
+  };
+
+  const handleSubmit = () => {
+    const filterItems = JSON.stringify(items.map((item) => item.value));
+
+    alert(`Back-end: ${filterItems}`);
+
+    setItems([]);
+  };
+
+  return (
+    <>
+      <section className={style.outstaffing}>
+        <div className="container">
+          <div className="row">
+            <div className="col-12">
+              <div className={style.outstaffing__title}>
+                <h2>
+                  <span>Аутстаффинг</span> it-персонала
+                </h2>
+              </div>
+            </div>
+          </div>
+
+          <div className="row">
+            <div className="col-4">
+              <OutstaffingBlock image={front} data={data} header={'# Популярный стек'} onTest={test} />
+            </div>
+            <div className="col-4">
+              <OutstaffingBlock image={back} data={data} header={'# Популярный стек'} onTest={test} />
+            </div>
+            <div className="col-4">
+              <OutstaffingBlock image={design} data={data} header={'# Популярный стек'} onTest={test} />
+            </div>
+          </div>
+        </div>
+      </section>
+      {/* <TagSelect selectArr={tt} /> */}
+      <section className={style.search}>
+        <div className="container">
+          <div className="row">
+            <div className="col-12">
+              <h2 className={style.search__title}>Найти специалиста по навыкам</h2>
+              <div className={style.search__box}>
+                <Select
+                  ref={inputEl}
+                  value={items}
+                  onChange={handleChange}
+                  isMulti
+                  name="tags"
+                  className={style.select}
+                  classNamePrefix={style.select}
+                  options={options}
+                />
+                <button onClick={handleSubmit} type="submit">
+                  Submit
+                </button>
+                <button onClick={handle} type="submit">
+                  Submit
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+};
+
+export default Outstaffing;

src/components/Outstaffing/OutstaffingBlock.js

@@ -0,0 +1,19 @@
+import style from './Outstaffing.module.css';
+
+const OutstaffingBlock = ({ text, image, data, onTest }) => {
+  return (
+    <div className={style.outstaffing__box}>
+      <img src={image} alt="img" />
+      <p>{text}</p>
+      <ul className={style.items}>
+        {data.map((item, index) => (
+          <li key={index.toString()} onClick={() => onTest(index)}>
+            {index} {item}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default OutstaffingBlock;

src/components/Select/Select.js

@@ -1,61 +0,0 @@
-import React, { useState } from 'react';
-import Select from 'react-select';
-import style from './Select.module.css';
-
-const options = [
-  { value: 'Ruby on Rails', label: 'Ruby on Rails' },
-  { value: 'Nginx', label: 'Nginx' },
-  { value: 'Docker', label: 'Docker' },
-  { value: 'PostgreSQL', label: 'PostgreSQL' },
-  { value: 'Vue.js', label: 'Vue.js' },
-  { value: 'Typescript', label: 'Typescript' },
-  { value: 'ReactJ', label: 'ReactJ' },
-];
-
-const TagSelect = () => {
-  const [items, setItems] = useState(null);
-
-  const handleChange = (values) => {
-    const selectItems = values.map((value) => value);
-
-    setItems(selectItems);
-  };
-
-  const handleSubmit = () => {
-    const filterItems = JSON.stringify(items.map((item) => item.value));
-
-    alert(`Back-end: ${filterItems}`);
-
-    setItems('');
-  };
-
-  return (
-    <>
-      <section className={style.search}>
-        <div className="container">
-          <div className="row">
-            <div className="col-12">
-              <h2 className={style.search__title}>Найти специалиста по навыкам</h2>
-              <div className={style.search__box}>
-                <Select
-                  value={items}
-                  onChange={handleChange}
-                  isMulti
-                  name="colors"
-                  className={style.select}
-                  classNamePrefix={style.select}
-                  options={options}
-                />
-                <button onClick={handleSubmit} type="submit">
-                  Submit
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-    </>
-  );
-};
-
-export default TagSelect;

src/components/Select/TagSelect.js

@@ -0,0 +1,74 @@
+// import React, { useState, useRef } from 'react';
+// import Select from 'react-select';
+// import style from './TagSelect.module.css';
+
+// const options = [
+//   { value: 'Ruby on Rails', label: 'Ruby on Rails' },
+//   { value: 'Nginx', label: 'Nginx' },
+//   { value: 'Docker', label: 'Docker' },
+//   { value: 'PostgreSQL', label: 'PostgreSQL' },
+//   { value: 'Vue.js', label: 'Vue.js' },
+//   { value: 'Typescript', label: 'Typescript' },
+//   { value: 'ReactJ', label: 'ReactJ' },
+// ];
+
+// const TagSelect = (selectArr) => {
+//   console.log('selectArr', selectArr);
+//   const [items, setItems] = useState([]);
+
+//   const inputEl = useRef(null);
+
+//   const test = () => {
+//     console.log(inputEl);
+//     inputEl.current.select.setValue(selectArr.selectArr);
+//   };
+
+//   const handleChange = (values) => {
+//     console.log('values', values);
+//     const selectItems = values.filter((value) => value);
+
+//     setItems(selectItems);
+//   };
+
+//   const handleSubmit = () => {
+//     const filterItems = JSON.stringify(items.map((item) => item.value));
+
+//     alert(`Back-end: ${filterItems}`);
+
+//     setItems([]);
+//   };
+
+//   return (
+//     <>
+//       <section className={style.search}>
+//         <div className="container">
+//           <div className="row">
+//             <div className="col-12">
+//               <h2 className={style.search__title}>Найти специалиста по навыкам</h2>
+//               <div className={style.search__box}>
+//                 <Select
+//                   ref={inputEl}
+//                   value={items}
+//                   onChange={handleChange}
+//                   isMulti
+//                   name="tags"
+//                   className={style.select}
+//                   classNamePrefix={style.select}
+//                   options={options}
+//                 />
+//                 <button onClick={handleSubmit} type="submit">
+//                   Submit
+//                 </button>
+//                 <button onClick={test} type="submit">
+//                   Submit
+//                 </button>
+//               </div>
+//             </div>
+//           </div>
+//         </div>
+//       </section>
+//     </>
+//   );
+// };
+
+// export default TagSelect;

src/components/Sidebar/Sidebar.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import male from '../../../images/medium_male.png';
-import arrowLeft from '../../../images/arrow_left.png';
-import arrowRight from '../../../images/arrow_right.png';
+import male from '../../images/medium_male.png';
+import arrowLeft from '../../images/arrow_left.png';
+import arrowRight from '../../images/arrow_right.png';
 import style from './Sidebar.module.css';
 
 const Sidebar = () => {