# All files / atlas-mobile-ts/src/components/Map/Panels/LandmarkDetailsPanel DetailsHeader.tsx

0% Statements 0/25
0% Branches 0/16
0% Functions 0/11
0% Lines 0/24

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
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126

     ﻿/* 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 { View, Text, TouchableOpacity, StyleSheet } from "react-native";
    import { QueryStatus } from "react-query";
    import { Landmark } from "../../../../hooks/useLandmarks";
    import { UserProfile } from "../../../../hooks/useProfile";
    import { authStore } from "../../../../libs/auth/AuthStore";

    interface DetailsHeaderProps {
        landmark?: Landmark,
        editingEnabled: boolean,
        toggleEditing: (state: boolean) => void,
        updatedLandmark?: Landmark,
        editLandmark: () => void,
        removeLandmark: () => void,
        toggleDetailsPanel: (state: boolean) => void,
        landmarkRatedByUser: boolean,
        profile?: UserProfile,
        rateLandmark: (rating: 1 | -1) => void
        processingPhoto: boolean,
        addPhotoStatus: QueryStatus
        deletePhotoStatus: QueryStatus
    }

    /**
     * Component that renders the landmark details panel header
     * @param
     */
     export const DetailsHeader: React.FC<DetailsHeaderProps> = (props) => {
        const photosAreBusy = () => {
            return props.processingPhoto ||
                    props.addPhotoStatus == "loading" ||
                    props.deletePhotoStatus == "loading"
        }

        const HeaderContent: React.FC = () => {
            // landmark is owned by user
            if (authStore.userId == props.landmark?.user) {
                // editing is enabled
                if (props.editingEnabled) {
                    return (
                        <View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: "center", width: '100%'}}>
                            <FontAwesome color="white" size={25} name="close" onPress={() => props.toggleEditing(false)}/>
                            {props.updatedLandmark?.description && props.updatedLandmark.landmark_type ? // only display check if fields are populated
                            <FontAwesome style={{marginTop: 2}} size={25} color="white" name="check" onPress={async () => props.editLandmark()}/> : null}
                        </View>
                    )
                }
                // editing is disabled
                else {
                    return (

                        <View style={{flexDirection: 'row', alignItems: "center", justifyContent: 'space-between', width: '100%'}}>
                            <>
                                <View style={{flexDirection: 'row', alignItems: "center"}}>
                                    <FontAwesome style={{marginRight: 20, marginTop: 2}} size={25} color="white" name="edit" onPress={() => props.toggleEditing(true)}/>
                                    <FontAwesome style={{marginBottom: 2}} color="white" size={25} name="trash" onPress={async () => props.removeLandmark()}/>
                                    <Text style={{color: 'white', fontSize: 20, marginTop: 2, marginLeft: 40}} >{props.landmark?.rating}</Text>
                                    <FontAwesome style={{marginLeft: 5, marginBottom: 2, marginRight: 10}} color="white" size={25} name="thumbs-up"/>
                                </View>
                                <FontAwesome color="white" size={25} style={{ }} name="close" onPress={() => props.toggleDetailsPanel(false)}/>
                            </>
                        </View>
                    )
                }
            }
            // landmark is not owned by user
            else {
                return (
                    <View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: "center", width: '100%'}}>
                        {props.landmarkRatedByUser ?  // landmark has already been liked by the current user
                        <View style={{flexDirection: 'row'}} >
                            <Text style={{color: 'white', fontSize: 20, marginTop: 2}} >{props.landmark.rating}</Text>
                            <FontAwesome style={{marginLeft: 5, marginTop: 2, marginRight: 30}} color="white" size={25} name="thumbs-up"/>
                            <Text style={{color: 'lightgray', fontSize: 20, marginTop: 2, opacity: 0.7}} >You liked this </Text>
                            <TouchableOpacity style={{flexDirection: 'row'}} onPress={() => props.rateLandmark(-1)}>
                                <Text style={{color: 'white', fontSize: 20, marginTop: 2, opacity: 0.8}} >(</Text>
                                <Text style={{color: 'white', fontSize: 20, marginTop: 2, opacity: 0.8, textDecorationLine: "underline"}} >Undo</Text>
                                <Text style={{color: 'white', fontSize: 20, marginTop: 2, opacity: 0.8}} >)</Text>
                            </TouchableOpacity>
                        </View> : // landmark has not been liked by user
                        <TouchableOpacity onPress={async () => { //this touchable will add a like to this landmark
                                Iif (props.profile?.id !== props.landmark?.id) {
                                    await props.rateLandmark(1);
                                }
                            }}>
                            <View style={{flexDirection: 'row'}} >
                                <Text style={{color: 'white', fontSize: 20, marginTop: 2}} >{props.landmark?.rating}</Text>
                                <FontAwesome style={{marginLeft: 5, marginTop: 2}} color="white" size={25} name="thumbs-up"/>
                            </View>
                        </TouchableOpacity>}
                        <FontAwesome color="white" size={25} name="close" onPress={() => props.toggleDetailsPanel(false)}/>
                    </View>
                )
            }
        }

        return (
            <View style={styles.detailsHeader}>
            {!photosAreBusy() ?
                <HeaderContent />
            :null}
            </View>
        )
    }

    const styles = StyleSheet.create({
        detailsHeader: {
            borderBottomWidth: 1,
            borderColor: 'white',
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'center',
            backgroundColor: '#df3f3f',
            marginBottom: 10,
            paddingVertical: 10,
            paddingHorizontal: 20
        },
    })