reports create, refactoring

src/pages/FormPage.js

@@ -1,82 +1,99 @@
-import React, { useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { useHistory, useParams, Link } from 'react-router-dom';
-import { currentCandidate, selectCurrentCandidate, auth } from '../redux/outstaffingSlice';
-import SVG from 'react-inlinesvg';
-import { WithLogout } from '../hoc/withLogout';
-import Form from '../components/Form/Form';
-import { LEVELS, SKILLS } from '../components/constants/constants';
-import { fetchItemsForId } from '../server/server';
-import { Footer } from '../components/Footer/Footer';
+import React, { useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { useHistory, useParams, Link } from 'react-router-dom'
+import {
+  currentCandidate,
+  selectCurrentCandidate,
+  auth
+} from '../redux/outstaffingSlice'
+import SVG from 'react-inlinesvg'
+import { WithLogout } from '../hoc/withLogout'
+import Form from '../components/Form/Form'
+import { LEVELS, SKILLS } from '../components/constants/constants'
+import { fetchGet } from '../server/server'
+import { Footer } from '../components/Footer/Footer'
 
-import arrow from '../images/right-arrow.png';
-import rectangle from '../images/rectangle_secondPage.png';
-import telegramIcon from '../images/telegram-icon.svg';
+import arrow from '../images/right-arrow.png'
+import rectangle from '../images/rectangle_secondPage.png'
+import telegramIcon from '../images/telegram-icon.svg'
 
-import './formPage.scss';
-import { getRole } from '../redux/roleSlice';
+import './formPage.scss'
+import { getRole } from '../redux/roleSlice'
 
 const goBack = (history) => {
-    history.goBack();
-  };
-
-const FormPage = () => {
-    const params = useParams();
-    const history = useHistory();
-    const dispatch = useDispatch();
-    const candidate = useSelector(selectCurrentCandidate);
-    const role = useSelector(getRole);
-
-    if(!candidate.id) {
-        fetchItemsForId({ link: `${process.env.REACT_APP_API_URL}/api/profile/`, index: Number(params.id), history, role, logout: dispatch(auth(false))  }).then((el) =>
-            dispatch(currentCandidate(el))
-        );
-    }
-
-    return (
-        <WithLogout>
-        <div className='form-page'>
-            <div className='form-page__back'>
-                <div className='form-page__arrow' onClick={() => goBack(history)}>
-                    <div className='form-page__arrow-img'>
-                        <img src={arrow} alt="" />
-                    </div>
-                    <div className='form-page__back-to-candidate'>
-                        <span>Вернуться к кандидату</span>
-                    </div>
-                </div>
-            </div>
-            <div className='form-page__candidate'>
-                <div className='form-page__avatar'>
-                    <img src={candidate.photo} />
-                </div>
-                <div className='form-page__candidate-info'>
-                    <div className='form-page__position'>
-                        <span>{candidate.specification} {SKILLS[candidate.position_id]}, {LEVELS[candidate.level]}</span>
-                    </div>
-                    <div className='form-page__selected'>
-                        <img src={rectangle} />
-                        <span>Выбранный кандидат</span>
-                    </div>
-                </div>
-            </div>
-            <div className='form-page__interview'>
-                <div className='form-page__form'><Form /></div>
-                <div className='form-page__separator'>
-                    <div className='form-page__line'></div>
-                    <div className='form-page__option'>или</div>
-                </div>
-                <div className='form-page__telegram'>
-                    <div className='form-page__telegram-text'>Заявка на собеседование через телеграм</div>
-                    <div className='form-page__telegram-icon'>
-                       <a href='https://t.me/st0kir' target='_blank'><SVG src={telegramIcon} /></a>
-                    </div>
-                </div>
-            </div>
-            <Footer />
-        </div>
-        </WithLogout>
-    )
+  history.goBack()
 }
 
-export default FormPage;
+const FormPage = () => {
+  const params = useParams()
+  const history = useHistory()
+  const dispatch = useDispatch()
+  const candidate = useSelector(selectCurrentCandidate)
+  const role = useSelector(getRole)
+
+  if (!candidate.id) {
+    fetchGet({
+      link: `${process.env.REACT_APP_API_URL}/api/profile/`,
+      params: Number(params.id),
+      history,
+      role,
+      logout: () => dispatch(auth(false))
+    }).then((el) => dispatch(currentCandidate(el)))
+  }
+
+  return (
+    <WithLogout>
+      <div className='form-page'>
+        <div className='form-page__back'>
+          <div className='form-page__arrow' onClick={() => goBack(history)}>
+            <div className='form-page__arrow-img'>
+              <img src={arrow} alt='' />
+            </div>
+            <div className='form-page__back-to-candidate'>
+              <span>Вернуться к кандидату</span>
+            </div>
+          </div>
+        </div>
+        <div className='form-page__candidate'>
+          <div className='form-page__avatar'>
+            <img src={candidate.photo} />
+          </div>
+          <div className='form-page__candidate-info'>
+            <div className='form-page__position'>
+              <span>
+                {candidate.specification} {SKILLS[candidate.position_id]},{' '}
+                {LEVELS[candidate.level]}
+              </span>
+            </div>
+            <div className='form-page__selected'>
+              <img src={rectangle} />
+              <span>Выбранный кандидат</span>
+            </div>
+          </div>
+        </div>
+        <div className='form-page__interview'>
+          <div className='form-page__form'>
+            <Form />
+          </div>
+          <div className='form-page__separator'>
+            <div className='form-page__line'></div>
+            <div className='form-page__option'>или</div>
+          </div>
+          <div className='form-page__telegram'>
+            <div className='form-page__telegram-text'>
+              Заявка на собеседование через телеграм
+            </div>
+            <div className='form-page__telegram-icon'>
+              <a href='https://t.me/st0kir' target='_blank'>
+                <SVG src={telegramIcon} />
+              </a>
+            </div>
+          </div>
+        </div>
+        <Footer />
+      </div>
+    </WithLogout>
+  )
+}
+
+export default FormPage

src/pages/SingleReportPage.js

@@ -4,11 +4,12 @@ import arrowLeft from '../images/right-arrow.png'
 
 import SVG from 'react-inlinesvg'
 
-import prevDateArrowIcon from '../images/prevDateArrow.svg'
-import nextDateArrowIcon from '../images/nextDateArrow.svg'
+import dateArrowIcon from '../images/dateArrow.svg'
+import calendarIcon from '../images/calendar.svg'
+
+import { TaskItem } from '../components/TaskItem/TaskItem'
 
 import './singleReportPage.scss'
-import { TaskItem } from '../components/TaskItem/TaskItem'
 
 const tasks = [
   {
@@ -41,16 +42,16 @@ const SingleReportPage = () => {
           <div className='single-report-page__title-date'>
             <div className='single-report-page__title-date--prev'>
               <button>
-                <SVG src={prevDateArrowIcon} />
+                <SVG src={dateArrowIcon} />
               </button>
             </div>
             <div className='single-report-page__title-date--actual'>
-              <img src='' />
-              <p></p>
+              <SVG src={calendarIcon} />
+              <p>15 июня</p>
             </div>
             <div className='single-report-page__title-date--next single-report-page__title-date--enabled'>
               <button>
-                <SVG src={nextDateArrowIcon} />
+                <SVG src={dateArrowIcon} />
               </button>
             </div>
           </div>

src/pages/singleReportPage.scss

@@ -9,9 +9,9 @@
     &-text {
       margin-left: 3.1rem;
       color: #000000;
-      font-family: 'GT Eesti Pro Display - Thin';
+      font-family: 'GT Eesti Pro Display';
       font-size: 18px;
-      font-weight: 400;
+      font-weight: 300;
       letter-spacing: normal;
       line-height: 36px;
       text-align: left;
@@ -40,6 +40,37 @@
       display: flex;
       justify-content: flex-start;
       align-items: center;
+
+      &--prev {
+        transform: rotateZ(180deg);
+      }
+
+      &--actual {
+        width: 125px;
+        height: 42px;
+        box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
+        border-radius: 5px;
+        border: 1px solid #c4c4c4;
+        background-color: #f0f7e0;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        margin: 0 65px;
+
+        p {
+          margin-left: 10px;
+          margin-bottom: 0;
+          color: #000000;
+          font-family: "GT Eesti Pro Display";
+          font-size: 13px;
+          font-weight: 300;
+          font-style: normal;
+          letter-spacing: normal;
+          line-height: normal;
+        }
+      }
     }
 
     button {
@@ -47,7 +78,7 @@
       outline: none;
       width: 31px;
       height: 31px;
-      background-color: #f6f6f6;
+      background-color: #54b611;
       border-radius: 50%;
       display: flex;
       justify-content: center;