initial refactor

packages/manager/src/components/PrimaryNav/PrimaryNav.tsx

@@ -93,7 +93,12 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
 
   const { isIAMEnabled, isIAMBeta } = useIsIAMEnabled();
 
-  const { data: preferences } = usePreferences();
+  const { data: collapsedSideNavPreference } = usePreferences(
+    (preferences) => preferences?.collapsedSideNavProductFamilies
+  );
+
+  const collapsedAccordions = collapsedSideNavPreference ?? [];
+
   const { mutateAsync: updatePreferences } = useMutatePreferences();
 
   const productFamilyLinkGroups: ProductFamilyLinkGroup<
@@ -253,10 +258,6 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
     ]
   );
 
-  const [collapsedAccordions, setCollapsedAccordions] = React.useState<
-    number[]
-  >(preferences?.collapsedSideNavProductFamilies ?? []);
-
   const accordionClicked = (index: number) => {
     let updatedCollapsedAccordions;
     if (collapsedAccordions.includes(index)) {
@@ -266,13 +267,11 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
       updatePreferences({
         collapsedSideNavProductFamilies: updatedCollapsedAccordions,
       });
-      setCollapsedAccordions(updatedCollapsedAccordions);
     } else {
       updatedCollapsedAccordions = [...collapsedAccordions, index];
       updatePreferences({
         collapsedSideNavProductFamilies: updatedCollapsedAccordions,
       });
-      setCollapsedAccordions(updatedCollapsedAccordions);
     }
   };
 

packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResize.tsx

@@ -72,7 +72,12 @@ export const LinodeResize = (props: Props) => {
   );
 
   const { data: types } = useAllTypes(open);
-  const { data: preferences } = usePreferences(open);
+
+  const { data: typeToConfirmPreference } = usePreferences(
+    (preferences) => preferences?.type_to_confirm,
+    open
+  );
+
   const { enqueueSnackbar } = useSnackbar();
   const [confirmationText, setConfirmationText] = React.useState('');
   const [resizeError, setResizeError] = React.useState<string>('');
@@ -162,8 +167,7 @@ export const LinodeResize = (props: Props) => {
   const tableDisabled = hostMaintenance || isLinodesGrantReadOnly;
 
   const submitButtonDisabled =
-    preferences?.type_to_confirm !== false &&
-    confirmationText !== linode?.label;
+    typeToConfirmPreference !== false && confirmationText !== linode?.label;
 
   const type = types?.find((t) => t.id === linode?.type);
 
@@ -323,7 +327,7 @@ export const LinodeResize = (props: Props) => {
               title="Confirm"
               typographyStyle={{ marginBottom: 8 }}
               value={confirmationText}
-              visible={preferences?.type_to_confirm}
+              visible={typeToConfirmPreference}
             />
           </Box>
           <Box display="flex" justifyContent="flex-end">

packages/manager/src/queries/profile/preferences.ts

@@ -1,39 +1,42 @@
 import { updateUserPreferences } from '@linode/api-v4';
-import {
-  QueryClient,
-  useMutation,
-  useQuery,
-  useQueryClient,
-} from '@tanstack/react-query';
-
-import { ManagerPreferences } from 'src/types/ManagerPreferences';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 
 import { queryPresets } from '../base';
 import { profileQueries } from './profile';
 
 import type { APIError } from '@linode/api-v4';
+import type { QueryClient } from '@tanstack/react-query';
+import type { ManagerPreferences } from 'src/types/ManagerPreferences';
 
-export const usePreferences = (enabled = true) =>
-  useQuery<ManagerPreferences, APIError[]>({
+export const usePreferences = <TData = ManagerPreferences>(
+  select?: (data: ManagerPreferences | undefined) => TData,
+  enabled = true
+) =>
+  useQuery({
     ...profileQueries.preferences,
     ...queryPresets.oneTimeFetch,
     enabled,
+    select,
   });
 
 export const useMutatePreferences = (replace = false) => {
-  const { data: preferences } = usePreferences(!replace);
   const queryClient = useQueryClient();
 
   return useMutation<
     ManagerPreferences,
     APIError[],
     Partial<ManagerPreferences>
   >({
-    mutationFn: (data) =>
-      updateUserPreferences({
-        ...(!replace && preferences !== undefined ? preferences : {}),
-        ...data,
-      }),
+    async mutationFn(data) {
+      if (replace) {
+        return updateUserPreferences(data);
+      } else {
+        const existingPreferences = await queryClient.ensureQueryData<ManagerPreferences>(
+          profileQueries.preferences
+        );
+        return updateUserPreferences({ ...existingPreferences, ...data });
+      }
+    },
     onMutate: (data) => updatePreferenceData(data, replace, queryClient),
   });
 };

packages/manager/src/types/ManagerPreferences.ts

@@ -17,6 +17,7 @@ export interface DismissedNotification {
 export interface ManagerPreferences extends UserPreferences {
   avatarColor?: string;
   backups_cta_dismissed?: boolean;
+  collapsedSideNavProductFamilies?: number[];
   desktop_sidebar_open?: boolean;
   dismissed_notifications?: Record<string, DismissedNotification>;
   domains_group_by_tag?: boolean;

packages/manager/src/utilities/theme.ts

@@ -52,13 +52,19 @@ export const getThemeFromPreferenceValue = (
 };
 
 export const useColorMode = () => {
-  // Make sure we are authenticated before we fetch preferences.
   const isAuthenticated = !!useAuthentication().token;
-  const { data: preferences } = usePreferences(isAuthenticated);
+
+  const { data: themePreference } = usePreferences(
+    (preferences) => preferences?.theme,
+    // Make sure we are authenticated before we fetch preferences.
+    // If we don't, we get an authentication loop.
+    isAuthenticated
+  );
+
   const isSystemInDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
 
   const colorMode = getThemeFromPreferenceValue(
-    preferences?.theme,
+    themePreference,
     isSystemInDarkMode
   );