Switching contactsContext to use useUserPreference as `nextFetchPolic…

…y: 'standby',` was causing issues on local
CruGlobal · Oct 22, 2024 · 5a2811c · 5a2811c
1 parent 4430a04
commit 5a2811c
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 56 deletions.
diff --git a/src/components/Contacts/ContactsContext/ContactsContext.test.tsx b/src/components/Contacts/ContactsContext/ContactsContext.test.tsx
@@ -8,6 +8,7 @@ import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
 import { ContactFiltersQuery } from 'pages/accountLists/[accountListId]/contacts/Contacts.generated';
 import { ContactsWrapper } from 'pages/accountLists/[accountListId]/contacts/ContactsWrapper';
 import { GetUserOptionsQuery } from 'src/components/Contacts/ContactFlow/GetUserOptions.generated';
+import { UserOptionQuery } from 'src/hooks/UserPreference.generated';
 import { useMassSelection } from '../../../hooks/useMassSelection';
 import theme from '../../../theme';
 import {
@@ -108,16 +109,14 @@ describe('ContactsPageContext', () => {
             replace,
           }}
         >
-          <GqlMockedProvider<{ GetUserOptions: GetUserOptionsQuery }>
+          <GqlMockedProvider<{ UserOption: UserOptionQuery }>
             mocks={{
-              GetUserOptions: {
-                userOptions: [
-                  {
-                    id: 'test-id',
-                    key: 'contacts_view',
-                    value: 'flows',
-                  },
-                ],
+              UserOption: {
+                userOption: {
+                  id: 'test-id',
+                  key: 'contacts_view',
+                  value: 'flows',
+                },
               },
             }}
           >
@@ -153,16 +152,14 @@ describe('ContactsPageContext', () => {
             replace,
           }}
         >
-          <GqlMockedProvider<{ GetUserOptions: GetUserOptionsQuery }>
+          <GqlMockedProvider<{ UserOption: UserOptionQuery }>
             mocks={{
-              GetUserOptions: {
-                userOptions: [
-                  {
-                    id: 'test-id',
-                    key: 'contacts_view',
-                    value: 'flows',
-                  },
-                ],
+              UserOption: {
+                userOption: {
+                  id: 'test-id',
+                  key: 'contacts_view',
+                  value: 'flows',
+                },
               },
             }}
           >
@@ -210,16 +207,14 @@ describe('ContactsPageContext', () => {
             replace,
           }}
         >
-          <GqlMockedProvider<{ GetUserOptions: GetUserOptionsQuery }>
+          <GqlMockedProvider<{ UserOption: UserOptionQuery }>
             mocks={{
-              GetUserOptions: {
-                userOptions: [
-                  {
-                    id: 'test-id',
-                    key: 'contacts_view',
-                    value: 'list',
-                  },
-                ],
+              UserOption: {
+                userOption: {
+                  id: 'test-id',
+                  key: 'contacts_view',
+                  value: 'list',
+                },
               },
             }}
           >

diff --git a/src/components/Contacts/ContactsContext/ContactsContext.tsx b/src/components/Contacts/ContactsContext/ContactsContext.tsx
@@ -19,9 +19,9 @@ import {
   TaskFilterSetInput,
 } from 'src/graphql/types.generated';
 import { useGetIdsForMassSelectionQuery } from 'src/hooks/GetIdsForMassSelection.generated';
-import { useUpdateUserOptionMutation } from 'src/hooks/UserPreference.generated';
 import { useDebouncedCallback } from 'src/hooks/useDebounce';
 import { useLocale } from 'src/hooks/useLocale';
+import { useUserPreference } from 'src/hooks/useUserPreference';
 import { sanitizeFilters } from 'src/lib/sanitizeFilters';
 import { useAccountListId } from '../../../hooks/useAccountListId';
 import { useMassSelection } from '../../../hooks/useMassSelection';
@@ -30,7 +30,6 @@ import {
   ListHeaderCheckBoxState,
   TableViewModeEnum,
 } from '../../Shared/Header/ListHeader';
-import { useGetUserOptionsQuery } from '../ContactFlow/GetUserOptions.generated';
 import { Coordinates } from '../ContactsMap/coordinates';
 
 export type ContactsType = {
@@ -151,20 +150,16 @@ export const ContactsProvider: React.FC<ContactsContextProps> = ({
     [activeFilters],
   );
 
-  // Load the user's view preference
-  const { loading: userOptionsLoading } = useGetUserOptionsQuery({
-    // This fetch policy ensures that our onCompleted callback will only be called once instead of
-    // being called every time the cached user options are updated by the updateUserOptions mutation.
-    // nextFetchPolicy: 'standby',
-    onCompleted: ({ userOptions }) => {
-      const option = userOptions.find(
-        (option) => option.key === 'contacts_view',
-      );
-      if (option && option.value) {
-        setViewMode(option.value as TableViewModeEnum);
-      }
-    },
-  });
+  const [contactsView, updateOptions, { loading: userOptionsLoading }] =
+    useUserPreference({
+      key: 'contacts_view',
+      defaultValue: TableViewModeEnum.List,
+    });
+  useEffect(() => {
+    if (contactsView) {
+      setViewMode(contactsView);
+    }
+  }, [contactsView]);
 
   const contactsFilters = useMemo(() => {
     // Remove filters in the map view
@@ -259,27 +254,16 @@ export const ContactsProvider: React.FC<ContactsContextProps> = ({
   const setSearchTermDebounced = useDebouncedCallback(setSearchTerm, 500);
 
   const handleViewModeChange = (
-    event: React.MouseEvent<HTMLElement>,
+    _: React.MouseEvent<HTMLElement>,
     view: string,
   ) => {
     setViewMode(view as TableViewModeEnum);
-    updateOptions(view);
+    updateOptions(view as TableViewModeEnum);
   };
   //#endregion
 
   //#region JSX
 
-  const [updateUserOption] = useUpdateUserOptionMutation();
-
-  const updateOptions = async (view: string): Promise<void> => {
-    await updateUserOption({
-      variables: {
-        key: 'contacts_view',
-        value: view,
-      },
-    });
-  };
-
   // map states and functions
   const [selected, setSelected] = useState<Coordinates | null>(null);