react-icons/fi#FiImage JavaScript Examples

shareTypes = [
  {
    name: 'default',
    icon: FiFile,
  },
  {
    name: 'image',
    icon: FiImage,
  },
  {
    name: 'audio',
    icon: FiMusic,
  },
]

export function getIconForPath(type, filename) {
  const ext = filenameExt(filename);

  let iconComponent = FiFile;

  if (isImageFileExt(ext)) {
    iconComponent = FiImage;
  } else if (isFileExtensionAudio(ext)) {
    iconComponent = FiMusic;
  } else if (isFileExtensionVideo(ext)) {
    iconComponent = FiVideo;
  } else if (isFileExtensionArchive(ext)) {
    iconComponent = FiArchive;
  }

  if (type === 'dir') {
    iconComponent = FaFolder;
  }
  return iconComponent;
}

export function FileDragBlock({handleOpenUpload, isActive}) {
  const isSmallScreen = useIsSmallScreen();
  const uploadTitle = isSmallScreen
    ? 'Tap to upload files'
    : 'Drag files to upload or click here';

  const styles = {
    container: {
      border: `2px dashed ${primary3}`,
      backgroundColor: isActive ? primary2 : null,
      borderRadius: 4,
      padding: 18,
      height: isActive ? '100%' : null,
      boxSizing: 'border-box',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
    },
    icon: {
      padding: '0 6px',
    },
    dragTitle: {
      color: isActive ? primary45 : primary3,
      fontSize: 16,
      fontWeight: 400,
      marginTop: 2,
    },
    iconContainer: {
      display: 'inline-block',
    },
    outer: {
      paddingTop: 4,
      height: '100%',
      boxSizing: 'border-box',
    },
  };

  const iconColor = isActive ? primary45 : primary3;

  return (
    <div style={styles.outer}>
      <div
        style={styles.container}
        onClick={!isActive ? handleOpenUpload : null}>
        <div>
          <div>
            <div
              className={isActive ? 'jumpingDrop' : 'jumping'}
              style={{...styles.iconContainer, animationDelay: '.5s'}}>
              <FiImage color={iconColor} size={20} style={{...styles.icon}} />
            </div>
            <div
              className={isActive ? 'jumpingDrop' : 'jumping'}
              style={{...styles.iconContainer, animationDelay: '.75s'}}>
              <FiFolder color={iconColor} size={20} style={{...styles.icon}} />
            </div>
            <div
              className={isActive ? 'jumpingDrop' : 'jumping'}
              style={{...styles.iconContainer, animationDelay: '1s'}}>
              <FiMusic color={iconColor} size={20} style={{...styles.icon}} />
            </div>
            <div
              className={isActive ? 'jumpingDrop' : 'jumping'}
              style={{...styles.iconContainer, animationDelay: '1.25s'}}>
              <FiVideo color={iconColor} size={20} style={{...styles.icon}} />
            </div>
          </div>
          <div style={styles.dragTitle}>
            {!isActive ? uploadTitle : 'Drop to upload'}
          </div>
        </div>
      </div>
    </div>
  );
}

ImagesPreview = ({ previewedImgFiles, value, onChange, deleteAttachment }) => {
	useEffect(() => {
		// This will set first image as thumbnail if there's no thumbnail previously set
		// Or in case the current thumbnail is deleted
		const valueHasInPreview = previewedImgFiles?.some((item) => item.id === value);
		if ((!value || !valueHasInPreview) && !!previewedImgFiles.length) {
			onChange(previewedImgFiles[0].id);
			return;
		}

		// This will clear thumbnail value if theres no preview
		// It means that all images has been deleted
		if (!previewedImgFiles.length) {
			onChange('');
		}
	}, [value, onChange, previewedImgFiles]);

	const handleDelete = ({ index, element }) => {
		deleteAttachment({
			index,
			element,
			type: 'img',
		});
	};

	if (!previewedImgFiles?.length) {
		return null;
	}

	return previewedImgFiles.map((element, index) => (
		<IconRow key={element.url} alignItems="flex-start">
			<RadioWrapper>
				<input
					id={element.url}
					type="radio"
					name="thumbnail_id"
					value={element.id}
					checked={value === element.id}
					onChange={() => onChange(element.id)}
				/>
				{/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
				<label htmlFor={element.url}>
					<FiImage fontSize="1.6rem" />
					Usar como capa
				</label>
			</RadioWrapper>
			<Button onClick={() => handleDelete({ index, element })}>
				<FiTrash2 fontSize="1.6rem" />
				Excluir
			</Button>
			<Media key={element.url} src={element.url} />
		</IconRow>
	));
}

NewServicePage = ({ keywordTerms }) => {
	const form = useForm({
		defaultValues: {
			name: '',
			keywords: null,
			description: '',
			measure_unit: null,
			price: '',
			type: null,
			payment_message: '',
			thumbnail_id: null,
		},
	});
	const { colors } = useTheme();
	const [addedServices, setAddedServices] = useState([]);
	const [isSubmitting, setIsSubmitting] = useState(false);
	const [uploadError, setUploadError] = useState('');
	const [thumbnailPreview, setThumbnailPreview] = useState('');
	const router = useRouter();
	const { user } = useAuth();
	const { openModal } = useModal();

	const handleSubmit = async (values, _, isFinalize) => {
		setIsSubmitting(true);

		const preparedData = prepareFormData(values);
		const result = await createService(preparedData);

		if (result) {
			toast.success('Serviço criado com sucesso!');
			form.reset();
			setThumbnailPreview(null);
			setAddedServices((prevValue) => [...prevValue, result]);
		} else {
			return toast.error('Erro ao criar serviço, tente novamente em instantes');
		}

		if (isFinalize) {
			return router.push('/');
		}

		return setIsSubmitting(false);
	};

	const handleDeleteService = async (serviceId) => {
		setIsSubmitting(true);

		const result = await deleteService(serviceId);

		if (!result)
			toast.error(
				'Ocorreu um erro ao tentar deletar o serviço. Tente novamente em instantes',
			);
		else {
			toast.success('Serviço deletado com sucesso');
			setAddedServices((prevValue) => prevValue.filter((item) => item.id !== serviceId));
		}

		setIsSubmitting(false);
	};

	/*
	 * If user's adding the first service he can click in finalize button so it'll
	 * add the service and then redirect to home
	 * If user already added some services he can click in finalize button and then
	 * he'll be just redirected to home
	 * The advantage is that user can register only one service and get redirected to home
	 * in just one click
	 */
	const handleFinalizeRegistration = async () => {
		if (addedServices.length) {
			return router.push('/');
		}

		const isValidForm = await form.trigger();
		if (isValidForm) {
			await handleSubmit(form.getValues(), null, true);
		}

		return true;
	};

	const onCreateTerm = async (inputValue, taxonomy) => {
		const term = await createTerm(inputValue, taxonomy);
		return { label: term.term, value: `${term.id}` };
	};

	const onDropAttachment = async (acceptedFiles) => {
		if (!acceptedFiles) return null;

		const formData = new FormData();
		if (acceptedFiles.length !== 0) {
			formData.append(`files[0]`, acceptedFiles[0], acceptedFiles[0].name);
		}

		const response = await upload(formData);

		if (response.status === 200) {
			const { id, url } = response.data[0];
			setThumbnailPreview(url);
			form.setValue('thumbnail_id', id);
		} else {
			setUploadError(response.data.error.message[0].message);
		}

		return true;
	};

	return (
		<Wrapper>
			<Protected>
				<Container onSubmit={form.handleSubmit(handleSubmit)}>
					<Details>
						<Title align="left" color={colors.black}>
							Novo serviço
						</Title>

						<Fields>
							<Dropzone
								accept="image/*"
								onDrop={(acceptedFiles) => onDropAttachment(acceptedFiles)}
								multiple={false}
							>
								{({ getRootProps, getInputProps }) => (
									<UploadWrapper>
										{thumbnailPreview && (
											<ThumbnailWrapper>
												<Image
													src={thumbnailPreview}
													width={80}
													height={80}
													alt="Service thumbnail"
												/>
											</ThumbnailWrapper>
										)}
										<UploadThumbnail {...getRootProps()}>
											<UploadBody>
												<FiImage fontSize={24} />
												<div>
													<p>Selecione uma imagem de capa</p>
													<p>Limite de 5mb</p>
												</div>
											</UploadBody>
											<input name="logo" {...getInputProps()} />
										</UploadThumbnail>
										{uploadError && <UploadError>{uploadError}</UploadError>}
									</UploadWrapper>
								)}
							</Dropzone>
							<InputHiddenField form={form} name="thumbnail_id" />

							<Inputs>
								<InputField
									form={form}
									name="name"
									label="Nome do serviço"
									validation={{ required: true }}
									placeholder="Digite o nome"
									variant="gray"
								/>

								<SelectField
									form={form}
									name="keywords"
									instanceId="keywords-select"
									placeholder="Busque por palavras chaves (pode adicionar mais de um item)"
									label="Palavras-chave"
									validation={{ required: true }}
									options={mapArrayOfObjectToSelect(keywordTerms, 'term', 'id')}
									onCreate={(inputValue) => onCreateTerm(inputValue, 'KEYWORDS')}
									variant="gray"
									isMulti
									creatable
								/>

								<TextField
									form={form}
									name="description"
									validation={{ required: true }}
									label="Descrição"
									placeholder="Digite a descrição"
									variant="gray"
									resize="none"
								/>

								<SelectField
									form={form}
									name="measure_unit"
									instanceId="measure_unit-select"
									label="Unidade de Medida"
									placeholder="Escolha uma unidade"
									validation={{ required: true }}
									options={measureUnitOptions}
									variant="rounded"
								/>

								<CurrencyInputField
									form={form}
									name="price"
									validation={{ required: true }}
									label="Preço"
									placeholder="Digite o preço"
									variant="gray"
								/>

								<SelectField
									form={form}
									name="type"
									instanceId="type-select"
									label="Tipo"
									placeholder="Escolha um tipo"
									validation={{ required: true }}
									options={typeOptions}
									variant="rounded"
								/>
							</Inputs>

							<RectangularButton
								disabled={isSubmitting}
								variant="outlined"
								colorVariant="blue"
								type="submit"
								fullWidth
							>
								Adicionar novo serviço
							</RectangularButton>
							<RectangularButton
								variant="filled"
								colorVariant="orange"
								disabled={isSubmitting}
								onClick={handleFinalizeRegistration}
								fullWidth
							>
								Finalizar cadastro
							</RectangularButton>
						</Fields>

						<PaymentMessage>
							<div>
								<p>Responsável:</p>
								<p>{user.full_name}</p>

								<p>Instituição:</p>
								<p>{user.institution?.name}</p>
							</div>

							<Watcher
								form={form}
								property="payment_message"
								render={(paymentMessageHtml) => (
									<HtmlViewField
										label="Mensagem de pagamento"
										placeholder="Insira a mensagem de pagamento"
										html={paymentMessageHtml}
									/>
								)}
							/>

							<RectangularButton
								fullWidth
								variant="text"
								colorVariant="blue"
								onClick={() =>
									openModal(
										'ckEditor',
										{
											form,
											name: 'payment_message',
											config: {
												placeholder: 'Insira a mensagem de pagamento',
												removePlugins: [
													'ImageUpload',
													'Table',
													'MediaEmbed',
												],
											},
											onChange: (editorData) =>
												form.setValue('payment_message', editorData),
											renderWithController: false,
											defaultValue: form.getValues()?.payment_message,
										},
										{
											customModal: true,
											overlayClick: false,
										},
									)
								}
							>
								<FiEdit3 fontSize={14} />
								Editar mensagem
							</RectangularButton>
							<InputHiddenField form={form} name="payment_message" />
						</PaymentMessage>
					</Details>

					<Review>
						<Title align="left" color={colors.black}>
							Serviços
						</Title>

						{addedServices.map((service) => (
							<ServiceCard key={service.id}>
								<div>
									<ServiceThumbnailWrapper>
										<Image
											src={service.thumbnail?.url || '/card-image.jpg'}
											width={80}
											height={80}
										/>
									</ServiceThumbnailWrapper>

									<ServiceInfos>
										<p>{service.name}</p>
										<span>{service.description}</span>
										<p>{formatMoney(service.price)}</p>
									</ServiceInfos>
								</div>

								<RectangularButton
									variant="text"
									colorVariant="red"
									onClick={() => handleDeleteService(service.id)}
								>
									Remover
								</RectangularButton>
							</ServiceCard>
						))}
					</Review>
				</Container>
			</Protected>
		</Wrapper>
	);
}