Merge pull request #93 from HubSpot/adam/revert-connect-to-class

revert connect to class component

Author: aem

src/dependencies/connect.tsx

@@ -1,21 +1,21 @@
 import {
   DependencyMap,
   DependencyMapProps,
-  GetProps,
   ConnectedComponentType,
   calculateInitial,
-  calculate,
+  calculateForDispatch,
+  makeDependencyIndex,
+  DependencyIndexEntry,
 } from './DependencyMap';
 import { Dispatcher } from 'flux';
-import { makeDisplayName } from './BuildComponent';
+import { makeDisplayName, focuser } from './BuildComponent';
 import { dependencyPropTypes } from '../dependencies/DependencyMap';
 import { get as getDispatcherInstance } from '../dispatcher/DispatcherInstance';
 import { enforceDispatcher } from '../dispatcher/DispatcherInterface';
 import * as React from 'react';
-import { ComponentType, forwardRef, RefObject, useRef, useState } from 'react';
+import { ComponentType, RefObject, useRef } from 'react';
 import hoistStatics from 'hoist-non-react-statics';
-import { _useDispatchSubscription } from './useStoreDependency';
-import { shallowEqual, oMap } from '../utils/ObjectUtils';
+import { handleDispatch } from './Dispatch';
 
 export function useCurrent<ValueType>(value: ValueType): RefObject<ValueType> {
   const ref = useRef(value);
@@ -29,56 +29,77 @@ export default function connect<Deps extends DependencyMap>(
 ) {
   enforceDispatcher(dispatcher);
 
+  const dependencyIndex = makeDependencyIndex(dependencies);
+
   return function connector<
     C extends any,
     Props extends DependencyMapProps<Deps>
   >(BaseComponent: ComponentType<Props>): ConnectedComponentType<Props, C> {
-    const ConnectedComponent: ConnectedComponentType<Props & C, C> = forwardRef(
-      (props: GetProps<C>, ref) => {
-        enforceDispatcher(dispatcher);
+    class ConnectedComponent extends React.Component<Props, any> {
+      static defaultProps?: Partial<Props> = BaseComponent.defaultProps;
+      static dependencies: Deps = dependencies;
+      static displayName = makeDisplayName('Connected', BaseComponent);
+      static propTypes: any = dependencyPropTypes(
+        dependencies,
+        // eslint-disable-next-line react-app/react/forbid-foreign-prop-types
+        BaseComponent.propTypes
+      );
+      static WrappedComponent: ComponentType<Props> = BaseComponent;
 
-        const [dependencyValue, setDependencyValue] = useState(
-          () => calculateInitial(dependencies, props, {}) || {}
-        );
+      static getDerivedStateFromProps(props: unknown, state: unknown) {
+        return calculateInitial(dependencies, props, state);
+      }
 
-        const currProps = useCurrent(props);
+      dispatchToken?: string;
+      state: any = {};
+      wrappedInstance?: HTMLElement = null;
 
-        _useDispatchSubscription(
-          dependencies,
-          currProps,
-          dispatcher,
-          dependencyValue,
-          setDependencyValue
-        );
+      constructor(props: Props) {
+        super(props);
+        if (dispatcher) {
+          this.dispatchToken = dispatcher.register(
+            handleDispatch.bind(
+              null,
+              dispatcher,
+              dependencyIndex,
+              this.handleDispatch.bind(this)
+            )
+          );
+        }
+        this.state = calculateInitial(dependencies, this.props, {});
+      }
 
-        const newValue = oMap(dependencies, dep =>
-          calculate(dep, props, dependencyValue)
-        );
-        if (
-          Object.keys(newValue)
-            .map(k => shallowEqual(newValue[k], dependencyValue[k]))
-            .some(el => el === false)
-        ) {
-          setDependencyValue(newValue as typeof dependencyValue);
+      componentWillUnmount() {
+        const dispatchToken = this.dispatchToken;
+        if (dispatcher && dispatchToken) {
+          this.dispatchToken = null;
+          dispatcher.unregister(dispatchToken);
         }
+      }
 
-        // TypeScript really doesn't like how I'm typing the output here
-        // @ts-ignore
-        return <BaseComponent {...props} {...dependencyValue} ref={ref} />;
+      handleDispatch(entry: DependencyIndexEntry) {
+        this.setState(
+          calculateForDispatch(dependencies, entry, this.props, this.state)
+        );
       }
-    );
 
-    ConnectedComponent.defaultProps = BaseComponent.defaultProps;
-    ConnectedComponent.dependencies = dependencies as Deps;
-    ConnectedComponent.displayName = makeDisplayName(
-      'Connected',
-      BaseComponent
-    );
-    ConnectedComponent.propTypes = dependencyPropTypes(
-      dependencies,
-      BaseComponent.propTypes
-    );
-    ConnectedComponent.WrappedComponent = BaseComponent;
+      focus =
+        typeof BaseComponent.prototype.focus === 'function'
+          ? (...args: any[]) => focuser(this, ...args)
+          : undefined;
+
+      setWrappedInstance = (ref: HTMLElement) => {
+        this.wrappedInstance = ref;
+      };
+
+      render() {
+        const refProps =
+          typeof BaseComponent === 'function'
+            ? {}
+            : { ref: this.setWrappedInstance };
+        return <BaseComponent {...this.props} {...this.state} {...refProps} />;
+      }
+    }
 
     return hoistStatics(ConnectedComponent, BaseComponent);
   };