278 refactor uiboard opportunitiesboard + put state in recoil (#280)

* refactor: move Board file to opportunities

* refactor: dropable props are move in ui component

* refactor: rename provided in droppableProvided

* refactor: rename provided in draggableProvided

* refactor: rename BoardCard in BoardItem

* refactor: rename BoardCard in BoardItem file

* refactor: BoardItem use children instead of content

* refactor: Extract StyledColumnContainer

* refactor: create method to get optimistic new board after update

* refactor: move getOptimisticNewBoard in board UI

* refactor: make provided nullable

* lint: remove unused import

front/src/modules/opportunities/components/Board.tsx

@@ -0,0 +1,76 @@
+import { useCallback, useState } from 'react';
+import {
+  DragDropContext,
+  Draggable,
+  Droppable,
+  OnDragEndResponder,
+} from '@hello-pangea/dnd';
+
+import {
+  Column,
+  getOptimisticlyUpdatedBoard,
+  Items,
+  StyledBoard,
+} from '../../ui/components/board/Board';
+import {
+  ItemsContainer,
+  StyledColumn,
+  StyledColumnTitle,
+} from '../../ui/components/board/BoardColumn';
+// Atlassian dnd does not support StrictMode from RN 18, so we use a fork @hello-pangea/dnd
+// https://github.com/atlassian/react-beautiful-dnd/issues/2350
+import { BoardItem } from '../../ui/components/board/BoardItem';
+import { NewButton } from '../../ui/components/board/BoardNewButton';
+
+type BoardProps = {
+  initialBoard: Column[];
+  items: Items;
+};
+
+export const Board = ({ initialBoard, items }: BoardProps) => {
+  const [board, setBoard] = useState<Column[]>(initialBoard);
+
+  const onDragEnd: OnDragEndResponder = useCallback(
+    (result) => {
+      const newBoard = getOptimisticlyUpdatedBoard(board, result);
+      if (!newBoard) return;
+      setBoard(newBoard);
+      // TODO implement update board mutation
+    },
+    [board],
+  );
+
+  return (
+    <DragDropContext onDragEnd={onDragEnd}>
+      <StyledBoard>
+        {board.map((column) => (
+          <Droppable key={column.id} droppableId={column.id}>
+            {(droppableProvided) => (
+              <StyledColumn>
+                <StyledColumnTitle color={column.colorCode}>
+                  • {column.title}
+                </StyledColumnTitle>
+                <ItemsContainer droppableProvided={droppableProvided}>
+                  {column.itemKeys.map((itemKey, index) => (
+                    <Draggable
+                      key={itemKey}
+                      draggableId={itemKey}
+                      index={index}
+                    >
+                      {(draggableProvided) => (
+                        <BoardItem draggableProvided={draggableProvided}>
+                          <p>{items[itemKey].content}</p>
+                        </BoardItem>
+                      )}
+                    </Draggable>
+                  ))}
+                </ItemsContainer>
+                <NewButton />
+              </StyledColumn>
+            )}
+          </Droppable>
+        ))}
+      </StyledBoard>
+    </DragDropContext>
+  );
+};