Support db replication, add separate feed input controls

Author: haad

README.md

@@ -2,7 +2,7 @@
 
 > UI for managing [OrbitDB](https://github.com/orbitdb/orbit-db) databases.
 
-**Run the [Control Center](https://ipfs.io/ipfs/Qme9bwgUYgdLTA9ZpZnHqNHRXGfJ5QHw4BCzgrFQMB59T8) in your browser.**
+**Run the [Control Center](https://ipfs.io/ipfs/QmPoqRhSX2rMy6NR7Y3pnkC2z1kK9TH9fZa6wyfXLEptw9) in your browser.**
 
 <img width="80%" src="https://raw.githubusercontent.com/haadcode/orbit-db-control-center/master/screenshot1.png"/>
 

src/components/CounterStoreControls.js

@@ -44,7 +44,7 @@ function KeyValueStoreControls () {
     <Pane
       flex='1'
     >
-      <Heading marginBottom={majorScale(1)}>Increment the value of the counter database</Heading>
+      <Heading marginBottom={majorScale(1)}>Increment the value of the counter</Heading>
       <TextInput
         onChange={handleValueChange}
         name='value'

src/components/FeedStoreControls.js

@@ -0,0 +1,64 @@
+import React from 'react'
+import {
+  majorScale,
+  Button,
+  Heading,
+  Pane,
+  TextInput
+} from 'evergreen-ui'
+
+import { useStateValue, actions } from '../state'
+
+function FeedStoreControls () {
+  const [appState, dispatch] = useStateValue()
+  const [value, setValue] = React.useState('')
+
+  function handleValueChange (event) {
+    setValue(event.target.value)
+  }
+
+  function handleAdd (event) {
+    if (event) event.preventDefault()
+    if (value.length === 0) return
+    addToDB()
+  }
+
+  const addToDB = async () => {
+    const db = appState.db
+
+    if (db.type !== 'feed') {
+      throw new Error('This component can only handle Feed databases')
+    }
+
+    await db.add(value)
+
+    const entries = await db.iterator({ limit: 10 }).collect().reverse()
+    dispatch({ type: actions.DB.SET_DB, db, entries })
+  }
+
+  return (
+    <Pane
+      flex='1'
+    >
+      <Heading marginBottom={majorScale(1)}>Add an entry to the feed</Heading>
+      <TextInput
+        onChange={handleValueChange}
+        name='value'
+        placeholder='Data'
+        height={24}
+        width='30%'
+      ></TextInput>
+      <Button
+        iconBefore='plus'
+        appearance='default'
+        height={24}
+        marginLeft={majorScale(1)}
+        onClick={handleAdd}
+      >
+        Add
+      </Button>
+    </Pane>
+  )
+}
+
+export default FeedStoreControls

src/components/KeyValueStoreControls.js

@@ -46,7 +46,7 @@ function KeyValueStoreControls () {
     <Pane
       flex='1'
     >
-      <Heading marginBottom={majorScale(1)}>Set a value for a key in the database</Heading>
+      <Heading marginBottom={majorScale(1)}>Set a value for a key</Heading>
       <TextInput
         onChange={handleKeyChange}
         name='key'

src/components/LogStoreControls.js

@@ -9,7 +9,7 @@ import {
 
 import { useStateValue, actions } from '../state'
 
-function EventLogControls () {
+function LogStoreControls () {
   const [appState, dispatch] = useStateValue()
   const [value, setValue] = React.useState('')
 
@@ -26,8 +26,8 @@ function EventLogControls () {
   const addToDB = async () => {
     const db = appState.db
 
-    if (db.type !== 'eventlog' && db.type !== 'feed') {
-      throw new Error('This component can only handle Log and Feed databases')
+    if (db.type !== 'eventlog') {
+      throw new Error('This component can only handle Log databases')
     }
 
     await db.add(value)
@@ -40,7 +40,7 @@ function EventLogControls () {
     <Pane
       flex='1'
     >
-      <Heading marginBottom={majorScale(1)}>Add an event to the log database</Heading>
+      <Heading marginBottom={majorScale(1)}>Add an event to the log</Heading>
       <TextInput
         onChange={handleValueChange}
         name='value'
@@ -61,4 +61,4 @@ function EventLogControls () {
   )
 }
 
-export default EventLogControls
+export default LogStoreControls

src/config/index.js

@@ -0,0 +1,14 @@
+const config = {
+  ipfs: {
+    preload: {
+      enabled: false
+    },
+    config: {
+      Addresses: {
+        Swarm: ['/dns4/ws-star.discovery.libp2p.io/tcp/443/wss/p2p-websocket-star']
+      }
+    }
+  }
+}
+
+export default config

src/database/index.js

@@ -1,5 +1,6 @@
 import IPFS from 'ipfs'
 import OrbitDB from 'orbit-db'
+import Config from '../config'
 
 // OrbitDB instance
 let orbitdb
@@ -9,7 +10,7 @@ let programs
 
 // Start IPFS
 export const initIPFS = async () => {
-  return await IPFS.create()
+  return await IPFS.create(Config.ipfs)
 }
 
 // Start OrbitDB

src/views/Database.js

@@ -11,6 +11,7 @@ import {
 } from 'evergreen-ui'
 
 import LogStoreControls from '../components/LogStoreControls'
+import FeedStoreControls from '../components/FeedStoreControls'
 import KeyValueStoreControls from '../components/KeyValueStoreControls'
 import DocumentStoreControls from '../components/DocumentStoreControls'
 import CounterStoreControls from '../components/CounterStoreControls'
@@ -80,7 +81,9 @@ function ProgramView () {
     const db = appState.program ? appState.program.payload.value : null
     if (!db) return
 
-    if (db.type === 'eventlog' || db.type === 'feed')
+    if (db.type === 'eventlog')
+      return "Latest 10 events"
+    else if (db.type === 'feed')
       return "Latest 10 entries"
     else if (db.type === 'docstore')
       return "All Documents"
@@ -162,8 +165,10 @@ function ProgramView () {
     const db = appState.db
     if (!db) return
 
-    if (db.type === 'eventlog' || db.type === 'feed')
+    if (db.type === 'eventlog')
       return <LogStoreControls />
+    else if (db.type === 'feed')
+      return <FeedStoreControls />
     else if (db.type === 'docstore')
       return <DocumentStoreControls />
     else if (db.type === 'keyvalue')