diff --git a/web/src/app/app/(settings_layout)/settings/(permissions)/dataset-groups/[datasetGroupId]/users/DatasetGroupUsersController.tsx b/web/src/app/app/(settings_layout)/settings/(permissions)/dataset-groups/[datasetGroupId]/users/DatasetGroupUsersController.tsx index 3103d8ca4..9de84e94b 100644 --- a/web/src/app/app/(settings_layout)/settings/(permissions)/dataset-groups/[datasetGroupId]/users/DatasetGroupUsersController.tsx +++ b/web/src/app/app/(settings_layout)/settings/(permissions)/dataset-groups/[datasetGroupId]/users/DatasetGroupUsersController.tsx @@ -1,7 +1,7 @@ 'use client'; import { useGetDatasetGroupUsers } from '@/api/buster_rest'; -import { useAppLayoutContextSelector } from '@/context/BusterAppLayout'; +import { useInviteModalStore } from '@/context/BusterAppLayout'; import { useDebounceSearch } from '@/hooks/useDebounceSearch'; import { PermissionSearchAndListWrapper } from '@/components/features/PermissionComponents'; import { Button } from '@/components/ui/buttons'; @@ -13,7 +13,7 @@ export const DatasetGroupUsersController: React.FC<{ datasetGroupId: string; }> = ({ datasetGroupId }) => { const { data } = useGetDatasetGroupUsers(datasetGroupId); - const onToggleInviteModal = useAppLayoutContextSelector((x) => x.onToggleInviteModal); + const onToggleInviteModal = useInviteModalStore((x) => x.onToggleInviteModal); const { filteredItems, handleSearchChange, searchText } = useDebounceSearch({ items: data || [], diff --git a/web/src/app/app/(settings_layout)/settings/(permissions)/permission-groups/[permissionGroupId]/users/_PermissionGroupUsersController/PermissionGroupUsersController.tsx b/web/src/app/app/(settings_layout)/settings/(permissions)/permission-groups/[permissionGroupId]/users/_PermissionGroupUsersController/PermissionGroupUsersController.tsx index dfc553a13..0f88b21a8 100644 --- a/web/src/app/app/(settings_layout)/settings/(permissions)/permission-groups/[permissionGroupId]/users/_PermissionGroupUsersController/PermissionGroupUsersController.tsx +++ b/web/src/app/app/(settings_layout)/settings/(permissions)/permission-groups/[permissionGroupId]/users/_PermissionGroupUsersController/PermissionGroupUsersController.tsx @@ -1,8 +1,7 @@ 'use client'; import { useGetPermissionGroupUsers } from '@/api/buster_rest'; - -import { useAppLayoutContextSelector } from '@/context/BusterAppLayout'; +import { useInviteModalStore } from '@/context/BusterAppLayout'; import { useDebounceSearch } from '@/hooks/useDebounceSearch'; import { PermissionSearchAndListWrapper } from '@/components/features/PermissionComponents'; import { Button } from '@/components/ui/buttons'; @@ -14,7 +13,7 @@ export const PermissionGroupUsersController: React.FC<{ permissionGroupId: string; }> = ({ permissionGroupId }) => { const { data } = useGetPermissionGroupUsers(permissionGroupId); - const onToggleInviteModal = useAppLayoutContextSelector((x) => x.onToggleInviteModal); + const onToggleInviteModal = useInviteModalStore((x) => x.onToggleInviteModal); const { filteredItems, handleSearchChange, searchText } = useDebounceSearch({ items: data || [], diff --git a/web/src/components/features/sidebars/SidebarPrimary.tsx b/web/src/components/features/sidebars/SidebarPrimary.tsx index 365d8ab6a..c0696f022 100644 --- a/web/src/components/features/sidebars/SidebarPrimary.tsx +++ b/web/src/components/features/sidebars/SidebarPrimary.tsx @@ -24,6 +24,7 @@ import { useUpdateUserFavorites } from '@/api/buster_rest'; import { useHotkeys } from 'react-hotkeys-hook'; +import { useInviteModalStore } from '@/context/BusterAppLayout'; const topItems: ISidebarList = { id: 'top-items', @@ -121,7 +122,7 @@ export const SidebarPrimary = React.memo(() => { const isAdmin = useUserConfigContextSelector((x) => x.isAdmin); const { data: favorites } = useGetUserFavorites(); const currentRoute = useAppLayoutContextSelector((x) => x.currentRoute); - const onToggleInviteModal = useAppLayoutContextSelector((s) => s.onToggleInviteModal); + const onToggleInviteModal = useInviteModalStore((s) => s.onToggleInviteModal); const [openSupportModal, setOpenSupportModal] = useState(false); const { mutateAsync: updateUserFavorites } = useUpdateUserFavorites(); const { mutateAsync: deleteUserFavorite } = useDeleteUserFavorite(); @@ -209,8 +210,8 @@ const GlobalModals = ({ openSupportModal: boolean; onCloseSupportModal: () => void; }) => { - const onToggleInviteModal = useAppLayoutContextSelector((s) => s.onToggleInviteModal); - const openInviteModal = useAppLayoutContextSelector((s) => s.openInviteModal); + const onToggleInviteModal = useInviteModalStore((s) => s.onToggleInviteModal); + const openInviteModal = useInviteModalStore((s) => s.openInviteModal); const onCloseInviteModal = useMemoizedFn(() => onToggleInviteModal(false)); const isAnonymousUser = useUserConfigContextSelector((state) => state.isAnonymousUser); diff --git a/web/src/context/BusterAppLayout/AppLayoutProvider.tsx b/web/src/context/BusterAppLayout/AppLayoutProvider.tsx index 2486432aa..72b6f17d5 100644 --- a/web/src/context/BusterAppLayout/AppLayoutProvider.tsx +++ b/web/src/context/BusterAppLayout/AppLayoutProvider.tsx @@ -13,11 +13,6 @@ export const useAppLayout = () => { const params = useParams(); const currentRoute = pathNameToRoute(pathname, params); const currentParentRoute = pathNameToParentRoute(pathname, params); - const [openInviteModal, setOpenInviteModal] = React.useState(false); - - const onToggleInviteModal = useMemoizedFn((v?: boolean) => { - setOpenInviteModal(v ?? !openInviteModal); - }); const onChangePage = useMemoizedFn( (params: BusterRoutesWithArgsRoute | string): Promise => { @@ -56,8 +51,6 @@ export const useAppLayout = () => { return { currentRoute, - onToggleInviteModal, - openInviteModal, onChangePage, currentParentRoute }; diff --git a/web/src/context/BusterAppLayout/index.ts b/web/src/context/BusterAppLayout/index.ts index 13b9fdee7..b85d3dd35 100644 --- a/web/src/context/BusterAppLayout/index.ts +++ b/web/src/context/BusterAppLayout/index.ts @@ -1 +1,2 @@ export * from './AppLayoutProvider'; +export * from './useInviteModalStore'; diff --git a/web/src/context/BusterAppLayout/useInviteModalStore.ts b/web/src/context/BusterAppLayout/useInviteModalStore.ts new file mode 100644 index 000000000..7302bf14f --- /dev/null +++ b/web/src/context/BusterAppLayout/useInviteModalStore.ts @@ -0,0 +1,9 @@ +import { create } from 'zustand'; + +export const useInviteModalStore = create<{ + openInviteModal: boolean; + onToggleInviteModal: (v?: boolean) => void; +}>((set, get) => ({ + openInviteModal: false, + onToggleInviteModal: (v?: boolean) => set({ openInviteModal: v ?? !get().openInviteModal }) +})); diff --git a/web/src/controllers/DatasetPermissionUser/PermissionUsers.tsx b/web/src/controllers/DatasetPermissionUser/PermissionUsers.tsx index 5acb107e9..da6b2b9cd 100644 --- a/web/src/controllers/DatasetPermissionUser/PermissionUsers.tsx +++ b/web/src/controllers/DatasetPermissionUser/PermissionUsers.tsx @@ -1,22 +1,19 @@ 'use client'; import React from 'react'; -import { - PermissionSearchAndListWrapper, - HeaderExplanation -} from '@/components/features/PermissionComponents'; +import { PermissionSearchAndListWrapper } from '@/components/features/PermissionComponents'; import { useDatasetListPermissionUsers } from '@/api/buster_rest'; import { useDebounceSearch } from '@/hooks'; import { Button } from '@/components/ui/buttons'; import { Plus } from '@/components/ui/icons'; import { useMemoizedFn } from '@/hooks'; import { PermissionListUsersContainer } from './PermissionListUsersContainer'; -import { useAppLayoutContextSelector } from '@/context/BusterAppLayout'; +import { useInviteModalStore } from '@/context/BusterAppLayout'; export const PermissionUsers: React.FC<{ datasetId: string; }> = React.memo(({ datasetId }) => { - const onToggleInviteModal = useAppLayoutContextSelector((x) => x.onToggleInviteModal); + const onToggleInviteModal = useInviteModalStore((x) => x.onToggleInviteModal); const { data: permissionUsers, isFetched: isPermissionUsersFetched } = useDatasetListPermissionUsers(datasetId);