interface: move group subs to airlock

pkg/interface/src/logic/reducers/group-update.ts

@@ -9,8 +9,10 @@ import {
 import _ from 'lodash';
 import { Cage } from '~/types/cage';
 import { resourceAsPath } from '../lib/util';
-import { reduceState } from '../state/base';
-import useGroupState, { GroupState } from '../state/group';
+import { BaseState } from '../state/base';
+import { GroupState as State } from '../state/group';
+
+type GroupState = BaseState<State> & State;
 
 function decodeGroup(group: Enc<Group>): Group {
   const members = new Set(group.members);
@@ -54,21 +56,7 @@ function decodeTags(tags: Enc<Tags>): Tags {
 
 export default class GroupReducer {
   reduce(json: Cage) {
-    const data = json.groupUpdate;
-    if (data) {
-      reduceState<GroupState, GroupUpdate>(useGroupState, data, [
-        initial,
-        addMembers,
-        addTag,
-        removeMembers,
-        initialGroup,
-        removeTag,
-        addGroup,
-        removeGroup,
-        changePolicy,
-        expose
-      ]);
-    }
+    return;
   }
 }
 const initial = (json: GroupUpdate, state: GroupState): GroupState => {
@@ -175,24 +163,6 @@ const removeTag = (json: GroupUpdate, state: GroupState): GroupState => {
   return state;
 };
 
-const changePolicy = (json: GroupUpdate, state: GroupState): GroupState => {
-  if ('changePolicy' in json && state) {
-    const { resource, diff } = json.changePolicy;
-    const resourcePath = resourceAsPath(resource);
-    const policy = state.groups[resourcePath].policy;
-    if ('open' in policy && 'open' in diff) {
-      openChangePolicy(diff.open, policy);
-    } else if ('invite' in policy && 'invite' in diff) {
-      inviteChangePolicy(diff.invite, policy);
-    } else if ('replace' in diff) {
-      state.groups[resourcePath].policy = diff.replace;
-    } else {
-      console.log('bad policy diff');
-    }
-  }
-  return state;
-};
-
 const expose = (json: GroupUpdate, state: GroupState): GroupState => {
   if( 'expose' in json && state) {
     const { resource } = json.expose;
@@ -243,3 +213,33 @@ const openChangePolicy = (diff: OpenPolicyDiff, policy: OpenPolicy) => {
     console.log('bad policy change');
   }
 };
+
+const changePolicy = (json: GroupUpdate, state: GroupState): GroupState => {
+  if ('changePolicy' in json && state) {
+    const { resource, diff } = json.changePolicy;
+    const resourcePath = resourceAsPath(resource);
+    const policy = state.groups[resourcePath].policy;
+    if ('open' in policy && 'open' in diff) {
+      openChangePolicy(diff.open, policy);
+    } else if ('invite' in policy && 'invite' in diff) {
+      inviteChangePolicy(diff.invite, policy);
+    } else if ('replace' in diff) {
+      state.groups[resourcePath].policy = diff.replace;
+    } else {
+      console.log('bad policy diff');
+    }
+  }
+  return state;
+};
+export const reduce = [
+  initial,
+  addMembers,
+  addTag,
+  removeMembers,
+  initialGroup,
+  removeTag,
+  addGroup,
+  removeGroup,
+  changePolicy,
+  expose
+];

pkg/interface/src/logic/reducers/group-view.ts

@@ -1,6 +1,7 @@
-import { GroupUpdate } from '@urbit/api/groups';
-import { reduceState } from '../state/base';
-import useGroupState, { GroupState } from '../state/group';
+import { BaseState } from '../state/base';
+import { GroupState as State } from '../state/group';
+
+type GroupState = State & BaseState<State>;
 
 const initial = (json: any, state: GroupState): GroupState => {
   const data = json.initial;
@@ -41,14 +42,9 @@ const hide = (json: any, state: GroupState) => {
   return state;
 };
 
-export const GroupViewReducer = (json: any) => {
-  const data = json['group-view-update'];
-  if (data) {
-    reduceState<GroupState, GroupUpdate>(useGroupState, data, [
-      progress,
-      hide,
-      started,
-      initial
-    ]);
-  }
-};
+export const reduce = [
+  progress,
+  hide,
+  started,
+  initial
+];

pkg/interface/src/logic/state/group.ts

@@ -1,27 +1,56 @@
 import { Association, Group, JoinRequests } from '@urbit/api';
 import { useCallback } from 'react';
-import { BaseState, createState } from './base';
+import { reduce } from '../reducers/group-update';
+import _ from 'lodash';
+import { reduce as reduceView } from '../reducers/group-view';
+import {
+  createState,
+  createSubscription,
+  reduceStateN
+} from './base';
 
-export interface GroupState extends BaseState<GroupState> {
+export interface GroupState {
   groups: {
     [group: string]: Group;
-  }
+  };
   pendingJoin: JoinRequests;
 }
 
 // @ts-ignore investigate zustand types
-const useGroupState = createState<GroupState>('Group', {
-  groups: {},
-  pendingJoin: {}
-}, ['groups']);
+const useGroupState = createState<GroupState>(
+  'Group',
+  {
+    groups: {},
+    pendingJoin: {}
+  },
+  ['groups'],
+  [
+    (set, get) =>
+      createSubscription('group-store', '/groups', (e) => {
+        if ('groupUpdate' in e) {
+          reduceStateN(get(), e.groupUpdate, reduce);
+        }
+      }),
+      (set, get) => createSubscription('group-view', '/groups', (e) => {
+        const data = _.get(e, 'group-view-update', false);
+        if (data) {
+          reduceStateN(get(), data, reduceView);
+        }
+      })
+  ]
+);
 
 export function useGroup(group: string) {
-  return useGroupState(useCallback(s => s.groups[group] as Group | undefined, [group]));
+  return useGroupState(
+    useCallback(s => s.groups[group] as Group | undefined, [group])
+  );
 }
 
 export function useGroupForAssoc(association: Association) {
   return useGroupState(
-    useCallback(s => s.groups[association.group] as Group | undefined, [association])
+    useCallback(s => s.groups[association.group] as Group | undefined, [
+      association
+    ])
   );
 }
 

pkg/interface/src/logic/store/store.ts

@@ -6,7 +6,6 @@ import { ContactReducer } from '../reducers/contact-update';
 import GcpReducer from '../reducers/gcp-reducer';
 import { GraphReducer } from '../reducers/graph-update';
 import GroupReducer from '../reducers/group-update';
-import { GroupViewReducer } from '../reducers/group-view';
 import InviteReducer from '../reducers/invite-update';
 import LaunchReducer from '../reducers/launch-update';
 import MetadataReducer from '../reducers/metadata-update';
@@ -53,7 +52,6 @@ export default class GlobalStore extends BaseStore<StoreState> {
       this.metadataReducer.reduce(data);
       this.s3Reducer.reduce(data);
       this.groupReducer.reduce(data);
-      GroupViewReducer(data);
       this.launchReducer.reduce(data);
       this.connReducer.reduce(data, this.state);
       GraphReducer(data);