WIP prototype

src/actions/actionTypes.js

@@ -1,9 +1,8 @@
 
 export const ADD_POST = 'ADD_POST'
 
-export const CREATE_BOARD = 'CREATE_BOARD'
-export const CREATING_BOARD = 'CREATING_BOARD'
-export const CREATED_BOARD = 'CREATED_BOARD'
+export const OPEN_BOARD = 'OPEN_BOARD'
+export const OPENED_BOARD = 'OPENED_BOARD'
 
 export const UPDATE_BOARD = 'UPDATE_BOARD'
 

src/actions/board.js

@@ -1,27 +1,19 @@
 import {
-    CREATE_BOARD,
-    CREATING_BOARD,
-    CREATED_BOARD,
+    OPEN_BOARD,
+    OPENED_BOARD,
     BOARD_ERROR
 } from './actionTypes'
 
-export function createBoard(board) {
+export function openBoard(board) {
     return {
-        type: CREATE_BOARD,
-        board
-    }
-}
-
-export function creatingBoard(board) {
-    return {
-        type: CREATING_BOARD,
+        type: OPEN_BOARD,
         board
     }
 }
 
 export function createdBoard(board) {
     return {
-        type: CREATED_BOARD,
+        type: OPENED_BOARD,
         board
     }
 }

src/actions/post.js

@@ -1,9 +1,9 @@
 import { ADD_POST } from './actionTypes'
 
-export function addPost(boardId, post) {
+export function addPost(address, post) {
     return {
         type: ADD_POST,
         post,
-        boardId
+        address 
     }
 }

src/components/App.js

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import { Switch, Route, withRouter } from 'react-router-dom'
 import Boards from '../containers/Boards'
-import PostEditor from '../containers/PostEditor'
 import BoardEditor from '../containers/BoardEditor'
-import Board from '../containers/Board'
+import WithBoard from '../containers/WithBoard'
+import BoardPage from '../components/BoardPage'
 import 'semantic-ui-css/semantic.css'
 
 class App extends Component {
@@ -11,8 +11,7 @@ class App extends Component {
     return (
       <Switch>
         <Route path='/b/new' component={BoardEditor} />
-        <Route path='/b/:boardId/p/new' component={PostEditor} /> 
-        <Route path='/b/:boardId' component={Board} />
+        <Route path='/b/:hash/:name/' component={withRouter(WithBoard(BoardPage))} />
         <Route path='/' component={Boards} />
       </Switch>
     )

src/components/Board.js

@@ -2,13 +2,14 @@ import React from 'react'
 import Post from './Post'
 import { Segment, Button } from 'semantic-ui-react'
 import { Link } from 'react-router-dom'
+import { shortenAddress } from '../utils/orbitdb';
 
-export default function Board({ id, posts }) {
+export default function Board({ address, posts }) {
     return <div>
-        <Segment>{id}</Segment>
-        <Segment><Button as={Link} to={'p/new'}>New Post</Button></Segment>
+        <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>
+            <ul>{Object.keys(posts || {}).map(i => <Post key={posts[i].multihash} {...posts[i]}/>)}</ul>
         </Segment>
     </div>
 }

src/components/BoardForm.js

@@ -5,29 +5,30 @@ export default class BoardForm extends Component {
     constructor(props){
         super(props)
         this.state = {
-            title: props.title || ''
+            address: props.address || ''
         }
     }
 
-    updateTitle(event) {
-        this.setState({ title: event.target.value })
+    updateAddress(event) {
+        const address = event.target.value
+        this.setState({ address })
     }
 
     render() {
-        const { title, content } = this.state
+        const { address } = this.state
         const { onSave, creating } = this.props
         return <Form>
             <Form.Field>
-                <label>Title</label>
+                <label>Address</label>
                 <input
-                    placeholder="What's this board about?"
-                    value={title}
-                    onChange={this.updateTitle.bind(this)}
+                    placeholder="Paste an existing address or write your new board ID"
+                    value={address}
+                    onChange={this.updateAddress.bind(this)}
                 />
             </Form.Field>
             <Button
                 type='submit'
-                onClick={() => onSave({ title, content })}
+                onClick={() => onSave({ address })}
                 disabled={creating}
             >Create</Button>
             {creating ? 'Creating the board...' : ''}

src/components/BoardPage.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Switch, Route } from 'react-router-dom'
+import Board from '../containers/Board'
+import PostEditor from '../containers/PostEditor'
+
+function BoardPage({ match, address, posts, metadata }) {
+    return <Switch>
+        <Route path={match.path+'p/new'} component={PostEditor} /> 
+        <Route path={match.path} component={Board} />
+    </Switch>
+}
+
+export default BoardPage

src/components/Boards.js

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

src/components/BoardsItem.js

@@ -1,13 +1,23 @@
 import React from 'react'
-import { List } from 'semantic-ui-react'
+import { Button, Card } from 'semantic-ui-react'
 import { Link } from 'react-router-dom'
+import { shortenAddress } from '../utils/orbitdb'
 
-export default function BoardsItem({ id, title }) {
-    return <List.Item as={Link} to={'/b/'+id+'/'}>
-        <List.Icon name='comments' size='large' verticalAlign='middle' />
-        <List.Content>
-            <List.Header>{title}</List.Header>
-            <List.Description>Experimental</List.Description>
-        </List.Content>
-    </List.Item>
+export default function BoardsItem({ address, title }) {
+    return <Card>
+        <Card.Content>
+            <Card.Header>
+                { title || 'Untitled board' }
+            </Card.Header>
+            <Card.Meta>
+                Board
+            </Card.Meta>
+            <Card.Description style={{wordBreak:'break-all'}}>
+                {address}
+            </Card.Description>
+        </Card.Content>
+        <Card.Content extra>
+            <Button as={Link} to={shortenAddress(address)} basic fluid>View</Button>
+        </Card.Content>
+    </Card>
 }

src/containers/Board.js

@@ -1,28 +1,11 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { connect } from 'react-redux'
-import { push } from 'react-router-redux'
 import BoardComponent from '../components/Board'
-import { createBoard } from '../actions/board'
+import { getBoardAddress } from '../utils/orbitdb'
 
-class Board extends Component {
-
-    componentDidMount() {
-        const { boards, match } = this.props
-        if (!boards[match.params.boardId]) {
-            this.props.openBoard(match.params.boardId)
-        }
-    }
-
-    render() {
-        const { boards, match } = this.props
-        const id = match.params.boardId
-        const board = boards[id]
-        if (board) {
-            return <BoardComponent {...board} />
-        } else {
-            return <div>Opening this board...</div>
-        }
-    }
+function Board({ location, match, boards }) {
+    const { hash, name } = match.params
+    return <BoardComponent {...boards[getBoardAddress(hash, name)]} />
 }
 
 function mapStateToProps(state){
@@ -31,13 +14,6 @@ function mapStateToProps(state){
     }
 }
 
-function mapDispatchToProps(dispatch){
-    return {
-        openBoard: id => dispatch(createBoard(id))
-    }
-}
-
 export default connect(
-    mapStateToProps,
-    mapDispatchToProps
+    mapStateToProps
 )(Board)

src/containers/BoardEditor.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import { connect } from 'react-redux'
 import BoardForm from '../components/BoardForm'
-import { createBoard } from '../actions/board'
+import { openBoard } from '../actions/board'
 
-function BoardEditor({ board, createBoard }) {
-    return <BoardForm board={board} onSave={createBoard} />
+function BoardEditor({ board, openBoard }) {
+    return <BoardForm board={board} onSave={openBoard} />
 }
 
 function mapStateToProps(state){
@@ -15,7 +15,7 @@ function mapStateToProps(state){
 
 function mapDispatchToProps(dispatch) {
     return {
-        createBoard: board => dispatch(createBoard(board))
+        openBoard: board => dispatch(openBoard(board))
     }
 }
 

src/containers/PostEditor.js

@@ -2,12 +2,13 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import PostForm from '../components/PostForm'
 import { addPost } from '../actions/post'
+import { getBoardAddress } from '../utils/orbitdb';
 
 class PostEditor extends Component {
     render() {
         const { post, addPost, match } = this.props
-        const { boardId } = match.params
-        return <PostForm post={post} onSave={p => addPost(boardId, p)} />
+        const address = getBoardAddress(match.params.hash, match.params.name)
+        return <PostForm post={post} onSave={p => addPost(address, p)} />
     }
 }
 
@@ -19,7 +20,7 @@ function mapStateToProps(state){
 
 function mapDispatchToProps(dispatch) {
     return {
-        addPost: (boardId, post) => dispatch(addPost(boardId, post))
+        addPost: (address, post) => dispatch(addPost(address, post))
     }
 }
 

src/containers/WithBoard.js

@@ -0,0 +1,53 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import { openBoard } from '../actions/board'
+import { getBoardAddress } from '../utils/orbitdb'
+
+function mapStateToProps(state){
+    return {
+        boards: state.boards.boards
+    }
+}
+
+function mapDispatchToProps(dispatch){
+    return {
+        openBoard: address => dispatch(openBoard({ address }))
+    }
+}
+
+export default function WithBoard(WrappedComponent) {
+    class ToExport extends Component {
+
+        componentDidMount() {
+            const { boards, match } = this.props
+            const address = getBoardAddress(match.params.hash, match.params.name)
+            if (!boards[address]) {
+                this.props.openBoard(address)
+            }
+        }
+
+        componentWillReceiveProps({ match, boards }) {
+            const address = getBoardAddress(match.params.hash, match.params.name)
+            if (!boards[address]) {
+                this.props.openBoard(address)
+            }
+        }
+
+        render() {
+            const { boards, match } = this.props
+            const address = getBoardAddress(match.params.hash, match.params.name)
+            const board = boards[address]
+            if (board) {
+                return <WrappedComponent {...board} {...this.props} />
+            } else {
+                return <div>Opening this board...</div>
+            }
+        }
+    }
+
+    return connect(
+        mapStateToProps,
+        mapDispatchToProps
+    )(ToExport)
+
+}

src/orbitdb/index.js

@@ -11,7 +11,7 @@ export function isValidID(id) {
   return false
 }
 
-export async function open(id, metadata, options = {}) {
+export async function open(address, metadata) {
   if (!window.ipfs) {
     const IPFS = await import('ipfs')
     window.ipfs = new IPFS({
@@ -38,24 +38,18 @@ export async function open(id, metadata, options = {}) {
     OrbitDB.addDatabaseType(BoardStore.type, BoardStore)
     window.orbitDb = new OrbitDB(window.ipfs)
   }
-  const defaultOptions = {
-    create: id === undefined,
-    type: BoardStore.type
-  }
-  let address
-  if (!id) {
-    address = 'board-v0'
-  } else if (!isValidID(id)) {
-    throw new Error('invalid address')
+  const options = {
+    type: BoardStore.type,
+    create: true
   }
   try {
-    const db = await window.orbitDb.open(address, Object.assign(defaultOptions, options))
+    const db = await window.orbitDb.open(address, options)
     await db.load()
-    if (metadata && defaultOptions.create) {
+    if (metadata) {
       await db.updateMetadata(metadata)
     }
     if (!window.dbs) window.dbs = {}
-    window.dbs[getBoardIdFromAddress(db.address.toString())] = db
+    window.dbs[db.address.toString()] = db
     return db
   } catch (error) {
     console.log(error)
@@ -66,7 +60,7 @@ export function connectDb(db, dispatch) {
   db.events.on('write', (dbname, hash, entry) => {
     dispatch({
         type: 'ORBITDB_WRITE',
-        id: getBoardIdFromAddress(db.address.toString()),
+        address: db.address.toString(),
         hash,
         entry
     })
@@ -74,13 +68,13 @@ export function connectDb(db, dispatch) {
   db.events.on('replicated', address => {
     dispatch({
         type: 'ORBITDB_REPLICATED',
-        id: getBoardIdFromAddress(db.address.toString())
+        address: db.address.toString()
     })
   })
   db.events.on('replicate.progress', (address, hash, entry, progress, have) => {
     dispatch({
         type: 'ORBITDB_REPLICATE_PROGRESS',
-        id: getBoardIdFromAddress(db.address.toString()),
+        address: db.address.toString(),
         hash,
         entry,
         progress,
@@ -90,25 +84,25 @@ export function connectDb(db, dispatch) {
   db.events.on('replicate', address => {
     dispatch({
         type: 'ORBITDB_REPLICATE',
-        id: getBoardIdFromAddress(db.address.toString())
+        address: db.address.toString()
     })
   })
   db.events.on('close', address => {
     dispatch({
         type: 'ORBITDB_CLOSE',
-        id: getBoardIdFromAddress(db.address.toString())
+        address: db.address.toString()
     })
   })
   db.events.on('load', address => {
     dispatch({
         type: 'ORBITDB_LOAD',
-        id: getBoardIdFromAddress(db.address.toString())
+        address: db.address.toString()
     })
   })
   db.events.on('load.progress', (address, hash, entry, progress, total) => {
     dispatch({
         type: 'ORBITDB_LOAD_PROGRESS',
-        id: getBoardIdFromAddress(db.address.toString()),
+        address: db.address.toString(),
         hash,
         entry,
         progress,

src/reducers/boardEditor.js

@@ -1,13 +1,12 @@
 import {
-    CREATE_BOARD,
-    CREATING_BOARD,
-    CREATED_BOARD
+    OPEN_BOARD,
+    OPENED_BOARD
 } from '../actions/actionTypes'
 
 function getInitialState() {
     return {
         board: {
-            title: ''
+            name: ''
         },
         creating: false
     }
@@ -15,12 +14,10 @@ function getInitialState() {
 
 export default function BoardEditorReducer(state = getInitialState(), action) {
     switch (action.type) {
-        case CREATE_BOARD:
-            return Object.assign({}, state, { board: action.board, creating: false })
-        case CREATING_BOARD:
-            return Object.assign({}, state, { creating: true })
-        case CREATED_BOARD:
-            return Object.assign({}, state, { creating: false })
+        case OPEN_BOARD:
+            return Object.assign({}, state, { board: action.board, opening: true })
+        case OPENED_BOARD:
+            return Object.assign({}, state, { opening: false, board: action.board })
         default:
             return state
     }

src/reducers/boards.js

@@ -1,4 +1,4 @@
-import { CREATED_BOARD, UPDATE_BOARD } from '../actions/actionTypes'
+import { OPENED_BOARD, UPDATE_BOARD } from '../actions/actionTypes'
 import { getBoardIdFromAddress } from '../utils/orbitdb'
 
 function getInitialState() {
@@ -8,22 +8,17 @@ function getInitialState() {
 }
 
 export default function BoardsReducer(state = getInitialState(), action) {
-    let id, newBoards
+    let address, newBoards
     switch (action.type) {
-        case CREATED_BOARD:
-            id = getBoardIdFromAddress(action.board.address)
-            const board = {
-                id,
-                posts: {}
-            }
-            newBoards = Object.assign({}, state.boards, { [id]: board })
+        case OPENED_BOARD:
+            address = action.board.address
+            newBoards = Object.assign({}, state.boards, { [address]: action.board })
             return Object.assign({}, state, { boards: newBoards })
         case UPDATE_BOARD:
-            id = action.boardId
-            let { posts } = action
-            console.log(state, action)
+            address = action.address
+            let { posts, metadata } = action
             newBoards = Object.assign({}, state.boards, {
-                [id]: Object.assign({}, state.boards[id], { posts })
+                [address]: Object.assign({}, state.boards[address], { posts, metadata })
             })
             return Object.assign({}, state, { boards: newBoards })
         default:

src/sagas/boards.js

@@ -6,36 +6,32 @@ import { creatingBoard, createdBoard, boardError } from '../actions/board'
 import { getBoardIdFromAddress } from '../utils/orbitdb'
 import { UPDATE_BOARD } from '../actions/actionTypes'
 
-export function* updateBoard({ id }){
-    const db = window.dbs[id]
+export function* updateBoard({ address }){
+    const db = window.dbs[address]
     yield put({
         type: UPDATE_BOARD,
-        boardId: id,
+        address,
         posts: db.posts,
         metadata: db.metadata
     }) 
 }
 
-export function* createBoard({ board }) {
-    yield put(creatingBoard(board))
+export function* openBoard({ board }) {
     let db
     try {
-        db = yield call(open, board.id, {
-            title: board.title
-        })
+        const metadata = board.title ? { title: board.title } : null
+        db = yield call(open, board.address, metadata)
     } catch (error) {
         yield put(boardError(error))
     }
     if (db) {
         const address = db.address.toString()
-        const dbInfo = {
-            id: getBoardIdFromAddress(address),
-            address
-        }
+        const dbInfo = { address }
+        dbInfo.posts = db.posts
+        dbInfo.metadata = db.metadata
         const channel = yield call(createDbEventChannel, db)
         yield fork(watchDb, channel)
         yield put(createdBoard(Object.assign({}, board, dbInfo)))
-        yield put(push('/b/' + dbInfo.id + '/'))
     }
 }
 

src/sagas/index.js

@@ -1,10 +1,10 @@
 import { takeEvery } from 'redux-saga/effects'
-import { CREATE_BOARD, ADD_POST, ORBITDB_REPLICATED, ORBITDB_WRITE } from '../actions/actionTypes'
-import { createBoard, updateBoard } from './boards'
+import { OPEN_BOARD, ADD_POST, ORBITDB_REPLICATED, ORBITDB_WRITE } from '../actions/actionTypes'
+import { openBoard, updateBoard } from './boards'
 import { addPost } from './posts'
 
 export default function* saga(){
-   yield takeEvery(CREATE_BOARD, createBoard) 
+   yield takeEvery(OPEN_BOARD, openBoard) 
    yield takeEvery(ADD_POST, addPost) 
    yield takeEvery(ORBITDB_WRITE, updateBoard)
    yield takeEvery(ORBITDB_REPLICATED, updateBoard)

src/sagas/posts.js

@@ -1,8 +1,8 @@
-import { put, apply, call } from 'redux-saga/effects'
+import { apply, call } from 'redux-saga/effects'
 import { ipfsPut } from '../utils/ipfs'
 
-export function* addPost({ boardId, post }) {
-    const db = window.dbs[boardId]
+export function* addPost({ address, post }) {
+    const db = window.dbs[address]
     const { title, content } = post
     const multihash = yield call(ipfsPut, content)
     yield apply(db, db.addPost, [title, multihash])

src/utils/orbitdb.js

@@ -1,6 +1,8 @@
 
-export function getBoardIdFromAddress(address) {
-    const match = /\/orbitdb\/(.+)\//.exec(address)
-    if (match[1]) return match[1]
-    return undefined
+export function getBoardAddress(hash, name) {
+    return '/orbitdb/' + hash + '/' + name
+}
+
+export function shortenAddress(address) {
+    return address.replace(/^\/orbitdb/, '/b')
 }