Fix Views on People page (#2265)

* fetching viewId for url

* fixed option menu name input

* fix table import

* fix unnecessary rerenders

* people working

---------

Co-authored-by: bosiraphael <raphael.bosi@gmail.com>

front/src/modules/views/components/ViewBarEffect.tsx

@@ -1,3 +1,5 @@
+import { useEffect } from 'react';
+import { useSearchParams } from 'react-router-dom';
 import { useRecoilCallback } from 'recoil';
 
 import { ColumnDefinition } from '@/ui/data/data-table/types/ColumnDefinition';
@@ -35,9 +37,12 @@ export const ViewBarEffect = () => {
     setSavedViewFilters,
     currentViewId,
     setViews,
+    changeView,
     setCurrentViewId,
   } = useView();
 
+  const [searchParams] = useSearchParams();
+
   const { viewType, viewObjectId } = useViewInternalStates(viewScopeId);
 
   useGetViewFieldsQuery({
@@ -112,7 +117,7 @@ export const ViewBarEffect = () => {
 
       if (!nextViews.length) return;
 
-      if (!currentViewId) return setCurrentViewId(nextViews[0].id);
+      if (!currentViewId) return changeView(nextViews[0].id);
     }),
   });
 
@@ -214,5 +219,12 @@ export const ViewBarEffect = () => {
     }),
   });
 
+  const currentViewIdFromUrl = searchParams.get('view');
+
+  useEffect(() => {
+    if (!currentViewIdFromUrl) return;
+    setCurrentViewId(currentViewIdFromUrl);
+  }, [currentViewIdFromUrl, setCurrentViewId]);
+
   return <></>;
 };

front/src/modules/views/components/ViewsDropdownButton.tsx

@@ -67,15 +67,10 @@ export const ViewsDropdownButton = ({
   onViewEditModeChange,
 }: ViewsDropdownButtonProps) => {
   const theme = useTheme();
-  const { scopeId, removeView, currentViewId } = useView();
+  const { scopeId, removeView, currentViewId, changeView } = useView();
 
-  const {
-    views,
-    currentView,
-    setViewEditMode,
-    setCurrentViewId,
-    entityCountInCurrentView,
-  } = useViewInternalStates(scopeId, currentViewId);
+  const { views, currentView, setViewEditMode, entityCountInCurrentView } =
+    useViewInternalStates(scopeId, currentViewId);
 
   const {
     isDropdownOpen: isViewsDropdownOpen,
@@ -90,11 +85,11 @@ export const ViewsDropdownButton = ({
 
   const handleViewSelect = useRecoilCallback(
     () => async (viewId: string) => {
-      setCurrentViewId(viewId);
+      changeView(viewId);
 
       closeViewsDropdown();
     },
-    [setCurrentViewId, closeViewsDropdown],
+    [changeView, closeViewsDropdown],
   );
 
   const handleAddViewButtonClick = () => {
@@ -109,7 +104,7 @@ export const ViewsDropdownButton = ({
     viewId: string,
   ) => {
     event.stopPropagation();
-    setCurrentViewId(viewId);
+    changeView(viewId);
     setViewEditMode('edit');
     onViewEditModeChange?.();
     closeViewsDropdown();

front/src/modules/views/hooks/internal/useViewFields.ts

@@ -1,16 +1,14 @@
-import { getOperationName } from '@apollo/client/utilities';
+import { useApolloClient } from '@apollo/client';
 import { useRecoilCallback } from 'recoil';
 
 import { ColumnDefinition } from '@/ui/data/data-table/types/ColumnDefinition';
 import { FieldMetadata } from '@/ui/data/field/types/FieldMetadata';
-import { GET_VIEW_FIELDS } from '@/views/graphql/queries/getViewFields';
-import { GET_VIEWS } from '@/views/graphql/queries/getViews';
 import { currentViewIdScopedState } from '@/views/states/currentViewIdScopedState';
 import { savedViewFieldByKeyScopedFamilySelector } from '@/views/states/selectors/savedViewFieldByKeyScopedFamilySelector';
 import { viewObjectIdScopeState } from '@/views/states/viewObjectIdScopeState';
 import {
-  useCreateViewFieldsMutation,
-  useUpdateViewFieldMutation,
+  CreateViewFieldsDocument,
+  UpdateViewFieldDocument,
 } from '~/generated/graphql';
 
 export const toViewFieldInput = (
@@ -26,8 +24,7 @@ export const toViewFieldInput = (
 });
 
 export const useViewFields = (viewScopeId: string) => {
-  const [createViewFieldsMutation] = useCreateViewFieldsMutation();
-  const [updateViewFieldMutation] = useUpdateViewFieldMutation();
+  const apolloClient = useApolloClient();
 
   const persistViewFields = useRecoilCallback(
     ({ snapshot }) =>
@@ -63,14 +60,14 @@ export const useViewFields = (viewScopeId: string) => {
             return;
           }
 
-          return createViewFieldsMutation({
+          return apolloClient.mutate({
+            mutation: CreateViewFieldsDocument,
             variables: {
               data: viewFieldsToCreate.map((viewField) => ({
                 ...toViewFieldInput(objectId, viewField),
                 viewId: viewId ?? currentViewId,
               })),
             },
-            refetchQueries: [getOperationName(GET_VIEW_FIELDS) ?? ''],
           });
         };
 
@@ -83,7 +80,8 @@ export const useViewFields = (viewScopeId: string) => {
 
           return Promise.all(
             viewFieldsToUpdate.map((viewField) =>
-              updateViewFieldMutation({
+              apolloClient.mutate({
+                mutation: UpdateViewFieldDocument,
                 variables: {
                   data: {
                     isVisible: viewField.isVisible,
@@ -97,7 +95,6 @@ export const useViewFields = (viewScopeId: string) => {
                     },
                   },
                 },
-                refetchQueries: [getOperationName(GET_VIEWS) ?? ''],
               }),
             ),
           );

front/src/modules/views/hooks/useView.ts

@@ -1,3 +1,4 @@
+import { useCallback } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { useRecoilCallback } from 'recoil';
 import { v4 } from 'uuid';
@@ -62,6 +63,13 @@ export const useView = (props?: UseViewProps) => {
     useViews(scopeId);
   const [_, setSearchParams] = useSearchParams();
 
+  const changeView = useCallback(
+    (viewId: string) => {
+      setSearchParams({ view: viewId });
+    },
+    [setSearchParams],
+  );
+
   const resetViewBar = useRecoilCallback(({ snapshot }) => () => {
     const savedViewFilters = snapshot
       .getLoadable(
@@ -148,19 +156,17 @@ export const useView = (props?: UseViewProps) => {
         await persistViewFields(currentViewFields, newViewId);
         await persistViewFilters(newViewId);
         await persistViewSorts(newViewId);
-        setCurrentViewId(newViewId);
 
-        setSearchParams({ view: newViewId });
+        changeView(newViewId);
       },
     [
+      changeView,
       currentViewId,
       internalCreateView,
       persistViewFields,
       persistViewFilters,
       persistViewSorts,
       scopeId,
-      setCurrentViewId,
-      setSearchParams,
     ],
   );
 
@@ -203,9 +209,9 @@ export const useView = (props?: UseViewProps) => {
           )
           .getValue();
 
-        const isCreateMode = viewEditMode === 'create';
+        const isCreateModeOrEditMode = viewEditMode === 'create' || 'edit';
 
-        if (isCreateMode && name && currentViewFields) {
+        if (isCreateModeOrEditMode && name && currentViewFields) {
           await createView(name);
           set(savedTableColumnsFamilyState(currentViewId), currentViewFields);
         }
@@ -244,5 +250,6 @@ export const useView = (props?: UseViewProps) => {
     setSavedViewFields,
 
     persistViewFields,
+    changeView,
   };
 };