NotificationPref: make optimistic

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

@@ -3,7 +3,8 @@ import {
 
   Center, Col, Icon,
 
-  StatelessToggleSwitchField, Text
+  ToggleSwitch, Text,
+  StatelessToggleSwitchField
 } from '@tlon/indigo-react';
 import { Association, GraphConfig, resourceFromPath } from '@urbit/api';
 import { useField } from 'formik';
@@ -100,7 +101,7 @@ function Channel(props: { association: Association }) {
     return isWatching(config, association.resource);
   });
 
-  const [{ value }, meta, { setValue }] = useField(
+  const [{ value }, meta, { setValue, setTouched }] = useField(
     `graph["${association.resource}"]`
   );
 
@@ -108,9 +109,11 @@ function Channel(props: { association: Association }) {
     setValue(watching);
   }, [watching]);
 
-  const onChange = () => {
+  const onClick = () => {
     setValue(!value);
-  };
+    setTouched(true);
+  }
+
 
   const icon = getModuleIcon((metadata.config as GraphConfig)?.graph as GraphModule);
 
@@ -123,7 +126,7 @@ function Channel(props: { association: Association }) {
         <Text> {metadata.title}</Text>
       </Box>
       <Box gridColumn={4}>
-        <StatelessToggleSwitchField selected={value} onChange={onChange} />
+        <StatelessToggleSwitchField selected={value} onClick={onClick} />
       </Box>
     </>
   );

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

@@ -10,6 +10,7 @@ import GlobalApi from '~/logic/api/global';
 import { isWatching } from '~/logic/lib/hark';
 import useHarkState from '~/logic/state/hark';
 import { AsyncButton } from '~/views/components/AsyncButton';
+import {FormikOnBlur} from '~/views/components/FormikOnBlur';
 import { BackButton } from './BackButton';
 import { GroupChannelPicker } from './GroupChannelPicker';
 
@@ -82,7 +83,7 @@ export function NotificationPreferences(props: {
           messaging
         </Text>
       </Col>
-      <Formik initialValues={initialValues} onSubmit={onSubmit}>
+      <FormikOnBlur initialValues={initialValues} onSubmit={onSubmit}>
         <Form>
           <Col gapY={4}>
             <Toggle
@@ -109,12 +110,9 @@ export function NotificationPreferences(props: {
               </Text>
               <GroupChannelPicker />
             </Col>
-            <AsyncButton primary width="fit-content">
-              Save
-            </AsyncButton>
           </Col>
         </Form>
-      </Formik>
+      </FormikOnBlur>
     </Col>
     </>
   );

pkg/interface/src/views/components/FormikOnBlur.tsx

@@ -10,7 +10,7 @@ export function FormikOnBlur<
   useEffect(() => {
     if (
       Object.keys(formikBag.errors || {}).length === 0 &&
-      Object.keys(formikBag.touched || {}).length !== 0 &&
+      formikBag.dirty && 
       !formikBag.isSubmitting
     ) {
       const { values } = formikBag;
@@ -22,7 +22,8 @@ export function FormikOnBlur<
     formikBag.errors,
     formikBag.touched,
     formikBag.submitForm,
-    formikBag.values
+    formikBag.values,
+    formikBag.dirty
   ]);
 
   const { children, innerRef } = props;