From b3887c6bcc2a506330c464b0d3b97e3b4bfc8ed6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tha=C3=AFs?= Date: Tue, 5 Sep 2023 12:40:45 +0200 Subject: [PATCH] fix: use correct table view when switching workspaces (#1447) Closes #1441 --- .../modules/views/hooks/useTableViewFields.ts | 4 +- .../src/modules/views/hooks/useTableViews.ts | 32 ++-- .../src/modules/views/hooks/useViewFilters.ts | 4 +- front/src/modules/views/hooks/useViewSorts.ts | 4 +- front/src/modules/views/hooks/useViews.ts | 137 ++++++++++-------- 5 files changed, 95 insertions(+), 86 deletions(-) diff --git a/front/src/modules/views/hooks/useTableViewFields.ts b/front/src/modules/views/hooks/useTableViewFields.ts index 820a68bed..1383a6920 100644 --- a/front/src/modules/views/hooks/useTableViewFields.ts +++ b/front/src/modules/views/hooks/useTableViewFields.ts @@ -43,9 +43,11 @@ const toViewFieldInput = ( export const useTableViewFields = ({ objectId, columnDefinitions, + skipFetch, }: { objectId: 'company' | 'person'; columnDefinitions: ColumnDefinition[]; + skipFetch?: boolean; }) => { const currentTableViewId = useRecoilScopedValue( currentTableViewIdState, @@ -113,7 +115,7 @@ export const useTableViewFields = ({ ); const { refetch } = useGetViewFieldsQuery({ - skip: !currentTableViewId, + skip: !currentTableViewId || skipFetch, variables: { orderBy: { index: SortOrder.Asc }, where: { diff --git a/front/src/modules/views/hooks/useTableViews.ts b/front/src/modules/views/hooks/useTableViews.ts index ba24da27e..dbd981689 100644 --- a/front/src/modules/views/hooks/useTableViews.ts +++ b/front/src/modules/views/hooks/useTableViews.ts @@ -41,36 +41,33 @@ export const useTableViews = ({ ); const sorts = useRecoilScopedValue(sortsScopedState, TableRecoilScopeContext); + const { handleViewsChange, isFetchingViews } = useViews({ + objectId, + onViewCreate: handleViewCreate, + }); const { createViewFields, persistColumns } = useTableViewFields({ objectId, columnDefinitions, + skipFetch: isFetchingViews, }); const { createViewFilters, persistFilters } = useViewFilters({ availableFilters, currentViewId: currentTableViewId, scopeContext: TableRecoilScopeContext, + skipFetch: isFetchingViews, }); const { createViewSorts, persistSorts } = useViewSorts({ availableSorts, currentViewId: currentTableViewId, scopeContext: TableRecoilScopeContext, + skipFetch: isFetchingViews, }); - const handleViewCreate = useCallback( - async (viewId: string) => { - await createViewFields(tableColumns, viewId); - await createViewFilters(filters, viewId); - await createViewSorts(sorts, viewId); - }, - [ - createViewFields, - createViewFilters, - createViewSorts, - filters, - sorts, - tableColumns, - ], - ); + async function handleViewCreate(viewId: string) { + await createViewFields(tableColumns, viewId); + await createViewFilters(filters, viewId); + await createViewSorts(sorts, viewId); + } const handleViewSubmit = useCallback(async () => { await persistColumns(); @@ -78,10 +75,5 @@ export const useTableViews = ({ await persistSorts(); }, [persistColumns, persistFilters, persistSorts]); - const { handleViewsChange } = useViews({ - objectId, - onViewCreate: handleViewCreate, - }); - return { handleViewsChange, handleViewSubmit }; }; diff --git a/front/src/modules/views/hooks/useViewFilters.ts b/front/src/modules/views/hooks/useViewFilters.ts index 070e1caa6..9f6cc7ab6 100644 --- a/front/src/modules/views/hooks/useViewFilters.ts +++ b/front/src/modules/views/hooks/useViewFilters.ts @@ -19,10 +19,12 @@ export const useViewFilters = ({ availableFilters, currentViewId, scopeContext, + skipFetch, }: { availableFilters: FilterDefinitionByEntity[]; currentViewId: string | undefined; scopeContext: Context; + skipFetch?: boolean; }) => { const [filters, setFilters] = useRecoilScopedState( filtersScopedState, @@ -36,7 +38,7 @@ export const useViewFilters = ({ ); const { refetch } = useGetViewFiltersQuery({ - skip: !currentViewId, + skip: !currentViewId || skipFetch, variables: { where: { viewId: { equals: currentViewId }, diff --git a/front/src/modules/views/hooks/useViewSorts.ts b/front/src/modules/views/hooks/useViewSorts.ts index f4d0389da..26b98d494 100644 --- a/front/src/modules/views/hooks/useViewSorts.ts +++ b/front/src/modules/views/hooks/useViewSorts.ts @@ -22,10 +22,12 @@ export const useViewSorts = ({ availableSorts, currentViewId, scopeContext, + skipFetch, }: { availableSorts: SortType[]; currentViewId: string | undefined; scopeContext: Context; + skipFetch?: boolean; }) => { const [sorts, setSorts] = useRecoilScopedState( sortsScopedState, @@ -39,7 +41,7 @@ export const useViewSorts = ({ ); const { refetch } = useGetViewSortsQuery({ - skip: !currentViewId, + skip: !currentViewId || skipFetch, variables: { where: { viewId: { equals: currentViewId }, diff --git a/front/src/modules/views/hooks/useViews.ts b/front/src/modules/views/hooks/useViews.ts index 96b869226..564373b07 100644 --- a/front/src/modules/views/hooks/useViews.ts +++ b/front/src/modules/views/hooks/useViews.ts @@ -1,6 +1,9 @@ -import { useCallback } from 'react'; +import { useRecoilCallback } from 'recoil'; +import { savedFiltersScopedState } from '@/ui/filter-n-sort/states/savedFiltersScopedState'; +import { savedSortsScopedState } from '@/ui/filter-n-sort/states/savedSortsScopedState'; import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext'; +import { savedTableColumnsScopedState } from '@/ui/table/states/savedTableColumnsScopedState'; import { currentTableViewIdState, type TableView, @@ -42,41 +45,44 @@ export const useViews = ({ const [updateViewMutation] = useUpdateViewMutation(); const [deleteViewMutation] = useDeleteViewMutation(); - const createView = useCallback( - async (view: TableView) => { - const { data } = await createViewMutation({ - variables: { - data: { - ...view, - objectId, - type: ViewType.Table, - }, + const createView = async (view: TableView) => { + const { data } = await createViewMutation({ + variables: { + data: { + ...view, + objectId, + type: ViewType.Table, }, - }); + }, + }); - if (data?.view) await onViewCreate(data.view.id); - }, - [createViewMutation, objectId, onViewCreate], + if (data?.view) await onViewCreate(data.view.id); + }; + + const updateView = (view: TableView) => + updateViewMutation({ + variables: { + data: { name: view.name }, + where: { id: view.id }, + }, + }); + + const deleteView = (viewId: string) => + deleteViewMutation({ variables: { where: { id: viewId } } }); + + const handleResetSavedViews = useRecoilCallback( + ({ reset }) => + () => { + tableViews.forEach((view) => { + reset(savedTableColumnsScopedState(view.id)); + reset(savedFiltersScopedState(view.id)); + reset(savedSortsScopedState(view.id)); + }); + }, + [tableViews], ); - const updateView = useCallback( - (view: TableView) => - updateViewMutation({ - variables: { - data: { name: view.name }, - where: { id: view.id }, - }, - }), - [updateViewMutation], - ); - - const deleteView = useCallback( - (viewId: string) => - deleteViewMutation({ variables: { where: { id: viewId } } }), - [deleteViewMutation], - ); - - const { refetch } = useGetViewsQuery({ + const { loading, refetch } = useGetViewsQuery({ variables: { where: { objectId: { equals: objectId }, @@ -90,41 +96,46 @@ export const useViews = ({ if (!isDeeplyEqual(tableViews, nextViews)) setTableViews(nextViews); - if (nextViews.length && !currentTableViewId) + // If there is no current view selected, + // or if the current view cannot be found in the views list (user switched workspaces) + if ( + nextViews.length && + (!currentTableViewId || + !nextViews.some((view) => view.id === currentTableViewId)) + ) { setCurrentTableViewId(nextViews[0].id); + handleResetSavedViews(); + } }, }); - const handleViewsChange = useCallback( - async (nextViews: TableView[]) => { - const viewToCreate = nextViews.find( - (nextView) => !tableViewsById[nextView.id], - ); - if (viewToCreate) { - await createView(viewToCreate); - return refetch(); - } - - const viewToUpdate = nextViews.find( - (nextView) => - tableViewsById[nextView.id] && - tableViewsById[nextView.id].name !== nextView.name, - ); - if (viewToUpdate) { - await updateView(viewToUpdate); - return refetch(); - } - - const nextViewIds = nextViews.map((nextView) => nextView.id); - const viewIdToDelete = Object.keys(tableViewsById).find( - (previousViewId) => !nextViewIds.includes(previousViewId), - ); - if (viewIdToDelete) await deleteView(viewIdToDelete); - + const handleViewsChange = async (nextViews: TableView[]) => { + const viewToCreate = nextViews.find( + (nextView) => !tableViewsById[nextView.id], + ); + if (viewToCreate) { + await createView(viewToCreate); return refetch(); - }, - [createView, deleteView, refetch, tableViewsById, updateView], - ); + } - return { handleViewsChange }; + const viewToUpdate = nextViews.find( + (nextView) => + tableViewsById[nextView.id] && + tableViewsById[nextView.id].name !== nextView.name, + ); + if (viewToUpdate) { + await updateView(viewToUpdate); + return refetch(); + } + + const nextViewIds = nextViews.map((nextView) => nextView.id); + const viewIdToDelete = Object.keys(tableViewsById).find( + (previousViewId) => !nextViewIds.includes(previousViewId), + ); + if (viewIdToDelete) await deleteView(viewIdToDelete); + + return refetch(); + }; + + return { handleViewsChange, isFetchingViews: loading }; };