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 | import { FontAwesome } from "@expo/vector-icons" import { ImageInfo } from "expo-image-picker/build/ImagePicker.types" import React, { useEffect, useState } from "react" import { View, Text, ActivityIndicator, ScrollView, TouchableOpacity, Image } from "react-native" import { QueryStatus } from "react-query" import { Landmark, LMPhoto, useLandmarks } from "../../../../hooks/useLandmarks" import { IconButton, PrimaryButton } from "../../../Buttons" import { PhotoPicker } from "../../../PhotoPicker" interface LandmarkPhotosProps { deletePhotoStatus: QueryStatus addPhoto: (photo: LMPhoto) => void addPhotoStatus: QueryStatus toggleLmDetails: (state: boolean) => void landmark?: Landmark editingEnabled: boolean setUpdatedLandmark: (state: Landmark) => void updatedLandmark?: Landmark setSelectedImage: (index: number) => void tryDeletePhoto: (photoId: string) => void processingPhoto: boolean setProcessingPhoto: (state: boolean) => void profileId: string } export const LandmarkPhotos: React.FC<LandmarkPhotosProps> = (props) => { /** * Flag that toggles the photo source menu being displayed */ const photoSourceMenuOpenedState = false const [photoSourceMenuOpened, togglePhotoSourceMenu] = useState<boolean>(photoSourceMenuOpenedState) /** * Handles selection of a selected photo. Adds the photo data to the database. */ const _onPhotoSelected = async (result: ImageInfo) => { togglePhotoSourceMenu(false) const photo: LMPhoto = {id: '', image_b64: 'data:image/png;base64,' + result.base64, height: result.height, width: result.width, landmark: props.landmark?.id} props.setProcessingPhoto(false) await props.addPhoto(photo) } /** * Sets given image as selected photo to be maximized on the screen * @param */ const maximizePhoto = (i: number): void => { if (!props.editingEnabled) { props.setSelectedImage(i) } else { console.warn('[LandmarkDetails]: Editing is enabled, can\'t maximize image') } } return ( <> { props.deletePhotoStatus == 'loading' || props.deletePhotoStatus == 'error' || props.addPhotoStatus == "loading" || props.addPhotoStatus == "error" || props.processingPhoto ? <View style={{justifyContent: "space-evenly", alignItems: "center"}}> <Text style={{color: 'white', fontSize: 20, marginBottom: 40}}>{ props.deletePhotoStatus == "loading" || props.addPhotoStatus == "loading" ? "Loading photos" : props.deletePhotoStatus == "error" || props.addPhotoStatus == "error" ? "There was an error loading photos" : props.processingPhoto ? "Processing photo" : null }</Text> { props.deletePhotoStatus == 'loading' || props.addPhotoStatus == "loading" || props.processingPhoto ? <ActivityIndicator color='white' size="large"/> : props.deletePhotoStatus == 'error' || props.addPhotoStatus == "error" ? <PrimaryButton text="Okay" style={{borderColor: 'white', borderWidth: 1}} onPress={() => props.toggleLmDetails(false)} /> : null } </View> : <> <PhotoPicker multiple={true} menuType="alert" onReceivedPhotoResult={async result => await _onPhotoSelected(result)} photoSourceMenuOpened={photoSourceMenuOpened} onBeforeLaunchPicker={() => props.setProcessingPhoto(true)} cancel={() => {props.setProcessingPhoto(false) ; togglePhotoSourceMenu(false)}}/> {props.landmark?.photos?.length > 0 ? <> <ScrollView nestedScrollEnabled={true} contentContainerStyle={{alignItems: 'center'}} style={{flexDirection: 'row', marginBottom: 5, alignSelf: 'center'}} horizontal={true}> {props.landmark?.photos?.length < 5 && props.profileId == props.landmark?.user ? <IconButton style={{alignSelf: 'center', padding: 10, opacity: .5, marginLeft: 10}} color='white' size={30} icon="plus" onPress={() => togglePhotoSourceMenu(true)} />: null} {props.landmark?.photos?.map((photo, i) => { return ( <TouchableOpacity activeOpacity={1} key={i} style={{marginHorizontal: 1, padding: 14, zIndex: 11}} onPress={() => maximizePhoto(i)}> <Image style={{alignSelf: 'center', height: 300, width: 200}} source={{uri: 'data:image/png;base64,' + photo.image_b64}}/> {props.landmark?.user == props.profileId ? <IconButton icon="times-circle" color="lightgray" style={{position: 'absolute', top: -2, right: 0}} size={25} onPress={() => props.tryDeletePhoto(photo.id)} /> : null} </TouchableOpacity> ) })} </ScrollView> </> : <> {props.landmark?.user == props.profileId ? <TouchableOpacity style={{marginTop: 30, justifyContent: 'center', alignItems: 'center', opacity: .7}} onPress={() => {togglePhotoSourceMenu(true)}}> <Text style={{fontSize: 20, marginBottom: 10, color: 'white'}}>Add photo</Text> <FontAwesome name="plus" size={30} color='white' /> </TouchableOpacity> : null} </>} </> } </> ) } |