[TestScreen]: add Suggestions.tsx
This commit is contained in:
parent
cf157c3529
commit
405d9a9775
|
|
@ -1,15 +1,17 @@
|
|||
import React from 'react';
|
||||
import { RouteProp } from '@react-navigation/native';
|
||||
import { polishPlurals } from 'polish-plurals';
|
||||
import { NetworkStatus, useQuery } from '@apollo/client';
|
||||
import { RouteProp } from '@react-navigation/native';
|
||||
import { useVariables } from 'libs/native-base';
|
||||
import { Query, Scalars } from 'libs/graphql';
|
||||
import { AppStackParamList, Screen } from 'config/routing';
|
||||
import { QUERY_GENERATE_TEST_SIMILAR_QUALIFICATIONS_QUALIFICATION } from './queries';
|
||||
|
||||
import { StyleSheet } from 'react-native';
|
||||
import { Container, Content, Spinner, View } from 'native-base';
|
||||
import QualificationNotFound from './components/QualificationNotFound/QualificationNotFound';
|
||||
import Header from './components/Header/Header';
|
||||
import { polishPlurals } from 'polish-plurals';
|
||||
import Suggestions from './components/Suggestions/Suggestions';
|
||||
|
||||
export interface TestScreenProps {
|
||||
route: RouteProp<AppStackParamList, Screen.Test>;
|
||||
|
|
@ -31,7 +33,7 @@ const TestScreen = ({ route }: TestScreenProps) => {
|
|||
variables: {
|
||||
qualificationID: route.params.qualificationID,
|
||||
limitTest: route.params.limit,
|
||||
limitSuggestions: 6,
|
||||
limitSuggestions: 12,
|
||||
},
|
||||
notifyOnNetworkStatusChange: true,
|
||||
});
|
||||
|
|
@ -46,11 +48,13 @@ const TestScreen = ({ route }: TestScreenProps) => {
|
|||
route.params.limit,
|
||||
)}`}
|
||||
/>
|
||||
<Content padder contentContainerStyle={{ flexGrow: 1 }}>
|
||||
<Content padder contentContainerStyle={styles.contentContainer}>
|
||||
{loading || networkStatus === NetworkStatus.refetch ? (
|
||||
<Spinner color={variables.brandPrimary} />
|
||||
) : data?.qualification ? (
|
||||
<View></View>
|
||||
<Suggestions
|
||||
qualifications={data?.similarQualifications.items ?? []}
|
||||
/>
|
||||
) : (
|
||||
<QualificationNotFound />
|
||||
)}
|
||||
|
|
@ -59,4 +63,10 @@ const TestScreen = ({ route }: TestScreenProps) => {
|
|||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
contentContainer: {
|
||||
flexGrow: 1,
|
||||
},
|
||||
});
|
||||
|
||||
export default TestScreen;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,104 @@
|
|||
import React from 'react';
|
||||
import { useNavigation } from '@react-navigation/native';
|
||||
import { polishPlurals } from 'polish-plurals';
|
||||
import { Qualification } from 'libs/graphql';
|
||||
import { QUESTIONS } from 'config/app';
|
||||
import { Screen } from 'config/routing';
|
||||
|
||||
import { StyleSheet } from 'react-native';
|
||||
import { H1, View, H3, Card, CardItem, Text, Button, Body } from 'native-base';
|
||||
|
||||
export interface SuggestionsProps {
|
||||
qualifications: Qualification[];
|
||||
}
|
||||
|
||||
const Suggestions = ({ qualifications }: SuggestionsProps) => {
|
||||
const navigation = useNavigation();
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<H1
|
||||
style={[
|
||||
styles.textCenter,
|
||||
qualifications.length === 0 ? styles.fullHeight : {},
|
||||
]}
|
||||
>
|
||||
Niestety, ale do wybranej kwalifikacji nie zostały dodane żadne pytania.
|
||||
</H1>
|
||||
{qualifications.length > 0 && (
|
||||
<View style={styles.similarQualificationsContainer}>
|
||||
<H3 style={[styles.textCenter, styles.similarQualificationsHeading]}>
|
||||
Podobne kwalifikacje:
|
||||
</H3>
|
||||
{qualifications.map(qualification => {
|
||||
return (
|
||||
<Card key={qualification.id}>
|
||||
<CardItem header bordered>
|
||||
<Body>
|
||||
{qualification.formula && (
|
||||
<Text note>{qualification.formula}</Text>
|
||||
)}
|
||||
<Text>
|
||||
{qualification.name} ({qualification.code})
|
||||
</Text>
|
||||
</Body>
|
||||
</CardItem>
|
||||
<CardItem>
|
||||
{QUESTIONS.map(question => {
|
||||
return (
|
||||
<Button
|
||||
key={question}
|
||||
onPress={() => {
|
||||
navigation.navigate(Screen.Test, {
|
||||
qualificationID: qualification.id,
|
||||
limit: question,
|
||||
});
|
||||
}}
|
||||
style={styles.button}
|
||||
small
|
||||
>
|
||||
<Text>
|
||||
Test {question}{' '}
|
||||
{polishPlurals(
|
||||
'pytanie',
|
||||
'pytania',
|
||||
'pytań',
|
||||
question,
|
||||
)}
|
||||
</Text>
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</CardItem>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flexGrow: 1,
|
||||
},
|
||||
textCenter: {
|
||||
textAlign: 'center',
|
||||
textAlignVertical: 'center',
|
||||
},
|
||||
fullHeight: {
|
||||
flex: 1,
|
||||
},
|
||||
similarQualificationsContainer: {
|
||||
marginTop: 20,
|
||||
},
|
||||
button: {
|
||||
marginRight: 3,
|
||||
},
|
||||
similarQualificationsHeading: {
|
||||
marginBottom: 10,
|
||||
},
|
||||
});
|
||||
|
||||
export default Suggestions;
|
||||
|
|
@ -38,6 +38,7 @@ export const QUERY_GENERATE_TEST_SIMILAR_QUALIFICATIONS_QUALIFICATION = gql`
|
|||
name
|
||||
code
|
||||
slug
|
||||
formula
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Reference in New Issue