{"size": 2688, "ext": "js", "max_stars_repo_path": "src/components/todo/todo.js", "max_stars_repo_name": "MiguelPerezMartinez/reactjs-todo-list", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/todo/todo.js", "max_issues_repo_name": "MiguelPerezMartinez/reactjs-todo-list", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/todo/todo.js", "max_forks_repo_name": "MiguelPerezMartinez/reactjs-todo-list", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 26.6138613861, "max_line_length": 80, "alphanum_fraction": 0.4951636905}
import React from "react";
import { Formik } from "formik";

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faTrashAlt } from "@fortawesome/free-solid-svg-icons";

import Button from "../button";
import TodoInput from "../TodoInput";
import Hashtag from "../Hashtag";

import "../../_text.scss";
import "./todo.scss";
import "../TodoInput/TodoInput.scss";

import newTodoSchema from "../NewTodo/NewTodoSchema";

function Todo({
  id,
  content,
  handleIsActive,
  isActive,
  deleteTodo,
  hashtagDisplayed,
  displayHashtag,
  editTodo,
  hashtag,
  changeHashtag,
  darkMode,
}) {
  function deleteTodoId() {
    deleteTodo(id);
  }

  function onSave(values) {
    editTodo(id, values.target.value);
  }

  return (
    <>
      <li className="list">
        <div className="container-list">
          <span className={`hashtag ${hashtag}`}> </span>

          <Button id={id} handleIsActive={handleIsActive} isActive={isActive} />
          <div className={darkMode ? "todo-input dark" : "todo-input"}>
            <Formik
              initialValues={{
                content: "",
              }}
              validationSchema={newTodoSchema}
              onSubmit={onSave}
              onChange={onSave}
              onBlur={onSave}
            >
              {({ handleChange, handleBlur, handleSubmit }) => (
                <form
                  onSubmit={handleSubmit}
                  onChange={id && onSave}
                  onBlur={id && onSave}
                  className="todo-form"
                >
                  <TodoInput
                    className={
                      (isActive
                        ? "input text__check text__normal--check"
                        : "input text__normal",
                      darkMode ? "input dark" : "input")
                    }
                    id={id}
                    content={content}
                    displayHashtag={displayHashtag}
                    hashtagDisplayed={hashtagDisplayed}
                    handleBlur={handleBlur}
                    handleChange={handleChange}
                    darkMode={darkMode}
                  />
                </form>
              )}
            </Formik>
          </div>
          <div className="delete">
            <FontAwesomeIcon
              icon={faTrashAlt}
              onClick={deleteTodoId}
              className={darkMode ? "dark" : ""}
            />
          </div>
        </div>
        <Hashtag
          id={id}
          hashtag={hashtag}
          hashtagDisplayed={hashtagDisplayed}
          changeHashtag={changeHashtag}
        />
      </li>
    </>
  );
}

export default Todo;
