Home Reference Source

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',
    },
});