diff --git a/app/(explore)/category.tsx b/app/(explore)/category.tsx index 3c2cd2d..2920fd2 100644 --- a/app/(explore)/category.tsx +++ b/app/(explore)/category.tsx @@ -1,65 +1,65 @@ import { - SafeAreaView, - ScrollView, - StyleSheet, - Dimensions + SafeAreaView, + ScrollView, + StyleSheet, + 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 colorScheme = useColorScheme() ?? 'light'; + const navigation = useNavigation(); + const [ description, setDescription ] = useState( '' ); - // Load item from storage - useEffect(() => { - AsyncStorage.getItem('activeCategory').then((data) => { - const itemData: any = JSON.parse(data ?? '{}'); + // Load item from storage + useEffect( () => { + AsyncStorage.getItem( 'activeCategory' ).then( (data) => { + const itemData: any = JSON.parse( data ?? '{}' ); - if (itemData != null) { - const {name, description} = itemData; + if (itemData != null) { + const { name, description } = itemData; - // Set description - // @ts-ignore - setDescription(description); + // Set description + // @ts-ignore + setDescription( description ); - // Set page title - navigation.setOptions({title: name}); - } - }); - }, []); + // Set page title + navigation.setOptions( { title: name } ); + } + } ); + }, [] ); - // HTML render props - const source = {html: description}; - const width = Dimensions.get('window').width; + // HTML render props + const source = { html: description }; + const width = Dimensions.get( 'window' ).width; - return ( - - - - - - - - ); + return ( + + + + + + + + ); } -const styles = StyleSheet.create({ - container: { - padding: 25, - }, - htmlContainer: { - paddingBottom: 50, - }, -}) \ No newline at end of file +const styles = StyleSheet.create( { + container: { + padding: 25, + }, + htmlContainer: { + paddingBottom: 50, + }, +} ) \ No newline at end of file diff --git a/app/(onboarding)/start.tsx b/app/(onboarding)/start.tsx index 634efd8..c44b77d 100644 --- a/app/(onboarding)/start.tsx +++ b/app/(onboarding)/start.tsx @@ -1,128 +1,128 @@ -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 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!'); + const start = () => { + if (name === '' || zipcode === '' || houseNumber === '') { + Message.error( 'Niet alle gegevens zijn ingevuld!' ); - return; + 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 ); + } + } ); } - // TODO: Get device name - const deviceName = 'Test'; + return ( + <> + + + + Welkom bij + Kliko + - 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; + + Wat is je naam? + + - setToken(token); - router.replace("/(tabs)"); - - Message.success(response.message); - } - }); - } - - return ( - <> - - - - Welkom bij - Kliko - - - - Wat is je naam? - - - - - Wat is je postcode en huisnummer? - - - + + Wat is je postcode en huisnummer? + + + - - Start - - - - ); + + Start + + + + ); } -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, - }, -}); +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, + }, +} ); diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx index 15152b8..5759a2d 100644 --- a/app/(tabs)/_layout.tsx +++ b/app/(tabs)/_layout.tsx @@ -6,55 +6,55 @@ import { Colors } from '@/constants/Colors'; import { useColorScheme } from '@/hooks/useColorScheme'; export default function TabLayout() { - const colorScheme = useColorScheme(); + const colorScheme = useColorScheme(); - return ( - - ( - - ), - }} - /> - ( - - ), - }} - /> - ( - - ), - }} - /> - ( - - ), - }} - /> - - ); + return ( + + ( + + ), + }} + /> + ( + + ), + }} + /> + ( + + ), + }} + /> + ( + + ), + }} + /> + + ); } diff --git a/app/(tabs)/explore.tsx b/app/(tabs)/explore.tsx index 5a0756c..bdb5ff2 100644 --- a/app/(tabs)/explore.tsx +++ b/app/(tabs)/explore.tsx @@ -1,220 +1,220 @@ import { - StyleSheet, - ScrollView, - SafeAreaView, - StatusBar, - Image, - TouchableOpacity, - View, + StyleSheet, + ScrollView, + SafeAreaView, + StatusBar, + Image, + TouchableOpacity, + 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(null); - const searchRef = useRef(null); - const dropdownController = useRef(null) + const colorScheme = useColorScheme() ?? 'light'; + const [ categories, setCategories ] = useState( [] ); + const [ types, setTypes ] = useState( [] ); + const [ activeCategory, setActiveCategory ] = useState( null ); + const searchRef = useRef( null ); + const dropdownController = useRef( null ) - useEffect(() => { - // Load categories - Request.get('categories').then((response) => { - const list: any = []; + useEffect( () => { + // Load categories + Request.get( 'categories' ).then( (response) => { + const list: any = []; - response.forEach((category: any, index: any) => { - list.push({ - id: index, - title: category.name, - category: category, - }) - }); + 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); - }); - }, []); + // Load waste types + Request.get( 'waste-types' ).then( (response) => { + setTypes( response ); + } ); + }, [] ); - // View selected item in modal - const selectItem = (item: any | null) => { - if (item == null) { - return; + // View selected item in modal + const selectItem = (item: any | null) => { + if (item == null) { + return; + } + + // Clear select + dropdownController.current?.clear() + + const { category } = item; + setActiveCategory( category ); } - // Clear select - dropdownController.current?.clear() + // View item in sub screen + const viewItem = async (item: any) => { + await AsyncStorage.setItem( 'activeCategory', JSON.stringify( item ) ); - const {category} = item; - setActiveCategory(category); - } + router.push( '/(explore)/category' ); + }; - // View item in sub screen - const viewItem = async (item: any) => { - await AsyncStorage.setItem('activeCategory', JSON.stringify(item)); + return ( + + + + + Wat moet waar? + - router.push('/(explore)/category'); - }; + + en waarom? + - return ( - - - - - Wat moet waar? - + + Wat wilt u scheiden? + { + dropdownController.current = controller + }} + textInputProps={{ + placeholder: 'Wat wilt u scheiden?', + autoCorrect: false, + autoCapitalize: 'none', + }} + clearOnFocus={false} + closeOnBlur={false} + closeOnSubmit={false} + emptyResultText={'Niks gevonden'} + onSelectItem={selectItem} + dataSet={categories} + showClear={false} + /> + - - en waarom? - + + Of kies een categorie: + - - Wat wilt u scheiden? - { - dropdownController.current = controller - }} - textInputProps={{ - placeholder: 'Wat wilt u scheiden?', - autoCorrect: false, - autoCapitalize: 'none', - }} - clearOnFocus={false} - closeOnBlur={false} - closeOnSubmit={false} - emptyResultText={'Niks gevonden'} - onSelectItem={selectItem} - dataSet={categories} - showClear={false} - /> - + + ( + viewItem( item )}> + + {item.name} + + )} + /> + + + - - Of kies een categorie: - + + + {activeCategory?.name} - - ( - viewItem(item)}> - - {item.name} - - )} - /> - - - + + + {activeCategory?.type?.name} + - - - {activeCategory?.name} + + Opmerking: + {activeCategory?.description} + - - - {activeCategory?.type?.name} - - - - Opmerking: - {activeCategory?.description} - - - setActiveCategory(null)} - style={{...styles.modalClose, backgroundColor: Colors[colorScheme].tint}}> - Sluiten - - - - - ); + setActiveCategory( null )} + style={{ ...styles.modalClose, backgroundColor: Colors[ colorScheme ].tint }}> + Sluiten + + + + + ); } -const styles = StyleSheet.create({ - container: { - marginTop: StatusBar.currentHeight, - padding: 25, - }, - titleContainer: { - flexDirection: 'row', - alignItems: 'center', - gap: 8, - paddingBottom: 8, - }, - searchContainer: { - marginTop: 10, - }, - categoriesContainer: { - marginTop: 25, - }, - listContainer: { - marginTop: 10, - paddingBottom: 50 - }, - listItem: { - flex: 1, - display: 'flex', - gap: 8, - flexDirection: 'row', - alignItems: 'center', - paddingBottom: 10, - marginBottom: 10, - borderBottomWidth: 1, - borderBottomColor: '#f2f2f2', - }, - listImage: { - width: 30, - height: 30, - borderRadius: 5, - marginRight: 8, - }, - modalView: { - margin: 20, - borderRadius: 5, - padding: 35, - alignItems: 'center', - textAlign: 'center', - }, - modalType: { - flex: 1, - display: 'flex', - gap: 8, - flexDirection: 'row', - alignItems: 'center', - paddingBottom: 10, - marginBottom: 30, - }, - modalTypeImage: { - width: 40, - height: 40, - borderRadius: 5, - marginRight: 8, - }, - modalClose: { - borderRadius: 5, - paddingTop: 10, - paddingBottom: 10, - paddingLeft: 40, - paddingRight: 40, - marginTop: 30, - }, -}); +const styles = StyleSheet.create( { + container: { + marginTop: StatusBar.currentHeight, + padding: 25, + }, + titleContainer: { + flexDirection: 'row', + alignItems: 'center', + gap: 8, + paddingBottom: 8, + }, + searchContainer: { + marginTop: 10, + }, + categoriesContainer: { + marginTop: 25, + }, + listContainer: { + marginTop: 10, + paddingBottom: 50 + }, + listItem: { + flex: 1, + display: 'flex', + gap: 8, + flexDirection: 'row', + alignItems: 'center', + paddingBottom: 10, + marginBottom: 10, + borderBottomWidth: 1, + borderBottomColor: '#f2f2f2', + }, + listImage: { + width: 30, + height: 30, + borderRadius: 5, + marginRight: 8, + }, + modalView: { + margin: 20, + borderRadius: 5, + padding: 35, + alignItems: 'center', + textAlign: 'center', + }, + modalType: { + flex: 1, + display: 'flex', + gap: 8, + flexDirection: 'row', + alignItems: 'center', + paddingBottom: 10, + marginBottom: 30, + }, + modalTypeImage: { + width: 40, + height: 40, + borderRadius: 5, + marginRight: 8, + }, + modalClose: { + borderRadius: 5, + paddingTop: 10, + paddingBottom: 10, + paddingLeft: 40, + paddingRight: 40, + marginTop: 30, + }, +} ); diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx index 63268d0..7b2f6b9 100644 --- a/app/(tabs)/index.tsx +++ b/app/(tabs)/index.tsx @@ -1,171 +1,171 @@ -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([]); - const [types, setTypes] = useState([]); + 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( [] ); + const [ types, setTypes ] = useState( [] ); - useEffect(() => { - if (token) { - Request.post('calendar', {token: token}).then((response) => { - if (response.success) { - // Set name - setName(response.name); + useEffect( () => { + if (token) { + Request.post( 'calendar', { token: token } ).then( (response) => { + if (response.success) { + // Set 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}, - allowDisabled: true, - }) - }) - setDates(calendarDates); + // 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 }, + allowDisabled: true, + } ) + } ) + setDates( calendarDates ); - // Set types - setTypes(response.types); + // Set types + setTypes( response.types ); + } + } ) } - }) - } - }, [isFocused]); + }, [ isFocused ] ); - return ( - - - - - {getGreeting()}, - + return ( + + + + + {getGreeting()}, + - - {name} - + + {name} + - - - } - nextComponent={ - - } - weekdays={["Zo", "Ma", "Di", "Woe", "Do", "Vrij", "Zat"]} - months={[ - "Januari", - "Februari", - "Maart", - "April", - "Mei", - "Juni", - "Juli", - "Augustus", - "September", - "Oktober", - "November", - "December", - ]} - /> - + + + } + nextComponent={ + + } + weekdays={[ "Zo", "Ma", "Di", "Woe", "Do", "Vrij", "Zat" ]} + months={[ + "Januari", + "Februari", + "Maart", + "April", + "Mei", + "Juni", + "Juli", + "Augustus", + "September", + "Oktober", + "November", + "December", + ]} + /> + - - Legenda: - ( - - - { type.name } - - )} - /> - - - - - ); + + Legenda: + ( + + + {type.name} + + )} + /> + + + + + ); } function getGreeting() { - const myDate = new Date(); - const hours = myDate.getHours(); + const myDate = new Date(); + const hours = myDate.getHours(); - if (hours < 12) { - return 'Goedemorgen'; - } else if (hours >= 12 && hours <= 17) { - return 'Goedemiddag'; - } else if (hours >= 17 && hours <= 24) { - return 'Goedenavond'; - } + if (hours < 12) { + return 'Goedemorgen'; + } else if (hours >= 12 && hours <= 17) { + return 'Goedemiddag'; + } else if (hours >= 17 && hours <= 24) { + return 'Goedenavond'; + } - return 'Hallo'; + return 'Hallo'; } -const styles = StyleSheet.create({ - container: { - padding: 25, - marginTop: StatusBar.currentHeight, - }, - titleContainer: { - flexDirection: 'row', - alignItems: 'center', - gap: 8, - paddingBottom: 8, - }, - calendarContainer: { - marginTop: 15, - }, - legendaContainer: { - marginTop: 40, - }, - legendaList: { - marginTop: 15, - flex: 1, - flexDirection: 'column', - alignContent: 'center', - gap: 15, - }, - legendaItem: { - flex: 1, - flexDirection: 'row', - alignItems: 'center', - gap: 8, - flexGrow: 1, - }, - circle: { - width: 25, - height: 25, - borderRadius: 50, - }, - today: { - borderWidth: 3, - borderColor: Colors.dark.grey, - borderRadius: 25, - textAlign: 'center', - paddingTop: 8, - width: 40, - height: 40, - }, -}); +const styles = StyleSheet.create( { + container: { + padding: 25, + marginTop: StatusBar.currentHeight, + }, + titleContainer: { + flexDirection: 'row', + alignItems: 'center', + gap: 8, + paddingBottom: 8, + }, + calendarContainer: { + marginTop: 15, + }, + legendaContainer: { + marginTop: 40, + }, + legendaList: { + marginTop: 15, + flex: 1, + flexDirection: 'column', + alignContent: 'center', + gap: 15, + }, + legendaItem: { + flex: 1, + flexDirection: 'row', + alignItems: 'center', + gap: 8, + flexGrow: 1, + }, + circle: { + width: 25, + height: 25, + borderRadius: 50, + }, + today: { + borderWidth: 3, + borderColor: Colors.dark.grey, + borderRadius: 25, + textAlign: 'center', + paddingTop: 8, + width: 40, + height: 40, + }, +} ); diff --git a/app/(tabs)/map.tsx b/app/(tabs)/map.tsx index cca3e45..1ad9add 100644 --- a/app/(tabs)/map.tsx +++ b/app/(tabs)/map.tsx @@ -1,194 +1,194 @@ -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 colorScheme = useColorScheme() ?? 'light'; - const [types, setTypes] = useState([]); - const [markers, setMarkers] = useState([]); + const [ types, setTypes ] = useState( [] ); + const [ markers, setMarkers ] = useState( [] ); - // Load markers and types - useEffect(() => { - Mapbox.setTelemetryEnabled(false); + // Load markers and types + 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({ - name: type.name, - image: type.image, - isEnabled: false, - type: type.config_name, - }); - }) - setTypes(typesList); + // Set types + const typesList: any[] = []; + types.forEach( (type: any) => { + typesList.push( { + name: type.name, + image: type.image, + isEnabled: false, + type: type.config_name, + } ); + } ) + setTypes( typesList ); - // Set markers - setMarkers(locations); - }) - }, []); + // Set markers + setMarkers( locations ); + } ) + }, [] ); - // Enable/disable type - const toggleSwitch = (index: any) => { - const newData = types.map((item: any, key: any) => - key === index ? {...item, isEnabled: !item.isEnabled} : item - ); + // Enable/disable type + const toggleSwitch = (index: any) => { + 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 => { - const list: any[] = []; + // Get all types that are active + const getActiveTypes = (): Array => { + const list: any[] = []; - types.forEach((type: any) => { - if (type.isEnabled) { - list.push(type.type); - } - }); + types.forEach( (type: any) => { + if (type.isEnabled) { + list.push( type.type ); + } + } ); - return list; - } + return list; + } - // Get all markers that needs to be visible - const activeMarkers = () => { - return markers.filter((marker: any) => { - return getActiveTypes().includes(marker.waste_type); - }); - } + // Get all markers that needs to be visible + const activeMarkers = () => { + return markers.filter( (marker: any) => { + return getActiveTypes().includes( marker.waste_type ); + } ); + } - return ( - - - - - Afvalcontainers - - - - in de buurt - - - - - - {activeMarkers().map((marker: any, index: any) => ( - - - - {marker.description + ' - ' + marker.street} + return ( + + + + + Afvalcontainers - - - ))} - - - - - ( - - - - {item.name} - + + in de buurt + - toggleSwitch(index)} - /> - - )}/> - - - - ); + + + + {activeMarkers().map( (marker: any, index: any) => ( + + + + {marker.description + ' - ' + marker.street} + + + + ) )} + + + + + + ( + + + + {item.name} + + + toggleSwitch( index )} + /> + + )}/> + + + + ); } -const styles = StyleSheet.create({ - container: { - marginTop: StatusBar.currentHeight, - paddingTop: 25, - flex: 1, - }, - titleContainer: { - paddingLeft: 25, - paddingRight: 25, - flexDirection: 'row', - alignItems: 'center', - gap: 8, - paddingBottom: 8, - }, - mapContainer: { - marginTop: 15, - height: 400, - }, - map: { - width: Dimensions.get('window').width, - height: 400, - flex: 1, - }, - listContainer: { - flex: 1, - paddingTop: 20, - paddingLeft: 25, - paddingRight: 25, - }, - listItem: { - flex: 1, - display: 'flex', - justifyContent: 'space-between', - flexDirection: 'row', - alignItems: 'center', - paddingBottom: 10, - marginBottom: 10, - borderBottomWidth: 1, - borderBottomColor: '#f2f2f2', - }, - listItemTitle: { - flex: 1, - flexDirection: 'row', - alignItems: 'center', - }, - listImage: { - width: 30, - height: 30, - borderRadius: 5, - marginRight: 8, - }, - callout: { - width: 200, - padding: 5, - }, -}); +const styles = StyleSheet.create( { + container: { + marginTop: StatusBar.currentHeight, + paddingTop: 25, + flex: 1, + }, + titleContainer: { + paddingLeft: 25, + paddingRight: 25, + flexDirection: 'row', + alignItems: 'center', + gap: 8, + paddingBottom: 8, + }, + mapContainer: { + marginTop: 15, + height: 400, + }, + map: { + width: Dimensions.get( 'window' ).width, + height: 400, + flex: 1, + }, + listContainer: { + flex: 1, + paddingTop: 20, + paddingLeft: 25, + paddingRight: 25, + }, + listItem: { + flex: 1, + display: 'flex', + justifyContent: 'space-between', + flexDirection: 'row', + alignItems: 'center', + paddingBottom: 10, + marginBottom: 10, + borderBottomWidth: 1, + borderBottomColor: '#f2f2f2', + }, + listItemTitle: { + flex: 1, + flexDirection: 'row', + alignItems: 'center', + }, + listImage: { + width: 30, + height: 30, + borderRadius: 5, + marginRight: 8, + }, + callout: { + width: 200, + padding: 5, + }, +} ); diff --git a/app/(tabs)/settings.tsx b/app/(tabs)/settings.tsx index 4e83b58..7ab7bdf 100644 --- a/app/(tabs)/settings.tsx +++ b/app/(tabs)/settings.tsx @@ -64,7 +64,7 @@ export default function SettingsScreen() { // Handle const handleSave = (inputValues: Record) => { - 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 = () => { diff --git a/app/+html.tsx b/app/+html.tsx index 8b92456..e1ef95e 100644 --- a/app/+html.tsx +++ b/app/+html.tsx @@ -6,26 +6,26 @@ import { type PropsWithChildren } from 'react'; * The contents of this function only run in Node.js environments and do not have access to the DOM or browser APIs. */ export default function Root({ children }: PropsWithChildren) { - return ( - - - - - + return ( + + + + + - {/* - 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. - */} - + {/* + 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. + */} + - {/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */} -