apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Moving all images to assets

Browse Source
This commit is contained in:
MaxOvs19
2023-05-25 16:42:37 +03:00
parent 0667b435ac
commit 38f776019c
219 changed files with 2255 additions and 1954 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/AuthBox/AuthBox.jsx
View File

@ -12,7 +12,7 @@ import ModalErrorLogin from "../UI/ModalErrorLogin/ModalErrorLogin";
import { Loader } from "../Loader/Loader";
import { apiRequest } from "../../api/request";
import ellipse from "../../images/ellipse.png";
import ellipse from "../../assets/icons/ellipse.png";
import "./authBox.scss";

2
src/components/AuthHeader/AuthHeader.jsx
View File

@ -2,7 +2,7 @@ import React from "react";
import { NavLink } from "react-router-dom";
import { scrollToForm } from "../../helper";
import userIcon from "../../images/userIcon.svg";
import userIcon from "../../assets/icons/userIcon.svg";
import "./authHeader.scss";

2
src/components/Calendar/Calendar.jsx
View File

@ -9,7 +9,7 @@ import { LogoutButton } from "../LogoutButton/LogoutButton";
import { urlForLocal } from "../../helper";
import { selectCurrentCandidate } from "../../redux/outstaffingSlice";
import rectangle from "../../images/rectangle_secondPage.png";
import rectangle from "../../assets/images/rectangle_secondPage.png";
import "./calendar.scss";

6
src/components/Calendar/CalendarComponent.jsx
View File

@ -1,9 +1,9 @@
import React, { useState, useEffect } from "react";
import { calendarHelper, currentMonthAndDay } from "./calendarHelper";
import ellipse from "../../images/ellipse.png";
import rectangle from "../../images/rectangle__calendar.png";
import calendarIcon from "../../images/calendar.svg";
import ellipse from "../../assets/icons/ellipse.png";
import rectangle from "../../assets/images/rectangle__calendar.png";
import calendarIcon from "../../assets/icons/calendar.svg";
import moment from "moment";
import "moment/locale/ru";

12
src/components/Candidate/Candidate.jsx
View File

@ -17,12 +17,12 @@ import {
import { apiRequest } from "../../api/request";
import { createMarkup } from "../../helper";
import gitImgItem from "../../images/gitItemImg.svg";
import rectangle from "../../images/rectangle_secondPage.png";
import front from "../../images/front-end.webp";
import back from "../../images/back-end.webp";
import design from "../../images/design.webp";
import rightArrow from "../../images/arrowRight.svg";
import gitImgItem from "../../assets/icons/gitItemImg.svg";
import rectangle from "../../assets/images/rectangle_secondPage.png";
import front from "../../assets/images/partnerProfile/front-end.webp";
import back from "../../assets/images/partnerProfile/back-end.webp";
import design from "../../assets/images/partnerProfile/design.webp";
import rightArrow from "../../assets/icons/arrows/arrowRight.svg";
import { LEVELS, SKILLS } from "../../constants/constants";

58
src/components/Candidate/candidate.scss
View File

@ -156,41 +156,6 @@
}
}
//@media (max-width: 575.98px) {
// .candidate {
// &__title {
// h2 {
// font-size: 5em;
// line-height: normal;
// }
// }
//
// &__arrow {
// margin-bottom: 40px;
//
// &-img {
// img {
// cursor: pointer;
// }
// }
//
// &-sp {
// span {
// margin-left: 40px;
// margin-right: 120px;
// font-family: 'GT Eesti Pro Display', sans-serif;
// font-size: 1.8em;
// font-weight: 100;
// font-style: normal;
// letter-spacing: normal;
// line-height: 36px;
// text-align: left;
// }
// }
// }
// }
//}
@media (max-width: 375.98px) {
.candidate {
&__title {
@ -216,29 +181,6 @@
@media (max-width: 575.98px) {
.candidate {
//&__header {
// display: flex;
// flex-direction: column;
// margin-left: 0;
// margin-top: 40px;
//}
//&__main {
// &-description {
// h2 {
// font-size: 3.2em;
// text-align: center;
// position: absolute;
// top: -410px;
// left: 0;
// }
//
// img {
// display: none;
// }
// }
//}
&__btn {
display: block;
width: 221px;

2
src/components/CardControl/CardControl.jsx
View File

@ -1,7 +1,7 @@
import React from "react";
import { Link } from "react-router-dom";
import rightArrow from "../../images/arrowRight.svg";
import rightArrow from "../../assets/icons/arrows/arrowRight.svg";
import "./CardControl.scss";

2
src/components/CategoriesItem/CategoriesItem.jsx
View File

@ -1,7 +1,7 @@
import React from "react";
import { Link } from "react-router-dom";
import rightArrow from "../../images/arrowRight.svg";
import rightArrow from "../../assets/icons/arrows/arrowRight.svg";
import "./categoriesItem.scss";

4
src/components/Description/Description.jsx
View File

@ -9,8 +9,8 @@ import { selectProfiles } from "../../redux/outstaffingSlice";
import { urlForLocal } from "../../helper";
import rectangle from "../../images/rectangle_secondPage.png";
import cursorImg from "../../images/cursorImg.svg";
import rectangle from "../../assets/images/rectangle_secondPage.png";
import cursorImg from "../../assets/icons/cursorImg.svg";
import "./description.scss";

8
src/components/Footer/Footer.jsx
View File

@ -1,9 +1,9 @@
import React from "react";
import logo from "../../images/LogoITguild.svg";
import vk from "../../images/vkLogo.svg";
import tg from "../../images/tgFooter.svg";
import email from "../../images/emailLogo.svg";
import logo from "../../assets/images/logo/LogoITguild.svg";
import vk from "../../assets/icons/vkLogo.svg";
import tg from "../../assets/icons/tgFooter.svg";
import email from "../../assets/icons/emailLogo.svg";
import "./footer.scss";

2
src/components/FrequentlyAskedQuestionsItem/FrequentlyAskedQuestionsItem.jsx
View File

@ -1,7 +1,7 @@
import React from "react";
import { Link } from "react-router-dom";
import questionIcon from "./../../images/faq/question.svg";
import questionIcon from "./../../assets/images/faq/question.svg";
import "./FrequentlyAskedQuestionsItem.scss";

2
src/components/Navigation/Navigation.jsx
View File

@ -5,7 +5,7 @@ import { apiRequest } from "../../api/request";
import { useDispatch, useSelector } from "react-redux";
import { getProfileInfo, setProfileInfo } from "../../redux/outstaffingSlice";
import avatarMok from "../../pages/PartnerTreaties/Images/avatarMok.png";
import avatarMok from "../../assets/images/avatarMok.png";
export const Navigation = () => {
const dispatch = useDispatch();

6
src/components/Outstaffing/Outstaffing.jsx
View File

@ -9,9 +9,9 @@ import {
setPositionId,
} from "../../redux/outstaffingSlice";
import front from "../../images/front-end.webp";
import back from "../../images/back-end.webp";
import design from "../../images/design.webp";
import front from "../../assets/images/partnerProfile/front-end.webp";
import back from "../../assets/images/partnerProfile/back-end.webp";
import design from "../../assets/images/partnerProfile/design.webp";
import "./outstaffing.scss";

2
src/components/ProfileBreadcrumbs/profileBreadcrumbs.scss
View File

@ -32,7 +32,7 @@
&:after {
content: "";
background-image: url("../../images/BreadcrumbsArrow.png");
background-image: url("../../assets/icons/arrows/BreadcrumbsArrow.png");
background-repeat: no-repeat;
width: 7px;
height: 10px;

7
src/components/ProfileCalendar/ProfileCalendarComponent.jsx
View File

@ -15,9 +15,10 @@ import {
} from "../Calendar/calendarHelper";
import ShortReport from "../ShortReport/ShortReport";
import arrow from "../../images/arrowCalendar.png";
import rectangle from "../../images/rectangle__calendar.png";
import calendarIcon from "../../images/calendar.svg";
import arrow from "../../assets/icons/arrows/arrowCalendar.png";
import rectangle from "../../assets/images/rectangle__calendar.png";
import calendarIcon from "../../assets/icons/calendar.svg";
import moment from "moment";
import "moment/locale/ru";

8
src/components/ProjectTiket/ProjectTiket.jsx
View File

@ -7,10 +7,10 @@ import { deleteProject, modalToggle } from "../../redux/projectsTrackerSlice";
import { ModalSelect } from "../UI/ModalSelect/ModalSelect";
import TrackerModal from "../UI/TrackerModal/TrackerModal";
import link from "../../images/link.svg";
import archiveSet from "../../images/archive.svg";
import del from "../../images/delete.svg";
import edit from "../../images/edit.svg";
import link from "../../assets/icons/link.svg";
import archiveSet from "../../assets/icons/archive.svg";
import del from "../../assets/icons/delete.svg";
import edit from "../../assets/icons/edit.svg";
import "./projectTiket.scss";

45
src/components/ProtectedRoute/ProtectedRoute.js
View File

@ -1,23 +1,30 @@
import React from 'react';
import { useSelector } from 'react-redux'
import { Route, Redirect } from 'react-router-dom';
import { selectAuth } from '../../redux/outstaffingSlice';
import React from "react";
import { useSelector } from "react-redux";
import { Route, Redirect } from "react-router-dom";
import { selectAuth } from "../../redux/outstaffingSlice";
export const ProtectedRoute = ({ component: Component, ...rest }) => {
const isAuth = useSelector(selectAuth)
const existingToken = localStorage.getItem('auth_token')
const expiresAt = localStorage.getItem('access_token_expired_at')
const isAuth = useSelector(selectAuth);
const existingToken = localStorage.getItem("auth_token");
const expiresAt = localStorage.getItem("access_token_expired_at");
const isTokenAlive = !isAuth && (existingToken && expiresAt && new Date(expiresAt).getTime() > (new Date()).getTime());
const isTokenAlive =
!isAuth &&
existingToken &&
expiresAt &&
new Date(expiresAt).getTime() > new Date().getTime();
return (
<Route
{...rest}
render={props =>
// ( isAuth || isTokenAlive) ? (
<Component {...props} />
// ) : <Redirect to='/auth' />
}
/>
);
};
return (
<Route
{...rest}
render={
(props) => (
// ( isAuth || isTokenAlive) ? (
<Component {...props} />
)
// ) : <Redirect to='/auth' />
}
/>
);
};

8
src/components/ReportForm/ReportForm.jsx
View File

@ -19,10 +19,10 @@ import { apiRequest } from "../../api/request";
import { Navigation } from "../Navigation/Navigation";
import { getReportDate } from "../../redux/reportSlice";
import calendarIcon from "../../images/calendar.svg";
import ellipse from "../../images/ellipse.png";
import remove from "../../images/remove.svg";
import arrow from "../../images/left-arrow.png";
import calendarIcon from "../../assets/icons/calendar.svg";
import ellipse from "../../assets/icons/ellipse.png";
import remove from "../../assets/icons/remove.svg";
import arrow from "../../assets/icons/arrows/left-arrow.png";
import "./reportForm.scss";
import "react-datepicker/dist/react-datepicker.css";

33
src/components/ReportForm/reportForm.scss
View File

@ -1,5 +1,5 @@
.report-form {
background: #F1F1F1;
background: #f1f1f1;
height: 100%;
min-height: 100vh;
font-family: "LabGrotesque", sans-serif;
@ -14,7 +14,7 @@
}
&__content {
background: #FFFFFF;
background: #ffffff;
border-radius: 12px;
margin: 25px 0 80px;
padding: 50px 40px;
@ -47,10 +47,9 @@
}
&__block-title {
h2 {
color: #52B709;
font-family: 'GT Eesti Pro Display';
color: #52b709;
font-family: "GT Eesti Pro Display";
font-size: 3.3em;
font-weight: 700;
font-style: normal;
@ -64,7 +63,7 @@
}
h3 {
font-family: 'GT Eesti Pro Display';
font-family: "GT Eesti Pro Display";
font-size: 2.1em;
font-weight: 400;
font-style: normal;
@ -90,7 +89,7 @@
background-color: #ffffff;
display: flex;
align-items: center;
font-family: 'GT Eesti Pro Display';
font-family: "GT Eesti Pro Display";
font-size: 13px;
font-weight: 700;
font-style: normal;
@ -106,7 +105,6 @@
}
&__task {
&-number {
height: 14px;
color: #282828;
@ -126,7 +124,7 @@
& > span {
color: #18586e;
font-family: 'GT Eesti Pro Display';
font-family: "GT Eesti Pro Display";
font-size: 2em;
font-weight: 500;
font-style: normal;
@ -150,7 +148,7 @@
margin-left: 50px;
p {
font-family: 'GT Eesti Pro Display';
font-family: "GT Eesti Pro Display";
font-size: 1.5em;
font-style: normal;
letter-spacing: normal;
@ -206,7 +204,6 @@
margin-left: 20px;
&--description {
.checkTask {
border-color: #fc0000;
}
@ -282,17 +279,17 @@
display: flex;
align-items: center;
justify-content: center;
color: #4CAF50;
color: #4caf50;
width: 38px;
height: 38px;
background: #E8E8E8;
background: #e8e8e8;
margin-bottom: 0;
border-radius: 50px;
font-size: 32px;
}
span {
font-family: 'GT Eesti Pro Display';
font-family: "GT Eesti Pro Display";
font-size: 1.5em;
font-style: normal;
letter-spacing: normal;
@ -334,7 +331,7 @@
span {
color: #18586e;
font-family: 'GT Eesti Pro Display';
font-family: "GT Eesti Pro Display";
font-size: 2em;
font-weight: 500;
font-style: normal;
@ -371,7 +368,7 @@
rgba(255, 255, 255, 0) 100%
);
color: #ffffff;
font-family: 'Muller';
font-family: "Muller";
font-size: 1.6em;
letter-spacing: normal;
text-align: center;
@ -379,7 +376,7 @@
}
&-text {
font-family: 'GT Eesti Pro Display';
font-family: "GT Eesti Pro Display";
font-size: 1.9em;
font-weight: 600;
font-style: normal;
@ -416,7 +413,7 @@
margin-bottom: 28px;
span {
font-family: 'GT Eesti Pro Display';
font-family: "GT Eesti Pro Display";
font-size: 2em;
font-weight: 700;
font-style: normal;

4
src/components/SideBar/SideBar.jsx
View File

@ -1,8 +1,8 @@
import React, { useState } from "react";
import { Link } from "react-router-dom";
import arrow from "../../images/sideBarArrow.svg";
import LogoITguild from "../../images/LogoITguild.svg";
import arrow from "../../assets/icons/sideBarArrow.svg";
import LogoITguild from "../../assets/images/logo/LogoITguild.svg";
import "./sidebar.scss";

13
src/components/SkillSection/SkillSection.js → src/components/SkillSection/SkillSection.jsx
View File

@ -1,9 +1,10 @@
import React from 'react'
import './skillSection.scss'
import React from "react";
import "./skillSection.scss";
const SkillSection = ({ skillsArr }) => {
return (
<div className='skill-section'>
<div className="skill-section">
<h3>Навыки:</h3>
<ul>
{skillsArr &&
@ -12,7 +13,7 @@ const SkillSection = ({ skillsArr }) => {
))}
</ul>
</div>
)
}
);
};
export default SkillSection
export default SkillSection;

3
src/components/SliderWorkers/SliderWorkers.jsx
View File

@ -1,7 +1,8 @@
import React, { useState } from "react";
import Slider from "react-slick";
import { Link } from "react-router-dom";
import mockWorker from "../../images/mokPerson.png";
import mockWorker from "../../assets/images/mock/mokPerson.png";
import "./sliderWorkers.scss";
import "slick-carousel/slick/slick.css";

4
src/components/SliderWorkers/sliderWorkers.scss
View File

@ -91,7 +91,7 @@
border-radius: 44px;
&:before {
content: url("../../images/arrowViewReport.svg");
content: url("../../assets/icons/arrows/arrowViewReport.svg");
}
&:focus {
@ -113,7 +113,7 @@
border-radius: 44px;
&:before {
content: url("../../images/ArrovLeftSlider.png");
content: url("../../assets/icons/arrows/ArrovLeftSlider.png");
}
&:focus {

1
src/components/StarRating/StarRating.js
View File

@ -1,4 +1,5 @@
import React, { useEffect, useState } from "react";
import "./StarRating.scss";
const StarRating = ({

2
src/components/UI/CardArticle/CardArticle.jsx
View File

@ -1,7 +1,7 @@
import React from "react";
import { Link } from "react-router-dom";
import cardCalendar from "../../../images/cardCalendar.svg";
import cardCalendar from "../../../assets/icons/cardCalendar.svg";
import "./cardArticle.scss";

4
src/components/UI/FreeDevelopers/FreeDevelopers.jsx
View File

@ -8,8 +8,8 @@ import { Link } from "react-router-dom";
import { scrollToForm } from "../../../helper";
import { ProfileBreadcrumbs } from "../../ProfileBreadcrumbs/ProfileBreadcrumbs";
import mockWorker from "../../../images/mokPerson.png";
import arrow from "../../../images/arrow_left.png";
import mockWorker from "../../../assets/images/mock/mokPerson.png";
import arrow from "../../../assets/icons/arrows/arrow_left.png";
import "./freeDevelopers.scss";

8
src/components/UI/ModalAspt/ModalAspt.jsx
View File

@ -3,10 +3,10 @@ import React, { useState } from "react";
import { Link } from "react-router-dom";
import ModalLayout from "../ModalLayout/ModalLayout";
import avatar from "../../../images/mokPerson.png";
import logoTg from "../../../images/tgLogo.svg";
import arrow from "../../../images/left-arrow.png";
import interview from "../../../images/interviewLogo.svg";
import avatar from "../../../assets/images/mock/mokPerson.png";
import logoTg from "../../../assets/icons/tgLogo.svg";
import arrow from "../../../assets/icons/arrows/left-arrow.png";
import interview from "../../../assets/images/logo/interviewLogo.svg";
import "./modalAspt.scss";

6
src/components/UI/ModalRegistration/ModalRegistration.jsx
View File

@ -1,8 +1,8 @@
import React from "react";
import telegramLogo from "../../../images/tgLogo.svg";
import doc from "../../../images/doc.svg";
import anyMoment from "../../../images/anyMoment.svg";
import telegramLogo from "../../../assets/icons/tgLogo.svg";
import doc from "../../../assets/icons/doc.svg";
import anyMoment from "../../../assets/icons/anyMoment.svg";
import "./modalRegistration.scss";

24
src/components/UI/ModalTicket/ModalTicket.jsx
View File

@ -11,18 +11,18 @@ import {
} from "../../../redux/projectsTrackerSlice";
import { getCorrectDate } from "../../../components/Calendar/calendarHelper";
import category from "../../../images/category.svg";
import watch from "../../../images/watch.svg";
import file from "../../../images/fileModal.svg";
import arrow from "../../../images/arrowStart.png";
import link from "../../../images/link.svg";
import archive from "../../../images/archive.svg";
import del from "../../../images/delete.svg";
import edit from "../../../images/edit.svg";
import send from "../../../images/send.svg";
import plus from "../../../images/plus.svg";
import fullScreen from "../../../images/inFullScreen.svg";
import close from "../../../images/closeProjectPersons.svg";
import category from "../../../assets/icons/category.svg";
import watch from "../../../assets/icons/watch.svg";
import file from "../../../assets/icons/fileModal.svg";
import arrow from "../../../assets/icons/arrows/arrowStart.png";
import link from "../../../assets/icons/link.svg";
import archive from "../../../assets/icons/archive.svg";
import del from "../../../assets/icons/delete.svg";
import edit from "../../../assets/icons/edit.svg";
import send from "../../../assets/icons/send.svg";
import plus from "../../../assets/icons/plus.svg";
import fullScreen from "../../../assets/icons/arrows/inFullScreen.svg";
import close from "../../../assets/icons/closeProjectPersons.svg";
import "./ModalTicket.scss";

30
src/components/UI/TicketFullScreen/TicketFullScreen.jsx
View File

@ -21,21 +21,21 @@ import { apiRequest } from "../../../api/request";
import { urlForLocal } from "../../../helper";
import { getCorrectDate } from "../../Calendar/calendarHelper";
import project from "../../../images/trackerProject.svg";
import watch from "../../../images/watch.svg";
import file from "../../../images/fileModal.svg";
import send from "../../../images/send.svg";
import arrow2 from "../../../images/arrowStart.png";
import plus from "../../../images/plus.svg";
import tasks from "../../../images/trackerTasks.svg";
import archive from "../../../images/archiveTracker.svg";
import selectArrow from "../../../images/select.svg";
import arrow from "../../../images/arrowCalendar.png";
import link from "../../../images/link.svg";
import archive2 from "../../../images/archive.svg";
import del from "../../../images/delete.svg";
import edit from "../../../images/edit.svg";
import close from "../../../images/closeProjectPersons.svg";
import project from "../../../assets/icons/trackerProject.svg";
import watch from "../../../assets/icons/watch.svg";
import file from "../../../assets/icons/fileModal.svg";
import send from "../../../assets/icons/send.svg";
import arrow2 from "../../../assets/icons/arrows/arrowStart.png";
import plus from "../../../assets/icons/plus.svg";
import tasks from "../../../assets/icons/trackerTasks.svg";
import archive from "../../../assets/icons/archiveTracker.svg";
import selectArrow from "../../../assets/icons/arrows/select.svg";
import arrow from "../../../assets/icons/arrows/arrowCalendar.png";
import link from "../../../assets/icons/link.svg";
import archive2 from "../../../assets/icons/archive.svg";
import del from "../../../assets/icons/delete.svg";
import edit from "../../../assets/icons/edit.svg";
import close from "../../../assets/icons/closeProjectPersons.svg";
import "./ticketFullScreen.scss";

4
src/components/UI/TicketFullScreen/ticketFullScreen.scss
View File

@ -11,10 +11,6 @@
}
}
// .modal-tiket__content .content {
// width: 70%;
// }
.content-tabs {
padding-bottom: 0;
}

2
src/components/UI/TrackerModal/TrackerModal.jsx
View File

@ -16,7 +16,7 @@ import {
addPersonToProject,
} from "../../../redux/projectsTrackerSlice";
import arrowDown from "../../../images/selectArrow.png";
import arrowDown from "../../../assets/icons/arrows/selectArrow.png";
import "./trackerModal.scss";

24
src/components/features/Candidate-lk/HeadBottom.js
View File

@ -1,14 +1,16 @@
import React from 'react'
import medium_male from "../../../images/medium_male.png"
import React from "react";
import medium_male from "../../../assets/images/medium_male.png";
export const HeadBottom = () => {
return (
<div className="bottom-head">
<div className="bottom-head__container">
<div className="bottom-head__title">Мои тесты</div>
<div className="bottom-head__img"><img src={medium_male} alt="" /></div>
</div>
</div>
)
}
<div className="bottom-head">
<div className="bottom-head__container">
<div className="bottom-head__title">Мои тесты</div>
<div className="bottom-head__img">
<img src={medium_male} alt="" />
</div>
</div>
</div>
);
};

48
src/components/features/quiz/AlertResult.js
View File

@ -1,21 +1,33 @@
import React from 'react'
import suucessIcon from '../../../images/quiz/success.png'
import React from "react";
import suucessIcon from "../../../assets/images/quiz/success.png";
export const AlertResult = () => {
const successTest = false;
const successTest = false
return (
<div className='alert-result'>
<div className="alert-result__column">
<img src={suucessIcon} alt="suucessIcon" className="alert-result__icon" />
<div className='alert-result__text' style={{color: successTest ? '#52B709' : '#5B6871'}}>
Благодарим Вас за прохождение теста "Junior разработчик". Ваши результаты проверены, готовы пригласить Вас в команду
</div>
</div>
{!successTest && <div className="alert-result__column">
<button className="alert-result__button quiz-btn">Запросить еще попытку</button>
</div>}
</div>
)
}
return (
<div className="alert-result">
<div className="alert-result__column">
<img
src={suucessIcon}
alt="suucessIcon"
className="alert-result__icon"
/>
<div
className="alert-result__text"
style={{ color: successTest ? "#52B709" : "#5B6871" }}
>
Благодарим Вас за прохождение теста "Junior разработчик". Ваши
результаты проверены, готовы пригласить Вас в команду
</div>
</div>
{!successTest && (
<div className="alert-result__column">
<button className="alert-result__button quiz-btn">
Запросить еще попытку
</button>
</div>
)}
</div>
);
};

51
src/components/features/quiz/BlockCompletedTest.js
View File

@ -1,24 +1,31 @@
import React from 'react'
import compltedImage from "../../../images/quiz/compltedImage.png"
import { Link } from 'react-router-dom'
import React from "react";
import { Link } from "react-router-dom";
import compltedImage from "../../../assets/images/quiz/compltedImage.png";
export const BlockCompletedTest = () => {
const id = localStorage.getItem('id')
return (
<div className='block-completed-test'>
<div className="block-completed-test__container">
<div className="block-completed-test__img">
<img src={compltedImage} alt="" />
</div>
<div className="block-completed-test__title">
Спасибо! <br />
Ваши ответы получены
</div>
<div className="block-completed-test__text">
В течении дня в вашем кабинете будет отображены данные о прохождении тестирования
</div>
<Link to={'/profile-candidate/' + id} className="block-completed-test__button quiz-btn">В кабинет</Link>
</div>
</div>
)
}
const id = localStorage.getItem("id");
return (
<div className="block-completed-test">
<div className="block-completed-test__container">
<div className="block-completed-test__img">
<img src={compltedImage} alt="" />
</div>
<div className="block-completed-test__title">
Спасибо! <br />
Ваши ответы получены
</div>
<div className="block-completed-test__text">
В течении дня в вашем кабинете будет отображены данные о прохождении
тестирования
</div>
<Link
to={"/profile-candidate/" + id}
className="block-completed-test__button quiz-btn"
>
В кабинет
</Link>
</div>
</div>
);
};

34
src/components/features/quiz/Card-introduction.js
View File

@ -1,19 +1,19 @@
import React from 'react'
import questionIcon from "../../../images/question.png"
import './quiz.scss'
import React from "react";
import questionIcon from "../../../assets/images/question.png";
import "./quiz.scss";
export const CardIntroduction = ({ title, description }) => {
return (
<div className="card-introduction">
<div className="card-introduction__title">{title}</div>
<div className="card-introduction__body">
<div className="card-introduction__icon">
<img src={questionIcon} alt="" />
</div>
<div className="card-introduction__text">
{description}
</div>
</div>
</div>
)
}
return (
<div className="card-introduction">
<div className="card-introduction__title">{title}</div>
<div className="card-introduction__body">
<div className="card-introduction__icon">
<img src={questionIcon} alt="" />
</div>
<div className="card-introduction__text">{description}</div>
</div>
</div>
);
};

2
src/components/features/quiz/CardAviableTest.js
View File

@ -1,7 +1,7 @@
import React from "react";
import { Link } from "react-router-dom";
import rightArrow from "../../../images/arrowRight.svg";
import rightArrow from "../../../assets/icons/arrows/arrowRight.svg";
import StarRating from "../../StarRating/StarRating";
export const CardAvailableTest = ({ title, description, path, passedTest }) => {

81
src/components/features/quiz/GetOptionTask.js
View File

@ -1,38 +1,49 @@
import React, { useEffect } from 'react';
import { useSelector } from 'react-redux';
import { selectedAnswersSelector, selectedTest } from '../../../redux/quizSlice';
import React from "react";
import { useSelector } from "react-redux";
import { selectedTest } from "../../../redux/quizSlice";
export const GetOptionTask = ({ type, answer, handleChange, inputValue}) => {
export const GetOptionTask = ({ type, answer, handleChange, inputValue }) => {
const id = localStorage.getItem("id");
const dataTest = useSelector(selectedTest);
const id = localStorage.getItem('id');
const dataTest = useSelector(selectedTest);
switch (type) {
case "1":
return (
<div className="form-task__group">
<textarea
className="form-task__field"
value={inputValue}
onChange={handleChange}
/>
</div>
);
case "3":
return (
<div className="form-task__group" key={answer.id}>
<input
className="form-task__check"
type="checkbox"
value={answer.answer_body}
id={answer.id}
onChange={handleChange}
/>
<label htmlFor={answer.id}>{answer.answer_body}</label>
</div>
);
switch (type) {
case "1":
return (
<div className="form-task__group">
<textarea className='form-task__field' value={inputValue}
onChange={handleChange} />
</div>
)
case "3":
return (
<div className="form-task__group" key={answer.id}>
<input className='form-task__check' type="checkbox"
value={answer.answer_body} id={answer.id}
onChange={handleChange} />
<label htmlFor={answer.id}>{answer.answer_body}</label>
</div>
)
default:
return (
<div className="form-task__group" key={answer.id}>
<input className='form-task__check' type="radio" value={answer.answer_body} name={'radio'} id={answer.id}
onChange={handleChange} />
<label htmlFor={answer.id}>{answer.answer_body}</label>
</div>
)
}
}
default:
return (
<div className="form-task__group" key={answer.id}>
<input
className="form-task__check"
type="radio"
value={answer.answer_body}
name={"radio"}
id={answer.id}
onChange={handleChange}
/>
<label htmlFor={answer.id}>{answer.answer_body}</label>
</div>
);
}
};

64
src/components/features/quiz/HeaderPageTests.js
View File

@ -1,31 +1,43 @@
import {Link} from 'react-router-dom'
import './quiz.scss'
import {useSelector} from "react-redux";
import {selectedTest, selectUserInfo} from "../../../redux/quizSlice";
import {urlForLocal} from "../../../helper";
import { Link } from "react-router-dom";
import { useSelector } from "react-redux";
import { selectedTest, selectUserInfo } from "../../../redux/quizSlice";
import { urlForLocal } from "../../../helper";
export const HeaderPageTestsQuiz = ({isVisibilityButton}) => {
import "./quiz.scss";
const test = useSelector(selectedTest);
const userInfo = useSelector(selectUserInfo);
export const HeaderPageTestsQuiz = ({ isVisibilityButton }) => {
const test = useSelector(selectedTest);
const userInfo = useSelector(selectUserInfo);
return (
<div className="header-quiz">
<div className="header-quiz__container">
<div className="header-quiz__body">
<div className="header-quiz__avatar">
{userInfo.photo && <img src={urlForLocal(userInfo.photo)} alt={userInfo.photo}/>}
</div>
<div className="header-quiz__description">
<div className="header-quiz__title-test title">{test.questionnaire_title}</div>
<div className="header-quiz__subtitle subtitle">Тест на основе выступление
"{test.questionnaire_title}" {userInfo.fio}</div>
</div>
</div>
{isVisibilityButton &&
<Link to={'/quiz/instruction'} className='quiz-btn quiz-btn_restriction'>Пройти</Link>}
return (
<div className="header-quiz">
<div className="header-quiz__container">
<div className="header-quiz__body">
<div className="header-quiz__avatar">
{userInfo.photo && (
<img src={urlForLocal(userInfo.photo)} alt={userInfo.photo} />
)}
</div>
<div className="header-quiz__description">
<div className="header-quiz__title-test title">
{test.questionnaire_title}
</div>
<div className="header-quiz__subtitle subtitle">
Тест на основе выступление "{test.questionnaire_title}"{" "}
{userInfo.fio}
</div>
</div>
</div>
</div>
)
};
{isVisibilityButton && (
<Link
to={"/quiz/instruction"}
className="quiz-btn quiz-btn_restriction"
>
Пройти
</Link>
)}
</div>
</div>
);
};

75
src/components/features/quiz/HeaderQuiz.js
View File

@ -1,19 +1,19 @@
import React, {useEffect} from 'react'
import {useDispatch, useSelector} from 'react-redux'
import {selectUserInfo, setQuestionnairesList, setUserInfo} from "../../../redux/quizSlice";
import {apiRequest} from "../../../api/request";
import {urlForLocal} from "../../../helper";
import './quiz.scss'
import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
export const HeaderQuiz = ({header}) => {
import { selectUserInfo, setUserInfo } from "../../../redux/quizSlice";
import { apiRequest } from "../../../api/request";
import { urlForLocal } from "../../../helper";
import "./quiz.scss";
export const HeaderQuiz = ({ header }) => {
const dispatch = useDispatch();
const userId = localStorage.getItem('id');
const userId = localStorage.getItem("id");
const userInfo = useSelector(selectUserInfo);
useEffect(() => {
dispatch(setUserInfo(userId))
dispatch(setUserInfo(userId));
}, [userId, dispatch]);
useEffect(() => {
@ -22,25 +22,38 @@ export const HeaderQuiz = ({header}) => {
}, [userId, dispatch]);
return (
<div>
{userInfo?.status === 500 ? <div className="error-msg">{userInfo.message}</div> :
<div className="header-quiz">
<div className="header-quiz__container">
{!userInfo ? <h2>Loading...</h2> :
<>
{header && <h2 className={'header-quiz__title-main'}>Добрый день, {userInfo.fio}</h2>}
<div className="header-quiz__body header-quiz__body_interjacent">
<div className="header-quiz__avatar">
<img src={urlForLocal(userInfo.photo)} alt={userInfo.photo}/>
</div>
<div className="header-quiz__name-user">{userInfo.fio}</div>
<div className="header-quiz__title">{userInfo.position_name}</div>
</div>
</>
}
</div>
</div>
}
</div>
)
<div>
{userInfo?.status === 500 ? (
<div className="error-msg">{userInfo.message}</div>
) : (
<div className="header-quiz">
<div className="header-quiz__container">
{!userInfo ? (
<h2>Loading...</h2>
) : (
<>
{header && (
<h2 className={"header-quiz__title-main"}>
Добрый день, {userInfo.fio}
</h2>
)}
<div className="header-quiz__body header-quiz__body_interjacent">
<div className="header-quiz__avatar">
<img
src={urlForLocal(userInfo.photo)}
alt={userInfo.photo}
/>
</div>
<div className="header-quiz__name-user">{userInfo.fio}</div>
<div className="header-quiz__title">
{userInfo.position_name}
</div>
</div>
</>
)}
</div>
</div>
)}
</div>
);
};

98
src/components/features/quiz/Instructions.js
View File

@ -1,53 +1,57 @@
import {Link} from 'react-router-dom'
import comment from './../../../images/comment.jpg'
import './quiz.scss'
import {useEffect, useState} from "react";
import {useSelector} from "react-redux";
import {selectedTest} from "../../../redux/quizSlice";
import { Link } from "react-router-dom";
import { apiRequest } from "../../../api/request";
import {apiRequest} from "../../../api/request";
import { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { selectedTest } from "../../../redux/quizSlice";
import comment from "./../../../assets/icons/comment.jpg";
import "./quiz.scss";
export const Instruction = () => {
const [countQuestions, setCountQuestions] = useState(null);
const test = useSelector(selectedTest);
const [countQuestions, setCountQuestions] = useState(null);
const test = useSelector(selectedTest);
useEffect(() => {
apiRequest("/user-questionnaire/get-question-number", {
params: { user_questionnaire_uuid: test.uuid },
}).then((res) => setCountQuestions(res.question_number));
}, []);
useEffect( () => {
apiRequest('/user-questionnaire/get-question-number', {
params: {user_questionnaire_uuid: test.uuid},
}
).then((res)=> setCountQuestions(res.question_number))
}, []);
return (
<div className="instruction">
<div className="instruction__container">
{!countQuestions ? <h2>Loading...</h2> :
<>
<h3 className="instruction__title quiz-title_h3">Инструкция к тесту</h3>
<div className="instruction__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempoLorem ipsum dolor sit
amet,Lo
rem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempo consectetur adipisicing
e
lit, sed do eiusmod tempo
</div>
<Link to="/quiz/test" className='instruction__btn quiz-btn quiz-btn_restriction'>Далее</Link>
<div className="instruction__info">
<div className="instruction__icon">
<img src={comment} alt=""/>
</div>
<div className="instruction__text instruction__text_info">Количество вопросов в
тесте: <span>{countQuestions}</span></div>
</div>
</>
}
</div>
</div>
)
return (
<div className="instruction">
<div className="instruction__container">
{!countQuestions ? (
<h2>Loading...</h2>
) : (
<>
<h3 className="instruction__title quiz-title_h3">
Инструкция к тесту
</h3>
<div className="instruction__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempoLorem ipsum dolor sit amet,Lo rem ipsum dolor sit
amet, consectetur adipisicing elit, sed do eiusmod tempo
consectetur adipisicing e lit, sed do eiusmod tempo
</div>
<Link
to="/quiz/test"
className="instruction__btn quiz-btn quiz-btn_restriction"
>
Далее
</Link>
<div className="instruction__info">
<div className="instruction__icon">
<img src={comment} alt="" />
</div>
<div className="instruction__text instruction__text_info">
Количество вопросов в тесте: <span>{countQuestions}</span>
</div>
</div>
</>
)}
</div>
</div>
);
};

158
src/components/features/quiz/MyTestsQuiz.js
View File

@ -1,74 +1,98 @@
import {Link} from 'react-router-dom'
import calendarImage from './../../../images/calendar.svg'
import {useDispatch} from "react-redux";
import {setSelectedTest} from "../../../redux/quizSlice";
import {urlForLocal} from "../../../helper";
import './quiz.scss'
import { Link } from "react-router-dom";
import { useDispatch } from "react-redux";
export const MyTestsQuiz = ({listTests}) => {
import { setSelectedTest } from "../../../redux/quizSlice";
import { urlForLocal } from "../../../helper";
import calendarImage from "./../../../assets/icons/calendar.svg";
import "./quiz.scss";
export const MyTestsQuiz = ({ listTests }) => {
const formationEndingOfScore = (score) => {
const lastNumber = score % 10;
if(score === 11 ||score === 12 ||score === 13 ||score === 14 ){
return 'баллов'
}else if(lastNumber === 2 || lastNumber === 3 || lastNumber === 4 ){
return 'балла'
}else if(lastNumber === 1){
return 'балл'
}else{
return 'баллов'
}
const lastNumber = score % 10;
if (score === 11 || score === 12 || score === 13 || score === 14) {
return "баллов";
} else if (lastNumber === 2 || lastNumber === 3 || lastNumber === 4) {
return "балла";
} else if (lastNumber === 1) {
return "балл";
} else {
return "баллов";
}
};
const dispatch = useDispatch();
const recordSelectedTest = (item) => dispatch(setSelectedTest(item));
const dispatch = useDispatch();
const recordSelectedTest = (item) => dispatch(setSelectedTest(item));
return (
<div className="my-tests">
<div className="my-tests__container">
<div className="my-tests__title">Мои тесты</div>
<div className="my-tests__items">
{listTests.map(item => {
switch (item.status) {
case 1:
return <article className="my-tests__item item-test" key={item.questionnaire_title}>
<h3 className="item-test__name-test">
{item.questionnaire_title}
</h3>
<div className="item-test__body test-data">
<Link to={'/quiz/interjacent'} className='quiz-btn'
onClick={() => recordSelectedTest(item)}>Пройти</Link>
</div>
</article>;
case 2:
return <article className="my-tests__item item-test" key={item.questionnaire_title}>
<h3 className="item-test__name-test">
{item.questionnaire_title}
</h3>
<div className="item-test__body test-data">
<div className="test-data__calendar ">
<img src={urlForLocal(calendarImage)} alt=""/>
{item.testing_date}
</div>
<div className="test-data__hr"></div>
<div className="test-data__score quiz-text">{item.score} {formationEndingOfScore(item.score)}</div>
</div>
</article>;
case 3:
return <article className="my-tests__item item-test" key={item.questionnaire_title}>
<h3 className="item-test__name-test">
{item.questionnaire_title}
</h3>
<div className="item-test__body test-data">
<div className='quiz-btn'>На проверке</div>
</div>
</article>;
default:
break
}
})}
</div>
return (
<div className="my-tests">
<div className="my-tests__container">
<div className="my-tests__title">Мои тесты</div>
<div className="my-tests__items">
{listTests.map((item) => {
switch (item.status) {
case 1:
return (
<article
className="my-tests__item item-test"
key={item.questionnaire_title}
>
<h3 className="item-test__name-test">
{item.questionnaire_title}
</h3>
<div className="item-test__body test-data">
<Link
to={"/quiz/interjacent"}
className="quiz-btn"
onClick={() => recordSelectedTest(item)}
>
Пройти
</Link>
</div>
</article>
);
case 2:
return (
<article
className="my-tests__item item-test"
key={item.questionnaire_title}
>
<h3 className="item-test__name-test">
{item.questionnaire_title}
</h3>
<div className="item-test__body test-data">
<div className="test-data__calendar ">
<img src={urlForLocal(calendarImage)} alt="" />
{item.testing_date}
</div>
<div className="test-data__hr"></div>
<div className="test-data__score quiz-text">
{item.score} {formationEndingOfScore(item.score)}
</div>
</div>
</article>
);
case 3:
return (
<article
className="my-tests__item item-test"
key={item.questionnaire_title}
>
<h3 className="item-test__name-test">
{item.questionnaire_title}
</h3>
<div className="item-test__body test-data">
<div className="quiz-btn">На проверке</div>
</div>
</article>
);
default:
break;
}
})}
</div>
</div>
)
};
</div>
</div>
);
};

29
src/components/features/quiz/ProgressbarQuiz.js
View File

@ -1,17 +1,16 @@
import React from 'react'
import './quiz.scss'
import React from "react";
export const Progressbar = ({indexQuestion, width}) => {
return (
<div className="progressbar">
<div className="progressbar__body">
<div className="progressbar__value">
{indexQuestion}
</div>
<div className="progressbar__strip" >
<div style={{width: width+'%'}}></div>
</div>
</div>
import "./quiz.scss";
export const Progressbar = ({ indexQuestion, width }) => {
return (
<div className="progressbar">
<div className="progressbar__body">
<div className="progressbar__value">{indexQuestion}</div>
<div className="progressbar__strip">
<div style={{ width: width + "%" }}></div>
</div>
</div>
)
};
</div>
);
};

157
src/components/features/quiz/Quiz-passing-information.js
View File

@ -1,80 +1,91 @@
import React, { useEffect, useState } from 'react'
import timer from '../../../images/quiz/timer.png'
import accempt from '../../../images/quiz/accempt.png'
import { useTimer } from 'react-timer-hook';
import StarRating from '../../StarRating/StarRating';
import { useSelector } from 'react-redux';
import { completedTestSelector } from '../../../redux/quizSlice';
import React, { useEffect } from "react";
import { useSelector } from "react-redux";
import { useTimer } from "react-timer-hook";
import StarRating from "../../StarRating/StarRating";
import { completedTestSelector } from "../../../redux/quizSlice";
import timer from "../../../assets/images/quiz/timer.png";
import accempt from "../../../assets/images/quiz/accempt.png";
export const QuizPassingInformation = ({ expiryTimestamp, setStartTest }) => {
const {
seconds,
minutes,
isRunning,
start,
pause,
resume,
restart
} = useTimer({
expiryTimestamp, autoStart: false, onExpire: () => {
console.warn('onExpire called')
}
});
const completedTest = useSelector(completedTestSelector)
const { seconds, minutes, isRunning, start, pause, resume, restart } =
useTimer({
expiryTimestamp,
autoStart: false,
onExpire: () => {
console.warn("onExpire called");
},
});
const completedTest = useSelector(completedTestSelector);
const startTesting = () => {
setStartTest(true);
start();
};
const startTesting = () => {
setStartTest(true)
start()
}
useEffect(() => {
if (completedTest) {
const time = new Date();
time.setSeconds(time.getSeconds() + 0); //600 - кол-во секунд для прохождения теста
restart(time, false);
}
}, [completedTest]);
useEffect(() => {
if (completedTest) {
const time = new Date();
time.setSeconds(time.getSeconds() + 0);//600 - кол-во секунд для прохождения теста
restart(time, false)
}
}, [completedTest])
return (
<div className="quiz-passing-information">
<div className="quiz-passing-information__container">
<div className="quiz-passing-information__main">
<div className="quiz-passing-information__specialization">
<StarRating
color={"#52B709"}
countStars={1}
countActiveStars={0.5}
size={61}
/>
<div className="quiz-passing-information__specialization-title">
Junior <br />
разработчик
</div>
</div>
<div className="quiz-passing-information__timer timer-quiz">
<div className="quiz-passing-information__icon">
<img src={timer} alt="" />
</div>
<div className="quiz-passing-information__text">
{completedTest ? "Время вышло" : "Время на прохождение теста:"}{" "}
<br />
<span>
{minutes.toString().padStart(2, "0") +
":" +
seconds.toString().padStart(2, "0")}{" "}
секунд
</span>
</div>
</div>
<div className="quiz-passing-information__attempt">
<div className="quiz-passing-information__icon">
<img src={accempt} alt="" />
</div>
<div className="quiz-passing-information__text">
Попыток прохождения: <br />
<span>1 попытка</span>
</div>
</div>
<div>
{!completedTest && !isRunning && (
<button
className="quiz-passing-information__button btn-green"
onClick={startTesting}
>
Начать
</button>
)}
</div>
</div>
return (
<div className='quiz-passing-information'>
<div className="quiz-passing-information__container">
<div className="quiz-passing-information__main">
<div className="quiz-passing-information__specialization">
<StarRating color={'#52B709'} countStars={1} countActiveStars={0.5} size={61} />
<div className='quiz-passing-information__specialization-title'>
Junior <br />
разработчик
</div>
</div>
<div className="quiz-passing-information__timer timer-quiz">
<div className="quiz-passing-information__icon">
<img src={timer} alt="" />
</div>
<div className="quiz-passing-information__text">
{completedTest ? 'Время вышло' : 'Время на прохождение теста:'} <br />
<span>{minutes.toString().padStart(2, '0') + ':' + seconds.toString().padStart(2, '0')} секунд</span>
</div>
</div>
<div className="quiz-passing-information__attempt">
<div className="quiz-passing-information__icon">
<img src={accempt} alt="" />
</div>
<div className="quiz-passing-information__text">
Попыток прохождения: <br />
<span>1 попытка</span>
</div>
</div>
<div>
{(!completedTest && !isRunning) && <button className="quiz-passing-information__button btn-green" onClick={startTesting}>Начать</button>}
</div>
</div>
{/* {isRunning && <button className="quiz-passing-information__button quiz-btn" onClick={pause}>Завершить</button>} */}
</div>
</div>
)
}
{/* {isRunning && <button className="quiz-passing-information__button quiz-btn" onClick={pause}>Завершить</button>} */}
</div>
</div>
);
};

56
src/components/features/quiz/QuizReport.js
View File

@ -1,27 +1,35 @@
import React from 'react'
import StarRating from '../../StarRating/StarRating'
import React from "react";
import StarRating from "../../StarRating/StarRating";
export const QuizReport = () => {
return (
<div className='report'>
<div className="report__row">
<div className="report__column">
<StarRating color={'#52B709'} countStars={1} countActiveStars={0.5} size={61} />
<div className="report__job-title">Junior <br /> разработчик</div>
</div>
<div className="report__column">
<div className="report__value">22</div>
<div className="report__text">Правильных ответов</div>
</div>
<div className="report__column">
<div className="report__value report__value_false">02</div>
<div className="report__text">Не правильных ответов</div>
</div>
<div className="report__column">
<div className="report__status-text">Статус:</div>
<div className="report__status">Пройдено!</div>
</div>
</div>
</div>
)
}
<div className="report">
<div className="report__row">
<div className="report__column">
<StarRating
color={"#52B709"}
countStars={1}
countActiveStars={0.5}
size={61}
/>
<div className="report__job-title">
Junior <br /> разработчик
</div>
</div>
<div className="report__column">
<div className="report__value">22</div>
<div className="report__text">Правильных ответов</div>
</div>
<div className="report__column">
<div className="report__value report__value_false">02</div>
<div className="report__text">Не правильных ответов</div>
</div>
<div className="report__column">
<div className="report__status-text">Статус:</div>
<div className="report__status">Пройдено!</div>
</div>
</div>
</div>
);
};

45
src/components/features/quiz/Results.js
View File

@ -1,34 +1,39 @@
import React, {useEffect, useState} from 'react';
import {useDispatch, useSelector} from "react-redux";
import {fetchResultTest, selectedTest, selectResult} from "../../../redux/quizSlice";
import {apiRequest} from "../../../api/request";
import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import {
fetchResultTest,
selectedTest,
selectResult,
} from "../../../redux/quizSlice";
import { apiRequest } from "../../../api/request";
export const Results = () => {
const result = useSelector(selectResult);
const test = useSelector(selectedTest);
const [maxScore, setMaxScore] = useState('');
const [maxScore, setMaxScore] = useState("");
const dispatch = useDispatch();
useEffect(() => {
dispatch(fetchResultTest(test.uuid));
apiRequest(`/user-questionnaire/get-points-number?user_questionnaire_uuid=${test.uuid}`)
.then((res) => setMaxScore(res.sum_point));
apiRequest(
`/user-questionnaire/get-points-number?user_questionnaire_uuid=${test.uuid}`
).then((res) => setMaxScore(res.sum_point));
}, [apiRequest, dispatch, test]);
return (
<div className={'result _container'}>
{
!result ? <h1 style={{display: "block"}}>Ожидайте результата...</h1> :
<div className="result__body">
<div className="result__text">Благодарим за прохождение теста</div>
<div className="result__text">Ваш Результат: <span
className="result__score">{result.score}</span> из {maxScore} </div>
</div>
}
</div>
<div className={"result _container"}>
{!result ? (
<h1 style={{ display: "block" }}>Ожидайте результата...</h1>
) : (
<div className="result__body">
<div className="result__text">Благодарим за прохождение теста</div>
<div className="result__text">
Ваш Результат: <span className="result__score">{result.score}</span>{" "}
из {maxScore}{" "}
</div>
</div>
)}
</div>
);
};

45
src/components/features/quiz/SelectedCategory.js
View File

@ -1,20 +1,29 @@
import React from 'react'
import iconSpecialization from "../../../images/icon-specialization.png"
import { Link } from 'react-router-dom'
import React from "react";
export const SelectedCategory = ({setSelectedCategory}) => {
import iconSpecialization from "../../../assets/images/partnerProfile/personalBackEnd.svg";
export const SelectedCategory = ({ setSelectedCategory }) => {
return (
<div className='selected-category'>
<div className="selected-category__container">
<div className="selected-category__title">Ваша выбранная <br /> категория</div>
<div className="selected-category__category">
<div className="selected-category__image">
<img src={iconSpecialization} alt="" />
</div>
<div className="selected-category__title-category">Backend <br /> разработчики</div>
</div>
<button onClick={()=>setSelectedCategory(true)} className="selected-category__button">Заменить специализацию </button>
</div>
</div>
)
}
<div className="selected-category">
<div className="selected-category__container">
<div className="selected-category__title">
Ваша выбранная <br /> категория
</div>
<div className="selected-category__category">
<div className="selected-category__image">
<img src={iconSpecialization} alt="" />
</div>
<div className="selected-category__title-category">
Backend <br /> разработчики
</div>
</div>
<button
onClick={() => setSelectedCategory(true)}
className="selected-category__button"
>
Заменить специализацию{" "}
</button>
</div>
</div>
);
};

152
src/components/features/quiz/Task.js
View File

@ -1,141 +1,153 @@
import React, { useEffect, useState } from 'react'
import { useNavigate } from "react-router-dom"
import { useSelector, useDispatch } from 'react-redux'
import questionIcon from "../../../images/question.png"
import { Progressbar } from './ProgressbarQuiz'
import { GetOptionTask } from './GetOptionTask'
import {
fetchUserAnswersMany, fetchUserAnswerOne, fetchGetAnswers, answersSelector, selectedTest, questionsSelector, setAnswers, setCompleteTest
} from './../../../redux/quizSlice'
import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import './quiz.scss'
import { apiRequest } from "../../../api/request";
import { HeaderQuiz } from './HeaderQuiz'
import { HeaderQuiz } from "./HeaderQuiz";
import { Progressbar } from "./ProgressbarQuiz";
import { GetOptionTask } from "./GetOptionTask";
import {
fetchUserAnswersMany,
fetchUserAnswerOne,
fetchGetAnswers,
answersSelector,
selectedTest,
questionsSelector,
setAnswers,
setCompleteTest,
} from "./../../../redux/quizSlice";
import questionIcon from "../../../assets/images/question.png";
import "./quiz.scss";
export const TaskQuiz = () => {
const navigate = useNavigate();
const dispatch = useDispatch();
const answers = useSelector(answersSelector);
const questions = useSelector(questionsSelector);
const dataTest = useSelector(selectedTest);
const [index, setIndex] = useState(0);
const [checkedValues, setCheckedValues] = useState([]);
//const [stripValue, setStripValue] = useState(0);
const [inputValue, setInputValue] = useState('');
const [inputValue, setInputValue] = useState("");
const id = localStorage.getItem('id');
const id = localStorage.getItem("id");
useEffect(() => {
// fetch('https://itguild.info/api/user-questionnaire/questionnaires-list?user_id=110').then(response => response.json())
// .then(json => console.log(json))
apiRequest(`/question/get-questions?uuid=${dataTest.uuid}`)
.then((response) => {
console.log(response)
dispatch(fetchGetAnswers(response[0].id));
setStripValue((+index + 1) * 100 / response.length)
})
apiRequest(`/question/get-questions?uuid=${dataTest.uuid}`).then(
(response) => {
console.log(response);
dispatch(fetchGetAnswers(response[0].id));
setStripValue(((+index + 1) * 100) / response.length);
}
);
}, [dispatch]);
const nextQuestion = async (e) => {
e.preventDefault();
//Проверка на валидацию ответов
if (!(checkedValues.length || inputValue)) {
alert("Вы не ответили на вопрос")
return
alert("Вы не ответили на вопрос");
return;
}
//отправка ответов на сервер
if (questions[index].question_type_id != 3) {
//dispatch(fetchUserAnswerOne(checkedValues));
} else {
console.log(checkedValues);
console.log(checkedValues);
// dispatch(fetchUserAnswersMany(checkedValues));
}
//Проверка на окончание теста
if (!(index < questions.length - 1)) {
dispatch(setCompleteTest())
return
dispatch(setCompleteTest());
return;
}
dispatch(fetchGetAnswers(questions[index + 1].id));
setIndex(prev => prev + 1);
setIndex((prev) => prev + 1);
setCheckedValues([]);
setInputValue('')
setInputValue("");
};
const handleChange = (e) => {
const checked = e.target.checked;
if (questions[index].question_type_id != 3) {
setCheckedValues([{
user_id: id,
user_questionnaire_uuid: dataTest.uuid,
question_id: questions[index].id,
response_body: e.target.value
}])
return
setCheckedValues([
{
user_id: id,
user_questionnaire_uuid: dataTest.uuid,
question_id: questions[index].id,
response_body: e.target.value,
},
]);
return;
}
checked ? setCheckedValues(prev => [...prev, {
user_id: id,
user_questionnaire_uuid: dataTest.uuid,
question_id: questions[index].id,
response_body: e.target.value
}]) :
setCheckedValues(prev => [...prev.filter(item => item.response_body !== e.target.value)]);
checked
? setCheckedValues((prev) => [
...prev,
{
user_id: id,
user_questionnaire_uuid: dataTest.uuid,
question_id: questions[index].id,
response_body: e.target.value,
},
])
: setCheckedValues((prev) => [
...prev.filter((item) => item.response_body !== e.target.value),
]);
};
console.log('render task');
console.log("render task");
return (
<div className="task">
{
<div className="task__container">
<div className='task__header'>
<div className="task__header">
<img src={questionIcon} alt="" />
<h3 className="task__title quiz-title_h3">{questions[index].question_body}</h3>
<h3 className="task__title quiz-title_h3">
{questions[index].question_body}
</h3>
</div>
<div className="task__body">
<form className='task__form form-task' onSubmit={nextQuestion}>
{
answers.map((answer) => (
<GetOptionTask
key={answer.id}
type={questions[index].question_type_id}
handleChange={handleChange}
answer={answer}
/>
))
}
<form className="task__form form-task" onSubmit={nextQuestion}>
{answers.map((answer) => (
<GetOptionTask
key={answer.id}
type={questions[index].question_type_id}
handleChange={handleChange}
answer={answer}
/>
))}
<div className="form-task__buttons">
{/* {
index != 0 && <button type='submit' className='form-task__btn quiz-btn quiz-btn_back'
onClick={prevQuestion}>Назад</button>
} */}
{
index != questions.length && <button onClick={nextQuestion}
className='form-task__btn quiz-btn'>Далее</button>
}
{index != questions.length && (
<button
onClick={nextQuestion}
className="form-task__btn quiz-btn"
>
Далее
</button>
)}
</div>
</form>
</div>
</div>
}
</div>
)
);
};