refactor feedback, one component for publish & edit

src/components/pages/Publish/Feedback.module.css → src/components/molecules/MetadataFeedback.module.css

@@ -9,7 +9,7 @@
 }
 
 .box {
-  composes: box from '../../atoms/Box.module.css';
+  composes: box from '../atoms/Box.module.css';
   width: 100%;
 }
 

src/components/molecules/MetadataFeedback.tsx

@@ -0,0 +1,76 @@
+import Alert from '../atoms/Alert'
+import Button from '../atoms/Button'
+import Loader from '../atoms/Loader'
+import React, { ReactElement } from 'react'
+import styles from './MetadataFeedback.module.css'
+import SuccessConfetti from '../atoms/SuccessConfetti'
+
+interface SuccessAction {
+  name: string
+  onClick?: () => void
+  to?: string
+}
+
+function ActionSuccess({ successAction }: { successAction: SuccessAction }) {
+  return (
+    <Button
+      style="primary"
+      size="small"
+      onClick={successAction.onClick ? successAction.onClick : null}
+      to={successAction.to ? successAction.to : null}
+      className={styles.action}
+    >
+      successAction.name
+    </Button>
+  )
+}
+
+function ActionError({ setError }: { setError: (error: string) => void }) {
+  return (
+    <Button
+      style="primary"
+      size="small"
+      className={styles.action}
+      onClick={() => setError(undefined)}
+    >
+      Try Again
+    </Button>
+  )
+}
+
+export default function MetadataFeedback({
+  title,
+  error,
+  success,
+  loading,
+  successAction,
+  setError
+}: {
+  title: string
+  error: string
+  success: string
+  loading: string
+  successAction: SuccessAction
+  setError: (error: string) => void
+}): ReactElement {
+  return (
+    <div className={styles.feedback}>
+      <div className={styles.box}>
+        <h3>{title}</h3>
+        {error ? (
+          <>
+            <Alert text={error} state="error" />
+            <ActionError setError={setError} />
+          </>
+        ) : success ? (
+          <SuccessConfetti
+            success={success}
+            action={<ActionSuccess successAction={successAction} />}
+          />
+        ) : (
+          <Loader message={loading} />
+        )}
+      </div>
+    </div>
+  )
+}

src/components/organisms/AssetActions/Edit/index.tsx

@@ -1,6 +1,6 @@
 import { useOcean } from '@oceanprotocol/react'
 import { Formik } from 'formik'
-import React, { FormEvent, ReactElement, useState } from 'react'
+import React, { ReactElement, useState } from 'react'
 import {
   MetadataMarket,
   MetadataPublishForm
@@ -17,7 +17,7 @@ import Web3Feedback from '../../../molecules/Wallet/Feedback'
 import FormEditMetadata from './FormEditMetadata'
 import styles from './index.module.css'
 import { Logger } from '@oceanprotocol/lib'
-import Feedback from './Feedback'
+import MetadataFeedback from '../../../molecules/MetadataFeedback'
 
 export default function Edit({
   metadata,
@@ -72,21 +72,25 @@ export default function Edit({
       <Formik
         initialValues={getInitialValues(metadata)}
         validationSchema={validationSchema}
-        onSubmit={async (values, { setSubmitting, resetForm }) => {
+        onSubmit={async (values, { resetForm }) => {
           // move user's focus to top of screen
           window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
           // kick off editing
           await handleSubmit(values, resetForm)
-          setSubmitting(false)
         }}
       >
         {({ isSubmitting, values }) =>
           isSubmitting || hasFeedback ? (
-            <Feedback
+            <MetadataFeedback
+              title="Updating Data Set"
               error={error}
               success={success}
-              loaderText="Updating DDO..."
+              loading="Updating DDO..."
               setError={setError}
+              successAction={{
+                name: 'Refresh Page',
+                onClick: () => window.location.reload()
+              }}
             />
           ) : (
             <article className={styles.grid}>

src/components/pages/Publish/index.tsx

@@ -13,8 +13,8 @@ import { useUserPreferences } from '../../../providers/UserPreferences'
 import { DDO, Logger, Metadata } from '@oceanprotocol/lib'
 import { Persist } from '../../atoms/FormikPersist'
 import Debug from './Debug'
-import Feedback from './Feedback'
 import Alert from '../../atoms/Alert'
+import MetadataFeedback from '../../molecules/MetadataFeedback'
 
 const formName = 'ocean-publish-form'
 
@@ -77,25 +77,28 @@ export default function PublishPage({
       initialValues={initialValues}
       initialStatus="empty"
       validationSchema={validationSchema}
-      onSubmit={async (values, { setSubmitting, resetForm }) => {
+      onSubmit={async (values, { resetForm }) => {
         // move user's focus to top of screen
         window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
         // kick off publishing
         await handleSubmit(values, resetForm)
-        setSubmitting(false)
       }}
     >
       {({ values }) => (
         <>
           <Persist name={formName} ignoreFields={['isSubmitting']} />
 
           {hasFeedback ? (
-            <Feedback
+            <MetadataFeedback
+              title="Publishing Data Set"
               error={error}
               success={success}
-              publishStepText={publishStepText}
-              ddo={ddo}
+              loading={publishStepText}
               setError={setError}
+              successAction={{
+                name: 'Go to data set →',
+                to: `/asset/${ddo?.id}`
+              }}
             />
           ) : (
             <>