# 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>}
            </>
        )
    }