copied the code from the working repo
This commit is contained in:
403
mtucijobsweb/fsd/widgets/Resume/Resume.tsx
Normal file
403
mtucijobsweb/fsd/widgets/Resume/Resume.tsx
Normal file
@@ -0,0 +1,403 @@
|
||||
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;
|
||||
Reference in New Issue
Block a user