Find Installer

import React from 'react';
import PropTypes from 'prop-types';
import GoogleMap from '../google-map/GoogleMap';
import SearchFieldPlaces from './SearchFieldPlaces';
import MapContactCard from '../map-contact-card/MapContactCard';
import { installersToContactInfoProps } from './utils/parsers';

const MapView = (props) => {
    const [selectedLocationCords, setSelectedLocationCords] = React.useState(props.selectedLocationCords);
    const [places, setPlaces] = React.useState();
    const [visiblePlaces, setVisiblePlaces] = React.useState([]);
    const [selectedPlace, setSelectedPlace] = React.useState('');
    const mapRef = React.useRef();

    const openInfoWindow = (id) => {
        mapRef.current.openInfoWindow(id);
    };

    React.useEffect(() => {
        if (mapRef.current) {
            openInfoWindow(selectedPlace);
        }
    }, [selectedPlace, mapRef]);

    React.useEffect(() => {
        fetch(props.placesEndpoint)
            .then((res) => res.json())
            .then((data) => setPlaces(data.Result));
    }, []);

    return (
        <div className="find-installer-map">
            <aside className="find-installer-map__result">
                <div className="row">
                    <div className="col col--span-12">
                        <div className="find-installer-map__search">
                            <SearchFieldPlaces
                                onSelect={(cords) => setSelectedLocationCords(cords)}
                            />
                        </div>
                    </div>
                </div>
                <div className="find-installer-map__cards">
                    <div className="row">
                        {places
                            ? installersToContactInfoProps(places, selectedLocationCords).map(({ contactInfo, key, title }) => (
                                visiblePlaces.includes(key) &&
                                <div className="col col--span-12 col--span-m-6 col--span-xl-12" key={key}>
                                    <MapContactCard
                                        key={key}
                                        id={String(key)}
                                        title={title}
                                        contactInfo={contactInfo}
                                        active={selectedPlace === key}
                                        onClick={() => setSelectedPlace(key)}
                                    />
                                </div>
                            ))
                            // ToDo: Add loading state
                            : null}
                    </div>
                </div>
            </aside>
            <div className="find-installer-map__map">
                {places
                    ? <GoogleMap
                        ref={mapRef}
                        places={places}
                        targetPlaceCords={selectedLocationCords}
                        onVisibleMarkersUpdate={setVisiblePlaces}
                        onInfoWindowClose={() => setSelectedPlace(() => '')}
                        onMarkerClick={(marker) => setSelectedPlace(() => marker.Id)}
                    />
                    // ToDo: Add loading state
                    : null}
            </div>
        </div>
    );
};

MapView.propTypes = {
    selectedLocationCords: PropTypes.object.isRequired,
    setSearchLatLon: PropTypes.shape({
        lat: PropTypes.number,
        lon: PropTypes.number
    }),
    placesEndpoint: PropTypes.string.isRequired
};

export default MapView;

import React from 'react';
import PropTypes from 'prop-types';
import { GoogleMapsContext } from '../../context/GoogleMapsProvider';
import SearchField, { Geolocation } from '../search-field';

const ItemComponent = (props) => (
    <>
        <svg className="search-field-places__icon-wrapper" focusable="false">
            <use xlinkHref="#icon-map-pin"/>
        </svg>
        {props.description}
    </>
);

const SearchFieldPlaces = (props) => {
    const { autocompleteService, googleMapsApi } = React.useContext(GoogleMapsContext);
    const [searchResult, setSearchResult] = React.useState([]);

    const updateSearchResult = (e) => {
        const input = e.target.value || '';
        if (input.length > 0) {
            autocompleteService.getPlacePredictions({ input }, (places) => {
                setSearchResult(() => (
                    places
                        ? places.map((place) => ({
                            ...place,
                            value: place.description,
                            id: place.place_id
                        }))
                        : []
                ));
            });
        } else {
            // Reset statae when there's no search result
            setSearchResult(() => []);
        }
    };

    const getCords = async (e) => {
        const service = new googleMapsApi.places.PlacesService(document.createElement('div'));
        const cords = await new Promise((resolve, reject) => {
            try {
                service.getDetails({ placeId: e.place_id }, (data) => {
                    resolve(data.geometry.location);
                });
            } catch (e) {
                reject(e);
            }
        });
        props.onSelect(cords);
    };

    const onGeolocation = (latLng) => {
        props.onSelect(new googleMapsApi.LatLng(...latLng));
    };

    return (
        <>
            {googleMapsApi &&
                <SearchField
                    onChange={getCords}
                    items={searchResult}
                    onInputChange={updateSearchResult}
                    itemStyle="search-field-places__result"
                    className={props.className}
                    itemComponent={ItemComponent}
                >
                    <Geolocation onGeolocation={onGeolocation} />
                </SearchField>
            }
        </>
    );
};

SearchFieldPlaces.propTypes = {
    onChange: PropTypes.func
};

SearchFieldPlaces.defaultProps = {
    onChange: () => {}
};

export default SearchFieldPlaces;

import React from 'react';
import PropTypes from 'prop-types';
import SearchFieldPlaces from './SearchFieldPlaces';

const StartView = (props) => {
    return (
        <div className="find-installer-start">
            <div className="find-installer-start__panel">
                <h1>{props.lang.startTitle}</h1>
                <p className="preamble">
                    {props.lang.startDescription}
                </p>
                <SearchFieldPlaces
                    onSelect={props.onSelect}
                    className="search-field--big-m h-no-margin-bottom"
                />
            </div>
        </div>
    );
};

StartView.propTypes = {
    onSelect: PropTypes.func
};

StartView.defaultProps = {
    onSelect: () => {}
};

export default StartView;