ref(js): useLegacyStore for DemoHeader sidebar collapsed (#29251)

static/app/components/demo/demoHeader.tsx

@@ -1,4 +1,3 @@
-import {useEffect, useState} from 'react';
 import styled from '@emotion/styled';
 
 import Button from 'app/components/button';
@@ -7,13 +6,12 @@ import ExternalLink from 'app/components/links/externalLink';
 import LogoSentry from 'app/components/logoSentry';
 import {t} from 'app/locale';
 import PreferencesStore from 'app/stores/preferencesStore';
+import {useLegacyStore} from 'app/stores/useLegacyStore';
 import space from 'app/styles/space';
 import trackAdvancedAnalyticsEvent from 'app/utils/analytics/trackAdvancedAnalyticsEvent';
 import {emailQueryParameter, extraQueryParameter} from 'app/utils/demoMode';
 import getCookie from 'app/utils/getCookie';
 
-type Preferences = typeof PreferencesStore.prefs;
-
 export default function DemoHeader() {
   // if the user came from a SaaS org, we should send them back to upgrade when they leave the sandbox
   const saasOrgSlug = getCookie('saas_org_slug');
@@ -27,25 +25,7 @@ export default function DemoHeader() {
     ? `https://sentry.io/settings/${saasOrgSlug}/billing/checkout/`
     : `https://sentry.io/signup/${queryParameter}${getStartedExtraParameter}`;
 
-  const [collapsed, setCollapsed] = useState(PreferencesStore.prefs.collapsed);
-
-  const preferenceUnsubscribe = PreferencesStore.listen(
-    (preferences: Preferences) => onPreferenceChange(preferences),
-    undefined
-  );
-
-  function onPreferenceChange(preferences: Preferences) {
-    if (preferences.collapsed === collapsed) {
-      return;
-    }
-    setCollapsed(!collapsed);
-  }
-
-  useEffect(() => {
-    return () => {
-      preferenceUnsubscribe();
-    };
-  });
+  const collapsed = !!useLegacyStore(PreferencesStore).collapsed;
 
   return (
     <Wrapper collapsed={collapsed}>

static/app/components/sidebar/index.tsx

@@ -535,7 +535,7 @@ type Preferences = typeof PreferencesStore.prefs;
 
 class SidebarContainer extends React.Component<ContainerProps, ContainerState> {
   state: ContainerState = {
-    collapsed: PreferencesStore.getInitialState().collapsed,
+    collapsed: !!PreferencesStore.getInitialState().collapsed,
     activePanel: '',
   };
 
@@ -559,7 +559,7 @@ class SidebarContainer extends React.Component<ContainerProps, ContainerState> {
       return;
     }
 
-    this.setState({collapsed: preferences.collapsed});
+    this.setState({collapsed: !!preferences.collapsed});
   }
 
   onSidebarPanelChange(activePanel: ActivePanelType) {

static/app/stores/preferencesStore.tsx

@@ -1,15 +1,17 @@
 import Reflux from 'reflux';
 
-import PreferencesActions from '../actions/preferencesActions';
+import PreferencesActions from 'app/actions/preferencesActions';
+
+import {CommonStoreInterface} from './types';
 
 type Preferences = {
   /**
    * Is the sidebar collapsed to the side
    */
-  collapsed: boolean;
+  collapsed?: boolean;
 };
 
-type PreferenceStoreInterface = {
+type PreferenceStoreInterface = CommonStoreInterface<Preferences> & {
   prefs: Preferences;
 
   getInitialState(): Preferences;
@@ -18,7 +20,7 @@ type PreferenceStoreInterface = {
 };
 
 const storeConfig: Reflux.StoreDefinition & PreferenceStoreInterface = {
-  prefs: {} as Preferences,
+  prefs: {},
 
   init() {
     this.reset();
@@ -52,6 +54,10 @@ const storeConfig: Reflux.StoreDefinition & PreferenceStoreInterface = {
     this.prefs.collapsed = false;
     this.trigger(this.prefs);
   },
+
+  getState() {
+    return this.prefs;
+  },
 };
 
 /**