reactive migrated. sort of.

Author: thefringeninja

src/components/Notifications.tsx

@@ -150,6 +150,10 @@ interface NotificationProps {
     variant: string;
 }
 
+interface NotificationsState {
+    notifications: NotificationProps[];
+}
+
 const Notification: ComponentType<NotificationProps> = withStyles(styles)(
     ({
         autoHideDuration,
@@ -200,9 +204,9 @@ const Notification: ComponentType<NotificationProps> = withStyles(styles)(
     ),
 );
 
-const Notifications: StatelessComponent<{
-    notifications: NotificationProps[];
-}> = ({ notifications }) => (
+const Notifications: StatelessComponent<NotificationsState> = ({
+    notifications = [],
+}) => (
     <div>
         {notifications.map(notification => (
             <Notification key={notification.messageId} {...notification} />

src/reactive/index.js

@@ -0,0 +1,50 @@
+import React, { Component, ComponentType } from 'react';
+
+import { Observable, ReplaySubject, Subscription } from 'rxjs';
+
+export const createAction = <T>() => new ReplaySubject<T>(1);
+
+export const createState = <TState>(
+    reducer$,
+    initialState$ = Observable.of({}),
+): Observable<TState> =>
+    initialState$
+        .merge(reducer$)
+        .scan(
+            // @ts-ignore
+            (state, [scope, reducer]) =>
+                // tslint:disable-next-line:no-object-literal-type-assertion
+                ({
+                    ...(state as object),
+                    [scope]: reducer(state[scope]),
+                } as TState),
+        )
+        .publishReplay(1)
+        .refCount() as Observable<TState>;
+
+export const connect = <TProps extends object, TState extends object>(
+    state$: Observable<TState>,
+) => (
+    WrappedComponent: ComponentType<TProps & TState>,
+): ComponentType<TProps> =>
+    class extends Component<TProps, TState> {
+        subscription: Subscription;
+
+        componentWillMount() {
+            this.subscription = state$.subscribe(s => {
+                this.setState(s || {});
+            });
+        }
+
+        componentWillUnmount() {
+            this.subscription.unsubscribe();
+        }
+
+        render() {
+            // tslint:disable-next-line:no-object-literal-type-assertion
+            return React.createElement(WrappedComponent, {
+                ...(this.state as object),
+                ...(this.props as object),
+            } as TProps & TState);
+        }
+    };