@fortawesome/free-solid-svg-icons#faLocationArrow JavaScript Examples

OrganizationLocation = ({
  location: { country, region, locality },
  ...props
}) => {
  const text = locality || region || country

  return (
    <Tag {...props}>
      <FontAwesomeIcon icon={faLocationArrow} className="mr-2" />
      {text}
    </Tag>
  )
}

render() {
    return (
      <Bottom>
        <Row>
          <Form.Group as={Col} sm={6} md={5}>
            <InputGroup>
              <InputGroup.Prepend>
                <InputGroup.Checkbox
                  label={(
                    <FontAwesomeIcon
                      icon={faSync}
                      size="lg"
                      className="mr-2"
                    />
                  )}
                  aria-label="Camera rotation"
                  checked={this.state.rotate}
                  onChange={this.handleRotate.bind(this)}
                />
              </InputGroup.Prepend>
              <Form.Control
                placeholder="Latitude"
                aria-label="Latitude"
                size="sm"
                type="number" step="any"
                value={this.state.lat}
                onChange={this.handleLat.bind(this)}
                />
              <Form.Control
                placeholder="Latitude"
                aria-label="Latitude"
                size="sm"
                type="number" step="any"
                value={this.state.lon}
                onChange={this.handleLon.bind(this)}
                />
              <InputGroup.Append>
                <GoLocation size="sm" variant="secondary" onClick={this.go.bind(this)}>
                  <FontAwesomeIcon
                    icon={faLocationArrow}
                    size="lg"
                    className="mr-2"
                  />
                </GoLocation>
              </InputGroup.Append>
            </InputGroup>
          </Form.Group>
        </Row>
        <Row>
          <GitHubButton type="stargazers" namespace="blaze33" repo="map33.js" />
          <TwitterButton href="https://twitter.com/intent/follow?region=follow_link&screen_name=maxmre&tw_p=followbutton"
            target="_blank">
            <i></i> Follow @maxmre
          </TwitterButton>
        </Row>
      </Bottom>
    )
  }

function Search() {
    const geoloc = useGeolocation();
    const [geolocState, setGeolocState] = useState(null);
    const [geolocWhenAvailable, setGeolocWhenAvailable] = useState(false);
    const { setCenterCoord } = useMaskData();

    const { t } = useTranslation();

    const [address, setAddress] = useState("");

    const fetchGeocode = async (address) => {
        let data;
        try {
            data = await axios.get(
                `${
                    process.env.NODE_ENV === "development"
                        ? "http://localhost:4000"
                        : "https://api.livecorona.co.kr"
                }/?address=${address}`
            );
            return data;
        } catch (error) {
            console.error(error);
            console.log("Failed to retrieve geocoding for: " + address);
        }
    };

    useEffect(() => {
        setAddress(localStorage.getItem("lastSearchedAddress"));
    }, []);

    useEffect(() => {
        if (!geoloc) {
            return;
        }

        // navigator.permissions is an experimental API that is
        // unsupported in iOS, so it needs a try-catch block
        try {
            navigator.permissions
                .query({ name: "geolocation" })
                .then((result) => {
                    setGeolocState(result.state);
                });
        } catch (error) {
            console.error(error);
            setGeolocState("unknown");
        }

        if (geolocWhenAvailable) {
            if (
                geoloc.accuracy != null ||
                geoloc.latitude != null ||
                geoloc.longitude != null
            ) {
                const coord = {
                    lat: geoloc.latitude,
                    lng: geoloc.longitude,
                };
                setCenterCoord(coord);
                console.log(coord);
            }
        }
    }, [geoloc, geolocWhenAvailable, setCenterCoord]);

    const onClickGeoloc = () => {
        if (geolocState !== "granted") {
            alert("위치 권한을 브라우저 설정에서 허용해야 사용할 수 있습니다");
        }

        setGeolocWhenAvailable(true);
    };

    const onClickAddress = async () => {
        if (address.length < 1) {
            alert("주소를 입력해 주세요.");
            return;
        }

        localStorage.setItem("lastSearchedAddress", address);

        let geocodes;
        try {
            geocodes = await fetchGeocode(address);
        } catch (error) {
            console.error(error);
            alert("주소를 찾을 수 없습니다. 다시 시도해 주십시오.");
            return;
        }

        console.log(geocodes.data);

        if (!geocodes.data.meta.totalCount) {
            alert("주소를 찾을 수 없습니다. 다시 시도해 주십시오.");
            return;
        }

        let coord = {
            lat: geocodes.data.addresses[0].y,
            lng: geocodes.data.addresses[0].x,
        };

        setCenterCoord(coord);
    };

    const handleFormSubmit = (e) => {
        e.preventDefault();
        onClickAddress();
    };

    return (
        <>
            <Container>
                <Row>
                    <Col>
                        <div className="text-center mb-5">
                            <img
                                src={MaskMapIntro}
                                alt="공적 마스크 판매처"
                                width="100vw"
                                className="mb-3"
                            />
                            <h1 className="title">
                                {t("searchMaskStores")}
                            </h1>
                        </div>
                    </Col>
                </Row>
                <Row className="justify-content-center mb-3 text-center">
                    <Col sm={12} md={6} lg={5}>
                        <Form onSubmit={handleFormSubmit}>
                            <Form.Group controlId="formBasicEmail">
                                <Form.Label>
                                    {t("addressInputLabel")}
                                </Form.Label>
                                <Form.Control
                                    type="text"
                                    placeholder=""
                                    value={address}
                                    onChange={(e) => setAddress(e.target.value)}
                                />
                                <Form.Text className="text-muted">
                                    {t("addressInputExample")}
                                </Form.Text>
                            </Form.Group>
                            <div className="d-flex flex-column mb-3">
                                <Button
                                    variant="primary"
                                    className="mb-2"
                                    onClick={onClickAddress}>
                                    <FontAwesomeIcon icon={faSearch} />{" "}
                                    {t("searchByAddress")}
                                </Button>
                                <Button
                                    variant="outline-primary"
                                    onClick={onClickGeoloc}>
                                    <FontAwesomeIcon icon={faLocationArrow} />{" "}
                                    {t("searchByGeoloc")}
                                </Button>
                            </div>
                            <Alert variant="info">
                                {t("notice.publicMaskShutdown")}
                            </Alert>
                        </Form>
                    </Col>
                </Row>
            </Container>
        </>
    );
}

function SearchResult() {
    const { t, i18n } = useTranslation();

    const {
        mapObj,
        maskStores,
        setMaskStores,
        centerCoord,
        setCenterCoord,
    } = useMaskData();
    const { addColorIndicatorMarkers, resetMarker } = useNaverMapsMarkers();

    const [isLoading, setIsLoading] = useState(false);
    const [dataError, setDataError] = useState(false);
    const [showBetaAlert, setShowBetaAlert] = useState(true);

    const [markerFilter, setMarkerFilter] = useState({
        plenty: true,
        some: true,
        few: true,
        empty: false,
    });

    const setNewMaskStores = useCallback(
        (data) => {
            const priority = [
                "plenty",
                "some",
                "few",
                "empty",
                "break",
                null,
                undefined,
            ];
            data.sort(
                (a, b) =>
                    priority.indexOf(a.remain_stat) -
                    priority.indexOf(b.remain_stat)
            );
            setMaskStores(data);
        },
        [setMaskStores]
    );

    const markerFilterCheckboxHandler = (e) => {
        let target = e.target;
        console.log(target);
        setMarkerFilter((prev) => {
            return {
                ...prev,
                [target.name]: target.checked,
            };
        });
    };

    useEffect(() => {
        console.log(markerFilter);
    }, [markerFilter]);

    useEffect(() => {
        const fetchStoresByGeo = async (loc, range) => {
            const serverUrl = `https://8oi9s0nnth.apigw.ntruss.com/corona19-masks/v1/storesByGeo/json?lat=${loc.lat}&lng=${loc.lng}&m=${range}`;

            let result;
            try {
                setIsLoading(true);
                result = await axios(serverUrl);
                setIsLoading(false);
            } catch (error) {
                console.error("An error occurred in fetchStoresByGeo:", error);
                setDataError(true);
                setIsLoading(false);
                throw Error("Failed");
            }
            return result.data.stores;
        };

        const fn = async () => {
            resetMarker();
            console.log("Fetching store data...");
            let data;
            try {
                data = await fetchStoresByGeo(centerCoord, 5000);
                console.log(`New store data fetched`);
                console.log(data);
                resetMarker();
                setNewMaskStores(data);
            } catch {
                console.error("Failed to fetch data");
            }
        };

        fn();
    }, [centerCoord, setNewMaskStores]);

    useEffect(() => {
        if (mapObj) {
            mapObj.setCenter(centerCoord);
            mapObj.setZoom(14);
        }
    }, [mapObj, centerCoord]);

    useEffect(() => {
        if (!mapObj) {
            return;
        }

        addColorIndicatorMarkers(mapObj, maskStores);
    }, [maskStores, mapObj, addColorIndicatorMarkers]);

    const onClickMapRelocate = () => {
        const newCenter = mapObj.getCenter();
        setCenterCoord({
            lat: newCenter.y,
            lng: newCenter.x,
        });
    };

    const getAlternateMaskText = useCallback(() => {
        const today = new Date();
        const day = today.getDay();

        if (day === 0 || day === 6) {
            // Weekend
            return t("maskBuyAlertWeekend");
        } else {
            // Weekday
            return t("maskBuyAlertWeekday", {
                dayOfWeek: t(`dayOfWeek.${alternateMaskDays[day].weekday}`),
                digits: alternateMaskDays[day].availableDigits.join(", "),
            });
        }
    }, [i18n]);

    return (
        <>
            <main>
                <Container id="mainContainer">
                    <Row>
                        <Col sm={12}>
                            {showBetaAlert && (
                                <Alert
                                    variant="warning"
                                    onClose={() => setShowBetaAlert(false)}
                                    dismissible>
                                    <FontAwesomeIcon
                                        icon={faExclamationTriangle}
                                    />{" "}
                                    {t("notice.publicMaskShutdown")}
                                </Alert>
                            )}
                        </Col>
                    </Row>
                    <Row>
                        <Col md={6}>
                            {/* <Card style={{ marginBottom: "5px" }}>
                                <Card.Body className="p-1">
                                    {getAlternateMaskText()}
                                </Card.Body>
                            </Card> */}
                            <MapPanel />
                            <Button
                                variant="outline-primary"
                                className="mt-1 mb-1"
                                block
                                onClick={onClickMapRelocate}>
                                <FontAwesomeIcon icon={faLocationArrow} />{" "}
                                {t("refreshMapStores")}
                            </Button>
                        </Col>
                        <Col md={6}>
                            {dataError && (
                                <Alert variant="danger" className="mt-1">
                                    <FontAwesomeIcon
                                        icon={faExclamationTriangle}
                                    />{" "}
                                    {t("error.failedToLoadData")}
                                </Alert>
                            )}
                            <div className="border p-1 mb-1 d-flex flex-row justify-content-between">
                                <div class="form-check">
                                    <input
                                        type="checkbox"
                                        disabled
                                        class="form-check-input"
                                        id="showPlentyStores"
                                        name="plenty"
                                        defaultChecked={markerFilter.plenty}
                                        value={markerFilter.plenty}
                                        onChange={markerFilterCheckboxHandler}
                                    />
                                    <label
                                        class="form-check-label"
                                        htmlFor="showPlentyStores">
                                        <RemainingStockBadge remainingStockStr="plenty" />{" "}
                                        100개 +
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input
                                        type="checkbox"
                                        disabled
                                        class="form-check-input"
                                        id="showSomeStores"
                                        name="some"
                                        defaultChecked={markerFilter.some}
                                        value={markerFilter.some}
                                        onChange={markerFilterCheckboxHandler}
                                    />
                                    <label
                                        class="form-check-label"
                                        for="showSomeStores">
                                        <RemainingStockBadge remainingStockStr="some" />{" "}
                                        30-100
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input
                                        type="checkbox"
                                        disabled
                                        class="form-check-input"
                                        id="showFewStores"
                                        name="few"
                                        defaultChecked={markerFilter.few}
                                        value={markerFilter.few}
                                        onChange={markerFilterCheckboxHandler}
                                    />
                                    <label
                                        class="form-check-label"
                                        for="showFewStores">
                                        <RemainingStockBadge remainingStockStr="few" />{" "}
                                        2-30
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input
                                        type="checkbox"
                                        disabled
                                        class="form-check-input"
                                        id="showEmptyStores"
                                        name="empty"
                                        defaultChecked={markerFilter.empty}
                                        value={markerFilter.empty}
                                        onChange={markerFilterCheckboxHandler}
                                    />
                                    <label
                                        class="form-check-label"
                                        for="showEmptyStores">
                                        <RemainingStockBadge remainingStockStr="empty" />{" "}
                                        0개
                                    </label>
                                </div>
                            </div>

                            {isLoading ? (
                                <Spinner animation="border" role="status">
                                    <span className="sr-only">Loading...</span>
                                </Spinner>
                            ) : maskStores && maskStores.length ? (
                                <>
                                    <MaskStoreTable
                                        style={{
                                            overflow: "auto",
                                            maxHeight: "100px",
                                        }}
                                    />
                                </>
                            ) : (
                                <Alert variant="danger">
                                    주변에 마스크 판매처가 없습니다. 지도를
                                    이동한 후 지도 아래의 재검색 버튼을 이용해
                                    주세요.
                                </Alert>
                            )}
                        </Col>
                    </Row>
                </Container>
            </main>
        </>
    );
}