Board.ts

Board.ts

export const Board = ({
  id,
  getId,
  data,
  onCreateLane,
  onCreateCard
  onSetBoardTitle,
  onSetCardTitle,
  onSetLaneTitle,
}) => {
  const [editing, setEditing] = useState(false);
  const [newBoardTitle, setNewBoardTitle] = useState("");
  const newLaneTitle = useRef(null);

  const board = data[id];
  const lanes = getSet(data, id, "lanes");

  return (
    <div className="board">
      {editing ? (
        <form
          onSubmit={e => {
            e.preventDefault();
            onSetBoardTitle(newBoardTitle);
            setEditing(false);
          }}
        >
          <input
            value={newBoardTitle}
            onChange={e => setNewBoardTitle(e.target.value)}
            placeholder="board title"
          />
        </form>
      ) : (
        <h1
          onDoubleClick={e => {
            setNewBoardTitle(board.title);
            setEditing(true);
          }}
          className="board-title"
        >
          {(board && board.title) || id}
        </h1>
      )}
      <div className="board-content">
        <div
          className="lanes"
        >
          {lanes.map((lane, i) => {
            const id = getId(lane);
            return (
              <Lane
                key={id}
                getId={getId}
                index={i}
                id={id}
                data={data}
                sort={sort}
                onSetLaneTitle={onSetLaneTitle}
                onSetCardTitle={onSetCardTitle}
                onCreateCard={onCreateCard}
              />
            );
          })}
          {provided.placeholder}
        </div>
        <div className="new-lane">
          <form
            onSubmit={e => {
              e.preventDefault();
              onCreateLane(newLaneTitle.current.value);
              newLaneTitle.current.value = "";
            }}
          >
            <input ref={newLaneTitle} placeholder="new lane" />
          </form>
        </div>
      </div>
    </div>
  );
};