From cdffee45677d4e8143023c1ae0a5fdc55c09243f Mon Sep 17 00:00:00 2001
From: Evan Purkhiser <evanpurkhiser@gmail.com>
Date: Tue, 12 Oct 2021 09:54:18 -0700
Subject: [PATCH] ref(js): useLegacyStore for DemoHeader sidebar collapsed
 (#29251)

---
 static/app/components/demo/demoHeader.tsx | 24 ++---------------------
 static/app/components/sidebar/index.tsx   |  4 ++--
 static/app/stores/preferencesStore.tsx    | 14 +++++++++----
 3 files changed, 14 insertions(+), 28 deletions(-)

diff --git a/static/app/components/demo/demoHeader.tsx b/static/app/components/demo/demoHeader.tsx
index 3159b12df4f0f1..0bdd12d8a0b6c4 100644
--- a/static/app/components/demo/demoHeader.tsx
+++ b/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}>
diff --git a/static/app/components/sidebar/index.tsx b/static/app/components/sidebar/index.tsx
index 567d73239fa57b..b7f543974d81a6 100644
--- a/static/app/components/sidebar/index.tsx
+++ b/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) {
diff --git a/static/app/stores/preferencesStore.tsx b/static/app/stores/preferencesStore.tsx
index 843a559e0c04ee..0d2d31706e79bb 100644
--- a/static/app/stores/preferencesStore.tsx
+++ b/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;
+  },
 };
 
 /**