updated board UI

package.json

@@ -1,6 +1,7 @@
 {
   "name": "ipfs-boards",
   "version": "0.1.0",
+  "homepage": ".",
   "private": true,
   "dependencies": {
     "ipfs": "^0.27.7",

src/components/Board.js

@@ -1,5 +1,16 @@
 import React from 'react'
+import PostEditor from '../containers/PostEditor'
+import Post from './Post'
+import { Segment } from 'semantic-ui-react'
 
-export default function Board({ id, address }) {
+export default function Board({ id, posts }) {
-    return <div>{address}</div>
+    return <div>
+        <Segment>{id}</Segment>
+        <Segment>
+            <PostEditor />
+        </Segment>
+        <Segment>
+            <ul>{Object.keys(posts).map(i => <Post key={posts[i]} {...posts[i]}/>)}</ul>
+        </Segment>
+    </div>
 }

src/components/Boards.js

@@ -5,7 +5,7 @@ import { Button } from 'semantic-ui-react'
 
 export default function Boards({ boards, createBoard }) {
     return <List divided relaxed>
-        {Object.values(boards).map(board => <BoardsItem {...board} />)}
+        {Object.values(boards).map(board => <BoardsItem key={board.id} {...board} />)}
         <Button onClick={createBoard}>New Board</Button>
     </List>
 }

src/components/BoardsItem.js

@@ -1,8 +1,9 @@
 import React from 'react'
 import { List } from 'semantic-ui-react'
+import { Link } from 'react-router-dom'
 
-export default function BoardsItem({ title }) {
+export default function BoardsItem({ id, title }) {
-    return <List.Item>
+    return <List.Item as={Link} to={'/b/'+id+'/'}>
         <List.Icon name='comments' size='large' verticalAlign='middle' />
         <List.Content>
             <List.Header>{title}</List.Header>

src/components/Feed.js

@@ -1,14 +0,0 @@
-import React from 'react'
-import { PostEditor } from '../containers/PostEditor'
-import { Section } from 'react-semantic-ui'
-
-export default function Board({ posts }) {
-    return <div>
-        <Section>
-            <PostEditor />
-        </Section>
-        <Section>
-            <ul>{(posts || []).map(p => <li>{p}</li>)}</ul>
-        </Section>
-    </div>
-}

src/components/Post.js

@@ -0,0 +1,5 @@
+import React from 'react'
+
+export default function Post({ title, content }) {
+    return <li>{title}: {content}</li>
+}

src/reducers/boards.js

@@ -11,7 +11,16 @@ export default function BoardsReducer(state = getInitialState(), action) {
     switch (action.type) {
         case CREATED_BOARD:
             const id = getBoardIdFromAddress(action.board.address)
-            const newBoards = Object.assign({}, state.boards.boards, { [id]: action.board })
+            const board = {
+                id,
+                posts: {
+                    1: {
+                        title: 'Example Post',
+                        content: 'no, this is not real'
+                    }
+                }
+            }
+            const newBoards = Object.assign({}, state.boards.boards, { [id]: board })
             return Object.assign({}, state, { boards: newBoards })
         default:
             return state;