# 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);