Improve final-form submit-button and submission-error consistency

app/actions/CompanyActions.ts

@@ -404,7 +404,7 @@ export function addSemester({
         },
         meta: {
           errorMessage: 'Legge til semester feilet',
-          successMessage: 'Semest lagt til!',
+          successMessage: 'Semester lagt til!',
         },
       })
     );

app/components/CommentForm/CommentForm.css

@@ -6,7 +6,7 @@
   margin: 0;
 }
 
-.submittable {
+.submitButton:disabled {
   opacity: 0;
   transition: opacity var(--easing-medium);
 }

app/components/CommentForm/index.tsx

@@ -1,17 +1,15 @@
-import { Button } from '@webkom/lego-bricks';
-import cx from 'classnames';
 import { Field } from 'react-final-form';
 import { addComment } from 'app/actions/CommentActions';
 import Card from 'app/components/Card';
 import { TextInput } from 'app/components/Form';
 import LegoFinalForm from 'app/components/Form/LegoFinalForm';
 import SubmissionError from 'app/components/Form/SubmissionError';
+import { SubmitButton } from 'app/components/Form/SubmitButton';
 import { ProfilePicture } from 'app/components/Image';
 import Flex from 'app/components/Layout/Flex';
 import { useAppDispatch } from 'app/store/hooks';
 import type { ID } from 'app/store/models';
 import type { CurrentUser } from 'app/store/models/User';
-import { spySubmittable } from 'app/utils/formSpyUtils';
 import { createValidator, legoEditorRequired } from 'app/utils/validation';
 import styles from './CommentForm.css';
 
@@ -49,17 +47,16 @@ const CommentForm = ({
       <LegoFinalForm
         validateOnSubmitOnly
         validate={validate}
-        onSubmit={({ text }, form) => {
-          // Clear the form value
-          form.change('text', undefined);
-
-          dispatch(
+        onSubmit={async ({ text }, form) => {
+          await dispatch(
             addComment({
               contentTarget,
               text,
               parent,
             })
           );
+
+          form.restart();
         }}
       >
         {({ handleSubmit }) => {
@@ -79,14 +76,9 @@ const CommentForm = ({
                   />
                 </div>
 
-                {spySubmittable((submittable) => (
-                  <Button
-                    type="submit"
-                    className={cx(!submittable && styles.submittable)}
-                  >
-                    {submitText}
-                  </Button>
-                ))}
+                <SubmitButton className={styles.submitButton}>
+                  {submitText}
+                </SubmitButton>
               </Flex>
 
               <SubmissionError />

app/components/Form/SubmissionError.css

@@ -0,0 +1,3 @@
+.submissionErrorContainer {
+  margin-bottom: 15px;
+}

app/components/Form/SubmissionError.tsx

@@ -1,7 +1,16 @@
 import { RenderErrorMessage } from 'app/components/Form/Field';
 import { spyFormError } from 'app/utils/formSpyUtils';
+import styles from './SubmissionError.css';
 
 const SubmissionError = () =>
-  spyFormError((error) => <>{error && <RenderErrorMessage error={error} />}</>);
+  spyFormError((error) => (
+    <>
+      {error && (
+        <div className={styles.submissionErrorContainer}>
+          <RenderErrorMessage error={error} />
+        </div>
+      )}
+    </>
+  ));
 
 export default SubmissionError;

app/components/Form/SubmitButton.tsx

@@ -1,14 +1,21 @@
 import { Button } from '@webkom/lego-bricks';
 import { spySubmittable } from 'app/utils/formSpyUtils';
-import type { ReactNode } from 'react';
+import type { MouseEventHandler, ReactNode } from 'react';
 
 type Props = {
   children: ReactNode;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  className?: string;
 };
 
-export const SubmitButton = ({ children }: Props) =>
+export const SubmitButton = ({ children, onClick, className }: Props) =>
   spySubmittable((submittable) => (
-    <Button submit disabled={!submittable}>
+    <Button
+      submit
+      disabled={!submittable}
+      onClick={onClick}
+      className={className}
+    >
       {children}
     </Button>
   ));

app/components/LoginForm/LoginForm.tsx

@@ -1,31 +1,15 @@
-import { Button } from '@webkom/lego-bricks';
 import { FORM_ERROR } from 'final-form';
 import { Field } from 'react-final-form';
 import { login } from 'app/actions/UserActions';
 import { Form } from 'app/components/Form';
 import LegoFinalForm from 'app/components/Form/LegoFinalForm';
+import SubmissionError from 'app/components/Form/SubmissionError';
+import { SubmitButton } from 'app/components/Form/SubmitButton';
 import TextInput from 'app/components/Form/TextInput';
 import { useAppDispatch } from 'app/store/hooks';
 import type { Action } from 'app/types';
-import { spyFormError, spySubmittable } from 'app/utils/formSpyUtils';
 import { createValidator, required } from 'app/utils/validation';
 
-type ErrorProps = {
-  error: string;
-};
-
-const Error = ({ error }: ErrorProps) => {
-  return (
-    <p
-      style={{
-        color: 'var(--danger-color)',
-      }}
-    >
-      {error}
-    </p>
-  );
-};
-
 type FormValues = {
   username: string;
   password: string;
@@ -84,15 +68,8 @@ const LoginForm = (props: Props) => {
               component={TextInput.Field}
             />
 
-            {spyFormError((error) => (
-              <>{error && <Error error={error} />}</>
-            ))}
-
-            {spySubmittable((submittable) => (
-              <Button dark submit disabled={!submittable}>
-                Logg inn
-              </Button>
-            ))}
+            <SubmissionError />
+            <SubmitButton>Logg inn</SubmitButton>
           </Form>
         )}
       </LegoFinalForm>

app/routes/bdb/components/AddSemester.tsx

@@ -1,9 +1,10 @@
-import { Button } from '@webkom/lego-bricks';
 import { useState } from 'react';
 import { Field } from 'react-final-form';
 import { Content } from 'app/components/Content';
 import { TextInput, RadioButton, MultiSelectGroup } from 'app/components/Form';
 import LegoFinalForm from 'app/components/Form/LegoFinalForm';
+import SubmissionError from 'app/components/Form/SubmissionError';
+import { SubmitButton } from 'app/components/Form/SubmitButton';
 import type { SemesterStatusEntity } from 'app/reducers/companies';
 import type { CompanySemesterEntity } from 'app/reducers/companySemesters';
 import { createValidator, required } from 'app/utils/validation';
@@ -22,7 +23,6 @@ type Props = {
     arg1: Record<string, any> | null | undefined
   ) => Promise<any>;
   companyId: number;
-  submitting: boolean;
   autoFocus: any;
   companySemesters: Array<Record<string, any>>;
   addSemester: (arg0: CompanySemesterEntity) => Promise<any>;
@@ -86,7 +86,7 @@ const AddSemester = (props: Props) => {
     }
   };
 
-  const { companyId, submitting, autoFocus, deleteCompany } = props;
+  const { companyId, autoFocus, deleteCompany } = props;
 
   return (
     <Content>
@@ -189,13 +189,8 @@ const AddSemester = (props: Props) => {
 
               <div className={styles.clear} />
 
-              <Button
-                disabled={submitting}
-                onClick={() => setSubmit(true)}
-                submit
-              >
-                Lagre
-              </Button>
+              <SubmissionError />
+              <SubmitButton onClick={() => setSubmit(true)}>Lagre</SubmitButton>
             </form>
           )}
         </LegoFinalForm>

app/routes/bdb/components/CompanyEditor.tsx

@@ -1,4 +1,4 @@
-import { LoadingIndicator, Button } from '@webkom/lego-bricks';
+import { LoadingIndicator } from '@webkom/lego-bricks';
 import { Field } from 'react-final-form';
 import { Content } from 'app/components/Content';
 import {
@@ -10,6 +10,8 @@ import {
   MultiSelectGroup,
 } from 'app/components/Form';
 import LegoFinalForm from 'app/components/Form/LegoFinalForm';
+import SubmissionError from 'app/components/Form/SubmissionError';
+import { SubmitButton } from 'app/components/Form/SubmitButton';
 import InfoBubble from 'app/components/InfoBubble';
 import type {
   CompanyEntity,
@@ -22,7 +24,6 @@ import styles from './bdb.css';
 type Props = {
   uploadFile: (arg0: Record<string, any>) => Promise<any>;
   company: CompanyEntity;
-  submitting: boolean;
   autoFocus: any;
   fetching: boolean;
   submitFunction: (arg0: SubmitCompanyEntity) => Promise<any>;
@@ -36,7 +37,6 @@ const validate = createValidator({
 
 const CompanyEditor = ({
   company,
-  submitting,
   autoFocus,
   uploadFile,
   fetching,
@@ -250,10 +250,8 @@ const CompanyEditor = ({
                 />
               </div>
 
-              <div className={styles.clear} />
-              <Button disabled={submitting} submit>
-                Lagre
-              </Button>
+              <SubmissionError />
+              <SubmitButton>Lagre</SubmitButton>
             </form>
           )}
         </LegoFinalForm>

app/routes/companyInterest/components/CompanyInterestPage.tsx

@@ -5,7 +5,6 @@ import { Field, FormSpy } from 'react-final-form';
 import { FieldArray } from 'react-final-form-arrays';
 import { Helmet } from 'react-helmet-async';
 import { Link } from 'react-router-dom';
-import { SubmissionError } from 'redux-form';
 import english from 'app/assets/great_britain.svg';
 import norwegian from 'app/assets/norway.svg';
 import Card from 'app/components/Card';
@@ -14,21 +13,22 @@ import { FlexRow } from 'app/components/FlexBox';
 import {
   TextEditor,
   TextInput,
-  Button,
   CheckBox,
   SelectInput,
   RadioButton,
   MultiSelectGroup,
 } from 'app/components/Form';
 import LegoFinalForm from 'app/components/Form/LegoFinalForm';
+import SubmissionError from 'app/components/Form/SubmissionError';
+import { SubmitButton } from 'app/components/Form/SubmitButton';
 import Icon from 'app/components/Icon';
 import { Image } from 'app/components/Image';
 import Flex from 'app/components/Layout/Flex';
 import { readmeIfy } from 'app/components/ReadmeLogo';
 import Tooltip from 'app/components/Tooltip';
 import type { CompanyInterestEntity } from 'app/reducers/companyInterest';
 import type { CompanySemesterEntity } from 'app/reducers/companySemesters';
-import { spySubmittable, spyValues } from 'app/utils/formSpyUtils';
+import { spyValues } from 'app/utils/formSpyUtils';
 import {
   createValidator,
   required,
@@ -411,12 +411,7 @@ const CompanyInterestPage = (props: Props) => {
             ? '/companyInterest/'
             : '/pages/bedrifter/for-bedrifter'
         )
-      )
-      .catch((err) => {
-        if (err.payload && err.payload.response) {
-          throw new SubmissionError(err.payload.response.jsonData);
-        }
-      });
+      );
   };
 
   const { language } = props;
@@ -855,13 +850,12 @@ const CompanyInterestPage = (props: Props) => {
               {interestText.priorityReasoning[language]}
             </div>
 
-            {spySubmittable((submittable) => (
-              <Button secondary disabled={!submittable} submit>
-                {props.edit
-                  ? 'Oppdater bedriftsinteresse'
-                  : FORM_LABELS.create[language]}
-              </Button>
-            ))}
+            <SubmissionError />
+            <SubmitButton>
+              {props.edit
+                ? 'Oppdater bedriftsinteresse'
+                : FORM_LABELS.create[language]}
+            </SubmitButton>
           </form>
         )}
       </LegoFinalForm>