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