92 lines
No EOL
3.9 KiB
TypeScript
92 lines
No EOL
3.9 KiB
TypeScript
import SurveyInfo from "../SurveyInfo/SurveyInfo.tsx";
|
||
import QuestionsList, {Question} from "../QuestionsList/QuestionsList.tsx";
|
||
import {useEffect, useState} from "react";
|
||
import styles from './CompletingSurvey.module.css'
|
||
import { useParams} from "react-router-dom";
|
||
import {getSurveyById, ISurvey} from "../../api/SurveyApi.ts";
|
||
import {getListQuestions} from "../../api/QuestionApi.ts";
|
||
import {getAnswerVariants, IAnswerVariant} from "../../api/AnswerVariantsApi.ts";
|
||
|
||
export const CompletingSurvey = () => {
|
||
// const [titleSurvey, setTitleSurvey] = useState("Название опроса");
|
||
// const [descriptionSurvey, setDescriptionSurvey] = useState("");
|
||
// const [questions, setQuestions] = useState<Question[]>([
|
||
// { id: 1, text: 'Вопрос 1', questionType: 'SingleAnswerQuestion', answerVariants: [{ id: 1, text: 'Ответ 1' },
|
||
// { id: 2, text: 'Ответ 1' }, { id: 3, text: 'Ответ 1' }]},
|
||
// { id: 2, text: 'Вопрос 2', questionType: 'MultipleAnswerQuestion', answerVariants: [{ id: 1, text: 'Ответ 1' },
|
||
// { id: 2, text: 'Ответ 1' }, { id: 3, text: 'Ответ 1' }]}
|
||
// ]);
|
||
|
||
// const [questions, setQuestions] = useState<Question[]>([]);
|
||
// const [loading, setLoading] = useState(true);
|
||
// const [error, setError] = useState<string | null>(null);
|
||
//
|
||
// const [description, setDescription] = useState('');
|
||
// const [title, setTitle] = useState('');
|
||
//
|
||
// const { survey, setSurvey } = useOutletContext<{
|
||
// survey: ISurvey;
|
||
// setSurvey: (survey: ISurvey) => void;
|
||
// }>();
|
||
|
||
const {surveyId} = useParams<{surveyId: string}>();
|
||
const [survey, setSurvey] = useState<ISurvey | null>(null);
|
||
const [questions, setQuestions] = useState<Question[]>([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [error, setError] = useState<string | null>(null);
|
||
|
||
useEffect(() => {
|
||
const fetchSurveyData = async () => {
|
||
try {
|
||
setLoading(true);
|
||
if (!surveyId) return;
|
||
|
||
const surveyData = await getSurveyById(parseInt(surveyId));
|
||
setSurvey(surveyData);
|
||
|
||
const questionsData = await getListQuestions(parseInt(surveyId));
|
||
const formattedQuestions = await Promise.all(questionsData.map(async q => {
|
||
const answerVariants = await getAnswerVariants(parseInt(surveyId), q.id);
|
||
return {
|
||
id: q.id,
|
||
text: q.title,
|
||
questionType: q.questionType as 'SingleAnswerQuestion' | 'MultipleAnswerQuestion',
|
||
answerVariants: answerVariants.map((a: IAnswerVariant) => ({
|
||
id: a.id,
|
||
text: a.text
|
||
}))
|
||
};
|
||
}));
|
||
setQuestions(formattedQuestions);
|
||
} catch (error) {
|
||
console.error('Ошибка загрузки опроса:', error);
|
||
setError('Не удалось загрузить опрос');
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
fetchSurveyData();
|
||
}, [surveyId]);
|
||
|
||
if (loading) return <div>Загрузка...</div>;
|
||
if (error) return <div>{error}</div>;
|
||
if (!survey) return <div>Опрос не найден</div>;
|
||
|
||
return (
|
||
<div className={styles.survey}>
|
||
<SurveyInfo
|
||
titleSurvey={survey.title}
|
||
descriptionSurvey={survey.description}
|
||
setDescriptionSurvey={(value) => setSurvey({ ...survey, description: value })}
|
||
setTitleSurvey={(value) => setSurvey({ ...survey, title: value })}
|
||
/>
|
||
<QuestionsList
|
||
questions={questions}
|
||
setQuestions={setQuestions}
|
||
/>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default CompletingSurvey |