maartenvr98/Kliko
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CS

Browse source
This commit is contained in:
Maarten 2024-08-08 13:13:58 +02:00
parent fe82b69997
commit 3287b9a3b7
10 changed files with 813 additions and 813 deletions
Download patch file Download diff file Expand all files Collapse all files

38
app/(explore)/category.tsx
View file

@ -5,44 +5,44 @@ import {
Dimensions
} from 'react-native';
import {useEffect, useState} from 'react';
import { useEffect, useState } from 'react';
import RenderHtml from 'react-native-render-html';
import {useNavigation} from '@react-navigation/native';
import { useNavigation } from '@react-navigation/native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import {Colors} from '@/constants/Colors';
import {useColorScheme} from '@/hooks/useColorScheme';
import {ThemedView} from '@/components/ThemedView';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';
import { ThemedView } from '@/components/ThemedView';
export default function CategoryScreen() {
const colorScheme = useColorScheme() ?? 'light';
const navigation = useNavigation();
const [description, setDescription] = useState('');
const [ description, setDescription ] = useState( '' );
// Load item from storage
useEffect(() => {
AsyncStorage.getItem('activeCategory').then((data) => {
const itemData: any = JSON.parse(data ?? '{}');
useEffect( () => {
AsyncStorage.getItem( 'activeCategory' ).then( (data) => {
const itemData: any = JSON.parse( data ?? '{}' );
if (itemData != null) {
const {name, description} = itemData;
const { name, description } = itemData;
// Set description
// @ts-ignore
setDescription(description);
setDescription( description );
// Set page title
navigation.setOptions({title: name});
navigation.setOptions( { title: name } );
}
});
}, []);
} );
}, [] );
// HTML render props
const source = {html: description};
const width = Dimensions.get('window').width;
const source = { html: description };
const width = Dimensions.get( 'window' ).width;
return (
<SafeAreaView style={{flex: 1, backgroundColor: Colors[colorScheme].background,}}>
<SafeAreaView style={{ flex: 1, backgroundColor: Colors[ colorScheme ].background, }}>
<ScrollView style={styles.container}>
<ThemedView style={styles.htmlContainer}>
<RenderHtml
@ -55,11 +55,11 @@ export default function CategoryScreen() {
);
}
const styles = StyleSheet.create({
const styles = StyleSheet.create( {
container: {
padding: 25,
},
htmlContainer: {
paddingBottom: 50,
},
})
} )

56
app/(onboarding)/start.tsx
View file

@ -1,26 +1,26 @@
import {Stack} from 'expo-router';
import {StyleSheet, TextInput, TouchableOpacity} from 'react-native';
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 { 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 { 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 { 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!');
Message.error( 'Niet alle gegevens zijn ingevuld!' );
return;
}
@ -29,33 +29,33 @@ export default function OnboardStartScreen() {
const deviceName = 'Test';
Request
.post('sessions/create', {
.post( 'sessions/create', {
name: name,
zipcode: zipcode,
houseNumber: houseNumber,
device: deviceName,
})
.then((response) => {
} )
.then( (response) => {
if (!response.success) {
Message.error(response.message);
Message.error( response.message );
} else {
const token = response.token;
setToken(token);
router.replace("/(tabs)");
setToken( token );
router.replace( "/(tabs)" );
Message.success(response.message);
Message.success( response.message );
}
});
} );
}
return (
<>
<Stack.Screen options={{title: 'Welkom'}}/>
<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>
<ThemedText type="title" style={{ color: Colors[ colorScheme ].tint }}>Kliko</ThemedText>
</ThemedView>
<ThemedView style={styles.inputContainer}>
@ -86,15 +86,15 @@ export default function OnboardStartScreen() {
</ThemedView>
<TouchableOpacity style={{...styles.button, backgroundColor: Colors[colorScheme].tint}} onPress={start}>
<ThemedText style={{color: '#fff'}}>Start</ThemedText>
<TouchableOpacity style={{ ...styles.button, backgroundColor: Colors[ colorScheme ].tint }} onPress={start}>
<ThemedText style={{ color: '#fff' }}>Start</ThemedText>
</TouchableOpacity>
</ThemedView>
</>
);
}
const styles = StyleSheet.create({
const styles = StyleSheet.create( {
container: {
padding: 20,
flex: 1,
@ -125,4 +125,4 @@ const styles = StyleSheet.create({
paddingRight: 40,
marginTop: 30,
},
});
} );

10
app/(tabs)/_layout.tsx
View file

@ -11,7 +11,7 @@ export default function TabLayout() {
return (
<Tabs
screenOptions={{
tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
tabBarActiveTintColor: Colors[ colorScheme ?? 'light' ].tint,
tabBarShowLabel: false,
headerShown: false,
tabBarStyle: {
@ -24,7 +24,7 @@ export default function TabLayout() {
options={{
title: 'Home',
tabBarIcon: ({ color, focused }) => (
<TabBarIcon name={focused ? 'calendar' : 'calendar-outline'} color={color} />
<TabBarIcon name={focused ? 'calendar' : 'calendar-outline'} color={color}/>
),
}}
/>
@ -33,7 +33,7 @@ export default function TabLayout() {
options={{
title: 'Map',
tabBarIcon: ({ color, focused }) => (
<TabBarIcon name={focused ? 'map' : 'map-outline'} color={color} />
<TabBarIcon name={focused ? 'map' : 'map-outline'} color={color}/>
),
}}
/>
@ -42,7 +42,7 @@ export default function TabLayout() {
options={{
title: 'Explore',
tabBarIcon: ({ color, focused }) => (
<TabBarIcon name={focused ? 'trash' : 'trash-outline'} color={color} />
<TabBarIcon name={focused ? 'trash' : 'trash-outline'} color={color}/>
),
}}
/>
@ -51,7 +51,7 @@ export default function TabLayout() {
options={{
title: 'Settings',
tabBarIcon: ({ color, focused }) => (
<TabBarIcon name={focused ? 'settings' : 'settings-outline'} color={color} />
<TabBarIcon name={focused ? 'settings' : 'settings-outline'} color={color}/>
),
}}
/>

86
app/(tabs)/explore.tsx
View file

@ -8,49 +8,49 @@ import {
View,
} from 'react-native';
import React, {useState, useEffect, useRef} from 'react';
import {router} from 'expo-router';
import type {AutocompleteDropdownRef} from 'react-native-autocomplete-dropdown'
import {AutocompleteDropdown} from 'react-native-autocomplete-dropdown';
import React, { useState, useEffect, useRef } from 'react';
import { router } from 'expo-router';
import type { AutocompleteDropdownRef } from 'react-native-autocomplete-dropdown'
import { AutocompleteDropdown } from 'react-native-autocomplete-dropdown';
import Modal from "react-native-modal";
import AsyncStorage from '@react-native-async-storage/async-storage';
import {ThemedText} from '@/components/ThemedText';
import {ThemedView} from '@/components/ThemedView';
import {Colors} from '@/constants/Colors';
import {useColorScheme} from '@/hooks/useColorScheme';
import {Request} from '@/services/request';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';
import { Request } from '@/services/request';
import List from '@/components/List';
export default function ExploreScreen() {
const colorScheme = useColorScheme() ?? 'light';
const [categories, setCategories] = useState([]);
const [types, setTypes] = useState([]);
const [activeCategory, setActiveCategory] = useState<any | null>(null);
const searchRef = useRef(null);
const dropdownController = useRef<AutocompleteDropdownRef | null>(null)
const [ categories, setCategories ] = useState( [] );
const [ types, setTypes ] = useState( [] );
const [ activeCategory, setActiveCategory ] = useState<any | null>( null );
const searchRef = useRef( null );
const dropdownController = useRef<AutocompleteDropdownRef | null>( null )
useEffect(() => {
useEffect( () => {
// Load categories
Request.get('categories').then((response) => {
Request.get( 'categories' ).then( (response) => {
const list: any = [];
response.forEach((category: any, index: any) => {
list.push({
response.forEach( (category: any, index: any) => {
list.push( {
id: index,
title: category.name,
category: category,
})
});
} )
} );
setCategories(list);
})
setCategories( list );
} )
// Load waste types
Request.get('waste-types').then((response) => {
setTypes(response);
});
}, []);
Request.get( 'waste-types' ).then( (response) => {
setTypes( response );
} );
}, [] );
// View selected item in modal
const selectItem = (item: any | null) => {
@ -61,19 +61,19 @@ export default function ExploreScreen() {
// Clear select
dropdownController.current?.clear()
const {category} = item;
setActiveCategory(category);
const { category } = item;
setActiveCategory( category );
}
// View item in sub screen
const viewItem = async (item: any) => {
await AsyncStorage.setItem('activeCategory', JSON.stringify(item));
await AsyncStorage.setItem( 'activeCategory', JSON.stringify( item ) );
router.push('/(explore)/category');
router.push( '/(explore)/category' );
};
return (
<SafeAreaView style={{flex: 1, backgroundColor: Colors[colorScheme].background}}>
<SafeAreaView style={{ flex: 1, backgroundColor: Colors[ colorScheme ].background }}>
<ThemedView>
<ScrollView style={styles.container}>
<ThemedView style={styles.titleContainer}>
@ -81,7 +81,7 @@ export default function ExploreScreen() {
</ThemedView>
<ThemedView style={styles.titleContainer}>
<ThemedText type="title" style={{color: Colors[colorScheme].tint}}>en waarom?</ThemedText>
<ThemedText type="title" style={{ color: Colors[ colorScheme ].tint }}>en waarom?</ThemedText>
</ThemedView>
<ThemedView style={styles.searchContainer}>
@ -114,8 +114,8 @@ export default function ExploreScreen() {
<List
data={types}
renderItem={(item: any, index: any) => (
<TouchableOpacity style={styles.listItem} key={index} onPress={() => viewItem(item)}>
<Image source={{uri: item.image}} style={styles.listImage}/>
<TouchableOpacity style={styles.listItem} key={index} onPress={() => viewItem( item )}>
<Image source={{ uri: item.image }} style={styles.listImage}/>
<ThemedText type="default">{item.name}</ThemedText>
</TouchableOpacity>
)}
@ -125,23 +125,23 @@ export default function ExploreScreen() {
</ThemedView>
<Modal isVisible={activeCategory !== null}>
<ThemedView style={{...styles.modalView, backgroundColor: Colors[colorScheme].background}}>
<ThemedText type="subtitle" style={{marginBottom: 30, textAlign: 'center'}}>{activeCategory?.name}</ThemedText>
<ThemedView style={{ ...styles.modalView, backgroundColor: Colors[ colorScheme ].background }}>
<ThemedText type="subtitle" style={{ marginBottom: 30, textAlign: 'center' }}>{activeCategory?.name}</ThemedText>
<View style={styles.modalType}>
<Image source={{uri: activeCategory?.type.image}} style={styles.modalTypeImage}/>
<Image source={{ uri: activeCategory?.type.image }} style={styles.modalTypeImage}/>
<ThemedText>{activeCategory?.type?.name}</ThemedText>
</View>
<View style={{alignItems: 'center'}}>
<View style={{ alignItems: 'center' }}>
<ThemedText type="defaultSemiBold">Opmerking:</ThemedText>
<ThemedText>{activeCategory?.description}</ThemedText>
</View>
<TouchableOpacity
onPress={() => setActiveCategory(null)}
style={{...styles.modalClose, backgroundColor: Colors[colorScheme].tint}}>
<ThemedText style={{color: '#fff'}}>Sluiten</ThemedText>
onPress={() => setActiveCategory( null )}
style={{ ...styles.modalClose, backgroundColor: Colors[ colorScheme ].tint }}>
<ThemedText style={{ color: '#fff' }}>Sluiten</ThemedText>
</TouchableOpacity>
</ThemedView>
</Modal>
@ -149,7 +149,7 @@ export default function ExploreScreen() {
);
}
const styles = StyleSheet.create({
const styles = StyleSheet.create( {
container: {
marginTop: StatusBar.currentHeight,
padding: 25,
@ -217,4 +217,4 @@ const styles = StyleSheet.create({
paddingRight: 40,
marginTop: 30,
},
});
} );

66
app/(tabs)/index.tsx
View file

@ -1,54 +1,54 @@
import React, {useEffect, useState} from 'react';
import {StyleSheet, ScrollView, SafeAreaView, View, StatusBar, TouchableOpacity, Image} from 'react-native';
import React, { useEffect, useState } from 'react';
import { StyleSheet, ScrollView, SafeAreaView, View, StatusBar, TouchableOpacity, Image } from 'react-native';
// @ts-ignore
import CalendarPicker from 'react-native-calendar-picker';
import Ionicons from '@expo/vector-icons/Ionicons';
import {ThemedText} from '@/components/ThemedText';
import {ThemedView} from '@/components/ThemedView';
import {Colors} from '@/constants/Colors';
import {useColorScheme} from '@/hooks/useColorScheme';
import {useToken} from '@/context/AppProvider';
import {Request} from '@/services/request';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';
import { useToken } from '@/context/AppProvider';
import { Request } from '@/services/request';
import List from '@/components/List';
import { useIsFocused } from '@react-navigation/core';
export default function HomeScreen() {
const colorScheme = useColorScheme() ?? 'light';
const isFocused = useIsFocused();
const {token, isLoading} = useToken();
const [name, setName] = useState(' '); // Default empty space to prevent layout shifting
const [dates, setDates] = useState<any | null>([]);
const [types, setTypes] = useState<any | null>([]);
const { token, isLoading } = useToken();
const [ name, setName ] = useState( ' ' ); // Default empty space to prevent layout shifting
const [ dates, setDates ] = useState<any | null>( [] );
const [ types, setTypes ] = useState<any | null>( [] );
useEffect(() => {
useEffect( () => {
if (token) {
Request.post('calendar', {token: token}).then((response) => {
Request.post( 'calendar', { token: token } ).then( (response) => {
if (response.success) {
// Set name
setName(response.name);
setName( response.name );
// Set dates
let calendarDates: any[] = [];
response.dates.forEach((date: any) => {
calendarDates.push({
date: new Date(date.date),
style: {backgroundColor: date.color},
textStyle: {color: Colors.white},
response.dates.forEach( (date: any) => {
calendarDates.push( {
date: new Date( date.date ),
style: { backgroundColor: date.color },
textStyle: { color: Colors.white },
allowDisabled: true,
})
})
setDates(calendarDates);
} )
} )
setDates( calendarDates );
// Set types
setTypes(response.types);
setTypes( response.types );
}
})
} )
}
}, [isFocused]);
}, [ isFocused ] );
return (
<SafeAreaView style={{flex: 1, backgroundColor: Colors[colorScheme].background,}}>
<SafeAreaView style={{ flex: 1, backgroundColor: Colors[ colorScheme ].background, }}>
<ThemedView style={styles.container}>
<ScrollView>
<ThemedView style={styles.titleContainer}>
@ -56,7 +56,7 @@ export default function HomeScreen() {
</ThemedView>
<ThemedView style={styles.titleContainer}>
<ThemedText type="title" style={{color: Colors[colorScheme].tint}}>{name}</ThemedText>
<ThemedText type="title" style={{ color: Colors[ colorScheme ].tint }}>{name}</ThemedText>
</ThemedView>
<ThemedView style={styles.calendarContainer}>
@ -71,7 +71,7 @@ export default function HomeScreen() {
nextComponent={
<Ionicons size={28} name="chevron-forward"/>
}
weekdays={["Zo", "Ma", "Di", "Woe", "Do", "Vrij", "Zat"]}
weekdays={[ "Zo", "Ma", "Di", "Woe", "Do", "Vrij", "Zat" ]}
months={[
"Januari",
"Februari",
@ -96,8 +96,8 @@ export default function HomeScreen() {
viewStyle={styles.legendaList}
renderItem={(type: any, index: any) => (
<View style={styles.legendaItem} key={index}>
<View style={{...styles.circle, backgroundColor: type.color}}/>
<ThemedText type="default">{ type.name }</ThemedText>
<View style={{ ...styles.circle, backgroundColor: type.color }}/>
<ThemedText type="default">{type.name}</ThemedText>
</View>
)}
/>
@ -123,7 +123,7 @@ function getGreeting() {
return 'Hallo';
}
const styles = StyleSheet.create({
const styles = StyleSheet.create( {
container: {
padding: 25,
marginTop: StatusBar.currentHeight,
@ -168,4 +168,4 @@ const styles = StyleSheet.create({
width: 40,
height: 40,
},
});
} );

86
app/(tabs)/map.tsx
View file

@ -1,78 +1,78 @@
import React, {useEffect, useState} from 'react';
import {Image, SafeAreaView, ScrollView, StatusBar, StyleSheet, Switch, View, Dimensions} from 'react-native';
import Mapbox, {Callout, Camera, MapView, PointAnnotation} from "@rnmapbox/maps";
import React, { useEffect, useState } from 'react';
import { Image, SafeAreaView, ScrollView, StatusBar, StyleSheet, Switch, View, Dimensions } from 'react-native';
import Mapbox, { Callout, Camera, MapView, PointAnnotation } from "@rnmapbox/maps";
Mapbox.setAccessToken("pk.eyJ1IjoibWFhcnRlbnZyOTgiLCJhIjoiY2x6ZDFqMGp1MGVyejJrczhqcXpvYm9iYiJ9.XvYcL62dWiJQiFmG6mOoug");
Mapbox.setAccessToken( "pk.eyJ1IjoibWFhcnRlbnZyOTgiLCJhIjoiY2x6ZDFqMGp1MGVyejJrczhqcXpvYm9iYiJ9.XvYcL62dWiJQiFmG6mOoug" );
import {ThemedText} from '@/components/ThemedText';
import {ThemedView} from '@/components/ThemedView';
import {Colors} from '@/constants/Colors';
import {useColorScheme} from '@/hooks/useColorScheme';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';
import List from '@/components/List';
import {Request} from '@/services/request';
import { Request } from '@/services/request';
export default function MapScreen() {
const colorScheme = useColorScheme() ?? 'light';
const [types, setTypes] = useState<any>([]);
const [markers, setMarkers] = useState<any>([]);
const [ types, setTypes ] = useState<any>( [] );
const [ markers, setMarkers ] = useState<any>( [] );
// Load markers and types
useEffect(() => {
Mapbox.setTelemetryEnabled(false);
useEffect( () => {
Mapbox.setTelemetryEnabled( false );
Request.get('locations').then((response) => {
const {locations, types} = response;
Request.get( 'locations' ).then( (response) => {
const { locations, types } = response;
// Set types
const typesList: any[] = [];
types.forEach((type: any) => {
typesList.push({
types.forEach( (type: any) => {
typesList.push( {
name: type.name,
image: type.image,
isEnabled: false,
type: type.config_name,
});
})
setTypes(typesList);
} );
} )
setTypes( typesList );
// Set markers
setMarkers(locations);
})
}, []);
setMarkers( locations );
} )
}, [] );
// Enable/disable type
const toggleSwitch = (index: any) => {
const newData = types.map((item: any, key: any) =>
key === index ? {...item, isEnabled: !item.isEnabled} : item
const newData = types.map( (item: any, key: any) =>
key === index ? { ...item, isEnabled: !item.isEnabled } : item
);
setTypes(newData);
setTypes( newData );
};
// Get all types that are active
const getActiveTypes = (): Array<String> => {
const list: any[] = [];
types.forEach((type: any) => {
types.forEach( (type: any) => {
if (type.isEnabled) {
list.push(type.type);
list.push( type.type );
}
});
} );
return list;
}
// Get all markers that needs to be visible
const activeMarkers = () => {
return markers.filter((marker: any) => {
return getActiveTypes().includes(marker.waste_type);
});
return markers.filter( (marker: any) => {
return getActiveTypes().includes( marker.waste_type );
} );
}
return (
<SafeAreaView style={{flex: 1, backgroundColor: Colors[colorScheme].background}}>
<SafeAreaView style={{ flex: 1, backgroundColor: Colors[ colorScheme ].background }}>
<ThemedView style={styles.container}>
<ThemedView>
<ThemedView style={styles.titleContainer}>
@ -80,7 +80,7 @@ export default function MapScreen() {
</ThemedView>
<ThemedView style={styles.titleContainer}>
<ThemedText type="title" style={{color: Colors[colorScheme].tint}}>in de buurt</ThemedText>
<ThemedText type="title" style={{ color: Colors[ colorScheme ].tint }}>in de buurt</ThemedText>
</ThemedView>
<ThemedView style={styles.mapContainer}>
@ -91,11 +91,11 @@ export default function MapScreen() {
attributionEnabled={false}
>
<Camera
centerCoordinate={[5.630960, 52.043420]}
centerCoordinate={[ 5.630960, 52.043420 ]}
zoomLevel={13}
animationMode={'none'}
/>
{activeMarkers().map((marker: any, index: any) => (
{activeMarkers().map( (marker: any, index: any) => (
<PointAnnotation
key={marker.id.toString()}
id={marker.id.toString()}
@ -107,7 +107,7 @@ export default function MapScreen() {
</ThemedView>
</Callout>
</PointAnnotation>
))}
) )}
</MapView>
</ThemedView>
</ThemedView>
@ -118,15 +118,15 @@ export default function MapScreen() {
renderItem={(item: any, index: any) => (
<ThemedView style={styles.listItem} key={index}>
<View style={styles.listItemTitle}>
<Image source={{uri: item.image}} style={styles.listImage}/>
<Image source={{ uri: item.image }} style={styles.listImage}/>
<ThemedText type="default">{item.name}</ThemedText>
</View>
<Switch
trackColor={{false: '#767577', true: Colors[colorScheme].tint}}
trackColor={{ false: '#767577', true: Colors[ colorScheme ].tint }}
thumbColor={'#fff'}
value={item.isEnabled}
onValueChange={() => toggleSwitch(index)}
onValueChange={() => toggleSwitch( index )}
/>
</ThemedView>
)}/>
@ -136,7 +136,7 @@ export default function MapScreen() {
);
}
const styles = StyleSheet.create({
const styles = StyleSheet.create( {
container: {
marginTop: StatusBar.currentHeight,
paddingTop: 25,
@ -155,7 +155,7 @@ const styles = StyleSheet.create({
height: 400,
},
map: {
width: Dimensions.get('window').width,
width: Dimensions.get( 'window' ).width,
height: 400,
flex: 1,
},
@ -191,4 +191,4 @@ const styles = StyleSheet.create({
width: 200,
padding: 5,
},
});
} );

10
app/(tabs)/settings.tsx
View file

@ -64,7 +64,7 @@ export default function SettingsScreen() {
// Handle
const handleSave = (inputValues: Record<string, string>) => {
let postData: any = {token: token};
let postData: any = { token: token };
if (inputValues.name) {
postData[ 'name' ] = inputValues.name;
@ -80,7 +80,7 @@ export default function SettingsScreen() {
Request.post( 'sessions/update', postData )
.then( (response) => {
console.log('save', response);
console.log( 'save', response );
if (response.success) {
setSessionData( response.session );
@ -90,9 +90,9 @@ export default function SettingsScreen() {
Message.error( response.message );
}
} )
.catch((error) => {
console.log('error', error);
})
.catch( (error) => {
console.log( 'error', error );
} )
};
const logout = () => {

10
app/+html.tsx
View file

@ -9,18 +9,18 @@ export default function Root({ children }: PropsWithChildren) {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta charSet="utf-8"/>
<meta httpEquiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
{/*
Disable body scrolling on web. This makes ScrollView components work closer to how they do on native.
However, body scrolling is often nice to have for mobile web. If you want to enable it, remove this line.
*/}
<ScrollViewStyleReset />
<ScrollViewStyleReset/>
{/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */}
<style dangerouslySetInnerHTML={{ __html: responsiveBackground }} />
<style dangerouslySetInnerHTML={{ __html: responsiveBackground }}/>
{/* Add any additional <head> elements that you want globally available on web... */}
</head>
<body>{children}</body>

30
app/_layout.tsx
View file

@ -1,14 +1,14 @@
import {useFonts} from 'expo-font';
import {Slot, Stack} from 'expo-router';
import { useFonts } from 'expo-font';
import { Slot, Stack } from 'expo-router';
import * as SplashScreen from 'expo-splash-screen';
import {useEffect} from 'react';
import { useEffect } from 'react';
import 'react-native-reanimated';
import {AppProvider} from '@/context/AppProvider';
import {DarkTheme, DefaultTheme, ThemeProvider} from '@react-navigation/native';
import { AppProvider } from '@/context/AppProvider';
import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
import Toast from 'react-native-toast-message';
import {AutocompleteDropdownContextProvider} from 'react-native-autocomplete-dropdown';
import {useColorScheme} from '@/hooks/useColorScheme';
import { AutocompleteDropdownContextProvider } from 'react-native-autocomplete-dropdown';
import { useColorScheme } from '@/hooks/useColorScheme';
// Prevent the splash screen from auto-hiding before asset loading is complete.
// SplashScreen.preventAutoHideAsync();
@ -16,15 +16,15 @@ import {useColorScheme} from '@/hooks/useColorScheme';
export default function RootLayout() {
const colorScheme = useColorScheme();
const [loaded] = useFonts({
SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
});
const [ loaded ] = useFonts( {
SpaceMono: require( '../assets/fonts/SpaceMono-Regular.ttf' ),
} );
useEffect(() => {
useEffect( () => {
if (loaded) {
// SplashScreen.hideAsync();
}
}, [loaded]);
}, [ loaded ] );
if (!loaded) {
return null;
@ -35,9 +35,9 @@ export default function RootLayout() {
<AutocompleteDropdownContextProvider>
<ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
<Stack>
<Stack.Screen name="(tabs)" options={{headerShown: false}}/>
<Stack.Screen name="(onboarding)/start" options={{headerShown: false}}/>
<Stack.Screen name="index" options={{headerShown: false}}/>
<Stack.Screen name="(tabs)" options={{ headerShown: false }}/>
<Stack.Screen name="(onboarding)/start" options={{ headerShown: false }}/>
<Stack.Screen name="index" options={{ headerShown: false }}/>
</Stack>
<Toast/>
</ThemeProvider>

24
app/index.tsx
View file

@ -1,10 +1,10 @@
import React, {useEffect} from 'react';
import {Redirect, router, useRouter} from 'expo-router';
import React, { useEffect } from 'react';
import { Redirect, router, useRouter } from 'expo-router';
import {ThemedText} from '@/components/ThemedText';
import {ThemedView} from '@/components/ThemedView';
import {useToken} from '@/context/AppProvider';
import {Request} from '@/services/request';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import { useToken } from '@/context/AppProvider';
import { Request } from '@/services/request';
export default function OnboardStartScreen() {
@ -17,28 +17,28 @@ export default function OnboardStartScreen() {
</ThemedView>
);
useEffect(() => {
useEffect( () => {
const fetchData = async () => {
const response = await Request.post('sessions/get', { token: token });
const response = await Request.post( 'sessions/get', { token: token } );
if (response.success) {
// @ts-ignore
router.replace('/(tabs)/settings');
router.replace( '/(tabs)/settings' );
} else {
router.replace('/(onboarding)/start');
router.replace( '/(onboarding)/start' );
}
};
if (!isLoading && token) {
fetchData();
}
}, [isLoading, token, router]);
}, [ isLoading, token, router ] );
if (isLoading) {
return loadingScreen();
}
if (!token) {
return <Redirect href="/(onboarding)/start" />;
return <Redirect href="/(onboarding)/start"/>;
}
return loadingScreen();