mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
Sammy Teillet
2023-06-13 17:02:09 +02:00
committed by GitHub
parent 3a719001de
commit c20fd458ae
8 changed files with 139 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
front/src/modules/ui/components/board/Board.tsx
View File

@ -1,18 +1,7 @@
import { useCallback, useState } from 'react';
import styled from '@emotion/styled';
import {
DragDropContext,
Draggable,
Droppable,
OnDragEndResponder,
} from '@hello-pangea/dnd';
import { DropResult } from '@hello-pangea/dnd';
// 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 { BoardCard } from './BoardCard';
import { BoardColumn } from './BoardColumn';
const StyledBoard = styled.div`
export const StyledBoard = styled.div`
display: flex;
flex-direction: row;
height: 100%;
@ -33,85 +22,39 @@ export interface Column {
itemKeys: BoardItemKey[];
}
type BoardProps = {
initialBoard: Column[];
items: Items;
};
export const Board = ({ initialBoard, items }: BoardProps) => {
const [board, setBoard] = useState<Column[]>(initialBoard);
const onDragEnd: OnDragEndResponder = useCallback(
(result) => {
const { destination, source } = result;
if (!destination) return;
const sourceColumnIndex = board.findIndex(
(column) => column.id === source.droppableId,
);
const sourceColumn = board[sourceColumnIndex];
const destinationColumnIndex = board.findIndex(
(column) => column.id === destination.droppableId,
);
const destinationColumn = board[destinationColumnIndex];
if (!destinationColumn || !sourceColumn) return;
const sourceItems = sourceColumn.itemKeys;
const destinationItems = destinationColumn.itemKeys;
const [removed] = sourceItems.splice(source.index, 1);
destinationItems.splice(destination.index, 0, removed);
const newSourceColumn = {
...sourceColumn,
itemKeys: sourceItems,
};
const newDestinationColumn = {
...destinationColumn,
itemKeys: destinationItems,
};
const newBoard = [...board];
newBoard.splice(sourceColumnIndex, 1, newSourceColumn);
newBoard.splice(destinationColumnIndex, 1, newDestinationColumn);
setBoard(newBoard);
},
[board],
export const getOptimisticlyUpdatedBoard = (
board: Column[],
result: DropResult,
) => {
const { destination, source } = result;
if (!destination) return;
const sourceColumnIndex = board.findIndex(
(column) => column.id === source.droppableId,
);
return (
<DragDropContext onDragEnd={onDragEnd}>
<StyledBoard>
{board.map((column) => (
<Droppable key={column.id} droppableId={column.id}>
{(provided) =>
provided && (
<BoardColumn
title={column.title}
colorCode={column.colorCode}
droppableProvided={provided}
>
{column.itemKeys.map((itemKey, index) => (
<Draggable
key={itemKey}
draggableId={itemKey}
index={index}
>
{(provided) =>
provided && (
<BoardCard
content={items[itemKey].content}
draggableProvided={provided}
/>
)
}
</Draggable>
))}
</BoardColumn>
)
}
</Droppable>
))}
</StyledBoard>
</DragDropContext>
const sourceColumn = board[sourceColumnIndex];
const destinationColumnIndex = board.findIndex(
(column) => column.id === destination.droppableId,
);
const destinationColumn = board[destinationColumnIndex];
if (!destinationColumn || !sourceColumn) return;
const sourceItems = sourceColumn.itemKeys;
const destinationItems = destinationColumn.itemKeys;
const [removed] = sourceItems.splice(source.index, 1);
destinationItems.splice(destination.index, 0, removed);
const newSourceColumn = {
...sourceColumn,
itemKeys: sourceItems,
};
const newDestinationColumn = {
...destinationColumn,
itemKeys: destinationItems,
};
const newBoard = [...board];
newBoard.splice(sourceColumnIndex, 1, newSourceColumn);
newBoard.splice(destinationColumnIndex, 1, newDestinationColumn);
return newBoard;
};