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

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

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

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

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

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

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

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

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

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

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

10
app/+html.tsx
View file

@ -9,18 +9,18 @@ export default function Root({ children }: PropsWithChildren) {
return ( return (
<html lang="en"> <html lang="en">
<head> <head>
<meta charSet="utf-8" /> <meta charSet="utf-8"/>
<meta httpEquiv="X-UA-Compatible" content="IE=edge" /> <meta httpEquiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <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. 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. 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. */} {/* 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... */} {/* Add any additional <head> elements that you want globally available on web... */}
</head> </head>
<body>{children}</body> <body>{children}</body>

30
app/_layout.tsx
View file

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

24
app/index.tsx
View file

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