guild_front/src/pages/FormPage/FormPage.jsx
2024-03-06 14:08:06 +03:00

104 lines
3.3 KiB
JavaScript

import React, { useEffect } from "react";
import SVG from "react-inlinesvg";
import { useDispatch, useSelector } from "react-redux";
import { Navigate, useNavigate, useParams } from "react-router-dom";
import {
currentCandidate,
selectCurrentCandidate
} from "@redux/outstaffingSlice";
import { LEVELS, SKILLS } from "@utils/constants";
import { urlForLocal } from "@utils/helper";
import { apiRequest } from "@api/request";
import { Footer } from "@components/Common/Footer/Footer";
import Form from "@components/Form/Form";
import { LogoutButton } from "@components/LogoutButton/LogoutButton";
import arrow from "assets/icons/arrows/left-arrow.png";
import telegramIcon from "assets/icons/telegram-icon.svg";
import rectangle from "assets/images/rectangle_secondPage.png";
import "./formPage.scss";
export const FormPage = () => {
if (localStorage.getItem("role_status") !== "18") {
return <Navigate to="/profile" replace />;
}
const params = useParams();
const navigate = useNavigate();
const dispatch = useDispatch();
const candidate = useSelector(selectCurrentCandidate);
const goBack = () => {
navigate(-1);
};
useEffect(() => {
if (!candidate.id) {
apiRequest("/profile", {
params: Number(params.id)
}).then((el) => dispatch(currentCandidate(el)));
}
}, []);
return (
<div className="container">
<div className="form-page">
<div className="form-page__back">
<div className="form-page__arrow" onClick={goBack}>
<div className="form-page__arrow-img">
<img src={arrow} alt="" />
</div>
<div className="form-page__back-to-candidate">
<span>Вернуться к кандидату</span>
</div>
</div>
<LogoutButton />
</div>
<div className="form-page__candidate">
<div className="form-page__avatar">
{candidate.photo && (
<img src={urlForLocal(candidate.photo)} alt="candidate avatar" />
)}
</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} alt="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" rel="noreferrer">
<SVG src={telegramIcon} />
</a>
</div>
</div>
</div>
</div>
<Footer />
</div>
);
};