Merge pull request #5759 from urbit/po/fix-add-submitted-state-for-notebook-form

groups: fix add submitted state for notebook form

pkg/interface/src/views/apps/publish/components/MarkdownEditor.tsx

@@ -23,6 +23,7 @@ interface MarkdownEditorProps {
   value: string;
   onChange: (s: string) => void;
   onBlur?: (e: any) => void;
+  disabled?: boolean;
 }
 
 const PromptIfDirty = () => {
@@ -39,7 +40,7 @@ const PromptIfDirty = () => {
 export function MarkdownEditor(
   props: MarkdownEditorProps & PropFunc<typeof Box>
 ) {
-  const { onBlur, placeholder, value, onChange, ...boxProps } = props;
+  const { onBlur, placeholder, value, onChange, disabled, ...boxProps } = props;
 
   const options = {
     mode: MARKDOWN_CONFIG,
@@ -56,7 +57,9 @@ export function MarkdownEditor(
 
   const handleChange = useCallback(
     (_e, _d, v: string) => {
-      onChange(v);
+      if (!disabled) {
+        onChange(v);
+      }
     },
     [onChange]
   );
@@ -93,6 +96,7 @@ export function MarkdownEditor(
       p={1}
       border={1}
       borderColor="lightGray"
+      backgroundColor={disabled ? '#eee' : '#fff'}
       borderRadius={2}
       height={['calc(100% - 22vh)', '100%']}
       {...boxProps}

pkg/interface/src/views/apps/publish/components/MarkdownField.tsx

@@ -6,14 +6,17 @@ import { MarkdownEditor } from './MarkdownEditor';
 
 export const MarkdownField = ({
   id,
+  disabled,
   ...rest
-}: { id: string } & Parameters<typeof Box>[0]) => {
+}: { id: string; disabled?: boolean } & Parameters<typeof Box>[0]) => {
   const [{ value, onBlur }, { error, touched }, { setValue }] = useField(id);
 
   const handleBlur = useCallback(
     (e: any) => {
-      _.set(e, 'target.id', id);
-      onBlur && onBlur(e);
+      if (!disabled) {
+        _.set(e, 'target.id', id);
+        onBlur && onBlur(e);
+      }
     },
     [onBlur, id]
   );
@@ -23,7 +26,7 @@ export const MarkdownField = ({
   return (
     <Box
       overflowY="hidden"
-      height='100%'
+      height="100%"
       width="100%"
       display="flex"
       flexDirection="column"
@@ -35,6 +38,7 @@ export const MarkdownField = ({
         onBlur={handleBlur}
         value={value}
         onChange={setValue}
+        disabled={disabled}
       />
       <ErrorLabel mt={2} hasError={Boolean(error && touched)}>
         {error}

pkg/interface/src/views/apps/publish/components/NoteForm.tsx

@@ -1,5 +1,7 @@
 import {
-  Button, Col, ManagedTextInputField as Input,
+  Button,
+  Col,
+  ManagedTextInputField as Input,
   Row
 } from '@tlon/indigo-react';
 import { Form, Formik, FormikHelpers } from 'formik';
@@ -31,7 +33,8 @@ export interface PostFormSchema {
 }
 
 export function PostForm(props: PostFormProps) {
-  const { initial, onSubmit, submitLabel, loadingText, cancel, history } = props;
+  const { initial, onSubmit, submitLabel, loadingText, cancel, history } =
+    props;
 
   return (
     <Col width="100%" height="100%" p={[2, 4]}>
@@ -40,30 +43,49 @@ export function PostForm(props: PostFormProps) {
         initialValues={initial}
         onSubmit={onSubmit}
       >
-        <Form style={{ display: 'contents' }}>
-          <Row flexShrink={0} flexDirection={['column-reverse', 'row']} mb={4} gapX={4} justifyContent='space-between'>
-            <Input maxWidth='40rem' width='100%' flexShrink={[0, 1]} placeholder="Post Title" id="title" />
-              <Row flexDirection={['column', 'row']} mb={[4,0]}>
-              <AsyncButton
-                ml={[0,2]}
-                flexShrink={0}
-                primary
-                loadingText={loadingText}
-              >
-                {submitLabel}
-              </AsyncButton>
-              {cancel && <Button
-              ml={[0,2]}
-              mt={[2,0]}
-              onClick={() => {
-                history.goBack();
-              }}
-              type="button"
-                         >Cancel</Button>}
+        {({ isSubmitting }) => (
+          <Form style={{ display: 'contents' }}>
+            <Row
+              flexShrink={0}
+              flexDirection={['column-reverse', 'row']}
+              mb={4}
+              gapX={4}
+              justifyContent="space-between"
+            >
+              <Input
+                maxWidth="40rem"
+                width="100%"
+                flexShrink={[0, 1]}
+                placeholder="Post Title"
+                id="title"
+                disabled={isSubmitting}
+              />
+              <Row flexDirection={['column', 'row']} mb={[4, 0]}>
+                <AsyncButton
+                  ml={[0, 2]}
+                  flexShrink={0}
+                  primary
+                  loadingText={loadingText}
+                >
+                  {submitLabel}
+                </AsyncButton>
+                {cancel && (
+                  <Button
+                    ml={[0, 2]}
+                    mt={[2, 0]}
+                    onClick={() => {
+                      history.goBack();
+                    }}
+                    type="button"
+                  >
+                    Cancel
+                  </Button>
+                )}
+              </Row>
             </Row>
-          </Row>
-          <MarkdownField flexGrow={1} id="body" />
-        </Form>
+            <MarkdownField flexGrow={1} id="body" disabled={isSubmitting} />
+          </Form>
+        )}
       </Formik>
     </Col>
   );