NotificationPref: fix optimism

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

@@ -5,7 +5,14 @@ import {
   NotifIndex,
   readNote,
   Timebox,
-  Unreads
+  Unreads,
+  setMentions,
+  listenGroup,
+  ignoreGroup,
+  listenGraph,
+  ignoreGraph,
+  setWatchOnSelf,
+  setDoNotDisturb
 } from '@urbit/api';
 import { patp2dec } from 'urbit-ob';
 import _ from 'lodash';
@@ -34,6 +41,13 @@ export interface HarkState {
   archive: (index: NotifIndex, time?: BigInteger) => Promise<void>;
   readNote: (index: NotifIndex) => Promise<void>;
   readCount: (resource: string, index?: string) => Promise<void>;
+  setMentions: (mentions: boolean) => Promise<void>;
+  listenGraph: (graph: string, index: string) => Promise<void>;
+  ignoreGraph: (graph: string, index: string) => Promise<void>;
+  listenGroup: (group: string) => Promise<void>;
+  ignoreGroup: (group: string) => Promise<void>;
+  watchOnSelf: (watch: boolean) => Promise<void>;
+  setDoNotDisturb: (dnd: boolean) => Promise<void>;
 }
 
 const useHarkState = createState<HarkState>(
@@ -68,7 +82,34 @@ const useHarkState = createState<HarkState>(
       });
       reduceState(useHarkState, harkUpdate, [reduce]);
     },
-
+    setMentions: async (mentions) => {
+      const poke = setMentions(mentions);
+      pokeOptimisticallyN(useHarkState, poke, [reduce]);
+    },
+    listenGroup: async (group) => {
+      const poke = listenGroup(group);
+      pokeOptimisticallyN(useHarkState, poke, [reduce]);
+    },
+    ignoreGroup: async (group) => {
+      const poke = ignoreGroup(group);
+      pokeOptimisticallyN(useHarkState, poke, [reduce]);
+    },
+    listenGraph: async (graph, index) => {
+      const poke = listenGraph(graph, index);
+      pokeOptimisticallyN(useHarkState, poke, [reduce]);
+    },
+    ignoreGraph: async (graph, index) => {
+      const poke = ignoreGraph(graph, index);
+      pokeOptimisticallyN(useHarkState, poke, [reduce]);
+    },
+    watchOnSelf: async (watch) => {
+      const poke = setWatchOnSelf(watch);
+      pokeOptimisticallyN(useHarkState, poke, [reduce]);
+    },
+    setDoNotDisturb: async (dnd) => {
+      const poke = setDoNotDisturb(dnd);
+      pokeOptimisticallyN(useHarkState, poke, [reduce]);
+    },
     notifications: new BigIntOrderedMap<Timebox>(),
     notificationsCount: 0,
     notificationsGraphConfig: {

pkg/interface/src/views/apps/settings/components/lib/GroupChannelPicker.tsx

@@ -101,20 +101,19 @@ function Channel(props: { association: Association }) {
     return isWatching(config, association.resource);
   });
 
-  const [, , { setValue, setTouched }] = useField(
+  const [{ value }, , { setValue, setTouched }] = useField(
     `graph["${association.resource}"]`
   );
-  const [optValue, setOptValue] = useState(watching);
-
-  useEffect(() => {
-    setValue(optValue);
-    setTouched(true);
-  }, [watching]);
 
   const onClick = () => {
-    setOptValue(v => !v);
+    setValue(!value);
+    setTouched(true);
   };
 
+  useEffect(() => {
+    setValue(watching);
+  }, [watching]);
+
   const icon = getModuleIcon((metadata.config as GraphConfig)?.graph as GraphModule);
 
   return (
@@ -126,7 +125,7 @@ function Channel(props: { association: Association }) {
         <Text> {metadata.title}</Text>
       </Box>
       <Box gridColumn={4}>
-        <StatelessToggleSwitchField selected={optValue} onClick={onClick} />
+        <StatelessToggleSwitchField selected={value} onClick={onClick} />
       </Box>
     </>
   );

pkg/interface/src/views/apps/settings/components/lib/NotificationPref.tsx

@@ -11,9 +11,6 @@ import useHarkState from '~/logic/state/hark';
 import { FormikOnBlur } from '~/views/components/FormikOnBlur';
 import { BackButton } from './BackButton';
 import { GroupChannelPicker } from './GroupChannelPicker';
-import airlock from '~/logic/api';
-import { ignoreGraph, ignoreGroup, listenGraph, listenGroup, setDoNotDisturb, setMentions } from '@urbit/api';
-import { setWatchOnSelf } from '@urbit/api';
 
 interface FormSchema {
   mentions: boolean;
@@ -39,28 +36,34 @@ export function NotificationPreferences() {
 
   const onSubmit = useCallback(async (values: FormSchema, actions: FormikHelpers<FormSchema>) => {
     try {
-      const promises: Promise<any>[] = [];
+      const {
+        setMentions,
+        listenGraph,
+        listenGroup,
+        ignoreGraph,
+        ignoreGroup,
+        setDoNotDisturb,
+        setWatchOnSelf
+      } = useHarkState.getState();
       if (values.mentions !== graphConfig.mentions) {
-        promises.push(airlock.poke(setMentions(values.mentions)));
+        setMentions(values.mentions);
       }
       if (values.watchOnSelf !== graphConfig.watchOnSelf) {
-        promises.push(airlock.poke(setWatchOnSelf(values.watchOnSelf)));
+        setWatchOnSelf(values.watchOnSelf);
       }
       if (values.dnd !== dnd && !_.isUndefined(values.dnd)) {
-        promises.push(airlock.poke(setDoNotDisturb(values.dnd)));
+        setDoNotDisturb(values.dnd);
       }
       _.forEach(values.graph, (listen: boolean, graph: string) => {
         if(listen !== isWatching(graphConfig, graph)) {
-          promises.push(airlock.poke((listen ? listenGraph : ignoreGraph)(graph, '/')));
+          (listen ? listenGraph : ignoreGraph)(graph, '/');
         }
       });
       _.forEach(values.groups, (listen: boolean, group: string) => {
         if(listen !== groupConfig.includes(group)) {
-          promises.push(airlock.poke((listen ? listenGroup : ignoreGroup)(group)));
+          (listen ? listenGroup : ignoreGroup)(group);
         }
       });
-
-      await Promise.all(promises);
       actions.setStatus({ success: null });
     } catch (e) {
       console.error(e);