128 lines
3.4 KiB
TypeScript
128 lines
3.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('Maarten');
|
|
const [zipcode, setZipcode] = React.useState('6715GA');
|
|
const [houseNumber, setHouseNumber] = React.useState('3');
|
|
|
|
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,
|
|
},
|
|
});
|