wip writing posts

package.json

@@ -11,7 +11,9 @@
     "react-router-redux": "^5.0.0-alpha.9",
     "react-scripts": "1.1.0",
     "redux": "^3.7.2",
-    "redux-saga": "^0.16.0"
+    "redux-saga": "^0.16.0",
+    "semantic-ui-css": "^2.2.14",
+    "semantic-ui-react": "^0.77.2"
   },
   "scripts": {
     "start": "react-scripts start",

src/actions/actionTypes.js

@@ -0,0 +1,2 @@
+
+export const ADD_POST = 'ADD_POST'

src/actions/post.js

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

src/components/App.js

@@ -1,15 +1,18 @@
 import React, { Component } from 'react';
 import { Switch, Route, withRouter } from 'react-router-dom';
 import Feed from './Feed'
+import PostEditor from '../containers/PostEditor'
+import 'semantic-ui-css/semantic.css'
 
 class App extends Component {
   render() {
     return (
       <Switch>
+        <Route path='/post/new' component={PostEditor} />
         <Route path='/' component={Feed} />
       </Switch>
     );
   }
 }
 
-export default App;
+export default withRouter(App)

src/components/PostForm.js

@@ -0,0 +1,47 @@
+import React, { Component } from 'react'
+import { Form, Button } from 'semantic-ui-react'
+
+export default class PostEditor extends Component {
+    constructor(props){
+        super(props)
+        this.state = {
+            title: props.title || '',
+            content: props.content || ''
+        }
+    }
+
+    updateTitle(event) {
+        this.setState({ title: event.target.value })
+    }
+
+    updateContent(event) {
+        this.setState({ content: event.target.value })
+    }
+
+    render() {
+        const { title, content } = this.state
+        const { onSave } = this.props
+        return <Form>
+            <Form.Field>
+                <label>Title</label>
+                <input
+                    placeholder="What's this about?"
+                    value={title}
+                    onChange={this.updateTitle.bind(this)}
+                />
+            </Form.Field>
+            <Form.Field>
+                <label>Content</label>
+                <input
+                    placeholder='Write your thoughts'
+                    value={content}
+                    onChange={this.updateContent.bind(this)}
+                />
+            </Form.Field>
+            <Button
+                type='submit'
+                onClick={() => onSave({ title, content })}
+            >Submit</Button>
+        </Form>
+    }
+}

src/containers/PostEditor.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import { connect } from 'react-redux'
+import PostForm from '../components/PostForm'
+import { addPost } from '../actions/post'
+
+function PostEditor({ post, addPost }) {
+    return <PostForm post={post} onSave={addPost} />
+}
+
+function mapStateToProps(state){
+    return {
+        post: state.postEditor.post
+    }
+}
+
+function mapDispatchToProps(dispatch) {
+    return {
+        addPost: post => dispatch(addPost(post))
+    }
+}
+
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(PostEditor)

src/orbitdb/BoardIndex.js

@@ -0,0 +1,15 @@
+
+class BoardIndex {
+  constructor(id) {
+    super(id);
+    // this._index = []
+  }
+
+  get() {
+    throw new Error('Not implemented yet')
+  }
+  
+  updateIndex(oplog, entries) {
+  throw new Error('Not implemented yet')
+  }
+}

src/orbitdb/BoardStore.js

@@ -0,0 +1,45 @@
+const Store = require('orbit-db-store')
+const BoardIndex = require('./BoardIndex')
+
+class Board extends Store {
+  constructor(ipfs, id, dbname, options) {
+    if (!options) options = {}
+    if (!options.indexBy) Object.assign(options, { indexBy: '_id' })
+    if (!options.Index) Object.assign(options, { Index: BoardIndex })
+    super(ipfs, id, dbname, options)
+    this._type = 'board' 
+  }
+
+  get type() {
+    return 'discussion-board'
+  }
+
+  updateMetadata() {
+    throw new Error('Not implemented yet')
+  }
+
+  getPosts() {
+    throw new Error('Not implemented yet')
+  }
+
+  addPost(title, content) {
+    this._addOperation({
+      title,
+      content
+    })
+  }
+
+  updatePost() {
+    throw new Error('Not implemented yet')
+  }
+
+  addComment() {
+    throw new Error('Not implemented yet')
+  }
+
+  updateComment() {
+    throw new Error('Not implemented yet')
+  }
+}
+
+module.exports = Board

src/orbitdb/constants.js

@@ -0,0 +1,8 @@
+
+module.exports = {
+  ADD_POST: 'ADD_POST',
+  UPDATE_POST: 'UPDATE_POST',
+  ADD_COMMENT: 'ADD_COMMENT',
+  UPDATE_COMMENT: 'UPDATE_COMMENT',
+  UPDATE_METADATA: 'UPDATE_METADATA',
+};

src/orbitdb/index.js

@@ -0,0 +1,17 @@
+import BoardStore from './BoardStore'
+
+export async function open(address, options = {}) {
+  if (!window.ipfs) {
+    window.ipfs = await import('ipfs')
+  }
+  if (!window.orbitDb) {
+    const OrbitDB = await import('orbit-db')
+    window.orbitDb = new OrbitDB(window.ipfs)
+    window.orbitDb.addDatabaseType(BoardStore.type, BoardStore)
+  }
+  const defaultOptions = {
+    create: true,
+    type: BoardStore.type
+  }
+  return await window.orbitDb.open(address, Object.assign(defaultOptions, options))
+}

src/reducers/index.js

@@ -1,4 +1,6 @@
+import { combineReducers } from 'redux'
+import postReducer from './post'
 
-export default function(){
-
-}
+export default combineReducers({
+    postEditor: postReducer
+})

src/reducers/post.js

@@ -0,0 +1,19 @@
+import { ADD_POST } from '../actions/actionTypes'
+
+function getInitialState(){
+    return {
+        post: {
+            title: '',
+            content: ''
+        }
+    }
+}
+
+export default function(state = getInitialState(), action) {
+    switch (action.type) {
+        case ADD_POST:
+            return Object.assign({}, state, { post: action.post })
+        default:
+            return state
+    }
+}

yarn.lock

@@ -906,7 +906,7 @@ babel-register@^6.26.0:
     mkdirp "^0.5.1"
     source-map-support "^0.4.15"
 
-babel-runtime@6.26.0, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0:
+babel-runtime@6.26.0, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.25.0, babel-runtime@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
   dependencies:
@@ -1323,6 +1323,10 @@ clap@^1.0.9:
   dependencies:
     chalk "^1.1.3"
 
+classnames@^2.2.5:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
+
 clean-css@4.1.x:
   version "4.1.9"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.1.9.tgz#35cee8ae7687a49b98034f70de00c4edd3826301"
@@ -3727,6 +3731,10 @@ jest@20.0.4:
   dependencies:
     jest-cli "^20.0.4"
 
+jquery@x.*:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.3.1.tgz#958ce29e81c9790f31be7792df5d4d95fc57fbca"
+
 js-base64@^2.1.9:
   version "2.4.3"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.4.3.tgz#2e545ec2b0f2957f41356510205214e98fad6582"
@@ -5709,6 +5717,22 @@ selfsigned@^1.9.1:
   dependencies:
     node-forge "0.7.1"
 
+semantic-ui-css@^2.2.14:
+  version "2.2.14"
+  resolved "https://registry.yarnpkg.com/semantic-ui-css/-/semantic-ui-css-2.2.14.tgz#1888c386c74e5c0abfa00508a94940e93a55465b"
+  dependencies:
+    jquery x.*
+
+semantic-ui-react@^0.77.2:
+  version "0.77.2"
+  resolved "https://registry.yarnpkg.com/semantic-ui-react/-/semantic-ui-react-0.77.2.tgz#c4cf0e3cd5590c906f4d655d163ac5969acd359b"
+  dependencies:
+    babel-runtime "^6.25.0"
+    classnames "^2.2.5"
+    fbjs "^0.8.16"
+    lodash "^4.17.4"
+    prop-types "^15.5.10"
+
 semver-diff@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/semver-diff/-/semver-diff-2.1.0.tgz#4bbb8437c8d37e4b0cf1a68fd726ec6d645d6d36"