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