src/views/startview/components/ActivityList.js
import React from 'react';
import Animated, {FadeIn} from 'react-native-reanimated';
import {FlatList, Image, StyleSheet, TouchableOpacity} from 'react-native';
import {getAllActivites} from '../../../database/ActivitiesDAO';
import {getPicture} from '../../../database/ActivityTypesDAO';
import {getAssessments} from '../../../database/UsersDAO';
import {
clearAssessment,
setActivityCreateDate,
setActivityType,
setActivityId,
setAssessment,
} from '../../../objects/Assessment';
import {globalStyles} from '../../../styles/styles';
/**
* Component for making the activity list in main menu
* @param {function} setGoToActivity - If set to true, the user is redirected to ActivityView
* @returns {Object} Scrollable list components containing activites which can be assessed
*/
export default function ActivityList({setGoToActivity}) {
//Gets all the activites that can be assessed
const activities = getAllActivites();
return (
//Make the activities fade in
<Animated.View style={styles.menuBox} entering={FadeIn}>
{/*Using a flatlist as they are automatically scrollable
and only renders the elements that are visible*/}
<FlatList
data={activities} //The data in the list are the activites
horizontal={true} //Want it to scroll horizontally
showsHorizontalScrollIndicator={false} //Removes the scroll indicator
//For each item in the list
renderItem={({item}) => (
<TouchableOpacity //Make the item touchable
style={[styles.item, globalStyles.shadow]}
//When the user clicks an activity
onPress={() => {
//Get the assessment for this activity
let assessment = getAssessments().find(
a => a.activity === item.id,
);
//Activity is yet to be assessed. Need to make new assessment object
if (assessment == undefined) {
clearAssessment();
setActivityId(item.id);
setActivityType(item.activityType);
setActivityCreateDate(item.activityCreateDate);
} else setAssessment(assessment); //Use the existing assessment objects and make changes to that
setGoToActivity(true); //Go to the ActivityView of the chosen activity
}}>
<Image //Display the image of each item in the list within the touchable element
source={getPicture(item.activityType)}
style={styles.image}
/>
</TouchableOpacity>
)}
/>
</Animated.View>
);
}
/** Local styles */
const styles = StyleSheet.create({
menuBox: {
height: '30%',
width: '100%',
position: 'absolute',
top: '10%',
},
item: {
height: '100%',
width: 350,
marginHorizontal: 5,
},
image: {
width: '100%',
height: '100%',
borderRadius: 30,
borderWidth: 1,
borderColor: 'black',
},
});