zdam-egzamin-zawodowy
/
mobile-app
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[TestScreen]: add Header

This commit is contained in:
Dawid Wysokiński 2021-04-05 17:02:05 +02:00
parent bad61f4636
commit cf157c3529
4 changed files with 90 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/screens/HomeScreen/components/Professions/QualificationModal.tsx
View File

@ -88,6 +88,9 @@ const QualificationModal = ({
index === QUESTIONS.length - 1 ? {} : styles.marginRight,
]}
onPress={() => {
if (onPressBackdrop) {
onPressBackdrop();
}
navigation.navigate(Screen.Test, {
qualificationID: qualification?.id ?? 0,
limit: question,

32
src/screens/TestScreen/TestScreen.tsx
View File

@ -1,11 +1,15 @@
import React from 'react';
import { RouteProp } from '@react-navigation/native';
import { useQuery } from '@apollo/client';
import { NetworkStatus, useQuery } from '@apollo/client';
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 { Container, Content, H1 } from 'native-base';
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';
export interface TestScreenProps {
route: RouteProp<AppStackParamList, Screen.Test>;
@ -18,7 +22,8 @@ type QueryGenerateTestSimilarQualificationsQualificationArgs = {
};
const TestScreen = ({ route }: TestScreenProps) => {
const { data, loading } = useQuery<
const variables = useVariables();
const { data, loading, networkStatus } = useQuery<
Pick<Query, 'qualification' | 'generateTest' | 'similarQualifications'>,
QueryGenerateTestSimilarQualificationsQualificationArgs
>(QUERY_GENERATE_TEST_SIMILAR_QUALIFICATIONS_QUALIFICATION, {
@ -28,12 +33,27 @@ const TestScreen = ({ route }: TestScreenProps) => {
limitTest: route.params.limit,
limitSuggestions: 6,
},
notifyOnNetworkStatusChange: true,
});
console.log(data);
return (
<Container>
<Content>
<H1>TestScreen</H1>
<Header
title={`Test ${route.params.limit} ${polishPlurals(
'pytanie',
'pytania',
'pytań',
route.params.limit,
)}`}
/>
<Content padder contentContainerStyle={{ flexGrow: 1 }}>
{loading || networkStatus === NetworkStatus.refetch ? (
<Spinner color={variables.brandPrimary} />
) : data?.qualification ? (
<View></View>
) : (
<QualificationNotFound />
)}
</Content>
</Container>
);

36
src/screens/TestScreen/components/Header/Header.tsx Normal file
View File

@ -0,0 +1,36 @@
import React from 'react';
import { useNavigation } from '@react-navigation/native';
import {
Icon,
Left,
Button,
Title,
Body,
Header as NBHeader,
Right,
} from 'native-base';
export interface HeaderProps {
title: string;
}
const Header = ({ title }: HeaderProps) => {
const navigation = useNavigation();
return (
<NBHeader hasTabs>
<Left>
<Button transparent onPress={navigation.goBack}>
<Icon name="arrow-back" />
</Button>
</Left>
<Body>
<Title>{title}</Title>
</Body>
<Right />
</NBHeader>
);
};
export default Header;

25
src/screens/TestScreen/components/QualificationNotFound/QualificationNotFound.tsx Normal file
View File

@ -0,0 +1,25 @@
import React from 'react';
import { StyleSheet } from 'react-native';
import { H1, View } from 'native-base';
const QualificationNotFound = () => {
return (
<View style={styles.wrapper}>
<H1 style={styles.heading}>Kwalifikacja nie została znaleziona</H1>
</View>
);
};
const styles = StyleSheet.create({
wrapper: {
flexGrow: 1,
},
heading: {
textAlignVertical: 'center',
textAlign: 'center',
flex: 1,
},
});
export default QualificationNotFound;