reports create, refactoring

src/components/OutstaffingBlock/OutstaffingBlock.js

@@ -0,0 +1,141 @@
+import React from 'react'
+import OutsideClickHandler from 'react-outside-click-handler'
+import { useDispatch, useSelector } from 'react-redux'
+import {
+  selectItems,
+  selectedItems,
+  filteredCandidates,
+  auth
+} from '../../redux/outstaffingSlice'
+
+import { fetchGet } from '../../server/server'
+import { useHistory } from 'react-router-dom'
+import { getRole } from '../../redux/roleSlice'
+
+import './outstaffingBlock.scss'
+
+const handlePositionClick = ({
+  dispatch,
+  positionId,
+  isSelected,
+  onSelect,
+  history,
+  role
+}) => {
+  if (isSelected) {
+    fetchGet({
+      link: `${process.env.REACT_APP_API_URL}/api/profile?limit=`,
+      params: 4,
+      history,
+      role,
+      logout: () => dispatch(auth(false))
+    }).then((profileArr) => {
+      dispatch(filteredCandidates(profileArr))
+      dispatch(selectedItems([]))
+      onSelect(positionId)
+    })
+  } else {
+    fetchGet({
+      link: `${process.env.REACT_APP_API_URL}/api/profile?position_id=`,
+      params: positionId,
+      history,
+      role,
+      logout: () => dispatch(auth(false))
+    }).then((el) => {
+      dispatch(filteredCandidates(el))
+      dispatch(selectedItems([]))
+      onSelect(positionId)
+    })
+  }
+}
+
+const OutstaffingBlock = ({
+  dataTags = [],
+  selected,
+  img,
+  header,
+  positionId,
+  isSelected,
+  onSelect
+}) => {
+  const history = useHistory()
+  const role = useSelector(getRole)
+
+  const dispatch = useDispatch()
+
+  const itemsArr = useSelector(selectItems)
+
+  const handleBlockClick = (item, id) => {
+    if (!itemsArr.find((el) => item === el.value)) {
+      dispatch(selectedItems([...itemsArr, { id, value: item, label: item }]))
+    }
+  }
+
+  let classes
+
+  dataTags.forEach((el) => {
+    if (el.name === 'skills_back') {
+      classes = 'back'
+    } else if (el.name === 'skills_design') {
+      classes = 'des'
+    } else if (el.name === 'skills_front') {
+      classes = 'front'
+    }
+  })
+
+  return (
+    <OutsideClickHandler
+      onOutsideClick={() => {
+        isSelected && onSelect(null)
+      }}
+    >
+      <div
+        className={`outstaffing-block${
+          isSelected ? ' outstaffing-block__selected' : ''
+        }`}
+      >
+        <div
+          className={`outstaffing-block__img ${
+            selected ? ' outstaffing-block__border' : ''
+          }`}
+          onClick={() =>
+            handlePositionClick({
+              dispatch,
+              positionId,
+              isSelected,
+              onSelect,
+              history,
+              role
+            })
+          }
+        >
+          <h3>{header}</h3>
+          <img className={classes} src={img} alt='img' />
+        </div>
+        <div
+          className={`${
+            selected
+              ? 'outstaffing-block__mobile--block'
+              : 'outstaffing-block__mobile--none'
+          }`}
+        >
+          <p className='outstaffing-block__text'># Популярный стек</p>
+          {dataTags && (
+            <ul className='outstaffing-block__items'>
+              {dataTags.map((item) => (
+                <li
+                  key={item.id}
+                  onClick={() => handleBlockClick(item.value, item.id)}
+                >
+                  {item.value}
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </div>
+    </OutsideClickHandler>
+  )
+}
+
+export default OutstaffingBlock

src/components/OutstaffingBlock/outstaffingBlock.scss

@@ -0,0 +1,103 @@
+.outstaffing-block__selected .outstaffing-block__img {
+  background-color: #52b70999;
+  color: #f9f9f9;
+}
+.outstaffing-block {
+  margin-top: 60px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  & > div {
+    margin-top: 60px;
+
+    & > ul {
+      padding-left: 0;
+    }
+  }
+
+  & > p {
+    font-family: 'GT Eesti Pro Display';
+    font-size: 1.2em;
+    font-weight: 300;
+    font-style: normal;
+    letter-spacing: normal;
+    line-height: 36px;
+    text-align: left;
+    margin-bottom: 0;
+  }
+
+  &__img {
+    min-width: 260px;
+    min-height: 120px;
+    background-color: #f9f9f9;
+    border-radius: 20px;
+    position: relative;
+
+    h3 {
+      position: absolute;
+      right: 25%;
+      top: 40%;
+      font-family: 'GT Eesti Pro Display';
+      font-size: 18px;
+      font-weight: 400;
+      font-style: normal;
+      letter-spacing: normal;
+      line-height: normal;
+      text-align: left;
+    }
+
+    img {
+      position: absolute;
+    }
+  }
+
+  &__mobile--block {
+    display: block;
+    animation: fadeInFromNone 0.5s ease-out;
+  }
+
+  &__border {
+    border: 2px solid #cdeaba;
+  }
+
+  &__items {
+    li {
+      font-family: 'GT Eesti Pro Display';
+      font-size: 1.8em;
+      font-weight: 100;
+      font-style: normal;
+      letter-spacing: normal;
+      line-height: 36px;
+      text-align: left;
+      list-style: none;
+      cursor: pointer;
+    }
+  }
+}
+
+@media (max-width: 575.98px) {
+  .outstaffing-block__mobile--none {
+    display: none;
+  }
+}
+
+@media (max-width: 1199px) {
+  .outstaffing-block {
+    margin-top: 0;
+
+    & > div {
+      margin-top: 32px;
+    }
+  }
+}
+
+@media (max-width: 575.98px) {
+  .outstaffing-block {
+    margin-top: 40px;
+
+    &____text {
+      display: none;
+    }
+  }
+}