diff --git a/package.json b/package.json
index 3f4217e..99d6f6a 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
"moment": "^2.10.6",
"react": "^0.14.2",
"react-dom": "^0.14.2",
+ "react-markdown": "^1.0.5",
"react-router": "^1.0.0",
"uglifyify": "^3.0.1",
"vinyl-buffer": "^1.0.0",
diff --git a/webapp/app.jsx b/webapp/app.jsx
index 7b6ff05..96d7df5 100644
--- a/webapp/app.jsx
+++ b/webapp/app.jsx
@@ -5,11 +5,34 @@ var Route = require('react-router').Route
var IndexRoute = require('react-router').IndexRoute
var Link = require('react-router').Link
+var MarkdownLib = require('react-markdown')
var ipfs = require('ipfs-api')('localhost',5001)
var BoardsAPI = require('../lib/boards-api.js')
var boards = new BoardsAPI(ipfs)
+// Components
+
+var Markdown = React.createClass({
+ renderIfApplicable: function(){
+ if(this.props.source)
+ return
+ return
...
+ },
+ render: function(){
+ return this.renderIfApplicable()
+ }
+})
+
+var Icon = React.createClass({
+ class: function(){
+ return 'fa fa-'+this.props.name+' '+this.props.class
+ },
+ render: function(){
+ return ( )
+ }
+})
+
var Container = React.createClass({
render: function(){
return ( {this.props.children}
)
@@ -22,69 +45,26 @@ var App = React.createClass({
}
})
-var Homepage = React.createClass({
- render: function(){
- return (
-
-
Welcome to the IPFS Boards Prototype
-
Not much is implemented...
-
You can try Opening my Profile though :)
-
More information about the project on GitHub
-
- )
- }
-})
-
var Navbar = React.createClass({
render: function(){
return (
)
}
})
-var Profile = React.createClass({
- getInitialState: function(){
- return { name: '...', boards: [] }
- },
- componentDidMount: function(){
- var ee = boards.getProfile(this.props.params.userid, (err,res) => {
- if(!this.isMounted()) return true
- if(err){
- console.log(err)
- this.setState({
- name: '?',
- error: 'Invalid profile'
- })
- } else {
- console.log(res)
- this.setState({ name: res.name })
- }
- })
- ee.on('boards for '+this.props.params.userid,l => {
- if(!this.isMounted()) return true
- this.setState({ boards: l })
- })
- },
- render: function(){
- return (
-
{this.state.name}
-
{this.state.error}
-
@{this.props.params.userid}
-
- {this.state.boards.map(n => {
- return -
- {n.name}
-
- })}
-
-
)
- }
-})
-
var PostList = React.createClass({
getInitialState: function(){
return { posts: [] }
@@ -103,7 +83,7 @@ var PostList = React.createClass({
{this.state.posts.map(post => {
return (
{post.title}
-
{post.text}
+
)
})}
@@ -119,37 +99,31 @@ var UserID = React.createClass({
boards.getProfile(this.props.id, (err,res) => {
if(!this.isMounted()) return true
if(!err) {
- this.setState({ name: '@'+res.name.trim() })
+ this.setState({ name: res.name.trim() })
}
})
},
render: function(){
return (
-
-
{this.state.name}
+
+ {this.state.name}
)
}
})
-var Board = React.createClass({
- getInitialState: function(){
- return { name: '# '+this.props.params.boardname }
- },
- componentDidMount: function(){
- var ee = boards.getBoardSettings(this.props.params.userid,this.props.params.boardname)
- ee.on('settings for '+this.props.params.boardname+'@'+this.props.params.userid, (res) => {
- if(!this.isMounted()) return true
- console.log('Found name:',res.fullname)
- this.setState({ name: '# '+res.fullname.trim() })
- })
- },
+// Static pages
+
+var Homepage = React.createClass({
render: function(){
- return (
-
{this.state.name}
-
-
- )
+ return (
+
+
Welcome to the IPFS Boards Prototype
+
Not much is implemented...
+
You can try Opening my Profile though :)
+
More information about the project on GitHub
+
+ )
}
})
@@ -171,6 +145,102 @@ var GetIPFS = React.createClass({
}
})
+var NotFound = React.createClass({
+ render: function(){
+ return (
+
+
Sorry, there's nothing here!
+
)
+ }
+})
+
+var NotImplemented = React.createClass({
+ render: function(){
+ return (
+
Not yet implemented
+
+
Sorry, working on it!
+
)
+ }
+})
+
+// Dynamic pages
+
+var Profile = React.createClass({
+ getInitialState: function(){
+ return { name: '...', boards: [] }
+ },
+ componentDidMount: function(){
+ var ee = boards.getProfile(this.props.params.userid, (err,res) => {
+ if(!this.isMounted()) return true
+ if(err){
+ console.log(err)
+ this.setState({
+ name: '?',
+ error: 'Invalid profile'
+ })
+ } else {
+ console.log(res)
+ this.setState({ name: res.name, description: res.description })
+ }
+ })
+ ee.on('boards for '+this.props.params.userid,l => {
+ if(!this.isMounted()) return true
+ this.setState({ boards: l })
+ })
+ },
+ render: function(){
+ return (
+
{this.state.name}
+
{this.state.error}
+
+
+
@{this.props.params.userid}
+ {this.state.boards.map(n => {
+ return
+ # {n.name}
+
+ })}
+
)
+ }
+})
+
+var Board = React.createClass({
+ getInitialState: function(){
+ return { name: this.props.params.boardname }
+ },
+ componentDidMount: function(){
+ var ee = boards.getBoardSettings(this.props.params.userid,this.props.params.boardname)
+ ee.on('settings for '+this.props.params.boardname+'@'+this.props.params.userid, (res) => {
+ if(!this.isMounted()) return true
+ console.log('Found name:',res.fullname)
+ this.setState({ name: res.fullname.trim(), description: res.description })
+ })
+ },
+ render: function(){
+ return (
+
{this.state.name}
+
+
+
+ )
+ }
+})
+
+var Users = React.createClass({
+ render: function(){
+ return
+ }
+})
+
+var Settings = React.createClass({
+ render: function(){
+ return
+ }
+})
+
+// Start
+
boards.init(err => {
if(err){
console.log('FATAL: IPFS NODE NOT AVAILABLE')
@@ -182,8 +252,11 @@ boards.init(err => {
-
+
+
+
+
, document.getElementById('root')
)
diff --git a/webapp/index.html b/webapp/index.html
index 74fa390..aaddaf1 100644
--- a/webapp/index.html
+++ b/webapp/index.html
@@ -3,6 +3,7 @@
IPFS Board
+
@@ -10,7 +11,7 @@
diff --git a/webapp/style.css b/webapp/style.css
index d135d60..2b00fae 100644
--- a/webapp/style.css
+++ b/webapp/style.css
@@ -6,12 +6,35 @@
top: 20%;
}
+hr {
+ margin-top: 2rem;
+ margin-bottom: 2.5rem;
+}
+
+a {
+ text-decoration: underline;
+ color: #ababab;
+}
+
+.nounderline {
+ text-decoration: none;
+}
+
+.navbar a {
+ text-decoration: none;
+ color: inherit;
+}
+
+a:hover {
+ color: black;
+}
+
.text-center {
text-align: center
}
.light {
- color: #ababab
+ color: #707070
}
.app {
@@ -24,11 +47,14 @@
height: 4.5em
}
-.navbar a {
- text-decoration: none;
- color: inherit;
-}
-
.navbar .container {
padding-top: 1em
}
+
+.navbar .iconbar {
+ margin-top: -5.2rem;
+}
+
+.navbar .iconbar .fa {
+ margin-left: .5rem;
+}