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/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,
   };
 };