125 lines
3.5 KiB
TypeScript
125 lines
3.5 KiB
TypeScript
import {
|
|
StyleSheet,
|
|
ScrollView,
|
|
SafeAreaView,
|
|
StatusBar,
|
|
Image,
|
|
TouchableOpacity,
|
|
} from 'react-native';
|
|
|
|
import React, {useState} from 'react';
|
|
import {router} from 'expo-router';
|
|
import {AutocompleteDropdown} from 'react-native-autocomplete-dropdown';
|
|
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 List from '@/components/List';
|
|
|
|
export default function ExploreScreen() {
|
|
const colorScheme = useColorScheme() ?? 'light';
|
|
const [types, setTypes] = useState([]);
|
|
|
|
// Load waste types
|
|
Request.get('waste-types').then((responseData) => {
|
|
const response = responseData.data;
|
|
|
|
setTypes(response);
|
|
});
|
|
|
|
// View item in sub screen
|
|
const viewItem = async (item: any) => {
|
|
await AsyncStorage.setItem('activeCategory', JSON.stringify(item));
|
|
|
|
router.push('/explore/category');
|
|
};
|
|
|
|
return (
|
|
<SafeAreaView style={{flex: 1, backgroundColor: Colors[colorScheme].background,}}>
|
|
<ScrollView>
|
|
<ThemedView style={styles.container}>
|
|
<ThemedView style={styles.titleContainer}>
|
|
<ThemedText type="title">Wat moet waar?</ThemedText>
|
|
</ThemedView>
|
|
|
|
<ThemedView style={styles.titleContainer}>
|
|
<ThemedText type="title" style={{color: Colors[colorScheme].tint}}>en waarom?</ThemedText>
|
|
</ThemedView>
|
|
|
|
<ThemedView style={styles.searchContainer}>
|
|
<ThemedText type="defaultSemiBold">Wat wilt u scheiden?</ThemedText>
|
|
<AutocompleteDropdown
|
|
clearOnFocus={false}
|
|
closeOnBlur={true}
|
|
closeOnSubmit={false}
|
|
emptyResultText={'Niks gevonden'}
|
|
dataSet={[
|
|
{id: '1', title: 'Alpha'},
|
|
{id: '2', title: 'Beta'},
|
|
{id: '3', title: 'Gamma'},
|
|
]}
|
|
/>
|
|
</ThemedView>
|
|
|
|
<ThemedView style={styles.categoriesContainer}>
|
|
<ThemedText type="defaultSemiBold">Of kies een categorie:</ThemedText>
|
|
</ThemedView>
|
|
|
|
<ThemedView style={styles.listContainer}>
|
|
<List
|
|
data={types}
|
|
renderItem={(item: any, index: any) => (
|
|
<TouchableOpacity style={styles.listItem} key={index} onPress={() => viewItem(item)}>
|
|
<Image source={require('@/assets/images/paper.png')} style={styles.listImage}/>
|
|
<ThemedText type="default">{item.name}</ThemedText>
|
|
</TouchableOpacity>
|
|
)}
|
|
/>
|
|
</ThemedView>
|
|
</ThemedView>
|
|
</ScrollView>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
padding: 25,
|
|
marginTop: StatusBar.currentHeight,
|
|
},
|
|
titleContainer: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 8,
|
|
paddingBottom: 8,
|
|
},
|
|
searchContainer: {
|
|
marginTop: 10,
|
|
},
|
|
categoriesContainer: {
|
|
marginTop: 25,
|
|
},
|
|
listContainer: {
|
|
marginTop: 10,
|
|
},
|
|
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,
|
|
}
|
|
});
|