dnd-list.tsx

interface BaseCard {
  _id: string;
}


interface DndListProps<T extends BaseCard = BaseCard> {
  data: Array<T>;
  onChange: (newData: Array<T>) => void;
  renderItemContent: (props: T, drag?: ConnectDragSource) => React.ReactElement;
}

export const DndList = <T extends BaseCard>({
  data,
  onChange,
  renderItemContent,
}: React.PropsWithChildren<DndListProps<T>>) => {
  const [cards, setCards] = useState(data);
  useEffect(() => {
    setCards(data);
  }, [data]);

  const findCard = useCallback(
    (id: string) => {
      const card = cards.filter((c) => `${c._id}` === id)[0];
      return {
        card,
        index: cards.indexOf(card),
      };
    },
    [cards]
  );

  const moveCard = useCallback(
    (id: string, atIndex: number) => {
      const { card, index } = findCard(id);
      setCards(
        update(cards, {
          $splice: [
            [index, 1],
            [atIndex, 0, card],
          ],
        })
      );
    },
    [findCard, cards, setCards]
  );

  const onSave = () => {
    onChange(cards);
  };

  const [, drop] = useDrop(() => ({ accept: "cards" }));

  return (
    <Grid ref={drop} container spacing={2}>
      {cards.map((card, index) => {
        return (
          <ListItem
            key={card._id}
            card={card}
            moveCard={moveCard}
            findCard={findCard}
            onSave={onSave}
            renderItem={renderItemContent}
          />
        );
      })}
    </Grid>
  );
};