refactor(compass-schema): replace reflux with redux COMPASS-8797

Author: paula-stacho

packages/compass-schema/src/components/compass-schema.tsx

@@ -35,7 +35,7 @@ import { useConnectionInfo } from '@mongodb-js/compass-connections/provider';
 import { getAtlasPerformanceAdvisorLink } from '../utils';
 import { useIsLastAppliedQueryOutdated } from '@mongodb-js/compass-query-bar';
 import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
-import type { RootState } from '../stores/store';
+import type { RootState, SchemaThunkDispatch } from '../stores/store';
 import { startAnalysis, stopAnalysis } from '../stores/reducer';
 
 const rootStyles = css({
@@ -373,20 +373,27 @@ const Schema: React.FunctionComponent<{
   schema: MongodbSchema | null;
   count?: number;
   resultId?: number;
-  startAnalysis: () => Promise<void>;
-  stopAnalysis: () => void;
-}> = ({ analysisState, errorMessage, schema, resultId }) => {
+  onStartAnalysis: () => Promise<void>;
+  onStopAnalysis: () => void;
+}> = ({
+  analysisState,
+  errorMessage,
+  schema,
+  resultId,
+  onStartAnalysis,
+  onStopAnalysis,
+}) => {
   const onApplyClicked = useCallback(() => {
-    startAnalysis();
-  }, []);
+    void onStartAnalysis();
+  }, [onStartAnalysis]);
 
   const onCancelClicked = useCallback(() => {
-    stopAnalysis();
-  }, []);
+    onStopAnalysis();
+  }, [onStopAnalysis]);
 
   const onResetClicked = useCallback(() => {
-    startAnalysis();
-  }, []);
+    onStopAnalysis();
+  }, [onStopAnalysis]);
 
   const outdated = useIsLastAppliedQueryOutdated('schema');
 

packages/compass-schema/src/components/coordinates-minichart/coordinates-minichart.jsx

@@ -333,7 +333,7 @@ CoordinatesMinichart.propTypes = {
   onQueryChanged: PropTypes.func,
 };
 
-const ConnectedCoordinatesMinichart = connect(() => {}, {
+const ConnectedCoordinatesMinichart = connect(() => ({}), {
   geoLayerAdded,
   geoLayersEdited,
   geoLayersDeleted,

packages/compass-schema/src/components/minichart/minichart.jsx

@@ -7,7 +7,6 @@ import CoordinatesMinichart from '../coordinates-minichart';
 import D3Component from '../d3-component';
 import vizFns from '../../modules';
 import CONSTANTS from '../../constants/schema';
-import { connect } from 'react-redux';
 
 class MiniChart extends PureComponent {
   static displayName = 'MiniChartComponent';
@@ -36,12 +35,12 @@ class MiniChart extends PureComponent {
     this.resizeListener();
     window.addEventListener('resize', this.resizeListener);
     // this.unsubscribeMiniChartResize =
-    //   this.props.actions.resizeMiniCharts.listen(this.resizeListener);
+    //   this.props.actions.resizeMiniCharts.listen(this.resizeListener); // TODO: what was this doing?
   }
 
   componentWillUnmount() {
     window.removeEventListener('resize', this.resizeListener);
-    this.unsubscribeMiniChartResize();
+    // this.unsubscribeMiniChartResize();
   }
 
   /**
@@ -150,4 +149,4 @@ class MiniChart extends PureComponent {
   }
 }
 
-export default connect(() => {}, {})(MiniChart);
+export default MiniChart;

packages/compass-schema/src/stores/reducer.ts

@@ -155,7 +155,7 @@ export const handleSchemaShare = (): SchemaThunkAction<void> => {
 
 export const _trackSchemaShared = (
   hasSchema: boolean
-): SchemaThunkAction<undefined> => {
+): SchemaThunkAction<void> => {
   return (dispatch, getState, { track, connectionInfoRef }) => {
     const { schema } = getState();
     // Use a function here to a) ensure that the calculations here

packages/compass-schema/src/stores/store.ts

@@ -1,6 +1,6 @@
 import type { Logger } from '@mongodb-js/compass-logging';
 import { createStore, applyMiddleware, type AnyAction } from 'redux';
-import thunk, { type ThunkAction } from 'redux-thunk';
+import thunk, { type ThunkDispatch, type ThunkAction } from 'redux-thunk';
 import type { CollectionTabPluginMetadata } from '@mongodb-js/compass-collection';
 import type {
   ConnectionInfoRef,
@@ -40,6 +40,8 @@ export type SchemaThunkAction<R, A extends AnyAction = AnyAction> = ThunkAction<
   SchemaExtraArgs,
   A
 >;
+export type SchemaThunkDispatch<A extends AnyAction = AnyAction> =
+  ThunkDispatch<RootState, SchemaExtraArgs, A>;
 
 /**
  * Configure a store with the provided options.