Lane.ts

Lane.ts

const Lane = ({
  getId,
  id,
  data,
  sort,
  index,
  onSetCardTitle,
  onSetLaneTitle,
  onCreateCard
}) => {
  const lane = data[id];
  const cards = sort(getSet(data, id, "cards"));
  const [editing, setEditing] = useState();
  const [laneTitle, setLaneTitle] = useState(lane.title);
  const newCardTitle = useRef(null);

  return (
    <div className="lane">
      {editing ? (
        <form
          onSubmit={e => {
            e.preventDefault();
            onSetLaneTitle(laneTitle);
            setEditing(false);
          }}
        >
          <input
            autoFocus
            value={laneTitle}
            onChange={e => setLaneTitle(e.target.value)}
            placeholder="lane title"
          />
        </form>
      ) : (
        <div
          onDoubleClick={e => {
            setLaneTitle(lane.title);
            setEditing(true);
          }}
          className="lane-title"
        >
          {lane.title || "No title"}
        </div>
      )}
      <div
        className="cards"
      >
        {(cards || []).map((card, i) => {
          const id = getId(card);
          return (
            <Card
              key={id}
              id={id}
              data={data}
              getId={getId}
              index={i}
              onSetTitle={onSetCardTitle}
            />
          );
        })}
      </div>
      <div className="new-card">
        <form
          onSubmit={e => {
            e.preventDefault();
            onCreateCard(id, newCardTitle.current.value);
            newCardTitle.current.value = "";
          }}
        >
          <input ref={newCardTitle} placeholder="new card" />
        </form>
      </div>
    </div>
  );
};