start using real data in UI

.gitignore

@@ -4,6 +4,9 @@
 # build
 .next/
 
+# data
+orbitdb/
+
 # misc
 .DS_Store
 

components/system.js

@@ -23,8 +23,8 @@ export async function getIPFS() {
 export async function getOrbitDB() {
   const data = getGlobalData()
   if (data.orbitDb) return data.orbitDb
-  const OrbitDB = await import('orbit-db')
-  const BoardStore = await import('orbit-db-discussion-board')
+  const OrbitDB = await import('orbit-db').then(m => m.default)
+  const BoardStore = await import('orbit-db-discussion-board').then(m => m.default)
   OrbitDB.addDatabaseType(BoardStore.type, BoardStore)
   data.orbitDb = await OrbitDB.createInstance(await getIPFS())
   data.boards = {}
@@ -32,15 +32,35 @@ export async function getOrbitDB() {
 }
 
 export async function openBoard(id) {
+  const data = getGlobalData()
   if (data.boards && data.boards[id]) return data.boards[id]
-  const BoardStore = await import('orbit-db-discussion-board')
+  const BoardStore = await import('orbit-db-discussion-board').then(m => m.default)
   const options = {
     type: BoardStore.type,
     create: true,
     write: ['*']
   }
   const orbitDb = await getOrbitDB()
-  const db = await orbitDb.open(id)
+  const db = await orbitDb.open(id, options)
   data.boards[id] = db
+  await db.load()
   return db
 }
+
+const defaultLocalStorage = {
+  favouriteBoards: ['general', 'test']
+}
+
+export function getLocalStorage() {
+  try {
+    return window.localStorage
+  } catch (error) {
+    const data = getGlobalData()
+    if (!data.localStorage) data.localStorage = { ...defaultLocalStorage }
+    return {
+      getItem: name => data.localStorage[name],
+      setItem: (name, value) => data.localStorage[name] = value,
+      removeItem: name => delete data.localStorage[name],
+    }
+  }
+}

pages/b/[board]/index.js

@@ -2,24 +2,53 @@ import React from 'react'
 import { Fab, Card, CardActions, CardHeader, Button } from '@material-ui/core'
 import AddIcon from '@material-ui/icons/Add'
 import ViewIcon from '@material-ui/icons/Visibility'
+import { openBoard } from '../../../components/system'
+import Router from 'next/router'
 
-const Board = () => {
-  return (
-    <React.Fragment>
-      <Card>
-        <CardHeader
-          title="First Post"
-          subheader="Last Activity X Time Ago"
-        />
-        <CardActions>
-          <Button variant="contained" color="primary">
-            <ViewIcon /> View
-          </Button>
-        </CardActions>
-      </Card>
-      <Fab color="primary"><AddIcon /></Fab>
-    </React.Fragment>
-  )
+class Board extends React.PureComponent { 
+  state = { posts: [] }
+
+  componentDidMount() {
+    this.refreshPosts()
+  }
+
+  async refreshPosts() {
+    const { boardId } = this.props
+    const board = await openBoard(boardId) 
+    this.setState({ posts: board.posts })
+  }
+
+  render() {
+    const { boardId } = this.props
+    const posts = this.state.posts || this.props.posts
+    return (
+      <React.Fragment>
+        {posts.map(p => <Card key={p.multihash}>
+          <CardHeader
+            title={p.title}
+            subheader="Last Activity X Time Ago"
+          />
+          <CardActions>
+            <Button variant="contained" color="primary" onClick={() => Router.push(`/b/${boardId}/p/${p.multihash}`)}>
+              <ViewIcon /> View
+            </Button>
+          </CardActions>
+        </Card>)}
+        {posts.length === 0 && <Card>
+          <CardHeader
+            title="No Posts Yet"
+            subheader="Why don't you break the ice?"
+          />
+        </Card>}
+        <Fab color="primary" onClick={() => Router.push(`/b/${boardId}/p/new`)}><AddIcon /></Fab>
+      </React.Fragment>
+    )
+  }
+}
+
+Board.getInitialProps = async ({ query }) => {
+  const board = await openBoard(query.board)
+  return { posts: await board.posts, boardId: query.board }
 }
 
 export default Board

pages/b/[board]/p/new.js

@@ -0,0 +1,21 @@
+import React, { useState } from 'react'
+import { Card, CardContent, TextField, Button } from '@material-ui/core'
+import SendIcon from '@material-ui/icons/Send'
+
+export default function CreatePost() {
+  const [title, setTitle] = useState('')
+  return <Card>
+    <CardContent>
+      <TextField
+        label="Title"
+        placeholder="What is your Post about?"
+        value={title}
+        onChange={e => setTitle(e.target.value)}
+        autoFocus
+      />
+      <Button variant="contained" color="primary">
+        <SendIcon /> Submit
+      </Button>
+    </CardContent>
+  </Card>
+}

pages/b/open.js

@@ -0,0 +1,21 @@
+import React, { useState } from 'react'
+import { Card, CardContent, TextField, Button } from '@material-ui/core'
+import OpenIcon from '@material-ui/icons/Add'
+
+export default function OpenBoard() {
+  const [name, setName] = useState('')
+  return <Card>
+    <CardContent>
+      <TextField
+        label="Board"
+        placeholder="Type a name..."
+        value={name}
+        onChange={e => setName(e.target.value)}
+        autoFocus
+      />
+      <Button variant="contained" color="primary">
+        <OpenIcon /> Open
+      </Button>
+    </CardContent>
+  </Card>
+}

pages/index.js

@@ -3,17 +3,19 @@ import { Fab, Card, CardActions, CardHeader, Button } from '@material-ui/core'
 import AddIcon from '@material-ui/icons/Add'
 import ViewIcon from '@material-ui/icons/Visibility'
 import DeleteIcon from '@material-ui/icons/Delete'
+import Link from 'next/link'
+import Router from 'next/router'
 
 const Home = () => {
   return (
     <React.Fragment>
       <Card>
         <CardHeader
-          title="First Board"
+          title="Test Board"
           subheader="Last Activity X time ago"
         />
         <CardActions>
-          <Button variant="contained" color="primary">
+          <Button variant="contained" color="primary" onClick={() => Router.push(`/b/test`)}>
             <ViewIcon /> View
           </Button>
           <Button variant="contained" color="secondary">
@@ -21,7 +23,9 @@ const Home = () => {
           </Button>
         </CardActions>
       </Card>
-      <Fab color="primary"><AddIcon /></Fab>
+      <Link href="/b/open">
+        <Fab color="primary"><AddIcon /></Fab>
+      </Link>
     </React.Fragment>
   )
 }