fix(#17): fix column renaming

demo/src/features/controlled/index.tsx

@@ -26,6 +26,11 @@ export const ControlledBoardDemo: FC = () => {
         onCardRemove={({ board, card, column }) => {
           console.log({ board, card, column })
         }}
+        allowRenameColumn
+        onColumnRename={({ board, column }) => {
+          setBoard(board)
+          window.alert(`Column renamed to ${column.title}`)
+        }}
       >
         {controlledBoard}
       </ControlledBoard>

demo/src/features/notion/components/ColumnHeader.tsx

@@ -1,13 +1,16 @@
 import { UncontrolledBoardProps } from '@caldwell619/react-kanban'
-import { Box, IconButton, Typography } from '@mui/material'
+import { Box, Button, IconButton, Typography } from '@mui/material'
 import AddIcon from '@mui/icons-material/Add'
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz'
 import randomRgba from 'random-rgba'
 
 import { createNewCard, CustomCard } from '@/data'
 import { ColoredBgText } from './Card'
 
-export const renderColumnHeader: UncontrolledBoardProps<CustomCard>['renderColumnHeader'] = (column, { addCard }) => {
+export const renderColumnHeader: UncontrolledBoardProps<CustomCard>['renderColumnHeader'] = (
+  column,
+  { addCard, renameColumn }
+) => {
   const onAddCard = () => {
     const newCard = createNewCard()
     // Can be async, do mutation here awaiting result, then call `addCard`
@@ -26,6 +29,14 @@ export const renderColumnHeader: UncontrolledBoardProps<CustomCard>['renderColum
         <IconButton onClick={onAddCard}>
           <AddIcon />
         </IconButton>
+        <Button
+          onClick={() => {
+            const title = window.prompt('new title')
+            title && renameColumn(title)
+          }}
+        >
+          Rename column
+        </Button>
       </Box>
     </Box>
   )

demo/src/features/uncontrolled/index.tsx

@@ -13,8 +13,8 @@ export const UncontrolledBoardDemo: FC = () => {
       />
       <UncontrolledBoard
         initialBoard={board}
-        onCardRemove={({ board, card, column }) => {
-          console.log({ board, card, column })
+        onColumnRename={({ column }) => {
+          window.alert(`Column renamed to ${column.title}`)
         }}
       />
     </>

src/features/board/components/Controlled.tsx

@@ -4,6 +4,7 @@ import { Card, Column, KanbanBoard } from '@/types'
 import { DefaultColumn } from '@/features/column'
 import { BoardContainer, OnDragEnd } from './Container'
 import { SharedProps } from './shared'
+import { changeColumn } from '@/services'
 
 export const ControlledBoard = function <TCard extends Card>({
   children: board,
@@ -34,6 +35,10 @@ export const ControlledBoard = function <TCard extends Card>({
       onColumnDragEnd(subject, source, destination)
     }
   }
+  const handleColumnRename = (column: Column<TCard>, title: string) => {
+    const boardWithRenamedColumn = changeColumn<TCard>(board, column, { title })
+    onColumnRename?.({ board: boardWithRenamedColumn, column: { ...column, title } })
+  }
 
   return (
     <BoardContainer
@@ -53,7 +58,7 @@ export const ControlledBoard = function <TCard extends Card>({
                 allowRemoveColumn={allowRemoveColumn}
                 onColumnRemove={(updatedColumn) => onColumnRemove?.({ board, column: updatedColumn })}
                 allowRenameColumn={allowRenameColumn}
-                onColumnRename={(renamedColumn) => onColumnRename?.({ board, column: renamedColumn })}
+                onColumnRename={handleColumnRename}
               >
                 {column}
               </DefaultColumn>

src/features/board/components/Uncontrolled.tsx

@@ -116,7 +116,7 @@ export const UncontrolledBoard = function <TCard extends Card>({
               allowRemoveColumn={allowRemoveColumn}
               onColumnRemove={(updatedColumn) => onColumnRemove?.({ board, column: updatedColumn })}
               allowRenameColumn={allowRenameColumn}
-              onColumnRename={(renamedColumn) => onColumnRename?.({ board, column: renamedColumn })}
+              onColumnRename={handleColumnRename}
             >
               {column}
             </DefaultColumn>