404 lines
11 KiB
TypeScript
404 lines
11 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
||
import { Button, Checkbox, Form, Input, Radio, Select } from 'antd';
|
||
import r from './Resume.module.scss';
|
||
import { initThemeParams, MiniApp, useInitData, useMiniApp, usePopup } from '@tma.js/sdk-react';
|
||
import {
|
||
deleteStudent,
|
||
editStudent,
|
||
fetchHardSkills,
|
||
fetchHardSkillsAll,
|
||
fetchStudent,
|
||
sendStudent,
|
||
} from '@/api/api';
|
||
import { Bot, FormValues, Request, Student } from '@/types/types';
|
||
import { useQuery } from 'react-query';
|
||
import { sendDataBot } from '@/api/bot';
|
||
|
||
type LayoutType = Parameters<typeof Form>[0]['layout'];
|
||
const { Option } = Select;
|
||
const Resume: React.FC = () => {
|
||
const [form] = Form.useForm();
|
||
const [formLayout, setFormLayout] = useState<LayoutType>('horizontal');
|
||
const miniApp = useMiniApp();
|
||
const [themeParams] = initThemeParams();
|
||
const initData = useInitData(true);
|
||
const popup = usePopup();
|
||
|
||
const { isLoading, isError, data, error } = useQuery(
|
||
['student', initData?.user?.id],
|
||
() => fetchStudent(initData?.user?.id || 0),
|
||
{
|
||
enabled: !!initData?.user?.id, // Включить запрос только когда initData.user.id доступен
|
||
refetchOnWindowFocus: false,
|
||
retry: false,
|
||
}
|
||
);
|
||
const hardSkill = useQuery(
|
||
['skills', initData?.user?.id],
|
||
() => fetchHardSkills(initData?.user?.id || 0),
|
||
{
|
||
enabled: !!initData?.user?.id, // Включить запрос только когда initData.user.id доступен
|
||
refetchOnWindowFocus: false,
|
||
retry: false,
|
||
}
|
||
);
|
||
|
||
|
||
const { data: allSkills } = useQuery(
|
||
['hardSkills'], // Обратите внимание на использование массива в качестве ключа
|
||
() => fetchHardSkillsAll(),
|
||
{
|
||
refetchOnWindowFocus: false,
|
||
retry: false,
|
||
}
|
||
);
|
||
|
||
|
||
const onFinish = async (values: FormValues) => {
|
||
const hard: string[] = values.skills;
|
||
const student: Request = {
|
||
StudentID: initData?.user?.id || 0,
|
||
Name: values.Name,
|
||
Type: values.Type,
|
||
Group: values.Group,
|
||
Faculties: values.Faculties,
|
||
Phone_number: values.Phone_number,
|
||
Time: values.Time, // список времени
|
||
Soft_skills: values.Soft_skills,
|
||
Link: 'link', // предполагается, что у вас есть ссылка
|
||
Email: values.Email,
|
||
Hardskills: values.skills, // список навыков
|
||
};
|
||
const editedStudent: Omit<Student, 'StudentID'> = {
|
||
Name: values.Name,
|
||
Type: values.Type,
|
||
Group: values.Group,
|
||
Time: values.Time,
|
||
Faculties: values.Faculties,
|
||
Phone_number: values.Phone_number,
|
||
Soft_skills: values.Soft_skills,
|
||
Link: 'link',
|
||
Email: values.Email,
|
||
Hardskills: values.skills,
|
||
};
|
||
const dataBot: Bot = {
|
||
id: initData?.user?.id || 0,
|
||
};
|
||
if (data) {
|
||
const result = await editStudent(editedStudent, initData?.user?.id || 0);
|
||
if (result.status == 200) {
|
||
popup.open({
|
||
title: '',
|
||
message: 'Изменния были внесены',
|
||
buttons: [{ id: 'my-id', type: 'default', text: 'Закрыть' }],
|
||
});
|
||
}
|
||
console.log(result.status);
|
||
} else {
|
||
const result = await sendStudent(student);
|
||
console.log(result.status);
|
||
const resultbot = await sendDataBot(dataBot);
|
||
console.log(resultbot);
|
||
miniApp.close();
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
if (data) {
|
||
form.setFieldsValue({
|
||
Name: data.data.Name,
|
||
Type: data.data.Type,
|
||
Group: data.data.Group,
|
||
Time: data.data.Time,
|
||
Soft_skills: data.data.Soft_skills,
|
||
Email: data.data.Email,
|
||
skills: hardSkill.data?.data.map(
|
||
(skill: { Title: string }) => skill.Title
|
||
),
|
||
});
|
||
}
|
||
}, [data, form]);
|
||
|
||
const resetResume = async () => {
|
||
const result = await deleteStudent(initData?.user?.id || 0);
|
||
if (result.status == 204) {
|
||
popup.open({
|
||
title: '',
|
||
message: 'Ваше резюме было удалено',
|
||
buttons: [{ id: 'my-id', type: 'default', text: 'Закрыть' }],
|
||
});
|
||
}
|
||
await form.resetFields();
|
||
miniApp.close();
|
||
};
|
||
|
||
const [selectedValues, setSelectedValues] = useState<string[]>([]);
|
||
|
||
const handleCheckboxChange = (checkedValues: string[]) => {
|
||
setSelectedValues(checkedValues);
|
||
};
|
||
|
||
const onFormLayoutChange = ({ layout }: { layout: LayoutType }) => {
|
||
setFormLayout(layout);
|
||
};
|
||
|
||
// if (isLoading) {
|
||
// return <span>Загрузка...</span>;
|
||
// }
|
||
|
||
return (
|
||
<Form
|
||
layout={formLayout}
|
||
form={form}
|
||
initialValues={{ layout: formLayout }}
|
||
onValuesChange={onFormLayoutChange}
|
||
onFinish={onFinish}
|
||
style={{ maxWidth: formLayout === 'inline' ? 'none' : 600 }}
|
||
className={r.form}
|
||
>
|
||
<Form.Item
|
||
label={
|
||
<label style={{ color: themeParams.textColor, fontSize: '20px' }}>
|
||
Как вас зовут?
|
||
</label>
|
||
}
|
||
className={r.form_item}
|
||
rules={[
|
||
{ required: true, message: 'Пожалуйста, введите имя и фамилию!' },
|
||
]}
|
||
name='Name'
|
||
>
|
||
<Input placeholder='Фамилия Имя' />
|
||
</Form.Item>
|
||
<Form.Item
|
||
label={
|
||
<label style={{ color: themeParams.textColor, fontSize: '20px' }}>
|
||
Факультет
|
||
</label>
|
||
}
|
||
className={r.form_item}
|
||
rules={[{ required: true, message: 'Пожалуйста, введите факультет!' }]}
|
||
name='Faculties'
|
||
>
|
||
<Input placeholder='Фамилия Имя' />
|
||
</Form.Item>
|
||
<Form.Item
|
||
label={
|
||
<label style={{ color: themeParams.textColor, fontSize: '20px' }}>
|
||
Номер телефона
|
||
</label>
|
||
}
|
||
className={r.form_item}
|
||
rules={[
|
||
{ required: true, message: 'Пожалуйста, введите номер телефона!' },
|
||
]}
|
||
name='Phone_number'
|
||
>
|
||
<Input placeholder='Фамилия Имя' />
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
label={
|
||
<label style={{ color: themeParams.textColor, fontSize: '20px' }}>
|
||
Что вы ищите?
|
||
</label>
|
||
}
|
||
rules={[
|
||
{ required: true, message: 'Пожалуйста, выберит тип занятости!' },
|
||
]}
|
||
name='Type'
|
||
>
|
||
<Radio.Group>
|
||
<Radio.Button value='Работа'>Работу</Radio.Button>
|
||
<Radio.Button value='Стажировка'>Стажировку</Radio.Button>
|
||
</Radio.Group>
|
||
</Form.Item>
|
||
|
||
{/* <Form.Item
|
||
label={
|
||
<label
|
||
style={{
|
||
color: themeParams.textColor,
|
||
fontSize: '20px',
|
||
marginBottom: '20px',
|
||
}}
|
||
>
|
||
Что вы ищите?
|
||
</label>
|
||
}
|
||
rules={[
|
||
{ required: true, message: 'Пожалуйста, выберите тип занятости!' },
|
||
]}
|
||
name='Type'
|
||
>
|
||
<Select
|
||
mode='multiple'
|
||
allowClear
|
||
style={{ width: '100%' }}
|
||
placeholder='Выберите тип занятости'
|
||
>
|
||
<Option value='ищу работу'>Ищу работу</Option>
|
||
<Option value='ищу стажировку у партнеров'>
|
||
Ищу стажировку у партнеров
|
||
</Option>
|
||
<Option value='ищу стажировку сторонних компаний'>
|
||
Ищу стажировку сторонних компаний
|
||
</Option>
|
||
<Option value='хочу заниматься научной работой'>
|
||
Хочу заниматься научной работой
|
||
</Option>
|
||
<Option value='хочу работать в МТУСИ'>Хочу работать в МТУСИ</Option>
|
||
</Select>
|
||
</Form.Item> */}
|
||
|
||
<Form.Item
|
||
label={
|
||
<label style={{ color: themeParams.textColor, fontSize: '20px' }}>
|
||
Ваша академическая группа:
|
||
</label>
|
||
}
|
||
name='Group'
|
||
rules={[
|
||
{
|
||
required: true,
|
||
message: 'Пожалуйста, введите номер вашей группы!',
|
||
},
|
||
{
|
||
pattern: /^[А-ЯЁ]{2,3}\d{4}$/,
|
||
message: 'Введите корректный номер группы (например, БВТ2202)!',
|
||
},
|
||
]}
|
||
>
|
||
<Input placeholder='БВТ2202' style={{ width: '85px' }} maxLength={7} />
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
label={
|
||
<label
|
||
style={{
|
||
color: themeParams.textColor,
|
||
fontSize: '20px',
|
||
marginBottom: '20px',
|
||
}}
|
||
>
|
||
Какую занятость (часов в неделю) вы рассматриваете?
|
||
</label>
|
||
}
|
||
name='Time'
|
||
>
|
||
<Checkbox.Group onChange={handleCheckboxChange} value={selectedValues}>
|
||
<Checkbox
|
||
value='20'
|
||
className={r.checkbox_button}
|
||
style={{
|
||
color: themeParams.textColor,
|
||
}}
|
||
>
|
||
20
|
||
</Checkbox>
|
||
<Checkbox
|
||
value='30'
|
||
className={r.checkbox_button}
|
||
style={{
|
||
color: themeParams.textColor,
|
||
}}
|
||
>
|
||
30
|
||
</Checkbox>
|
||
<Checkbox
|
||
value='40'
|
||
className={r.checkbox_button}
|
||
style={{
|
||
color: themeParams.textColor,
|
||
}}
|
||
>
|
||
40
|
||
</Checkbox>
|
||
</Checkbox.Group>
|
||
</Form.Item>
|
||
<Form.Item
|
||
label={
|
||
<label
|
||
style={{
|
||
color: themeParams.textColor,
|
||
fontSize: '20px',
|
||
marginBottom: '20px',
|
||
}}
|
||
>
|
||
Какими навыками вы обладаете?
|
||
</label>
|
||
}
|
||
rules={[
|
||
{ required: true, message: 'Пожалуйста, укажите ваши hard skills!' },
|
||
]}
|
||
name='skills'
|
||
>
|
||
<Select
|
||
mode='multiple'
|
||
allowClear
|
||
style={{ width: '100%' }}
|
||
placeholder='Выберите навыки'
|
||
loading={isLoading}
|
||
>
|
||
{allSkills?.map(skill => (
|
||
<Option key={skill.Hard_skillID} value={skill.Title}>
|
||
{skill.Title}
|
||
</Option>
|
||
))}
|
||
</Select>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
label={
|
||
<label
|
||
style={{
|
||
color: themeParams.textColor,
|
||
fontSize: '20px',
|
||
marginBottom: '20px',
|
||
}}
|
||
>
|
||
Расскажите немного о своих soft skills:
|
||
</label>
|
||
}
|
||
rules={[
|
||
{ required: true, message: 'Пожалуйста, введите ваши soft skills!' },
|
||
]}
|
||
name='Soft_skills'
|
||
>
|
||
<Input.TextArea maxLength={150} />
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
label={
|
||
<label style={{ color: themeParams.textColor, fontSize: '20px' }}>
|
||
Оставьте почту для работодателей:
|
||
</label>
|
||
}
|
||
className={r.form_item}
|
||
rules={[
|
||
{ required: true, message: 'Пожалуйста, введите вашу почту!' },
|
||
{ type: 'email', message: 'Введите корректный email!' },
|
||
]}
|
||
name='Email'
|
||
>
|
||
<Input placeholder='example@mtuci.ru' className={r.inputs} />
|
||
</Form.Item>
|
||
|
||
<Form.Item>
|
||
<Button type='primary' htmlType='submit'>
|
||
Отправить
|
||
</Button>
|
||
</Form.Item>
|
||
{data && (
|
||
<Form.Item>
|
||
<Button danger onClick={resetResume}>
|
||
Стереть
|
||
</Button>
|
||
</Form.Item>
|
||
)}
|
||
</Form>
|
||
);
|
||
};
|
||
|
||
export default Resume;
|