diff --git a/webapp/src/components/sidebar/sidebar.test.tsx b/webapp/src/components/sidebar/sidebar.test.tsx index a7ea1787..505cd57c 100644 --- a/webapp/src/components/sidebar/sidebar.test.tsx +++ b/webapp/src/components/sidebar/sidebar.test.tsx @@ -7,13 +7,14 @@ import {createMemoryHistory} from 'history' import {Provider as ReduxProvider} from 'react-redux' import {Router} from 'react-router-dom' -import {render} from '@testing-library/react' -import userEvent from '@testing-library/user-event' +import {render, waitFor} from '@testing-library/react' import thunk from 'redux-thunk' import {mocked} from 'jest-mock' +import userEvent from '@testing-library/user-event' + import {mockMatchMedia, wrapIntl} from '../../testUtils' import {TestBlockFactory} from '../../test/testBlockFactory' @@ -306,7 +307,7 @@ describe('components/sidebarSidebar', () => { expect(sidebarCollapsedCategory.length).toBe(1) }) - test('should assign default category if current board doesnt have a category', () => { + test('should assign default category if current board doesnt have a category', async () => { const board2 = TestBlockFactory.createBoard() board2.id = 'board2' @@ -362,7 +363,9 @@ describe('components/sidebarSidebar', () => { const {container} = render(component) expect(container).toMatchSnapshot() - expect(mockedOctoClient.moveBoardToCategory).toBeCalledWith('team-id', 'board2', 'default_category', '') + await waitFor(() => + expect(mockedOctoClient.moveBoardToCategory).toBeCalledWith('team-id', 'board2', 'default_category', '') + ) }) test('shouldnt do any category assignment is board is in a category', () => { diff --git a/webapp/src/components/sidebar/sidebar.tsx b/webapp/src/components/sidebar/sidebar.tsx index 83a1ff07..4d2bfbbd 100644 --- a/webapp/src/components/sidebar/sidebar.tsx +++ b/webapp/src/components/sidebar/sidebar.tsx @@ -75,6 +75,7 @@ const Sidebar = (props: Props) => { const me = useAppSelector(getMe) const activeViewID = useAppSelector(getCurrentViewId) const currentBoard = useAppSelector(getCurrentBoard) + const [initialized, setInitialized] = useState(false) useEffect(() => { const categoryOnChangeHandler = (_: WSClient, categories: Category[]) => { @@ -98,11 +99,14 @@ const Sidebar = (props: Props) => { const team = useAppSelector(getCurrentTeam) useEffect(() => { + setInitialized(false) if (team) { - dispatch(fetchSidebarCategories(team!.id)) + dispatch(fetchSidebarCategories(team!.id)).then(() => { + setInitialized(true) + }) } loadTheme() - }, [team?.id]) + }, [team?.id, dispatch]) useEffect(() => { function handleResize() { @@ -125,7 +129,7 @@ const Sidebar = (props: Props) => { // because there is no good, explicit API call to add this logic to when opening // a board that you have implicit access to. useEffect(() => { - if (!sidebarCategories || sidebarCategories.length === 0 || !currentBoard || !team || currentBoard.isTemplate) { + if (!initialized || !sidebarCategories || sidebarCategories.length === 0 || !currentBoard || !team || currentBoard.isTemplate) { return } @@ -147,7 +151,7 @@ const Sidebar = (props: Props) => { } octoClient.moveBoardToCategory(team.id, currentBoard.id, boardsCategory.id, '') - }, [sidebarCategories, currentBoard, team]) + }, [sidebarCategories, currentBoard, team, initialized]) useWebsockets(teamId, (websocketClient: WSClient) => { const onCategoryReorderHandler = (_: WSClient, newCategoryOrder: string[]): void => {