From 8a20552268ea184428a43ef95e265b28e7a72b12 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 12 Jan 2022 16:22:52 +0000
Subject: [PATCH] more styling, button disabling, hack in isContinueDisabled

* closes #978
---
 content/publish/feedback.json                 | 20 +++++++++++
 src/components/Publish/Actions/index.tsx      | 26 +++++++++++---
 .../Publish/Submission/Feedback.module.css    |  7 ++--
 src/components/Publish/Submission/index.tsx   |  2 --
 src/components/Publish/_constants.tsx         | 25 ++-----------
 src/components/Publish/_types.ts              |  4 +--
 src/components/Publish/index.tsx              | 36 +++++++++----------
 7 files changed, 67 insertions(+), 53 deletions(-)
 create mode 100644 content/publish/feedback.json

diff --git a/content/publish/feedback.json b/content/publish/feedback.json
new file mode 100644
index 000000000..c0c5a7475
--- /dev/null
+++ b/content/publish/feedback.json
@@ -0,0 +1,20 @@
+{
+  "1": {
+    "name": "Create Tokens & Pricing",
+    "description": "The Data NFT representing your asset, the Datatokens defining access to it, and the pricing schema are all created in one transaction.",
+    "status": "pending",
+    "txCount": 1
+  },
+  "2": {
+    "name": "Construct & Encrypt DDO",
+    "description": "Entered metadata is transformed into a structured document (DDO) where the file URLs, and the whole DDO itself are encrypted.",
+    "status": "pending",
+    "txCount": 0
+  },
+  "3": {
+    "name": "Publish DDO",
+    "description": "The encrypted DDO is stored on-chain as part of the Data NFT. Indexers like Aquarius can decrypt the DDO for displaying purposes, but the file URLs can only be decrypted by exchanging the respective datatokens for this asset.",
+    "status": "pending",
+    "txCount": 1
+  }
+}
diff --git a/src/components/Publish/Actions/index.tsx b/src/components/Publish/Actions/index.tsx
index 4f2e6676d..4101ae375 100644
--- a/src/components/Publish/Actions/index.tsx
+++ b/src/components/Publish/Actions/index.tsx
@@ -10,8 +10,13 @@ export default function Actions({
 }: {
   scrollToRef: RefObject<any>
 }): ReactElement {
-  const { values, isValid, setFieldValue }: FormikContextType<FormPublishData> =
-    useFormikContext()
+  const {
+    values,
+    errors,
+    isValid,
+    isSubmitting,
+    setFieldValue
+  }: FormikContextType<FormPublishData> = useFormikContext()
 
   function handleNext(e: FormEvent) {
     e.preventDefault()
@@ -25,21 +30,32 @@ export default function Actions({
     scrollToRef.current.scrollIntoView()
   }
 
+  const isContinueDisabled =
+    (values.user.stepCurrent === 1 && errors.metadata !== undefined) ||
+    (values.user.stepCurrent === 2 && errors.services !== undefined) ||
+    (values.user.stepCurrent === 3 && errors.pricing !== undefined)
+
   return (
     <footer className={styles.actions}>
       {values.user.stepCurrent > 1 && (
-        <Button onClick={handlePrevious}>Back</Button>
+        <Button onClick={handlePrevious} disabled={isSubmitting}>
+          Back
+        </Button>
       )}
 
       {values.user.stepCurrent < wizardSteps.length ? (
-        <Button style="primary" onClick={handleNext}>
+        <Button
+          style="primary"
+          onClick={handleNext}
+          disabled={isContinueDisabled}
+        >
           Continue
         </Button>
       ) : (
         <Button
           type="submit"
           style="primary"
-          disabled={values.user.accountId === ''}
+          disabled={values.user.accountId === '' || !isValid || isSubmitting}
         >
           Submit
         </Button>
diff --git a/src/components/Publish/Submission/Feedback.module.css b/src/components/Publish/Submission/Feedback.module.css
index 52003c2c2..d68a2c272 100644
--- a/src/components/Publish/Submission/Feedback.module.css
+++ b/src/components/Publish/Submission/Feedback.module.css
@@ -2,6 +2,7 @@
   padding: 0;
   margin: 0 auto;
   max-width: 40rem;
+  padding-top: var(--spacer);
 }
 
 .feedback li {
@@ -13,7 +14,7 @@
 }
 
 .feedback li:last-child {
-  border-bottom: none;
+  margin-bottom: 0;
 }
 
 /* inject the numbers */
@@ -23,8 +24,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 1.4rem;
-  height: 1.4rem;
+  width: 1.5rem;
+  height: 1.5rem;
   border-radius: 50%;
   border: 2px solid var(--border-color);
   margin-right: calc(var(--spacer) / 4);
diff --git a/src/components/Publish/Submission/index.tsx b/src/components/Publish/Submission/index.tsx
index 9207c67ca..65ffb4246 100644
--- a/src/components/Publish/Submission/index.tsx
+++ b/src/components/Publish/Submission/index.tsx
@@ -9,8 +9,6 @@ export default function Submission(): ReactElement {
 
   return (
     <div className={styles.submission}>
-      <h3>Submission</h3>
-
       <Feedback />
     </div>
   )
diff --git a/src/components/Publish/_constants.tsx b/src/components/Publish/_constants.tsx
index 042d1a5b6..e41286580 100644
--- a/src/components/Publish/_constants.tsx
+++ b/src/components/Publish/_constants.tsx
@@ -8,6 +8,7 @@ import ServicesFields from './Services'
 import Preview from './Preview'
 import Submission from './Submission'
 import { ServiceComputeOptions } from '@oceanprotocol/lib'
+import contentFeedback from '../../../content/publish/feedback.json'
 
 export const wizardSteps: StepContent[] = [
   {
@@ -121,26 +122,4 @@ export const algorithmContainerPresets: MetadataAlgorithmContainer[] = [
   }
 ]
 
-export const initialPublishFeedback: PublishFeedback = {
-  1: {
-    name: 'Create Tokens & Pricing',
-    description:
-      'The Data NFT representing your asset, the Datatokens defining access to it, and the pricing schema are all created in one transaction.',
-    status: 'pending',
-    txCount: 1
-  },
-  2: {
-    name: 'Construct & Encrypt DDO',
-    description:
-      'The file URLs are encrypted, and the whole DDO is encrypted too.',
-    status: 'pending',
-    txCount: 0
-  },
-  3: {
-    name: 'Publish DDO',
-    description:
-      'The encrypted DDO is stored on-chain as part of the Data NFT. Indexers like Aquarius can decrypt the DDO for displaying purposes, but the file URLs can only be decrypted by exchanging the respective datatokens for this asset.',
-    status: 'pending',
-    txCount: 1
-  }
-}
+export const initialPublishFeedback: PublishFeedback = contentFeedback
diff --git a/src/components/Publish/_types.ts b/src/components/Publish/_types.ts
index b93afc21c..4f529f3b1 100644
--- a/src/components/Publish/_types.ts
+++ b/src/components/Publish/_types.ts
@@ -53,10 +53,10 @@ export interface StepContent {
 }
 
 export interface PublishFeedback {
-  [key: number]: {
+  [key: string]: {
     name: string
     description: string
-    status: 'success' | 'error' | 'pending' | 'active'
+    status: 'success' | 'error' | 'pending' | 'active' | string
     txCount: number
     message?: string
     txHash?: string
diff --git a/src/components/Publish/index.tsx b/src/components/Publish/index.tsx
index 8f4e89956..343251343 100644
--- a/src/components/Publish/index.tsx
+++ b/src/components/Publish/index.tsx
@@ -62,8 +62,8 @@ export default function PublishPage({
     try {
       setFeedback((prevState) => ({
         ...prevState,
-        1: {
-          ...prevState[1],
+        '1': {
+          ...prevState['1'],
           status: 'active',
           txCount: values.pricing.type === 'dynamic' ? 2 : 1
         }
@@ -92,8 +92,8 @@ export default function PublishPage({
 
       setFeedback((prevState) => ({
         ...prevState,
-        1: {
-          ...prevState[1],
+        '1': {
+          ...prevState['1'],
           status: isSuccess ? 'success' : 'error',
           txHash
         }
@@ -102,8 +102,8 @@ export default function PublishPage({
       LoggerInstance.error('[publish] error', error.message)
       setFeedback((prevState) => ({
         ...prevState,
-        1: {
-          ...prevState[1],
+        '1': {
+          ...prevState['1'],
           status: 'error',
           message: error.message
         }
@@ -116,8 +116,8 @@ export default function PublishPage({
     try {
       setFeedback((prevState) => ({
         ...prevState,
-        2: {
-          ...prevState[2],
+        '2': {
+          ...prevState['2'],
           status: _datatokenAddress && _erc721Address ? 'active' : 'error'
         }
       }))
@@ -152,8 +152,8 @@ export default function PublishPage({
 
       setFeedback((prevState) => ({
         ...prevState,
-        2: {
-          ...prevState[2],
+        '2': {
+          ...prevState['2'],
           status: encryptedDdo ? 'success' : 'error'
         }
       }))
@@ -161,8 +161,8 @@ export default function PublishPage({
       LoggerInstance.error('[publish] error', error.message)
       setFeedback((prevState) => ({
         ...prevState,
-        2: {
-          ...prevState[2],
+        '2': {
+          ...prevState['2'],
           status: 'error',
           message: error.message
         }
@@ -175,8 +175,8 @@ export default function PublishPage({
     try {
       setFeedback((prevState) => ({
         ...prevState,
-        3: {
-          ...prevState[3],
+        '3': {
+          ...prevState['3'],
           status: _ddo && _encryptedDdo ? 'active' : 'error'
         }
       }))
@@ -208,8 +208,8 @@ export default function PublishPage({
 
       setFeedback((prevState) => ({
         ...prevState,
-        3: {
-          ...prevState[3],
+        '3': {
+          ...prevState['3'],
           status: res ? 'success' : 'error',
           txHash
         }
@@ -218,8 +218,8 @@ export default function PublishPage({
       LoggerInstance.error('[publish] error', error.message)
       setFeedback((prevState) => ({
         ...prevState,
-        3: {
-          ...prevState[3],
+        '3': {
+          ...prevState['3'],
           status: 'error',
           message: error.message
         }