From 2344de08819355cda34753013af689de14b7042b Mon Sep 17 00:00:00 2001
From: Enrico Fasoli <enrico.fasoli1996@gmail.com>
Date: Fri, 9 Feb 2018 14:40:56 +0100
Subject: [PATCH] more UI polish, added other fields to metadata form

---
 src/components/Board.js           |  5 ++--
 src/components/BoardEditorForm.js | 45 +++++++++++++++++++++++++++----
 src/components/OpenBoardForm.js   | 12 +++++++--
 src/containers/BoardEditor.js     |  5 ++--
 4 files changed, 55 insertions(+), 12 deletions(-)

diff --git a/src/components/Board.js b/src/components/Board.js
index 0a1df45..72b40b6 100644
--- a/src/components/Board.js
+++ b/src/components/Board.js
@@ -6,7 +6,7 @@ import { shortenAddress } from '../utils/orbitdb';
 import moment from 'moment'
 
 export default function Board({ address, posts, metadata, replicating, stats, replicationInfo, lastReplicated }) {
-    const { email, website, title } = metadata || {}
+    const { email, website, title, description } = metadata || {}
     const peerCount = (stats.peers || []).length
     const online = peerCount > 0
     const writeable = stats.access ? (stats.access.writeable ? 'Yes' : 'No') : '?'
@@ -24,6 +24,7 @@ export default function Board({ address, posts, metadata, replicating, stats, re
                 <Header.Content>{title || 'Unnamed Board'}</Header.Content>
                 <Header.Subheader>Board</Header.Subheader>
             </Header>
+            { description ? <p>{description}</p> : null }
             <Divider />
             <List relaxed>
                 <List.Item>
@@ -75,7 +76,7 @@ export default function Board({ address, posts, metadata, replicating, stats, re
                     <List.Icon name='globe' size="large" verticalAlign="middle"/>
                     <List.Content>
                         <List.Header>Website</List.Header>
-                        <List.Content>{website ? <a href={website}>{website}</a> : 'N/A'}</List.Content>
+                        <List.Content>{website ? <a href={website} target="__blank">{website}</a> : 'N/A'}</List.Content>
                     </List.Content>
                 </List.Item>
                 <List.Item>
diff --git a/src/components/BoardEditorForm.js b/src/components/BoardEditorForm.js
index 33e8f04..aa6418e 100644
--- a/src/components/BoardEditorForm.js
+++ b/src/components/BoardEditorForm.js
@@ -1,16 +1,19 @@
 import React, { Component } from 'react'
 import { Icon, Container, Card, Form, Button } from 'semantic-ui-react'
+import { Link } from 'react-router-dom'
 
 export default class BoardEditorForm extends Component {
     constructor(props){
         super(props)
         this.state = {
-            title: props.title || ''
+            title: props.title || '',
+            website: props.website || '',
+            email: props.email || ''
         }
     }
 
     render() {
-        const { title } = this.state
+        const { title, website, email } = this.state
         const { address, updateBoardMetadata } = this.props
         return <Container>
             <Card fluid centered style={{marginTop:'5em',maxWidth:'40em'}}>
@@ -33,9 +36,31 @@ export default class BoardEditorForm extends Component {
                                 onChange={this.updateTitle.bind(this)}
                             />
                         </Form.Field>
-                        <Button fluid onClick={() => updateBoardMetadata(address, this.state)}>
-                            <Icon name="save"/> Save
-                        </Button>
+                        <Form.Group fluid widths="equal">
+                            <Form.Field>
+                                <label>Website</label>
+                                <input
+                                    value={website}
+                                    onChange={this.updateWebsite.bind(this)}
+                                />
+                            </Form.Field>
+                            <Form.Field>
+                                <label>Email</label>
+                                <input
+                                    value={email}
+                                    type="email"
+                                    onChange={this.updateEmail.bind(this)}
+                                />
+                            </Form.Field>
+                        </Form.Group>
+                        <div className="ui two buttons">
+                            <Button as={Link} to={'/'}>
+                                <Icon name="arrow left"/> Back
+                            </Button>
+                            <Button type="submit" onClick={() => updateBoardMetadata(address, this.state)}>
+                                <Icon name="save"/> Save
+                            </Button>
+                        </div>
                     </Form>
                 </Card.Content>
             </Card>
@@ -46,4 +71,14 @@ export default class BoardEditorForm extends Component {
         const title = event.target.value
         this.setState({ title })
     }
+
+    updateWebsite(event) {
+        const website = event.target.value
+        this.setState({ website })
+    }
+
+    updateEmail(event) {
+        const email = event.target.value
+        this.setState({ email })
+    }
 }
\ No newline at end of file
diff --git a/src/components/OpenBoardForm.js b/src/components/OpenBoardForm.js
index 22f53f5..8051aee 100644
--- a/src/components/OpenBoardForm.js
+++ b/src/components/OpenBoardForm.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
-import { Container, Card, Form, Button } from 'semantic-ui-react'
+import { Icon, Container, Card, Form, Button } from 'semantic-ui-react'
+import { Link } from 'react-router-dom'
 
 export default class OpenBoardForm extends Component {
     constructor(props){
@@ -38,7 +39,14 @@ export default class OpenBoardForm extends Component {
                                 onChange={this.updateAddress.bind(this)}
                             />
                         </Form.Field>
-                        <Button fluid onClick={() => openBoard({ address })}>Open</Button>
+                        <div className="ui two buttons">
+                            <Button as={Link} to={'/'}>
+                                <Icon name="arrow left"/> Back
+                            </Button>
+                            <Button type="submit" onClick={() => openBoard({ address })}>
+                                <Icon name="plus"/> Open
+                            </Button>
+                        </div>
                     </Form>
                 </Card.Content>
             </Card>
diff --git a/src/containers/BoardEditor.js b/src/containers/BoardEditor.js
index c2c001e..f8b0dc6 100644
--- a/src/containers/BoardEditor.js
+++ b/src/containers/BoardEditor.js
@@ -13,14 +13,13 @@ function BoardEditor({ boards, boardEditor, match, updateBoardMetadata }) {
         board={board}
         address={address}
         updateBoardMetadata={updateBoardMetadata}
-        {...boardEditor}
+        {...board.metadata}
     />
 }
 
 function mapStateToProps(state){
     return {
-        boards: state.boards.boards,
-        boardEditor: state.boardEditor
+        boards: state.boards.boards
     }
 }