export default function Todo()

in todo/js/components/Todo.js [23:111]
83 lines of code
2 McCabe index (conditional complexity)

export default function Todo({
  userRef,
  todoRef,
  todoConnectionId,
}: Props): React$Element<'li'> {
  const todo = useFragment(
    graphql`
      fragment Todo_todo on Todo {
        complete
        text
        ...ChangeTodoStatusMutation_todo
        ...RenameTodoMutation_todo
        ...RemoveTodoMutation_todo
      }
    `,
    todoRef,
  );
  const user = useFragment(
    graphql`
      fragment Todo_user on User {
        ...ChangeTodoStatusMutation_user
        ...RemoveTodoMutation_user
      }
    `,
    userRef,
  );

  const commitChangeTodoStatusMutation = useChangeTodoStatusMutation(
    user,
    todo,
  );
  const handleCompleteChange = (e: SyntheticEvent<HTMLInputElement>) => {
    const complete = e.currentTarget.checked;
    commitChangeTodoStatusMutation(complete);
  };

  const [isEditing, setIsEditing] = useState<boolean>(false);
  const handleLabelDoubleClick = () => setIsEditing(true);
  const handleTextInputCancel = () => setIsEditing(false);
  const commitRenameTodoMutation = useRenameTodoMutation(todo);
  const handleTextInputSave = (text: string) => {
    setIsEditing(false);
    commitRenameTodoMutation(text);
  };

  const commitRemoveTodoMutation = useRemoveTodoMutation(
    user,
    todo,
    todoConnectionId,
  );
  const handleRemoveTodo = () => {
    commitRemoveTodoMutation();
  };
  const handleTextInputDelete = () => {
    setIsEditing(false);
    handleRemoveTodo();
  };

  return (
    <li
      className={classnames({
        completed: todo.complete,
        editing: isEditing,
      })}>
      <div className="view">
        <input
          checked={todo.complete}
          className="toggle"
          onChange={handleCompleteChange}
          type="checkbox"
        />

        <label onDoubleClick={handleLabelDoubleClick}>{todo.text}</label>
        <button className="destroy" onClick={handleRemoveTodo} />
      </div>

      {isEditing && (
        <TodoTextInput
          className="edit"
          commitOnBlur={true}
          initialValue={todo.text}
          onCancel={handleTextInputCancel}
          onDelete={handleTextInputDelete}
          onSave={handleTextInputSave}
        />
      )}
    </li>
  );
}