95 lines
3.4 KiB
TypeScript
95 lines
3.4 KiB
TypeScript
import { AnswerResponse, QuestionVariant } from "@/api/types";
|
|
import { useUserTest } from "@/api/userTests";
|
|
import Question from "@/components/question";
|
|
import Answer from "@/components/ui/answer";
|
|
import { Button, ButtonText } from "@/components/ui/button";
|
|
import Content from "@/components/ui/content";
|
|
import { Divider } from "@/components/ui/divider";
|
|
import UserTest from "@/components/user-test";
|
|
import { getUserTestStatus, TestStatus } from "@/utils/get-user-test-status";
|
|
import getUserTestTitle from "@/utils/get-user-test-title";
|
|
import { router, Stack, useLocalSearchParams } from "expo-router";
|
|
import { View } from "react-native";
|
|
|
|
const UserTestScreen = () => {
|
|
const { id: idParam } = useLocalSearchParams<{ id: string }>();
|
|
const id = +idParam;
|
|
const { data: userTest } = useUserTest(id);
|
|
|
|
if (!userTest)
|
|
return (
|
|
<>
|
|
<Stack.Screen options={{ title: `Test #${id}` }} />
|
|
<Content><UserTest /></Content>
|
|
</>
|
|
);
|
|
|
|
const status = getUserTestStatus(userTest);
|
|
const displayCorrectAnswers = status !== TestStatus.InProgress;
|
|
|
|
const handleContinueTest = () => {
|
|
router.push(`/user-tests/doing/${userTest.id}`);
|
|
}
|
|
const isCorrectVariation = (answer: AnswerResponse, variant: QuestionVariant) => {
|
|
if(answer.is_correct) return true;
|
|
|
|
const isCorrectVariant = (answer.question.correct_answers as number[]).includes(variant.id);
|
|
const isUserAnsweredVariant = answer.answer ? (answer.answer as number[]).includes(variant.id) : false;
|
|
|
|
return isCorrectVariant === isUserAnsweredVariant;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Stack.Screen options={{ title: getUserTestTitle(userTest) }} />
|
|
<Content>
|
|
<View className="mb-3">
|
|
<UserTest userTest={userTest} />
|
|
</View>
|
|
|
|
{status === TestStatus.InProgress && <Button className="mb-3" onPress={handleContinueTest}>
|
|
<ButtonText>Continue</ButtonText>
|
|
</Button>}
|
|
|
|
<Divider className="mb-4" />
|
|
|
|
<View className="gap-3">
|
|
{userTest.answers.map((answer) => (
|
|
<View key={answer.id}>
|
|
<Question question={answer.question} withCategory={false} />
|
|
<View className="mt-2 pl-5">
|
|
{answer.question.type !== 'text' && answer.question.variants.map((variant) => (
|
|
<View key={variant.id} className="mb-2">
|
|
<Answer
|
|
answer={variant}
|
|
isTextType={false}
|
|
userAnswers={answer.answer}
|
|
correctAnswers={answer.question.correct_answers}
|
|
isCorrectUserAnswer={isCorrectVariation(answer, variant)}
|
|
displayUserAnswer={true}
|
|
displayCorrect={displayCorrectAnswers}
|
|
/>
|
|
</View>
|
|
))}
|
|
{answer.question.type === 'text' && (
|
|
<View className="mb-2">
|
|
<Answer
|
|
answer={{ id: 0, text: answer.answer ? answer.answer[0] as string : '-' }}
|
|
isTextType={true}
|
|
isCorrectUserAnswer={answer.is_correct}
|
|
displayUserAnswer={true}
|
|
displayCorrect={displayCorrectAnswers}
|
|
/>
|
|
</View>
|
|
)}
|
|
</View>
|
|
</View>
|
|
))}
|
|
</View>
|
|
|
|
</Content>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default UserTestScreen; |