const { contract, selectedProjectId, setSelectedProjectId, functionLoader, setFunctionLoader, componentOwnerId, accountId, addActionStatus, } = props; const SideMenuContainer = styled.div` display: flex; flex-direction: column; flex-shrink: 0; width: 230px; padding-left: 0; background-color: #0e0e10; color: white; padding: 3px; gap: 16px; `; const AddBoardsContainer = styled.div` display: flex; flex-direction: row; justify-content: space-between; `; const AddBoardText = styled.p` color: #777583; font-family: Helvetica Neue; font-size: 16px; font-weight: 700; line-height: 150%; padding: 0; margin: 0; `; const AddBoardButton = styled.button` background-color: transparent; border: none; :focus { outline-width: 0px; } `; const AddBoardIcon = styled.div` color: #777583; :hover { color: #ffffff; } `; const createBoardButton = ( <AddBoardButton> <AddBoardIcon> <i className="bi bi-plus-circle"></i> </AddBoardIcon> </AddBoardButton> ); const [selectedUser, setSelectedUser] = useState(undefined); const [users, setUsers] = useState([]); const [boards, setBoards] = useState([]); const [showEditBoardDialog, setShowEditBoardDialog] = useState(false); const [deleteBoardId, setDeleteBoardId] = useState(undefined); const [showDeleteBoardDialog, setShowDeleteBoardDialog] = useState(false); const [createBoardStatus, setCreateBoardStatus] = useState([]); const [editedBoard, setEditedBoard] = useState(undefined); const addBoard = useCallback((newBoard) => { setBoards( previousBoards =>[...previousBoards, newBoard] ); }, [setBoards]); const updateBoardName = useCallback((updatedBoard) => { setBoards( previousBoards => previousBoards.map( board => (board[0] === updatedBoard[0]) ? updatedBoard : board ) ); }, [setBoards]); const deleteBoard = useCallback((deletedBoardId) => { setSelectedProjectId(boards.length > 0 ? boards[0][0] : undefined); setBoards( previousBoards => previousBoards.filter( board => board[0] !== deletedBoardId ) ); }, [setBoards, setSelectedProjectId, boards]); const addCreateBoardStatus = useCallback((newStatus) => { let isNew = true; let newCreateBoardStatuses = createBoardStatus.map((status) => { if (status.name === newStatus.name) { isNew = false; return newStatus; } else { return status; } }) if (isNew) { newCreateBoardStatuses = [...newCreateBoardStatuses, newStatus]; } setCreateBoardStatus(newCreateBoardStatuses); }, [createBoardStatus]); useEffect(() => { createBoardStatus.forEach((board, index) => { if (board.status === "Saved" || board.status === "Error") { const timer = setTimeout(() => { const newStatus = createBoardStatus.slice(); newStatus.splice(index, 1); setCreateBoardStatus(newStatus); getBoards(); }, 3000); return () => clearTimeout(timer); } }); }, [createBoardStatus]); const isApplicationUser = (accountId, users) => { return users.includes(accountId); }; const onChangeShowEditBoardDialog = (open, board) => { setShowEditBoardDialog(open); setEditedBoard(board); }; const removeBoardMember = useCallback((member) => { setBoardMembers(boardMembers.filter((m) => m.id !== member.id)); }, [boardMembers, setBoardMembers]); const getBoards = useCallback(async () => { try { Near.fakCalimeroCall(contract, "get_members_projects", { member_id: accountId, }).then((boards) => { setBoards(boards); setSelectedProjectId(boards.length > 0 ? boards[0][0] : undefined); }); } catch (e) { console.log("getBoards", e); } }, [contract, accountId]); const getUsers = useCallback(async () => { try { Near.asyncCalimeroView(contract, "get_application_members", {}).then( (usersResponse) => { setUsers(usersResponse.map((user) => ({ id: user }))); if (!isApplicationUser(accountId, usersResponse)) { Near.fakCalimeroCall(contract, "add_application_member", { new_member: accountId, }); } } ); } catch (e) { console.log("getUsers", e); } }, [contract, accountId]); useEffect(() => { getBoards(); getUsers(); }, [accountId]); return ( <> {showEditBoardDialog && ( <Widget src={`${componentOwnerId}/widget/Calimero.TaskChain.SideMenu.EditBoardDialog`} props={{ createBoard, onClose: () => onChangeShowEditBoardDialog(false, undefined), functionLoader, onChangeEditBoardName, boardName, editedBoard, componentOwnerId, selectedProjectId, users, selectedUser, setSelectedUser, addActionStatus, contract, updateBoardName, deleteBoard, onChangeShowEditBoardDialog }} /> )} <SideMenuContainer> <AddBoardsContainer> <AddBoardText>Your boards</AddBoardText> <Widget src={`${componentOwnerId}/widget/Calimero.TaskChain.CreateBoardDialog`} props={{ addCreateBoardStatus, componentOwnerId, accountId, handleBoards, contract, createBoardButton, addBoard }} /> </AddBoardsContainer> <Widget src={`${componentOwnerId}/widget/Calimero.TaskChain.SideMenu.BoardList`} props={{ componentOwnerId, selectedProjectId, setSelectedProjectId, boards, onEditBoardClick: () => {}, editBoard: () => {}, onChangeShowEditBoardDialog, createBoardStatus, }} /> </SideMenuContainer> </> );