ref(ts): Cleanup OrganizationsStore (#62906)

static/app/stores/organizationsStore.tsx

@@ -1,45 +1,49 @@
-import {createStore, StoreDefinition} from 'reflux';
+import {createStore} from 'reflux';
 
 import {Organization} from 'sentry/types';
 
-interface OrganizationsStoreDefinition extends StoreDefinition {
+import {CommonStoreDefinition} from './types';
+
+interface State {
+  loaded: boolean;
+  organizations: Organization[];
+}
+
+interface OrganizationsStoreDefinition extends State, CommonStoreDefinition<State> {
   addOrReplace(item: Organization): void;
   get(slug: string): Organization | undefined;
 
   getAll(): Organization[];
-  getState(): Organization[];
   init(): void;
   load(items: Organization[]): void;
-  loaded: boolean;
   onChangeSlug(prev: Organization, next: Partial<Organization>): void;
   onRemoveSuccess(slug: string): void;
   onUpdate(org: Partial<Organization>): void;
   remove(slug: string): void;
-  state: Organization[];
 }
 
 const storeConfig: OrganizationsStoreDefinition = {
-  state: [],
+  organizations: [],
   loaded: false,
 
   // So we can use Reflux.connect in a component mixin
   getInitialState() {
-    return this.state;
+    return this.organizations;
   },
 
   init() {
     // XXX: Do not use `this.listenTo` in this store. We avoid usage of reflux
     // listeners due to their leaky nature in tests.
 
-    this.state = [];
+    this.organizations = [];
     this.loaded = false;
   },
 
   onUpdate(org) {
     let match = false;
-    this.state.forEach((existing, idx) => {
+    this.organizations.forEach((existing, idx) => {
       if (existing.id === org.id) {
-        this.state[idx] = {...existing, ...org};
+        this.organizations[idx] = {...existing, ...org};
         match = true;
       }
     });
@@ -48,7 +52,7 @@ const storeConfig: OrganizationsStoreDefinition = {
         'Cannot update an organization that is not in the OrganizationsStore'
       );
     }
-    this.trigger(this.state);
+    this.trigger(this.organizations);
   },
 
   onChangeSlug(prev, next) {
@@ -65,38 +69,38 @@ const storeConfig: OrganizationsStoreDefinition = {
   },
 
   get(slug) {
-    return this.state.find((item: Organization) => item.slug === slug);
+    return this.organizations.find((item: Organization) => item.slug === slug);
   },
 
   getAll() {
-    return this.state;
+    return this.organizations;
   },
 
   getState() {
-    return this.state;
+    return {organizations: this.organizations, loaded: this.loaded};
   },
 
   remove(slug) {
-    this.state = this.state.filter(item => slug !== item.slug);
-    this.trigger(this.state);
+    this.organizations = this.organizations.filter(item => slug !== item.slug);
+    this.trigger(this.organizations);
   },
 
   addOrReplace(item) {
     let match = false;
-    this.state.forEach((existing, idx) => {
+    this.organizations.forEach((existing, idx) => {
       if (existing.id === item.id) {
-        this.state[idx] = {...existing, ...item};
+        this.organizations[idx] = {...existing, ...item};
         match = true;
       }
     });
     if (!match) {
-      this.state = [...this.state, item];
+      this.organizations = [...this.organizations, item];
     }
-    this.trigger(this.state);
+    this.trigger(this.organizations);
   },
 
   load(items: Organization[]) {
-    this.state = items;
+    this.organizations = items;
     this.loaded = true;
     this.trigger(items);
   },

static/app/views/settings/components/settingsBreadcrumb/organizationCrumb.tsx

@@ -17,7 +17,7 @@ import {CrumbLink} from '.';
 type Props = RouteComponentProps<{projectId?: string}, {}>;
 
 function OrganizationCrumb({params, routes, route, ...props}: Props) {
-  const organizations = useLegacyStore(OrganizationsStore);
+  const {organizations} = useLegacyStore(OrganizationsStore);
   const organization = useOrganization();
 
   const handleSelect = (item: {value: Organization}) => {