127 lines
3.4 KiB
TypeScript
127 lines
3.4 KiB
TypeScript
import React, { Fragment } from 'react';
|
|
import Config from 'react-native-config';
|
|
import { Answer, Question as QuestionT } from 'libs/graphql';
|
|
import { useVariables } from 'libs/native-base';
|
|
import buildURL from 'utils/buildURL';
|
|
|
|
import { Linking, StyleSheet } from 'react-native';
|
|
import { Button, H1, Text } from 'native-base';
|
|
import Content from '../Content/Content';
|
|
import Image from './Image';
|
|
import Alert, { AlertVariant } from './Alert';
|
|
|
|
export type QuestionProps = {
|
|
question: QuestionT;
|
|
reviewMode: boolean;
|
|
selectedAnswer: Answer;
|
|
selectAnswer: (a: Answer) => void;
|
|
};
|
|
|
|
const ANSWERS = Object.values(Answer);
|
|
|
|
const Question = ({
|
|
question,
|
|
selectedAnswer,
|
|
reviewMode,
|
|
selectAnswer,
|
|
}: QuestionProps) => {
|
|
const variables = useVariables();
|
|
|
|
return (
|
|
<Content>
|
|
{reviewMode && (
|
|
<Alert
|
|
title="Znalazłeś błąd w pytaniu?"
|
|
style={styles.mb}
|
|
actions={
|
|
<Button
|
|
dark
|
|
danger
|
|
onPress={() =>
|
|
Linking.openURL(buildURL('email', Config.CONTACT_EMAIL))
|
|
}
|
|
>
|
|
<Text>Zgłoś go.</Text>
|
|
</Button>
|
|
}
|
|
/>
|
|
)}
|
|
{question.from && <Text note>{question.from}</Text>}
|
|
<H1 style={styles.mb}>{question.content}</H1>
|
|
{question.image ? (
|
|
<Image
|
|
path={question.image + '?' + new Date(question.updatedAt).getTime()}
|
|
style={styles.mb}
|
|
/>
|
|
) : null}
|
|
{reviewMode && (
|
|
<Fragment>
|
|
{!selectedAnswer ? (
|
|
<Alert
|
|
title="W tym pytaniu nie wybrałeś żadnej odpowiedzi."
|
|
variant={AlertVariant.Warning}
|
|
style={styles.mb}
|
|
/>
|
|
) : null}
|
|
{question.explanation ? (
|
|
<Alert
|
|
title="Wyjaśnienie"
|
|
description={question.explanation}
|
|
style={styles.mb}
|
|
/>
|
|
) : null}
|
|
</Fragment>
|
|
)}
|
|
{ANSWERS.map((answer, index) => {
|
|
const upper = answer.toUpperCase();
|
|
const image = question[
|
|
`answer${upper}Image` as keyof QuestionT
|
|
] as string;
|
|
const answerContent = question[
|
|
`answer${upper}` as keyof QuestionT
|
|
] as string;
|
|
const isCorrect = answer === question.correctAnswer;
|
|
const isSelected = selectedAnswer === answer;
|
|
return (
|
|
<Button
|
|
key={answer}
|
|
style={[
|
|
index + 1 === ANSWERS.length ? undefined : styles.mb,
|
|
styles.button,
|
|
{ minHeight: variables.buttonHeightNormal },
|
|
]}
|
|
success={reviewMode && isCorrect}
|
|
danger={reviewMode && isSelected && !isCorrect}
|
|
bordered={reviewMode ? !isSelected && !isCorrect : !isSelected}
|
|
full
|
|
vertical
|
|
onPress={() => selectAnswer(answer)}
|
|
>
|
|
<Text style={styles.answerContent} uppercase={false}>
|
|
{upper}. {answerContent}
|
|
</Text>
|
|
{image ? <Image path={image} style={styles.answerImage} /> : null}
|
|
</Button>
|
|
);
|
|
})}
|
|
</Content>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
mb: {
|
|
marginBottom: 15,
|
|
},
|
|
button: {
|
|
height: 'auto',
|
|
},
|
|
answerContent: {
|
|
alignSelf: 'flex-start',
|
|
},
|
|
answerImage: {
|
|
marginTop: 5,
|
|
},
|
|
});
|
|
|
|
export default Question;
|