React-beautiful-dnd - Dynamic to-do, with possibility to add items trought a form

Question

How can I let my To-do dynamic, with the possibility to add items trought a form?

This is is my list:

const initialData = {
  tasks: {
    'task-1': { id: 'task-1', content: 'Org.Internacionais' },
    'task-2': { id: 'task-2', content: 'Ind.Farm.LTDA' },
    'task-3': { id: 'task-3', content: 'Musc.Sound Live Cmp' },
  },
  columns: {
    'column-1': {
      id: 'column-1',
      title: 'Cliente em Potencial',
      taskIds: ['task-1', 'task-2', 'task-3'],
    },
    'column-2': {
      id: 'column-2',
      title: 'Dados Confirmados',
      taskIds: [],
    },
    'column-3': {
      id: 'column-3',
      title: 'Reunião Agendada',
      taskIds: [],
    },
  },
  columnOrder: ['column-1', 'column-2', 'column-3'],
};

This list got fixed tasks, and I wanna let dynamic, adding tasks through a form, but i don't know how to do this!

Code:

import React from 'react';
import ReactDOM from 'react-dom';
import styled from 'styled-components';
import { DragDropContext } from 'react-beautiful-dnd';

import '@atlaskit/css-reset';
import './styles.css';

import Column from './column';

const initialData = {
  tasks: {
    'task-1': { id: 'task-1', content: 'Org.Internacionais' },
    'task-2': { id: 'task-2', content: 'Ind.Farm.LTDA' },
    'task-3': { id: 'task-3', content: 'Musc.Sound Live Cmp' },
  },
  columns: {
    'column-1': {
      id: 'column-1',
      title: 'Cliente em Potencial',
      taskIds: ['task-1', 'task-2', 'task-3'],
    },
    'column-2': {
      id: 'column-2',
      title: 'Dados Confirmados',
      taskIds: [],
    },
    'column-3': {
      id: 'column-3',
      title: 'Reunião Agendada',
      taskIds: [],
    },
  },
  columnOrder: ['column-1', 'column-2', 'column-3'],
};

const Container = styled.div`
  display: flex;
`;

class LeadsComponent extends React.Component {
  state = initialData;

  onDragEnd = result => {
    const { destination, source, draggableId } = result;

    if (!destination) {
      return;
    }

    if (
      destination.droppableId === source.droppableId &&
      destination.index === source.index
    ) {
      return;
    }

    const start = this.state.columns[source.droppableId];
    const finish = this.state.columns[destination.droppableId];

    if (start === finish) {
      const newTaskIds = Array.from(start.taskIds);
      newTaskIds.splice(source.index, 1);
      newTaskIds.splice(destination.index, 0, draggableId);

      const newColumn = {
        ...start,
        taskIds: newTaskIds,
      };

      const newState = {
        ...this.state,
        columns: {
          ...this.state.columns,
          [newColumn.id]: newColumn,
        },
      };
      this.setState(newState);
      return;
    }

    const startTaskIds = Array.from(start.taskIds);
    startTaskIds.splice(source.index, 1);
    const newStart = {
      ...start,
      taskIds: startTaskIds,
    };

    const finishTaskIds = Array.from(finish.taskIds);
    finishTaskIds.splice(destination.index, 0, draggableId);
    const newFinish = {
      ...finish,
      taskIds: finishTaskIds,
    };

    const newState = {
      ...this.state,
      columns: {
        ...this.state.columns,
        [newStart.id]: newStart,
        [newFinish.id]: newFinish,
      },
    };
    if (newStart.id == 'column-1' && newFinish.id == 'column-3') {
      return;
    } else if (newStart.id == 'column-2' && newFinish.id == 'column-1') {
      return;
    } else if (newStart.id == 'column-3' && newFinish.id == 'column-2') {
      return;
    } else if (newStart.id == 'column-3' && newFinish.id == 'column-1') {
      return;
    } else {
      this.setState(newState);
    }
  };

  render() {
    return (
      <>
        <DragDropContext onDragEnd={this.onDragEnd}>
          <Container>
            {this.state.columnOrder.map(columnId => {
              const column = this.state.columns[columnId];
              const tasks = column.taskIds.map(
                taskId => this.state.tasks[taskId],
              );

              return <Column key={column.id} column={column} tasks={tasks} />;
            })}
          </Container>
        </DragDropContext>
        <button
          type="button"
          class="btn btn-primary"
          data-toggle="modal"
          data-target="#staticBackdrop"
        >
          Launch static backdrop modal
        </button>

        <div
          class="modal fade"
          id="staticBackdrop"
          data-backdrop="static"
          data-keyboard="false"
          tabindex="-1"
          aria-labelledby="staticBackdropLabel"
          aria-hidden="true"
        >
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">
                  Modal title
                </h5>
                <button
                  type="button"
                  class="close"
                  data-dismiss="modal"
                  aria-label="Close"
                >
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <form>
                  <input type="text" id="content" className="teste" />
                  <input type="submit" value="Submit" />
                </form>
              </div>
              <div class="modal-footer">
                <button
                  type="button"
                  class="btn btn-secondary"
                  data-dismiss="modal"
                >
                  Close
                </button>
                <button type="button" class="btn btn-primary">
                  Understood
                </button>
              </div>
            </div>
          </div>
        </div>
      </>
    );
  }
}

export default LeadsComponent;

On this code already has a form with one input and submit! Can you help me to solve this problem?

Answer 1

First, your state needs a counter field to create an index for new items and a text field to store the text for the new item.

const initialData = {
  count: 3,
  newTask: '',
  tasks: {
    'task-1': { id: 'task-1', content: 'Org.Internacionais' },
    'task-2': { id: 'task-2', content: 'Ind.Farm.LTDA' },
    'task-3': { id: 'task-3', content: 'Musc.Sound Live Cmp' },
  },

Then define the handlers as described in the question I commented

inputChangeHandler = ({ target: { value } }) =>
  this.setState({
    newTask: value,
  });

submitHandler = e => {
  e.preventDefault();
  this.setState(prevState => {
    // increment task count
    const newCount = prevState.count + 1;
    // create new id based on task count
    const newId = `task-${newCount}`;
    return {
      count: newCount,
      // clear input
      newTask: '',
      tasks: {
        // add to tasks array
        ...prevState.tasks,
        [newId]: { id: newId, content: prevState.newTask },
      },
      // add task id at the end of first column
      columns: {
        ...prevState.columns,
        'column-1': {
          ...prevState.columns['column-1'],
          taskIds: [...prevState.columns['column-1'].taskIds, newId],
        },
      },
    };
  });
};

And pass the handler to the form components

<form onSubmit={this.submitHandler}>
  <input
    type="text"
    id="content"
    className="teste"
    value={this.state.newTask}
    onChange={this.inputChangeHandler}
  />
  <input type="submit" value="Submit" />
</form>;

You main concern would be the way you update your state since it's gotten complex