UI work

src/components/Board.js

@@ -1,15 +1,74 @@
 import React from 'react'
 import Post from './Post'
-import { Segment, Button } from 'semantic-ui-react'
+import { Divider, Icon, Grid, Segment, Header, List, Button, Card } from 'semantic-ui-react'
 import { Link } from 'react-router-dom'
 import { shortenAddress } from '../utils/orbitdb';
 
-export default function Board({ address, posts }) {
-    return <div>
-        <Segment>{address}</Segment>
-        <Segment><Button as={Link} to={shortenAddress(address)+'/p/new'}>New Post</Button></Segment>
-        <Segment>
-            <ul>{Object.keys(posts || {}).map(i => <Post key={posts[i].multihash} {...posts[i]}/>)}</ul>
-        </Segment>
-    </div>
+export default function Board({ address, posts, metadata }) {
+    const { email, website, title } = metadata || {}
+    const url = window.location.href
+    return <Grid container divided colums={2}>
+        <Grid.Column width={8}>
+            <Header size='large' style={{marginTop:'.5em'}}>
+                <Header.Content>{title || 'Unnamed Board'}</Header.Content>
+                <Header.Subheader>Board</Header.Subheader>
+            </Header>
+            <Divider />
+            <List relaxed>
+                <List.Item>
+                    <List.Icon name='linkify' size="large" verticalAlign="middle"/>
+                    <List.Content>
+                        <List.Header>Board Address</List.Header>
+                        <List.Content>
+                            <a href={url}>{address}</a>
+                        </List.Content>
+                    </List.Content>
+                </List.Item>
+                <List.Item>
+                    <List.Icon name='users' size="large" verticalAlign="middle"/>
+                    <List.Content>
+                        <List.Header>Users</List.Header>
+                        <List.Content>?</List.Content>
+                    </List.Content>
+                </List.Item>
+                <List.Item>
+                    <List.Icon name='file text outline' size="large" verticalAlign="middle"/>
+                    <List.Content>
+                        <List.Header>Posts</List.Header>
+                        <List.Content>{Object.values(posts || {}).length}</List.Content>
+                    </List.Content>
+                </List.Item>
+                <List.Item>
+                    <List.Icon name='wifi' size="large" verticalAlign="middle"/>
+                    <List.Content>
+                        <List.Header>Replication Status</List.Header>
+                        <List.Content>Idle</List.Content>
+                    </List.Content>
+                </List.Item>
+                <List.Item>
+                    <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>
+                </List.Item>
+                <List.Item>
+                    <List.Icon name='mail' size="large" verticalAlign="middle"/>
+                    <List.Content>
+                        <List.Header>Mail</List.Header>
+                        <List.Content>{email ? <a href={'mailto:'+email}>{email}</a> : 'N/A'}</List.Content>
+                    </List.Content>
+                </List.Item>
+            </List>
+            <div className='ui two buttons'>
+                <Button>Edit</Button>
+                <Button as={Link} to={shortenAddress(address)+'/p/new'}>New Post</Button>
+            </div>
+        </Grid.Column>
+        <Grid.Column width={8}>
+            <Card.Group className="centered" style={{marginTop:'.5em'}}>
+                {Object.keys(posts || {}).map(i => <Post key={posts[i].multihash} {...posts[i]}/>)}
+            </Card.Group>
+        </Grid.Column>
+    </Grid>
 }

src/components/Post.js

@@ -1,5 +1,16 @@
 import React from 'react'
+import { Card, Icon } from 'semantic-ui-react'
 
 export default function Post({ title, multihash}) {
-    return <li>{title}: {multihash}</li>
+    return <Card fluid>
+        <Card.Content>
+            <Icon name="file text outline"/> {title}
+        </Card.Content>
+        <Card.Content style={{wordBreak:'break-all'}}>
+            <Icon name="chain"/> <a href={'//ipfs.io/ipfs/'+multihash}>View</a>
+        </Card.Content>
+        <Card.Content extra>
+            <Icon name="comments"/> Comments not supported yet
+        </Card.Content>
+    </Card>
 }

src/containers/WithBoard.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import { Loader, Dimmer } from 'semantic-ui-react'
 import { connect } from 'react-redux'
 import { openBoard } from '../actions/board'
 import { getBoardAddress } from '../utils/orbitdb'
@@ -40,7 +41,9 @@ export default function WithBoard(WrappedComponent) {
             if (board) {
                 return <WrappedComponent {...board} {...this.props} />
             } else {
-                return <div>Opening this board...</div>
+                return <Dimmer page active={true}> 
+                    Opening this board 
+                </Dimmer>
             }
         }
     }

src/utils/ipfs.js

@@ -1,6 +1,8 @@
-import multihashes from 'multihashes'
-
 export async function ipfsPut(content) {
-    const dagNode = await window.ipfs.object.put(Buffer.from(content))
-    return multihashes.toB58String(dagNode.multihash)
+    const obj = {
+        content: Buffer.from(content),
+        path: '/'
+    }
+    const response = await window.ipfs.files.add(obj)
+    return response[0].hash
 }