ui & style tweaks, cancel action

client/src/routes/Details/AssetDetails.module.scss

@@ -2,6 +2,11 @@
 
 .metaPrimary {
     margin-bottom: $spacer;
+
+    input,
+    select {
+        min-width: 12rem;
+    }
 }
 
 .copyrightHolder {
@@ -95,19 +100,49 @@
 }
 
 .metadataActions {
-    text-align: right;
+    color: $brand-grey-light;
+    margin-top: $spacer;
 
+    @media (min-width: $break-point--small) {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    &,
     button {
         font-size: $font-size-small;
+    }
+
+    button {
         margin-left: $spacer;
+        margin-top: $spacer / 2;
 
-        &:not(:first-child) {
+        @media (min-width: $break-point--small) {
-            color: $brand-grey-light;
+            margin-top: 0;
+        }
 
-            &:hover,
+        &:first-child {
-            &:focus {
+            margin-left: 0;
-                color: $brand-pink;
-            }
         }
     }
 }
+
+.metadataActionEdit {
+    text-align: center;
+    width: 100%;
+
+    button {
+        margin-left: auto;
+        margin-right: auto;
+
+        &:first-child {
+            margin-right: $spacer;
+        }
+    }
+
+    div {
+        width: 100%;
+        margin-top: $spacer / 2;
+    }
+}

client/src/routes/Details/AssetDetails.tsx

@@ -20,11 +20,11 @@ interface AssetDetailsProps {
 interface AssetDetailsState {
     isEditMode?: boolean
     isLoading?: boolean
+    feedback?: string
     dateCreated?: string
     description?: string
     copyrightHolder?: string
     categories?: string
-    feedback?: string
 }
 
 export default class AssetDetails extends PureComponent<
@@ -53,6 +53,18 @@ export default class AssetDetails extends PureComponent<
         this.setState({ isEditMode: !this.state.isEditMode })
     }
 
+    private cancelEditMode = () => {
+        // reset everything
+        this.setState({
+            isEditMode: false,
+            feedback: '',
+            dateCreated: this.props.metadata.base.dateCreated,
+            description: this.props.metadata.base.description,
+            copyrightHolder: this.props.metadata.base.copyrightHolder,
+            categories: this.props.metadata.base.categories
+        })
+    }
+
     private fetch = async (method: string, body: any) => {
         try {
             const response = await fetch(
@@ -66,13 +78,10 @@ export default class AssetDetails extends PureComponent<
                 }
             )
             const json = await response.json()
-
+            return json
-            if (json && json.status === 'error') {
-                this.setState({ feedback: json.message })
-            }
         } catch (error) {
             Logger.error(error)
-            this.setState({ feedback: error.message })
+            return error
         }
     }
 
@@ -95,21 +104,33 @@ export default class AssetDetails extends PureComponent<
                     categories
                 }
             },
+            // TODO: generate signature
             signature: ''
         }
 
-        await this.fetch('PUT', body)
+        const response = await this.fetch('PUT', body)
-        this.setState({ isLoading: false })
+
+        if (response.status !== 'success') {
+            this.setState({ feedback: response.message, isLoading: false })
+        } else {
+            this.setState({ isEditMode: false, isLoading: false })
+        }
     }
 
     private retireAsset = async () => {
         this.setState({ isLoading: true, feedback: 'Retiring asset...' })
 
         const body = {
+            // TODO: generate signature
             signature: ''
         }
 
-        await this.fetch('DELETE', body)
+        const response = await this.fetch('DELETE', body)
+
+        if (response.status !== 'success') {
+            this.setState({ feedback: response.message })
+        }
+
         this.setState({ isLoading: false })
     }
 
@@ -171,35 +192,48 @@ export default class AssetDetails extends PureComponent<
             <Markdown text={value} className={styles.description} />
         )
 
-    private MetadataActions = () => (
+    private MetadataActions = () => {
-        <div className={styles.metadataActions}>
+        // TODO: check for asset owner and return if no match
-            {this.state.isEditMode ? (
+        // const isOwner = IS OWNER
-                this.state.isLoading ? (
+        // if (!isOwner) { return }
-                    <Spinner message={this.state.feedback} />
+
+        return (
+            <div className={styles.metadataActions}>
+                {this.state.isEditMode ? (
+                    <div className={styles.metadataActionEdit}>
+                        {this.state.isLoading ? (
+                            <Spinner message={this.state.feedback} />
+                        ) : (
+                            <>
+                                <Button primary onClick={this.updateAsset}>
+                                    Save Changes
+                                </Button>
+                                <Button link onClick={this.cancelEditMode}>
+                                    Cancel
+                                </Button>
+                                {this.state.feedback !== '' && (
+                                    <div>{this.state.feedback}</div>
+                                )}
+                            </>
+                        )}
+                    </div>
                 ) : (
                     <>
-                        <Button primary onClick={this.updateAsset}>
+                        <div>You are the owner of this asset</div>
-                            Save Changes
+                        <div>
-                        </Button>
+                            <Button link onClick={this.toggleEditMode}>
-
+                                Edit Metadata
-                        {this.state.feedback !== '' && (
+                            </Button>
-                            <div>{this.state.feedback}</div>
+                            {/* TODO: Retire action needs loading/feedback */}
-                        )}
+                            <Button link onClick={this.retireAsset}>
+                                Retire Asset
+                            </Button>
+                        </div>
                     </>
-                )
+                )}
-            ) : (
+            </div>
-                <>
+        )
-                    <Button link onClick={this.toggleEditMode}>
+    }
-                        Edit Metadata
-                    </Button>
-
-                    <Button link onClick={this.retireAsset}>
-                        Retire Asset
-                    </Button>
-                </>
-            )}
-        </div>
-    )
 
 export default class AssetDetails extends PureComponent<AssetDetailsProps> {
     public render() {