Find Installer: Consumer

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

const FindInstaller = (props) => {
    const [selectedLocationCords, setSelectedLocationCords] = React.useState();

    const onSelect = (cords) => setSelectedLocationCords(() => cords);

    return (
        <>
            {selectedLocationCords
                ? <MapView
                    selectedLocationCords={selectedLocationCords}
                    placesEndpoint={props.placesEndpoint}
                    lang={props.lang}
                />
                : <StartView
                    lang={props.lang}
                    onSelect={onSelect}
                />
            }
        </>
    );
};

FindInstaller.propTypes = {
    placesEndpoint: PropTypes.string.isRequired
};

export default FindInstaller;

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 AreaFilter from './AreaFilter';
import { installersToContactInfoProps } from './utils/parsers';
import { getAreas, filterInstallersByAreas, getAreasFromUrl, setAreasInUrl } from './utils/areaFilter';

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 [selectedAreas, setSelectedAreas] = React.useState(getAreasFromUrl);
    const [isFilterOpen, setIsFilterOpen] = React.useState(selectedAreas.length > 0);
    const mapRef = React.useRef();

    const areas = React.useMemo(() => (places ? getAreas(places) : []), [places]);
    const filteredPlaces = React.useMemo(() => (
        places ? filterInstallersByAreas(places, selectedAreas) : places
    ), [places, selectedAreas]);

    const onAreasChange = (newAreas) => {
        setSelectedAreas(newAreas);
        setAreasInUrl(newAreas);
    };

    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)}
                                label={props.lang.searchLabel}
                                geolocationLabel={props.lang.geolocation}
                            >
                                {areas.length > 0 &&
                                    <button
                                        type="button"
                                        className={`button button--ghost search-field__icon-button ${isFilterOpen ? 'search-field__icon-button--active' : ''}`}
                                        aria-label={props.lang.filterToggle}
                                        aria-expanded={isFilterOpen}
                                        aria-controls="find-installer-filter"
                                        onClick={() => setIsFilterOpen((open) => !open)}
                                    >
                                        <span className="search-field__icon search-field__icon--filter" aria-hidden="true" />
                                    </button>
                                }
                            </SearchFieldPlaces>
                        </div>
                        {areas.length > 0 && isFilterOpen &&
                            <AreaFilter
                                id="find-installer-filter"
                                title={props.lang.filterTitle}
                                placeholder={props.lang.filterPlaceholder}
                                removeLabel={props.lang.filterRemove}
                                areas={areas}
                                selectedAreas={selectedAreas}
                                onChange={onAreasChange}
                            />
                        }
                    </div>
                </div>
                <div className="find-installer-map__cards">
                    <div className="row">
                        {filteredPlaces
                            ? installersToContactInfoProps(filteredPlaces, 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">
                {filteredPlaces
                    ? <GoogleMap
                        ref={mapRef}
                        places={filteredPlaces}
                        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,
    lang: PropTypes.shape({
        searchLabel: PropTypes.string,
        geolocation: PropTypes.string,
        filterToggle: PropTypes.string,
        filterTitle: PropTypes.string,
        filterPlaceholder: PropTypes.string,
        filterRemove: PropTypes.string
    })
};

MapView.defaultProps = {
    lang: {}
};

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 && props.label &&
                <label id={`${props.inputId}-label`} htmlFor={props.inputId} className="form-item__label">
                    {props.label}
                </label>
            }
            {googleMapsApi &&
                <SearchField
                    inputId={props.inputId}
                    labelId={props.label ? `${props.inputId}-label` : undefined}
                    onChange={getCords}
                    items={searchResult}
                    onInputChange={updateSearchResult}
                    itemStyle="search-field-places__result"
                    className={props.className}
                    itemComponent={ItemComponent}
                >
                    <Geolocation onGeolocation={onGeolocation} label={props.geolocationLabel} />
                    {props.children}
                </SearchField>
            }
        </>
    );
};

SearchFieldPlaces.propTypes = {
    onChange: PropTypes.func,
    label: PropTypes.string,
    inputId: PropTypes.string,
    geolocationLabel: PropTypes.string
};

SearchFieldPlaces.defaultProps = {
    onChange: () => {},
    inputId: 'search-field-places-input'
};

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}
                    geolocationLabel={props.lang.geolocation}
                    className="search-field--big-m h-no-margin-bottom"
                />
            </div>
        </div>
    );
};

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

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

export default StartView;