All the code in Todo.js

mail@pastecode.io avatar
unknown
javascript
3 years ago
1.8 kB
23
Indexable
Never
import React, { useState } from "react";
import { FaMoneyCheckAlt, FaDollarSign, FaTrash } from "react-icons/fa";
import { toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

toast.configure();

const Todo = ({ text, todo, todos, setTodos }) => {
  // Events
  const deleteHandler = () => {
    setTodos(todos.filter((element) => element.id !== todo.id));

    toast.error("Deleted todo", {
      position: "top-right",
      autoClose: 2000,
      hideProgressBar: false,
      closeOnClick: true,
      pauseOnHover: true,
      draggable: true,
      progress: undefined,
    });
  };

  const [isSpent, setIsSpent] = useState(false);
  const [isReceived, setIsReceived] = useState(false);

  const handleClickSpent = () => {
    setIsSpent(!isSpent);
    localStorage.setItem("isSpent", isSpent);
  };
  const handleClickReceived = () => {
    setIsReceived(!isReceived);
    localStorage.setItem("isReceived", isReceived);
  };

  return (
    <div className="todo">
      <div className="bar-tag-container">
        <li className={`todo-item ${todo.completed ? "completed" : ""}`}>
          {isSpent && <p className="tag">Spent</p>}
          {isReceived && <p className="tag">Received</p>}
          <div className="others">{text}</div>
        </li>
      </div>

      <button
        onClick={(() => setIsSpent(!isSpent), handleClickSpent)}
        className="spent-btn"
      >
        <FaMoneyCheckAlt />
      </button>

      <button
        onClick={(() => setIsReceived(!isReceived), handleClickReceived)}
        className="receive-btn"
      >
        <FaDollarSign />
      </button>

      <button onClick={deleteHandler} className="trash-btn">
        <FaTrash />
      </button>
    </div>
  );
};

export default Todo;