128 lines
4 KiB
TypeScript
128 lines
4 KiB
TypeScript
import { Stack } from 'expo-router';
|
|
import { StyleSheet, TextInput, TouchableOpacity } from 'react-native';
|
|
|
|
import { ThemedText } from '@/components/ThemedText';
|
|
import { ThemedView } from '@/components/ThemedView';
|
|
import { useToken } from '@/context/AppProvider';
|
|
import { Colors } from '@/constants/Colors';
|
|
import React from 'react';
|
|
import { useColorScheme } from '@/hooks/useColorScheme';
|
|
import { Message } from '@/services/message';
|
|
import { Request } from '@/services/request';
|
|
import { router } from 'expo-router';
|
|
|
|
export default function OnboardStartScreen() {
|
|
const colorScheme = useColorScheme() ?? 'light';
|
|
const { setToken } = useToken();
|
|
const [ name, setName ] = React.useState( '' );
|
|
const [ zipcode, setZipcode ] = React.useState( '' );
|
|
const [ houseNumber, setHouseNumber ] = React.useState( '' );
|
|
|
|
const start = () => {
|
|
if (name === '' || zipcode === '' || houseNumber === '') {
|
|
Message.error( 'Niet alle gegevens zijn ingevuld!' );
|
|
|
|
return;
|
|
}
|
|
|
|
// TODO: Get device name
|
|
const deviceName = 'Test';
|
|
|
|
Request
|
|
.post( 'sessions/create', {
|
|
name: name,
|
|
zipcode: zipcode,
|
|
houseNumber: houseNumber,
|
|
device: deviceName,
|
|
} )
|
|
.then( (response) => {
|
|
if (!response.success) {
|
|
Message.error( response.message );
|
|
} else {
|
|
const token = response.token;
|
|
|
|
setToken( token );
|
|
router.replace( "/(tabs)" );
|
|
|
|
Message.success( response.message );
|
|
}
|
|
} );
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Stack.Screen options={{ title: 'Welkom' }}/>
|
|
<ThemedView style={styles.container}>
|
|
<ThemedView style={styles.heading}>
|
|
<ThemedText type="title">Welkom bij </ThemedText>
|
|
<ThemedText type="title" style={{ color: Colors[ colorScheme ].tint }}>Kliko</ThemedText>
|
|
</ThemedView>
|
|
|
|
<ThemedView style={styles.inputContainer}>
|
|
<ThemedText>Wat is je naam?</ThemedText>
|
|
<TextInput
|
|
style={styles.input}
|
|
onChangeText={setName}
|
|
placeholder={'Je naam'}
|
|
value={name}
|
|
/>
|
|
</ThemedView>
|
|
|
|
<ThemedView style={styles.inputContainer}>
|
|
<ThemedText>Wat is je postcode en huisnummer?</ThemedText>
|
|
<TextInput
|
|
style={styles.input}
|
|
onChangeText={setZipcode}
|
|
placeholder={'Postcode'}
|
|
value={zipcode}
|
|
/>
|
|
<TextInput
|
|
style={styles.input}
|
|
onChangeText={setHouseNumber}
|
|
placeholder={'Huisnummer'}
|
|
value={houseNumber}
|
|
keyboardType="numeric"
|
|
/>
|
|
</ThemedView>
|
|
|
|
|
|
<TouchableOpacity style={{ ...styles.button, backgroundColor: Colors[ colorScheme ].tint }} onPress={start}>
|
|
<ThemedText style={{ color: '#fff' }}>Start</ThemedText>
|
|
</TouchableOpacity>
|
|
</ThemedView>
|
|
</>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create( {
|
|
container: {
|
|
padding: 20,
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
heading: {
|
|
marginBottom: 30,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
inputContainer: {
|
|
paddingTop: 20,
|
|
},
|
|
input: {
|
|
width: 250,
|
|
borderWidth: 1,
|
|
padding: 10,
|
|
paddingLeft: 20,
|
|
borderRadius: 3,
|
|
marginBottom: 10,
|
|
},
|
|
button: {
|
|
borderRadius: 5,
|
|
paddingTop: 10,
|
|
paddingBottom: 10,
|
|
paddingLeft: 40,
|
|
paddingRight: 40,
|
|
marginTop: 30,
|
|
},
|
|
} );
|