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

Category view + detail

Browse source
This commit is contained in:
Maarten 2024-08-01 11:53:43 +02:00
parent 5ebd10cd3a
commit aaedcec4a6
8 changed files with 3360 additions and 1599 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -4,23 +4,43 @@ import {
SafeAreaView,
StatusBar,
Image,
TouchableOpacity
TouchableOpacity,
} from 'react-native';
import { AutocompleteDropdown } from 'react-native-autocomplete-dropdown';
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 React from 'react';
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,}}>
<ThemedView style={styles.container}>
<ScrollView>
<ScrollView>
<ThemedView style={styles.container}>
<ThemedView style={styles.titleContainer}>
<ThemedText type="title">Wat moet waar?</ThemedText>
</ThemedView>
@ -37,9 +57,9 @@ export default function ExploreScreen() {
closeOnSubmit={false}
emptyResultText={'Niks gevonden'}
dataSet={[
{ id: '1', title: 'Alpha' },
{ id: '2', title: 'Beta' },
{ id: '3', title: 'Gamma' },
{id: '1', title: 'Alpha'},
{id: '2', title: 'Beta'},
{id: '3', title: 'Gamma'},
]}
/>
</ThemedView>
@ -49,21 +69,18 @@ export default function ExploreScreen() {
</ThemedView>
<ThemedView style={styles.listContainer}>
<TouchableOpacity style={styles.listItem}>
<Image source={require('@/assets/images/paper.png')} style={styles.listImage} />
<ThemedText type="default">Categorie 1</ThemedText>
</TouchableOpacity>
<TouchableOpacity style={styles.listItem}>
<Image source={require('@/assets/images/paper.png')} style={styles.listImage} />
<ThemedText type="default">Categorie 2</ThemedText>
</TouchableOpacity>
<TouchableOpacity style={styles.listItem}>
<Image source={require('@/assets/images/paper.png')} style={styles.listImage} />
<ThemedText type="default">Categorie 3</ThemedText>
</TouchableOpacity>
<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>
</ScrollView>
</ThemedView>
</ThemedView>
</ScrollView>
</SafeAreaView>
);
}