react-icons/fa#FaMapMarkerAlt JavaScript Examples

The following examples show how to use react-icons/fa#FaMapMarkerAlt. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: SearchLocationPopup.js    From airdnd-frontend with MIT License 6 votes vote down vote up
SearchLocationPopup = forwardRef(
  ({ type, changeType, searchData, locationResult, changeSearchData }, ref) => {
    const { location } = searchData;
    return (
      <StSearchLocationPopupWrapper>
        <StSearchLocationPopup
          popupState={location && locationResult.length && type === 'location'}
        >
          <StSearchLocationList ref={ref}>
            {locationResult.map((item, index) => {
              return (
                <StSearchLocationItem
                  key={index}
                  onClick={() => {
                    changeSearchData('location', item);
                    changeType('checkIn');
                  }}
                >
                  <StSearchLocationIconWrapper>
                    <FaMapMarkerAlt></FaMapMarkerAlt>
                  </StSearchLocationIconWrapper>
                  <StItemText>{item}</StItemText>
                </StSearchLocationItem>
              );
            })}
          </StSearchLocationList>
        </StSearchLocationPopup>
      </StSearchLocationPopupWrapper>
    );
  },
)
Example #2
Source File: location.js    From gatsby-theme-intro with MIT License 6 votes vote down vote up
Location = ({ location, relocation }) => (
  <>
    <div className="inline-flex items-center bg-front mt-6 w-auto">
      <span className="text-lead border-r-2 border-back px-3">
        <FaMapMarkerAlt className="h-4 w-4" />
      </span>
      <span className="text-back font-header font-bold py-1 px-3 text-lg">
        {location}
      </span>
    </div>
    {relocation && (
      <div className="text-xs uppercase mt-2 font-semibold text-front font-header">
        Available for relocation
      </div>
    )}
  </>
)
Example #3
Source File: MapButton.js    From airdnd-frontend with MIT License 5 votes vote down vote up
MapMarkerButton = () => {
  return (
    <StButton boxShadow margin="1rem 0 0">
      <FaMapMarkerAlt />
    </StButton>
  );
}
Example #4
Source File: ViewContact.js    From ReactJS-Projects with MIT License 5 votes vote down vote up
ViewContact = () => {
  const { state } = useContext(ContactContext);
  const { contact } = state;

  return (
    <Container>
      <Row className="mt-5 mb-5">
        <Col md="5" className="offset-md-3">
          <Card className="pt-3 pb-5">
            <CardBody className="text-center ">
              <img
                height="150"
                width="150"
                className="cardImg profile border-danger"
                src={contact?.picture}
              />
              <CardTitle className="text-primary mt-3">
                <h1>{contact?.name}</h1>
              </CardTitle>
              <CardSubtitle>
                <h3>
                  <FaPhone className="mr-2" />
                  {contact?.phoneNumber}
                </h3>
              </CardSubtitle>
              <a
                className="btn btn-primary btn-block"
                target="_blank"
                href={`mailto:{contact?.email}`}
              >
                <FaEnvelope className="icon mr-2" />
                {contact?.email}
              </a>

              <a
                className="btn btn-primary btn-block"
                target="_blank"
                href={`https://maps.google.com/?=${contact?.address}`}
              >
                <FaMapMarkerAlt className="icon mr-2" />
                {contact?.address}
              </a>
            </CardBody>
          </Card>
        </Col>
      </Row>
    </Container>
  );
}
Example #5
Source File: index.js    From plataforma-sabia with MIT License 4 votes vote down vote up
MapAndAttachments = ({ form, data }) => {
	const { attachments } = data.technology;
	const imgsRef = useRef(null);
	const pdfRef = useRef(null);
	const [whereIsAlreadyImplemented, setWhereIsAlreadyImplemented] = useState([]);
	const [whereIsAlreadyImplementedInput, setWhereIsAlreadyImplementedInput] = useState('');
	const [whoDevelop, setWhoDevelop] = useState([]);
	const [whoDevelopInput, setWhoDevelopInput] = useState('');
	const [previewedImgFiles, setPreviewedImgFiles] = useState(attachments.images);
	const [previewedPdfFiles, setPreviewedPdfFiles] = useState(attachments.documents);
	const [uploadError, setUploadError] = useState(false);
	const [videos, setVideos] = useState(data.technology.videos || []);
	const { control } = form;

	useEffect(() => {
		const whereIsAlreadyImplementedParsed = parseLocationsFromApi(
			technologyLocationsEnum.WHERE_IS_ALREADY_IMPLEMENTED,
			data.technology?.locations,
		);
		setWhereIsAlreadyImplemented(whereIsAlreadyImplementedParsed);

		const whoDevelopParsed = parseLocationsFromApi(
			technologyLocationsEnum.WHO_DEVELOP,
			data.technology?.locations,
		);
		setWhoDevelop(whoDevelopParsed);
	}, []);

	useEffect(() => {
		whoDevelop.forEach((element, index) => {
			form.setValue(`locations.who_develop.${index}`, element.id);
		});
	}, [whoDevelop]);

	useEffect(() => {
		whereIsAlreadyImplemented.forEach((element, index) => {
			form.setValue(`locations.where_is_already_implemented.${index}`, element.id);
		});
	}, [whereIsAlreadyImplemented]);

	useEffect(() => {
		form.setValue('videos', JSON.stringify(videos));
	}, [videos]);

	const onAddVideos = (link) => {
		if (!link || link === '') {
			form.setError('link_video', { type: 'manual', message: 'Formato de URL inválido' });
			return;
		}

		const videoId = getYoutubeVideoId(link);

		if (videoId) {
			form.clearErrors('link_video');
			const alreadyExists = videos.some((video) => video?.videoId === videoId);

			if (!alreadyExists) {
				setVideos((prevState) => [
					{
						thumbnail: `http://i3.ytimg.com/vi/${videoId}/hqdefault.jpg`,
						link,
						videoId,
						provider: 'Youtube',
					},
					...prevState,
				]);
				form.setValue('link_video', '');
			} else {
				form.setError('link_video', {
					type: 'manual',
					message: 'O vídeo já foi adicionado',
				});
			}
		} else {
			form.setError('link_video', { type: 'manual', message: 'Formato de URL inválido' });
		}
	};

	const onRemoveVideos = (index) => setVideos(videos.filter((video, idx) => idx !== index));

	// eslint-disable-next-line consistent-return
	const onDropAttachments = async (acceptedFiles, type) => {
		if (!acceptedFiles) return null;

		const formData = new FormData();
		for (let index = 0; index < acceptedFiles.length; index += 1) {
			formData.append(`files[${index}]`, acceptedFiles[index], acceptedFiles[index].name);
		}

		formData.append(
			'meta',
			JSON.stringify({
				object: 'technologies',
				object_id: form.getValues('id'),
			}),
		);

		try {
			const response = await upload(formData);
			if (response.status === 200) {
				if (type === 'img') {
					const newValue = [...previewedImgFiles, ...response.data];
					setPreviewedImgFiles(newValue);
				}

				if (type === 'pdf') {
					const newValue = [...previewedPdfFiles, ...response.data];
					setPreviewedPdfFiles(newValue);
				}
			} else {
				setUploadError(response.data.error.message[0].message);
			}
		} catch (error) {
			setUploadError(
				'Ocorreu um error ao fazer o upload, verifique se você seguiu as instruções corretamente, checando o tipo de arquivo e o tamanho dele',
			);
		}
	};

	const deleteAttachment = async ({ index, element, type }) => {
		await deleteUpload(element.id);
		if (type === 'img') {
			setPreviewedImgFiles(
				previewedImgFiles.filter((media, innerIndex) => index !== innerIndex),
			);
		}
		if (type === 'pdf') {
			setPreviewedPdfFiles(
				previewedPdfFiles.filter((pdf, innerIndex) => index !== innerIndex),
			);
		}
	};

	const deleteFromCollection = async (index, collection) => {
		if (collection === 'whoDevelop') {
			setWhoDevelop((prevState) => prevState.filter((_, innerIndex) => index !== innerIndex));
			return;
		}

		if (collection === 'whereIsAlreadyImplemented') {
			setWhereIsAlreadyImplemented((prevState) =>
				prevState.filter((_, innerIndex) => index !== innerIndex),
			);
		}
	};

	const onSelect = async ({ properties, locationType }) => {
		const state =
			locationType === technologyLocationsEnum.WHERE_IS_ALREADY_IMPLEMENTED
				? whereIsAlreadyImplemented
				: whoDevelop;
		const toBePushed = properties;
		if (state.some((element) => element.placeId === toBePushed.placeId)) {
			return;
		}
		const response = await geocodeByPlaceId(toBePushed.placeId);
		if (response) {
			toBePushed.location = {
				lat: response[0].geometry.location.lat(),
				lng: response[0].geometry.location.lng(),
			};
		}

		const createResponse = await createLocation({
			place_id: toBePushed.placeId,
			address: toBePushed.description,
			lat: toBePushed.location?.lat?.toString(),
			lng: toBePushed.location?.lng?.toString(),
		});

		if (createResponse.error) {
			toast.error(
				createResponse.messages?.[0]?.message ||
					'Ocorreu um erro para salvar sua localização, tente novamente em instantes.',
			);
			return;
		}

		const newState = [
			...state,
			{ ...toBePushed, locationType, id: createResponse.location.id },
		];
		if (locationType === technologyLocationsEnum.WHERE_IS_ALREADY_IMPLEMENTED) {
			setWhereIsAlreadyImplemented(newState);
			setWhereIsAlreadyImplementedInput('');
		} else {
			setWhoDevelop(newState);
			setWhoDevelopInput('');
		}
	};

	return (
		<Wrapper>
			<HelpModal show={!!uploadError} onHide={() => setUploadError(false)}>
				{uploadError}
			</HelpModal>
			<Row>
				<Column>
					<Row>
						<Column>
							<Title>Onde a Tecnologia é desenvolvida?</Title>
						</Column>
					</Row>
					<Row>
						<Column>
							<PlacesAutocomplete
								id="who_develop"
								name="who_develop"
								value={whoDevelopInput}
								onChange={(value) => setWhoDevelopInput(value)}
								onSelect={(_, __, properties) =>
									onSelect({
										properties,
										locationType: technologyLocationsEnum.WHO_DEVELOP,
									})
								}
							>
								{({
									getInputProps,
									suggestions,
									getSuggestionItemProps,
									loading,
								}) => (
									<div>
										<InputField
											{...getInputProps({
												placeholder: 'Procurar instituições e empresas...',
												className: 'location-search-input',
											})}
											form={{ register: () => {} }}
										/>
										<div className="autocomplete-dropdown-container">
											{loading && (
												<GoogleAddressSugestions>
													Carregando...
												</GoogleAddressSugestions>
											)}
											<GoogleAddressSugestions>
												{suggestions.map((suggestion) => {
													const style = suggestion.active
														? {
																backgroundColor: '#fafafa',
														  }
														: {
																backgroundColor: '#fff',
														  };
													return (
														<div
															key={suggestion.placeId}
															{...getSuggestionItemProps(suggestion, {
																style,
															})}
														>
															<Suggestion>
																{suggestion.description}
															</Suggestion>
														</div>
													);
												})}
											</GoogleAddressSugestions>
										</div>
									</div>
								)}
							</PlacesAutocomplete>
						</Column>
					</Row>
					<Row>
						<Column>
							{whoDevelop.map((element, index) => {
								return (
									<IconRow row>
										<IconLink>
											<FaMapMarkerAlt size="2rem" /> {element.description}
										</IconLink>
										<CircularButton
											variant="remove"
											height="2"
											width="2"
											onClick={() =>
												deleteFromCollection(index, 'whoDevelop')
											}
										>
											<FaTrash size="1em" />
										</CircularButton>
										<InputHiddenField
											form={form}
											type="hidden"
											name={`locations.who_develop.${index}`}
										/>
									</IconRow>
								);
							})}
						</Column>
					</Row>
					<Row>
						<Column>
							<Title>Onde a Tecnologia pode ser aplicada?</Title>
						</Column>
					</Row>
					<Row>
						<Column>
							<SelectField
								form={form}
								id="where_can_be_applied"
								label="Região"
								name="terms.where_can_be_applied"
								placeholder="Escolha uma região"
								validation={{ required: true }}
								options={[
									{
										value: 'semiarido',
										label: 'Semiárido',
									},
								]}
							/>
						</Column>
					</Row>

					<Row>
						<Column>
							<Title>Onde a Tecnologia já está implantada?</Title>
						</Column>
					</Row>
					<Row>
						<Column>
							<PlacesAutocomplete
								id="where_is_already_implemented"
								name="where_is_already_implemented"
								value={whereIsAlreadyImplementedInput}
								onChange={(value) => setWhereIsAlreadyImplementedInput(value)}
								onSelect={(_, __, properties) =>
									onSelect({
										properties,
										locationType:
											technologyLocationsEnum.WHERE_IS_ALREADY_IMPLEMENTED,
									})
								}
							>
								{({
									getInputProps,
									suggestions,
									getSuggestionItemProps,
									loading,
								}) => (
									<div>
										<InputField
											{...getInputProps({
												placeholder: 'Procurar localidades...',
												className: 'location-search-input',
											})}
											form={{ register: () => {} }}
										/>
										<div className="autocomplete-dropdown-container">
											{loading && (
												<GoogleAddressSugestions>
													Carregando...
												</GoogleAddressSugestions>
											)}
											<GoogleAddressSugestions>
												{suggestions.map((suggestion) => {
													const style = suggestion.active
														? {
																backgroundColor: '#fafafa',
														  }
														: {
																backgroundColor: '#fff',
														  };
													return (
														<div
															{...getSuggestionItemProps(suggestion, {
																style,
															})}
															key={suggestion.placeId}
														>
															<Suggestion>
																{suggestion.description}
															</Suggestion>
														</div>
													);
												})}
											</GoogleAddressSugestions>
										</div>
									</div>
								)}
							</PlacesAutocomplete>
						</Column>
					</Row>
					<Row>
						<Column>
							{whereIsAlreadyImplemented.map((element, index) => {
								return (
									<IconRow row>
										<IconLink>
											<FaMapMarkerAlt size="2rem" /> {element.description}
										</IconLink>
										<CircularButton
											variant="remove"
											height="2"
											width="2"
											onClick={() =>
												deleteFromCollection(
													index,
													'whereIsAlreadyImplemented',
												)
											}
										>
											<FaTrash size="1em" />
										</CircularButton>
										<InputHiddenField
											form={form}
											type="hidden"
											name={`locations.where_is_already_implemented.${index}`}
										/>
									</IconRow>
								);
							})}
						</Column>
					</Row>
				</Column>
				<Column>
					<Title>Fotos da tecnologia</Title>
					<Dropzone
						accept="image/*"
						onDrop={(acceptedFiles) => onDropAttachments(acceptedFiles, 'img')}
						ref={imgsRef}
					>
						{({ getRootProps, getInputProps }) => (
							<UploadBox {...getRootProps()}>
								<input {...getInputProps()} />
								<SvgBox>
									<IconBox>
										<FaFileUpload size="5rem" />
										<IconTextBox>
											<Div>Upload</Div>
											<Div>1280px x 720px</Div>
										</IconTextBox>
									</IconBox>
								</SvgBox>
							</UploadBox>
						)}
					</Dropzone>
					<UploadedImages data-cy="uploaded-images">
						<Controller
							render={({ field }) => (
								<ImagesPreview
									{...field}
									previewedImgFiles={previewedImgFiles}
									deleteAttachment={deleteAttachment}
								/>
							)}
							name="thumbnail_id"
							control={control}
						/>
					</UploadedImages>

					<Title>Videos da tecnologia</Title>
					<VideoContainer>
						<InputVideoWrapper>
							<InputField
								form={form}
								type="url"
								name="link_video"
								placeholder="Link do Youtube"
							/>
							<InputHiddenField form={form} type="hidden" name="videos" />
							<ButtonVideoAdd
								type="button"
								variant="secondary"
								onClick={() => onAddVideos(form.getValues('link_video'))}
							>
								Adicionar
							</ButtonVideoAdd>
						</InputVideoWrapper>
						{videos?.length ? (
							<VideosWrapper>
								{videos.map((video, idx) => (
									<VideoItem key={`video_${video.videoId}`}>
										<a
											href={`//www.youtube.com/watch?v=${video.videoId}`}
											target="_blank"
											rel="noreferrer"
										>
											<img
												src={video.thumbnail}
												alt={`Youtube vídeo ${video.videoId}`}
											/>
										</a>
										<RemoveVideoButton
											type="button"
											onClick={() => onRemoveVideos(idx)}
										>
											Remover
										</RemoveVideoButton>
									</VideoItem>
								))}
							</VideosWrapper>
						) : (
							<EmptyVideos>
								<p>Nenhum vídeo adicionado</p>
							</EmptyVideos>
						)}
					</VideoContainer>

					<Title>Documentos</Title>
					<Dropzone
						accept=".pdf"
						onDrop={(acceptedFiles) => onDropAttachments(acceptedFiles, 'pdf')}
						ref={pdfRef}
					>
						{({ getRootProps, getInputProps }) => (
							<UploadBox {...getRootProps()}>
								<input {...getInputProps()} />
								<SvgBox>
									<IconBox>
										<FaFileUpload size="5rem" />
										<IconTextBox>
											<Div>Upload</Div>
											<Div>.PDF</Div>
										</IconTextBox>
									</IconBox>
								</SvgBox>
							</UploadBox>
						)}
					</Dropzone>
					<UploadedDocuments>
						{previewedPdfFiles?.map((element, index) => {
							return (
								<IconRow row>
									<IconLink href={element.url}>
										<FaFilePdf size="2rem" /> {element.filename}
									</IconLink>
									<CircularButton
										variant="remove"
										height="2"
										width="2"
										onClick={() =>
											deleteAttachment({
												index,
												element,
												type: 'pdf',
											})
										}
									>
										<FaTrash size="1em" />
									</CircularButton>
								</IconRow>
							);
						})}
					</UploadedDocuments>
				</Column>
			</Row>
		</Wrapper>
	);
}