react-icons/fi#FiTrash2 JavaScript Examples

function Todo({ todo, handleCompletion, handleRemoval }) {
  return (
    <div className='flex place-content-between items-center hover:bg-white/10 transition-colors my-2 px-4 rounded-md'>
      <p
        className={`leading-8 cursor-pointer pr-2 ${
          todo.completed && 'line-through opacity-70'
        }`}
        onClick={handleCompletion}>
        {todo.task}
      </p>
      <FiTrash2 className='cursor-pointer' onClick={handleRemoval} />
    </div>
  )
}

export default function PackPreview({ pack, hideMeta, showDelete=false, auth, deleted}){
    const [appIcons, setIcons] = useState([]);

    useEffect(() => {
        const appIcons = pack.apps.filter(a => a.icon != "" ).map(a => ({ icon: a.icon, _id: a._id })); 

        setIcons([...appIcons].slice(0, 4));

    }, [])

    const deletePack = async () => {
        if(!auth) return;

        const { response } = await fetchWinstallAPI(`/packs/${pack._id}`, {
            method: "DELETE",
            headers: {
                'Authorization': `${auth.accessToken},${auth.refreshToken}`,
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ creator: pack.creator })
        });

        if(response && response.msg){
            if(deleted) deleted(pack._id);
            localStorage.removeItem("ownPacks");
        }
    }

    const handleDelete = async (e) => {
        if ('confirm' in window && typeof window.confirm === 'function') {
            if (window.confirm("Are you sure you want to delete this pack?")) {
                deletePack();
            }
        } else {
            deletePack();
        }

    }
    
    return (
        <div className={styles.packCard}>
            <Link href="/packs/[id]" as={`/packs/${pack._id}`} prefetch={false}>
                <a>
                    <header className={`${styles.packIcons} ${appIcons.length <= 2? styles.singleIcon : ""}`} id={pack.accent}>
                        <ul style={{gridTemplateColumns: `repeat(${appIcons.length > 4 ? "4": appIcons.length},1fr)`}}>
                            {
                                appIcons.map((app, index) => <li key={index}><AppIcon icon={app.icon} id={app._id}/></li>)
                            }
                            { appIcons.length === 0 && (
                                <li><FiPackage/></li>
                            )}
                        </ul>
                    </header>
                </a>
            </Link>
            {!hideMeta && (
                <div className={styles.packMeta}>
                    <Link href="/packs/[id]" as={`/packs/${pack._id}`} prefetch={false}><a><h3>{pack.title}</h3></a></Link>
                    <p>{pack.desc}</p>
                    <p className={styles.includes}>Includes {pack.apps.slice(0, 3).map(a => a.name).join(", ")}, and more.</p>
                    <div className="box fBox">
                        <Link href="/packs/[id]" as={`/packs/${pack._id}`} prefetch={false}>
                            <button className="button accent"><FiPackage /> View Pack</button>
                        </Link>

                        { showDelete && (
                            <div className={styles.packEdit}>
                                <Link href={`/packs/edit?id=${pack._id}`} prefetch={false}><button title="Edit Pack" className={`button subtle ${styles.delete}`} ><FiEdit /></button></Link>
                                <button className={`button subtle ${styles.delete}`} title="Delete Pack" onClick={handleDelete}><FiTrash2 /></button>
                            </div>
                        )}
                    </div>
                </div>
            )}
        </div>
    )
}

export default function Profile() {

  const [incidents, setIncidents] = useState([])
  const history = useHistory()
  const ongId = localStorage.getItem('ongId')
  const ongName = localStorage.getItem('ongName')

  useEffect(() => {
    api.get('profile', {
      headers: {
        Authorization: ongId,
      }
    }).then(response => {
      setIncidents(response.data)
    })
  }, [ongId])
  
  async function handleDeleteIncident(id) {
    try {
      await api.delete(`incidents/${id}`, {
        headers: {
          Authorization: ongId,
        }
      })
      
      setIncidents(incidents.filter(incident => incident.id !== id))
    } catch (err) {
      alert('Erro ao deletar caso, tente novamente.')
    }
  }

  function handleLogout() {
    localStorage.clear()
    history.push('/')
  }

  return (
    <div className="profile-container">
      <header>
        <img src={logoImg} alt="Be The Hero" />
        <span> Bem-vinda, {ongName} </span>

        <Link className="button" to="/incidents/new"> Cadastrar novo caso </Link>
        <button onClick={handleLogout} type="button">
          <FiPower size={18} color="e02041" />
        </button>
      </header>
      <h1> Casos Cadastrados </h1>
      <ul>
        {incidents.map(incident => (
          <li key={incident.id}>
            <strong> CASO: </strong>
            <p> {incident.title} </p>
    
            <strong> DESCRIÇÃO: </strong>
            <p> {incident.description} </p>
    
            <strong> VALOR: </strong>
            <p> {Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(incident.value)} </p>
    
            <button onClick={() => handleDeleteIncident(incident.id)} type="button">
              <FiTrash2 size={20} color="#a8a8b3" />
            </button>
          </li>
        ))}
      </ul>
    </div>
  )
}

export default function Profile() {
    const [incidents, setIncidents] = useState([]);

    const history = useHistory();

    const ongId = localStorage.getItem('ongId');
    const ongName = localStorage.getItem('ongName');

    useEffect(() => {
        api.get('profile', {
            headers: {
                Authorization: ongId,
            }
        }).then(response =>{
            setIncidents(response.data);
        })

    }, [ongId]);

    async function handleDeleteIncident(id) {
        try{
            await api.delete(`incidents/${id}`, {
                headers: {
                    Authorization: ongId,
                }
            });

            setIncidents(incidents.filter(incident => incident.id !== id));
        } catch (err) {
            alert('Erro ao deletar caso, tente novamente.')
        }
    }

    function handleLogout() {
        localStorage.clear();

        history.push('/');

    }

    return(
        <div className="profile-container">
            <header>
                <img src={logoImg} alt="Be The Hero" />
                <span>Bem vinda, {ongName}</span>

                <Link className="button" to="/incidents/new">Cadastrar novo caso</Link>
                <button onClick={handleLogout} type="button">
                    <FiPower size={18} color="#e02041" />
                    </button>
            </header>

            <h1>Casos cadastrados</h1>
            <ul>
                {incidents.map(incident => (
                <li key={incident.id}>
                <strong>CASO:</strong>
                <p>{incident.title}</p>

                <strong>DESCRIÇÃO:</strong>
                <p>{incident.description}</p>

                <strong>VALOR:</strong>
                <p>{Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' })
                .format(incident.value)}</p>

                <button onClick={() => handleDeleteIncident(incident.id)} type="button">
                    <FiTrash2 size={20} color="#a8a8b3" />
                </button>
            </li>
                ))}
            </ul>
        </div>
    );
}

export default function Profile() {
    const [incidents, setIncidents] = useState([]);
    const ongName = localStorage.getItem('ongName');
    const ongId = localStorage.getItem('ongId');
    const history = useHistory();
    useEffect(() => {
        api.get('profile', {headers : { Authorization: ongId}})
            .then(response => {
                setIncidents(response.data);
            })
    }, [ongId]);

    async function handleDeleteIncident(id){
        try {
            await api.delete(`incidents/${id}`, {
                headers : {
                    Authorization : ongId,
                }
            });

            setIncidents(incidents.filter(incident => incident.id !== id));
        } catch (err) {
            alert('Erro ao deletar caso, tente novamente');
        }
    }

    function handleLogout() {
        localStorage.clear();
        history.push('/');

    }

    return (
        <div className="profile-container">
            <header>
                <img src={logoImg} alt="Be the Hero" />
                <span>Bem vindo (a), <strong>{ongName}</strong>!</span>

                <Link className="button" to="incidents/new">Cadastrar novo caso</Link>
                <button onClick={handleLogout} type="button">
                    <FiPower size={18} color="#E02041" />
                </button>
            </header>

            <h1>Casos Cadastrados</h1>

            <ul>
                {incidents.map(incident => (
                    <li key={incident.id}>
                        <strong>CASO:</strong>
                        <p>{incident.title}</p>
                        <strong>DESCRIÇÃO:</strong>
                        <p>{incident.description}</p>
                        <strong>VALOR:</strong>
                        <p>{Intl.NumberFormat('pt-BR',{ style: 'currency', currency: 'BRL'}).format(incident.value)}</p>

                        <button onClick={() => handleDeleteIncident(incident.id)} type="button">
                            <FiTrash2 size={20} color="#E02041" />
                        </button>
                    </li>
                ))}

                
            </ul>
        </div>
    );
}

export default function Profile() {
  const [incidents, setIncidents] = useState([]);

  const history = useHistory();

  const ongId = localStorage.getItem('ongId');
  const ongName = localStorage.getItem('ongName');

  useEffect(() => {
    api.get('profile', {
      headers: {
        Authorization: ongId,
      }
    }).then(response => {
      setIncidents(response.data);
    })
  }, [ongId]);

  async function handleDeleteIncident(id) {
    try {
      await api.delete(`incidents/${id}`, {
        headers: {
          Authorization: ongId,
        }
      });

      setIncidents(incidents.filter(incident => incident.id !== id));
    } catch (err) {
      alert('Erro ao deletar caso, tente novamente.');
    }
  }

  function handleLogout() {
    localStorage.clear();

    history.push('/');
  }

  return (
    <div className="profile-container">
      <header>
        <img src={logoImg} alt="Be the Hero" />
        <span>Bem vinda, {ongName}</span>

        <Link className="button" to="/incidents/new">Cadastrar novo caso</Link>
        <button onClick={handleLogout} type="button">
          <FiPower size={18} color="#E02041" />
        </button>
      </header>

      <h1>Casos cadastrados</h1>

      <ul>
        {incidents.map(incident => (
          <li key={incident.id}>
            <strong>CASO:</strong>
            <p>{incident.title}</p>

            <strong>DESCRIÇÃO:</strong>
            <p>{incident.description}</p>

            <strong>VALOR:</strong>
            <p>{Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(incident.value)}</p>

            <button onClick={() => handleDeleteIncident(incident.id)} type="button">
              <FiTrash2 size={20} color="#a8a8b3" />
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

CartItem = ({
	thumbnail,
	name,
	institution,
	price,
	measureUnit,
	quantity,
	form,
	onRemoveFromCart,
	onUpdateItem,
}) => {
	return (
		<S.Wrapper>
			<S.UpperContent>
				<S.ItemDetails>
					<div>
						<S.ThumbnailWrapper>
							<Image
								layout="responsive"
								width={80}
								height={80}
								src={thumbnail?.url || '/card-image.jpg'}
							/>
						</S.ThumbnailWrapper>

						<S.Infos>
							<S.Title>{name}</S.Title>
							<S.Institution>{institution}</S.Institution>
							<S.Price>{`R$ ${formatMoney(price, false)}${
								measureUnit && measureUnit !== measureUnitEnum.other
									? `/${getMeasureUnitLabel(measureUnit)}`
									: ''
							}`}</S.Price>
						</S.Infos>
					</div>

					<RectangularButton colorVariant="red" variant="text" onClick={onRemoveFromCart}>
						<FiTrash2 fontSize={14} />
						Remover
					</RectangularButton>
				</S.ItemDetails>
			</S.UpperContent>

			<S.LowerContent>
				<QuantityField
					form={form}
					labelPlacement="left"
					defaultValue={quantity}
					minValue={1}
					onChange={(newQuantity) => onUpdateItem({ quantity: newQuantity })}
				/>
				<span>{formatMoney(price * quantity)}</span>
			</S.LowerContent>
		</S.Wrapper>
	);
}

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>
	));
}

export default function Profile() {
  const [incidents, setIncidents] = useState([]);

  const ongName = localStorage.getItem("ongName");
  const ongId = localStorage.getItem("ongId");

  const history = useHistory();

  useEffect(() => {
    api
      .get("/profile", {
        headers: { Authorization: ongId }
      })
      .then(response => {
        setIncidents(response.data);
      });
  }, [ongId]);

  async function handleDeleteIncident(id) {
    try {
      await api.delete(`incidents/${id}`, {
        headers: {
          Authorization: ongId
        }
      });

      setIncidents(incidents.filter(incident => incident.id !== id));
    } catch (err) {
      alert("Erro ao deletar o caso");
    }
  }

  function handleLogout() {
    localStorage.clear();
    history.push("/");
  }
  return (
    <div className="profile-container">
      <header>
        <img src={logoImg} alt="Be The Hero" />
        <span>Bem vinda, {ongName}</span>

        <Link to="/incidents/new" className="button">
          Cadastrar novo caso
        </Link>

        <button type="button" onClick={handleLogout}>
          <FiPower size={18} color="#e02041" />
        </button>
      </header>

      <h1> Casos cadastrados</h1>

      <ul>
        {incidents.map(incident => (
          <li key={incident.id}>
            <strong>CASO:</strong>
            <p>{incident.title}</p>

            <strong>DESCRIÇÃO:</strong>
            <p>{incident.description}</p>

            <strong>VALOR:</strong>
            <p>
              {Intl.NumberFormat("pt-br", {
                style: "currency",
                currency: "BRL"
              }).format(incident.value)}
            </p>

            <button
              type="button"
              onClick={() => handleDeleteIncident(incident.id)}
            >
              <FiTrash2 size={20} color="#a8a8b3" />
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default function Profile() {
  const [incidents, setIncidents] = useState([]);
  const history = useHistory();
  const ongName = localStorage.getItem('ongName');
  const ongId = localStorage.getItem('ongId');

  function handleNavigateNewIncident() {
    history.push('/incidents/new');
  }

  async function handleDeleteIncident(id) {
    try {
      await api.delete(`incidents/${id}`, {
        headers: {
          Authorization: ongId,
        }
      });

      setIncidents(incidents.filter(incident => incident.id !== id));
    } catch (err) {
      alert('Erro ao deletar caso, tente novamete.');
    }
  }

  async function handleLogout() {
    localStorage.clear();
    history.push('/')
  }

  useEffect(() => {
    async function loadIncidents() {
      const response = await api.get('profile', {
        headers: {
          Authorization: ongId,
        }
      });
  
      const data = response.data.map(incident => ({
        ...incident,
          valueFormated: formatPrice(incident.value),
      }));      
      
      setIncidents(data);
    }
    loadIncidents();
  }, [ongId]);

  return (
    <Container>
      <header>
        <img src={logoImg} alt="Be The Hero"/>
        <span>Bem Vinda, {ongName}</span>

        <NavigateButton onClick={handleNavigateNewIncident}>
          Cadastrar novo caso
        </NavigateButton>
        <button onClick={handleLogout} type="button">
          <FiPower size={24} color={colors.redHero} />
        </button>
      </header>

      <h1>Casos cadastrados</h1>

      <Listagem>
        {incidents.map(incident => (  
          <li key={incident.id}>
            <strong>CASO:</strong>
            <p>{incident.title}</p>

            <strong>DESCRIÇÃO:</strong>
            <p>{incident.description}</p>

            <strong>VALOR:</strong>
            <p>{incident.valueFormated}</p>

            <button
              onClick={() => handleDeleteIncident(incident.id)}
              type="button"
            >
              <FiTrash2 size={24} color={colors.textosSecundarios} />
            </button>
          </li>
        ))}
      </Listagem>
    </Container>
  );
}

EditServiceModal = ({
	closeModal,
	id,
	name,
	thumbnail,
	keywords,
	description,
	measure_unit,
	price,
	type,
	revalidateServices,
	revalidateKeywords,
	keywordsOptions,
}) => {
	const [isSubmitting, setIsSubmitting] = useState(false);
	const [uploadError, setUploadError] = useState(null);

	const form = useForm({
		defaultValues: {
			name,
			keywords,
			thumbnail: { id: thumbnail?.id, url: thumbnail?.url },
			description,
			measure_unit,
			price,
			type,
		},
	});
	const formThumbnail = form.watch('thumbnail');

	const onSubmit = async (values) => {
		setIsSubmitting(true);

		const serviceToEdit = {
			...values,
			measure_unit: values.measure_unit.value,
			thumbnail_id: values.thumbnail.id,
			type: values.type.value,
			keywords: values.keywords?.map((item) => item.value) ?? [],
			price: formatCurrencyToInt(values.price),
		};

		const result = await updateService(id, serviceToEdit);

		if (result.success) {
			toast.success('Serviço atualizado com sucesso');
			revalidateServices();
			revalidateKeywords();
			closeModal();
		} else {
			toast.error(result.error);
		}

		setIsSubmitting(false);
	};

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

		setUploadError(false);

		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: uploadId, url } = response.data[0];
			form.setValue('thumbnail.id', uploadId);
			form.setValue('thumbnail.url', url);
		} else {
			setUploadError(response.data?.error?.message[0]?.message);
		}

		return true;
	};

	const handleRemoveAttachment = async () => {
		const response = await deleteUpload(formThumbnail.id);

		if (response?.success) {
			form.setValue('thumbnail.id', '');
			form.setValue('thumbnail.url', '');
		} else {
			toast.error(response.data?.error?.message[0]?.message);
		}
	};

	const { getRootProps, getInputProps } = useDropzone({
		accept: 'image/*',
		onDrop: onDropAttachment,
	});

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

	return (
		<S.Modal onSubmit={form.handleSubmit(onSubmit)} noValidate>
			<Title>Editar serviço</Title>

			<Row>
				<S.Column noPadding mr={1.2} noMarginMobile>
					<InputField
						form={form}
						name="name"
						label="Nome do serviço"
						variant="gray"
						fullWidth
					/>

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

					<TextField
						form={form}
						name="description"
						label="Descrição do serviço"
						resize="none"
						variant="gray"
					/>
				</S.Column>
				<Column noPadding ml={1.2} noMarginMobile>
					<S.Row mb={1.6}>
						<InputHiddenField form={form} name="thumbnail.id" />
						<InputHiddenField form={form} name="thumbnail.url" />
						<S.ImageContainer>
							<Image
								src={formThumbnail?.url || '/card-image.jpg'}
								alt={name}
								layout="fill"
								objectFit="cover"
							/>
						</S.ImageContainer>
						<S.ImageActions>
							<S.UploadBox {...getRootProps()}>
								<input {...getInputProps()} />
								<RectangularButton colorVariant="green">
									<FiUpload fontSize={14} strokeWidth={4} />
									Alterar imagem
								</RectangularButton>
							</S.UploadBox>

							<RectangularButton
								colorVariant="red"
								onClick={handleRemoveAttachment}
								disabled={!formThumbnail?.id}
							>
								<FiTrash2 fontSize={14} strokeWidth={3} />
								Remover
							</RectangularButton>
						</S.ImageActions>
					</S.Row>
					{!!uploadError && (
						<Row>
							<S.UploadError>{uploadError}</S.UploadError>
						</Row>
					)}

					<S.Row mb={1.6}>
						<SelectField
							form={form}
							name="measure_unit"
							label="Unidade de medida"
							placeholder="Escolha a unidade de medida"
							options={measureUnitOptions}
							variant="rounded"
						/>
						<CurrencyInputField form={form} name="price" label="Preço" variant="gray" />
					</S.Row>
					<SelectField
						form={form}
						name="type"
						label="Tipo"
						placeholder="Escolha um tipo"
						options={typeOptions}
						variant="rounded"
					/>
				</Column>
			</Row>
			<S.Actions>
				<RectangularButton variant="outlined" colorVariant="red" onClick={closeModal}>
					Cancelar
				</RectangularButton>
				<RectangularButton
					type="submit"
					variant="filled"
					colorVariant="green"
					disabled={isSubmitting}
				>
					Editar Serviço
				</RectangularButton>
			</S.Actions>
		</S.Modal>
	);
}