01. Kanban Board

import { useReducer, useEffect } from 'react';

const initialState = {
  columns: [
    { id: 'todo', title: 'Do zrobienia', cards: [] },
    { id: 'in-progress', title: 'W trakcie', cards: [] },
    { id: 'done', title: 'Gotowe', cards: [] },
  ],
};

function kanbanReducer(state, action) {
  switch (action.type) {
    case 'ADD_CARD': {
      return {
        ...state,
        columns: state.columns.map((col) =>
          col.id === action.columnId
            ? { ...col, cards: [...col.cards, action.card] }
            : col
        ),
      };
    }
    case 'MOVE_CARD': {
      const { cardId, fromColumnId, toColumnId } = action;
      const fromColumn = state.columns.find((c) => c.id === fromColumnId);
      const card = fromColumn.cards.find((c) => c.id === cardId);

      return {
        ...state,
        columns: state.columns.map((col) => {
          if (col.id === fromColumnId) {
            return { ...col, cards: col.cards.filter((c) => c.id !== cardId) };
          }
          if (col.id === toColumnId) {
            return { ...col, cards: [...col.cards, card] };
          }
          return col;
        }),
      };
    }
    case 'DELETE_CARD': {
      return {
        ...state,
        columns: state.columns.map((col) => ({
          ...col,
          cards: col.cards.filter((c) => c.id !== action.cardId),
        })),
      };
    }
    default:
      return state;
  }
}

function useKanban() {
  const [state, dispatch] = useReducer(kanbanReducer, initialState, (init) => {
    const saved = localStorage.getItem('kanban-board');
    return saved ? JSON.parse(saved) : init;
  });

  useEffect(() => {
    localStorage.setItem('kanban-board', JSON.stringify(state));
  }, [state]);

  return { state, dispatch };
}

export default useKanban;

function Card({ card, columnId, onMove }) {
  const handleDragStart = (e) => {
    e.dataTransfer.setData('cardId', card.id);
    e.dataTransfer.setData('fromColumnId', columnId);
  };

  return (
    <div
      draggable
      onDragStart={handleDragStart}
      className="card"
    >
      <h4>{card.title}</h4>
      <span className={`priority priority--${card.priority}`}>
        {card.priority}
      </span>
    </div>
  );
}

// src/components/Column.jsx
function Column({ column, dispatch }) {
  const handleDrop = (e) => {
    e.preventDefault();
    const cardId = e.dataTransfer.getData('cardId');
    const fromColumnId = e.dataTransfer.getData('fromColumnId');

    if (fromColumnId !== column.id) {
      dispatch({ type: 'MOVE_CARD', cardId, fromColumnId, toColumnId: column.id });
    }
  };

  return (
    <div
      className="column"
      onDragOver={(e) => e.preventDefault()}
      onDrop={handleDrop}
    >
      <h3>{column.title} ({column.cards.length})</h3>
      {column.cards.map((card) => (
        <Card key={card.id} card={card} columnId={column.id} dispatch={dispatch} />
      ))}
    </div>
  );
}