All files / atlas-mobile-ts/src/components/Feed Feed.tsx

0% Statements 0/17
0% Branches 0/10
0% Functions 0/6
0% Lines 0/16

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61                                                                                                                         
/* Copyright (C) Click & Push Accessibility, Inc - All Rights Reserved
 * Unauthorized copying of this file, via any medium is strictly prohibited
 * Proprietary and confidential
 * Written and maintained by the Click & Push Development team 
 * <dev@clicknpush.ca>, January 2022
 */
 
import { FontAwesome } from "@expo/vector-icons"
import React from "react"
import { ListRenderItem, Text, View } from "react-native"
import { FlatList, TouchableOpacity } from "react-native-gesture-handler"
import { useProfile, UserNotification } from "../../hooks/useProfile"
import { authStore } from "../../libs/auth/AuthStore"
 
/**
 * This component displays all the user's notifications sorted by most recent
 * @param 
 * @returns 
 */
export const Feed: React.FC<{notifications: UserNotification[], handleNotifInteraction}> = ({notifications, handleNotifInteraction}) => {
    // bring in the deleteNotification function from the useProfile hook
    const {deleteNotification} = useProfile(authStore.userId)
 
    /**
     * Flatlist item render function for notifcations. Displays the notification's title and a delete button. 
     * Renders the text bold if the notification hasn't been pressed yet 
    */
    const renderNotification: ListRenderItem<UserNotification> = ({item, index}) => {
        const notifData = JSON.parse(item.data.replace(/'/g, '"'))
 
        return (
            <View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', borderBottomWidth: 1, borderColor: 'lightgray'}}>
                <TouchableOpacity style={{flex: 10, padding: 20}} onPress={() => handleNotifInteraction(notifData)}>
                    <Text style={{paddingRight: 110, fontWeight: item.read ? 'normal' : 'bold', color: item.read ? 'gray' : 'black'}} > 
                        {notifData?.notif_type == 'landmark-like' ? <FontAwesome name="thumbs-up" color={item.read ? "darkgray" : "black"} size={20} /> : null}
                        {"   -   "}
                        {item.title}
                    </Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={async () => deleteNotification(item.id)}>
                    <FontAwesome style={{textAlign: 'center', padding: 15}} name="trash" color='red' size={20} />
                </TouchableOpacity>
            </View>
        );
    }
 
    return (
        <>
        {notifications?.length > 0 ?
        <FlatList
            nestedScrollEnabled={true}
            keyExtractor={i => i.id}
            data={notifications} 
            renderItem={renderNotification}
            getItemLayout={(data, index) => ({length: notifications.length, offset: notifications.length * index, index})}/> :
        <View style={{ alignItems: 'center', marginTop: 40}}>
            <Text style={{fontSize: 17}}>You have no notifications</Text>
        </View>}
        </>
    )
}