Browse Source

ref(ui): Convert indicators container from createReactClass (#25751)

Scott Cooper 3 years ago
parent
commit
6167d6b89f
2 changed files with 19 additions and 12 deletions
  1. 14 12
      static/app/components/indicators.tsx
  2. 5 0
      static/app/stores/indicatorStore.tsx

+ 14 - 12
static/app/components/indicators.tsx

@@ -1,9 +1,7 @@
 import React from 'react';
 import {ThemeProvider} from '@emotion/react';
 import styled from '@emotion/styled';
-import createReactClass from 'create-react-class';
 import {AnimatePresence} from 'framer-motion';
-import Reflux from 'reflux';
 
 import {Indicator, removeIndicator} from 'app/actionCreators/indicator';
 import ToastIndicator from 'app/components/alerts/toastIndicator';
@@ -54,15 +52,19 @@ class Indicators extends React.Component<Props> {
   }
 }
 
-const IndicatorsContainer = createReactClass<Omit<Props, 'items'>>({
-  displayName: 'IndicatorsContainer',
-  mixins: [Reflux.connect(IndicatorStore, 'items') as any],
+type State = {
+  items: Indicator[];
+};
+
+class IndicatorsContainer extends React.Component<Omit<Props, 'items'>, State> {
+  state: State = {items: IndicatorStore.get()};
+  componentWillUnmount() {
+    this.unlistener?.();
+  }
 
-  getInitialState() {
-    return {
-      items: [],
-    };
-  },
+  unlistener = IndicatorStore.listen((items: Indicator[]) => {
+    this.setState({items});
+  }, undefined);
 
   render() {
     // #NEW-SETTINGS - remove ThemeProvider here once new settings is merged
@@ -73,8 +75,8 @@ const IndicatorsContainer = createReactClass<Omit<Props, 'items'>>({
         <Indicators {...this.props} items={this.state.items} />
       </ThemeProvider>
     );
-  },
-});
+  }
+}
 
 export default IndicatorsContainer;
 export {Indicators};

+ 5 - 0
static/app/stores/indicatorStore.tsx

@@ -6,6 +6,7 @@ import {t} from 'app/locale';
 
 type IndicatorStoreInterface = {
   init: () => void;
+  get: () => Indicator[];
   addSuccess: (message: string) => Indicator;
   addError: (message?: string) => Indicator;
   /**
@@ -68,6 +69,10 @@ const storeConfig: Reflux.StoreDefinition & IndicatorStoreInterface & Internals
     this.listenTo(IndicatorActions.clear, this.clear);
   },
 
+  get() {
+    return this.items;
+  },
+
   addSuccess(message) {
     return this.add(message, 'success', {duration: 2000});
   },