From aa3244eedf9c0608cb572bb1737aa2ed3a5cbd93 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Fri, 10 Jul 2020 17:37:45 +0200
Subject: [PATCH] file api & toast fixes

---
 src/@types/MetaData.d.ts                      |  9 ++----
 src/components/molecules/FilesInput/Input.tsx |  2 +-
 src/components/molecules/FilesInput/index.tsx |  2 +-
 src/global/Styles.tsx                         |  9 +++++-
 src/global/_toast.css                         | 30 +++++++++++++++++++
 src/global/styles.css                         |  1 +
 src/utils/index.ts                            | 10 ++-----
 7 files changed, 46 insertions(+), 17 deletions(-)
 create mode 100644 src/global/_toast.css

diff --git a/src/@types/MetaData.d.ts b/src/@types/MetaData.d.ts
index 896536d70..b3fdd91a8 100644
--- a/src/@types/MetaData.d.ts
+++ b/src/@types/MetaData.d.ts
@@ -1,16 +1,11 @@
 import { File, MetaData, AdditionalInformation } from '@oceanprotocol/squid'
 import { ServiceMetadata } from '@oceanprotocol/squid/dist/node/ddo/Service'
 
-export interface Sample {
-  name: string
-  url: string
-}
-
 export declare type AccessType = 'Download' | 'Compute'
 
 export interface AdditionalInformationMarket extends AdditionalInformation {
   description: string
-  links?: Sample[] // redefine existing key, cause not specific enough in Squid
+  links?: File[] // redefine existing key, cause not specific enough in Squid
   termsAndConditions: boolean
   dateRange?: [string, string]
   access: AccessType | string
@@ -33,7 +28,7 @@ export interface MetaDataPublishForm {
   // ---- optional fields ----
   copyrightHolder?: string
   tags?: string
-  links?: string
+  links?: string | File[]
 }
 
 export interface ServiceMetaDataMarket extends ServiceMetadata {
diff --git a/src/components/molecules/FilesInput/Input.tsx b/src/components/molecules/FilesInput/Input.tsx
index 897694fde..5f62b1e64 100644
--- a/src/components/molecules/FilesInput/Input.tsx
+++ b/src/components/molecules/FilesInput/Input.tsx
@@ -13,7 +13,7 @@ export default function FileInput({
   handleButtonClick(e: React.SyntheticEvent, data: string): void
   isLoading: boolean
 }): ReactElement {
-  const [field] = useField(props)
+  const [field] = useField(props as any)
 
   return (
     <>
diff --git a/src/components/molecules/FilesInput/index.tsx b/src/components/molecules/FilesInput/index.tsx
index d5f124714..6493ad72b 100644
--- a/src/components/molecules/FilesInput/index.tsx
+++ b/src/components/molecules/FilesInput/index.tsx
@@ -13,7 +13,7 @@ interface Values {
 export default function FilesInput(
   props: FormikProps<Values | File>
 ): ReactElement {
-  const [field, meta, helpers] = useField(props)
+  const [field, meta, helpers] = useField(props as any)
   const [isLoading, setIsLoading] = useState(false)
 
   async function handleButtonClick(e: React.SyntheticEvent, url: string) {
diff --git a/src/global/Styles.tsx b/src/global/Styles.tsx
index 9440f6929..4f96c7b48 100644
--- a/src/global/Styles.tsx
+++ b/src/global/Styles.tsx
@@ -1,12 +1,19 @@
 import React, { ReactElement, ReactNode } from 'react'
+import { ToastContainer } from 'react-toastify'
 
 import '@oceanprotocol/typographies/css/ocean-typo.css'
 import '../global/styles.css'
+import 'react-toastify/dist/ReactToastify.css'
 
 export default function Styles({
   children
 }: {
   children: ReactNode
 }): ReactElement {
-  return <>{children}</>
+  return (
+    <>
+      {children}
+      <ToastContainer position="bottom-right" newestOnTop />
+    </>
+  )
 }
diff --git a/src/global/_toast.css b/src/global/_toast.css
new file mode 100644
index 000000000..bb6a895b8
--- /dev/null
+++ b/src/global/_toast.css
@@ -0,0 +1,30 @@
+div.Toastify__toast {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-bold);
+  border-radius: var(--border-radius);
+  box-shadow: 0 6px 15px 0 rgba(0, 0, 0, 0.05);
+  padding: calc(var(--spacer) / 2) var(--spacer);
+  background: var(--brand-white);
+  color: var(--brand-grey);
+}
+
+div.Toastify__toast--error {
+  background: var(--brand-alert-red);
+  color: var(--brand-white);
+}
+
+div.Toastify__toast--success {
+  background: var(--brand-alert-green);
+  color: var(--brand-white);
+}
+
+div.Toastify__toast--info {
+  background: var(--brand-white);
+  color: var(--brand-grey);
+}
+
+div.Toastify__toast--warning {
+  background: var(--brand-alert-yellow);
+  color: var(--brand-white);
+}
diff --git a/src/global/styles.css b/src/global/styles.css
index fe3f60e9f..ae2a8acfc 100644
--- a/src/global/styles.css
+++ b/src/global/styles.css
@@ -133,3 +133,4 @@ fieldset {
 }
 
 @import '_code.css';
+@import '_toast.css';
diff --git a/src/utils/index.ts b/src/utils/index.ts
index e034a315c..a542bece9 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -58,13 +58,9 @@ export async function getFileInfo(url: string): Promise<File> {
     data: { url }
   })
 
-  if (response.status > 299) {
-    throw new Error(response.statusText)
-  }
-
-  if (!response.data.result) {
-    toast.error(response.data.message)
-    return { contentLength: undefined, contentType: '', url }
+  if (response.status > 299 || !response.data.result) {
+    toast.error('Could not connect to File API')
+    return
   }
 
   const { contentLength, contentType } = response.data.result