All files / atlas-mobile-ts/src/components/Map/Panels NearbyLandmarksPanel.tsx

0% Statements 0/21
0% Branches 0/1
0% Functions 0/7
0% Lines 0/21

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                                                                                                                                                               
/* 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 * as ImagePicker from 'expo-image-picker';
import { ImageInfo } from "expo-image-picker/build/ImagePicker.types";
import React, { memo, useEffect, useState } from "react";
import { ActivityIndicator, Dimensions, Image, Platform, SafeAreaView, Text, TextInput, TouchableOpacity, View } from 'react-native';
import { FlatList, ScrollView } from "react-native-gesture-handler";
import Modal from 'react-native-modal';
import { checkMultiple, PERMISSIONS, RESULTS } from "react-native-permissions";
import Picker from 'react-native-picker-select';
import { Landmark, LMPhoto, useLandmarks } from "../../../hooks/useLandmarks";
import { colors, getMediaPermissions, lmTypes } from "../../../utils/GlobalUtils";
import Badge from "../../Badge";
import { IconButton, SecondaryButton } from "../../Buttons";
import { PhotoPicker } from "../../PhotoPicker";
 
/**
 * Props for the {@link AddLandmarkPanel} component.
 */
export interface NearbyLandmarksPanelProps {
    toggleAlertedLmPanel: (state: boolean) => void
    nearbyLmPanelVisible: boolean
    nearbyLandmarks?: Landmark[];
    focusLandmark: (landmark: Landmark) => void
}
 
/**
 * Component that renders a form for adding a new {@link Landmark}. Contained within a [react-native-modal]{@link https://github.com/react-native-modal/react-native-modal}.
 * @component
 * @category Map
 */
const NearbyLandmarksPanel: React.FC<NearbyLandmarksPanelProps> = ({nearbyLandmarks: alertedLandmarks, toggleAlertedLmPanel: toggleNearbyLmPanel, nearbyLmPanelVisible: alertedLmPanelVisible, focusLandmark}) => {
    const [selectedLm, setSelectedlm] = useState<Landmark>()
    const switchToLandmarkDetails = () => {
        Iif (selectedLm) {
            focusLandmark(selectedLm)   
            setSelectedlm(undefined) 
        }
    }
 
    const selectLm = (lm: Landmark) => {
        setSelectedlm(lm)
        toggleNearbyLmPanel(false)
    }
 
    return (
        <Modal
            useNativeDriver={true}
            useNativeDriverForBackdrop={true}
            onModalHide={() => switchToLandmarkDetails()}
            onBackdropPress={() => toggleNearbyLmPanel(false)}
            style={{justifyContent: "flex-end", height: '100%', margin: 0}}
            isVisible={alertedLmPanelVisible} >
            <SafeAreaView style={{backgroundColor: colors.red, height: Dimensions.get('window').height * .6}}>
                <ScrollView>
                    {alertedLandmarks.map((lm, i) => {
                        return (
                            <TouchableOpacity onPress={() => selectLm(lm)} key={i} style={{flexDirection: 'row', alignItems: 'center', paddingVertical: 10, marginHorizontal: 15, justifyContent: 'space-between', borderBottomWidth: 1, borderColor: 'lightgray'}}>
                                <Image source={lmTypes[lm.landmark_type].image}/>
                                <Text style={{fontSize: 20, color: 'white'}}>{lmTypes[lm.landmark_type].label.toUpperCase()}</Text>
                                <View style={{flexDirection: 'row', alignItems: 'center'}}>
                                    <Text style={{marginRight: 5, color: 'white', fontSize: 20}}>{lm.rating}</Text>
                                    <FontAwesome name="thumbs-up" size={20} color='white' />
                                </View>
                            </TouchableOpacity>
                        )
                    })}
                </ScrollView>
            </SafeAreaView>
        </Modal>
    )
}
 
export default memo(NearbyLandmarksPanel);