profile: submit profile from outside form bounds

Fixes urbit/landscape#444

pkg/interface/src/views/apps/profile/components/EditProfile.tsx

@@ -10,7 +10,7 @@ import {
   ManagedCheckboxField as Checkbox,
   Col,
   Text,
-  Row,
+  Row
 } from '@tlon/indigo-react';
 
 import { uxToHex } from '~/logic/lib/util';
@@ -40,7 +40,7 @@ const emptyContact = {
   isPublic: false
 };
 
-export function EditProfile(props: any): ReactElement {
+export const EditProfile = React.forwardRef<ReactElement>((props: any, ref) => {
   const { contact, ship, api, isPublic } = props;
   const history = useHistory();
   if (contact) {
@@ -56,34 +56,33 @@ export function EditProfile(props: any): ReactElement {
 
         if (newValue !== contact[key]) {
           if (key === 'isPublic') {
-            return acc.then(() =>
-              api.contacts.setPublic(newValue)
-            );
+            return acc.then(() => api.contacts.setPublic(newValue));
           } else if (key === 'groups') {
-            const toRemove: string[] = _.difference(contact?.groups || [], newValue);
+            const toRemove: string[] = _.difference(
+              contact?.groups || [],
+              newValue
+            );
             console.log(toRemove);
-            const toAdd: string[] = _.difference(newValue, contact?.groups || []);
+            const toAdd: string[] = _.difference(
+              newValue,
+              contact?.groups || []
+            );
             console.log(toAdd);
             const promises: Promise<any>[] = [];
 
             promises.concat(
-              toRemove.map(e =>
+              toRemove.map((e) =>
                 api.contacts.edit(ship, { 'remove-group': resourceFromPath(e) })
               )
             );
             promises.concat(
-              toAdd.map(e =>
+              toAdd.map((e) =>
                 api.contacts.edit(ship, { 'add-group': resourceFromPath(e) })
               )
             );
             return acc.then(() => Promise.all(promises));
-          } else if (
-            key !== 'last-updated' &&
-            key !== 'isPublic'
-          ) {
-            return acc.then(() =>
-              api.contacts.edit(ship, { [key]: newValue })
-            );
+          } else if (key !== 'last-updated' && key !== 'isPublic') {
+            return acc.then(() => api.contacts.edit(ship, { [key]: newValue }));
           }
         }
         return acc;
@@ -99,32 +98,39 @@ export function EditProfile(props: any): ReactElement {
   return (
     <>
       <Formik
+        innerRef={ref}
         validationSchema={formSchema}
         initialValues={contact || emptyContact}
         onSubmit={onSubmit}
       >
-      <Form width="100%" height="100%" p={2}>
-        <Input id="nickname" label="Name" mb={3} />
-        <Col width="100%">
-          <Text mb={2}>Description</Text>
-          <MarkdownField id="bio" mb={3} s3={props.s3} />
-        </Col>
-        <ColorInput id="color" label="Sigil Color" mb={3} />
-        <Row mb={3} width="100%">
-          <Col pr={2} width="50%">
-            <ImageInput id="cover" label="Cover Image" s3={props.s3} />
+        <Form width='100%' height='100%' p={2}>
+          <Input id='nickname' label='Name' mb={3} />
+          <Col width='100%'>
+            <Text mb={2}>Description</Text>
+            <MarkdownField id='bio' mb={3} s3={props.s3} />
           </Col>
-          <Col pl={2} width="50%">
-            <ImageInput id="avatar" label="Profile Image" s3={props.s3} />
-          </Col>
-        </Row>
-        <Checkbox mb={3} id="isPublic" label="Public Profile" />
-        <GroupSearch label="Pinned Groups" id="groups" groups={props.groups} associations={props.associations} publicOnly />
-        <AsyncButton primary loadingText="Updating..." border mt={3}>
-          Submit
-        </AsyncButton>
-      </Form>
-    </Formik>
-  </>
+          <ColorInput id='color' label='Sigil Color' mb={3} />
+          <Row mb={3} width='100%'>
+            <Col pr={2} width='50%'>
+              <ImageInput id='cover' label='Cover Image' s3={props.s3} />
+            </Col>
+            <Col pl={2} width='50%'>
+              <ImageInput id='avatar' label='Profile Image' s3={props.s3} />
+            </Col>
+          </Row>
+          <Checkbox mb={3} id='isPublic' label='Public Profile' />
+          <GroupSearch
+            label='Pinned Groups'
+            id='groups'
+            groups={props.groups}
+            associations={props.associations}
+            publicOnly
+          />
+          <AsyncButton primary loadingText='Updating...' border mt={3}>
+            Submit
+          </AsyncButton>
+        </Form>
+      </Formik>
+    </>
   );
-}
+});

pkg/interface/src/views/apps/profile/components/Profile.tsx

@@ -23,6 +23,7 @@ export function Profile(props: any): ReactElement {
   }
   const { contact, nackedContacts, hasLoaded, isPublic, isEdit, ship } = props;
   const nacked = nackedContacts.has(ship);
+  const formRef = useRef(null);
 
   useEffect(() => {
     if (hasLoaded && !contact && !nacked) {
@@ -68,30 +69,57 @@ export function Profile(props: any): ReactElement {
       <Box ref={anchorRef} maxWidth='600px' width='100%'>
         <Box border='1px solid' borderColor='lightGray' borderRadius='2'>
           <Row alignItems='center' justifyContent='space-between' px='3'>
-            <Row>
-              {ship === `~${window.ship}` ? (
-                <>
-                  <Text
-                    py='2'
-                    cursor='pointer'
-                    fontWeight='500'
-                    onClick={() => {
-                      history.push(`/~profile/${ship}/edit`);
-                    }}
-                  >
-                    Edit {isPublic ? 'Public' : 'Private'} Profile
-                  </Text>
-                  <SetStatusBarModal
-                    isControl
-                    py='2'
-                    ml='3'
-                    api={props.api}
-                    ship={`~${window.ship}`}
-                    contact={contact}
-                  />
-                </>
-              ) : null}
-            </Row>
+            {isEdit ? (
+              <Row>
+                <Text
+                  py='2'
+                  cursor='pointer'
+                  fontWeight='500'
+                  color='blue'
+                  onClick={() => {
+                    formRef.current.submitForm();
+                  }}
+                >
+                  Save Edits
+                </Text>
+                <Text
+                  py='2'
+                  ml='3'
+                  fontWeight='500'
+                  cursor='pointer'
+                  onClick={() => {
+                    history.push(`/~profile/${ship}`);
+                  }}
+                >
+                  Cancel
+                </Text>
+              </Row>
+            ) : (
+              <Row>
+                {ship === `~${window.ship}` ? (
+                  <>
+                    <Text
+                      py='2'
+                      cursor='pointer'
+                      fontWeight='500'
+                      onClick={() => {
+                        history.push(`/~profile/${ship}/edit`);
+                      }}
+                    >
+                      Edit {isPublic ? 'Public' : 'Private'} Profile
+                    </Text>
+                    <SetStatusBarModal
+                      isControl
+                      py='2'
+                      ml='3'
+                      api={props.api}
+                      ship={`~${window.ship}`}
+                      contact={contact}
+                    />
+                  </>
+                ) : null}
+              </Row>
+            )}
             <RichText
               mb='0'
               py='2'
@@ -126,6 +154,7 @@ export function Profile(props: any): ReactElement {
         </Row>
         {isEdit ? (
           <EditProfile
+            ref={formRef}
             ship={ship}
             contact={contact}
             s3={props.s3}