From 443cef55a5e69a436ff2d9a25743647f546785f9 Mon Sep 17 00:00:00 2001 From: Enrico Fasoli Date: Wed, 7 Feb 2018 23:00:50 +0100 Subject: [PATCH] UI Improvements --- src/actions/actionTypes.js | 1 + src/components/Board.js | 21 +++++++---- src/components/BoardForm.js | 48 +++++++++++++++--------- src/components/Boards.js | 69 +++++++++++++++++++++++++++++++---- src/components/BoardsItem.js | 6 ++- src/components/Post.js | 5 ++- src/containers/BoardEditor.js | 6 +-- src/reducers/boardEditor.js | 9 ++--- src/reducers/boards.js | 28 ++++++++++---- src/sagas/boards.js | 6 ++- src/sagas/index.js | 5 ++- 11 files changed, 149 insertions(+), 55 deletions(-) diff --git a/src/actions/actionTypes.js b/src/actions/actionTypes.js index 88a9ab1..cee6c77 100644 --- a/src/actions/actionTypes.js +++ b/src/actions/actionTypes.js @@ -9,4 +9,5 @@ export const UPDATE_BOARD = 'UPDATE_BOARD' export const BOARD_ERROR = 'BOARD_ERROR' export const ORBITDB_WRITE = 'ORBITDB_WRITE' +export const ORBITDB_REPLICATE = 'ORBITDB_REPLICATE' export const ORBITDB_REPLICATED = 'ORBITDB_REPLICATED' \ No newline at end of file diff --git a/src/components/Board.js b/src/components/Board.js index 328f938..fd6c1f3 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -4,7 +4,7 @@ import { Divider, Icon, Grid, Segment, Header, List, Button, Card } from 'semant import { Link } from 'react-router-dom' import { shortenAddress } from '../utils/orbitdb'; -export default function Board({ address, posts, metadata }) { +export default function Board({ address, posts, metadata, replicating }) { const { email, website, title } = metadata || {} const url = window.location.href return @@ -39,10 +39,10 @@ export default function Board({ address, posts, metadata }) { - + - Replication Status - Idle + Replication + {replicating ? 'Receiving Content...' : 'Idle'} @@ -60,9 +60,16 @@ export default function Board({ address, posts, metadata }) { -
- - +
+ + +
diff --git a/src/components/BoardForm.js b/src/components/BoardForm.js index 4b16885..3c0d4d6 100644 --- a/src/components/BoardForm.js +++ b/src/components/BoardForm.js @@ -1,5 +1,7 @@ import React, { Component } from 'react' -import { Form, Button } from 'semantic-ui-react' +import { Redirect } from 'react-router-dom' +import { Container, Card, Form, Button } from 'semantic-ui-react' +import { shortenAddress } from '../utils/orbitdb' export default class BoardForm extends Component { constructor(props){ @@ -16,22 +18,32 @@ export default class BoardForm extends Component { render() { const { address } = this.state - const { onSave, creating } = this.props - return
- - - - - - {creating ? 'Creating the board...' : ''} -
+ const { openBoard, opening } = this.props + return + + + Open a Board + + Boards is an experimental peer to peer application.
+ All content you publish will be public and may be lost or + changed at any time.
+ Please do not use this version of Boards + for anything other than testing purposes +
+
+ +
+ + + + +
+
+
+
} } \ No newline at end of file diff --git a/src/components/Boards.js b/src/components/Boards.js index ab5b50d..aba680d 100644 --- a/src/components/Boards.js +++ b/src/components/Boards.js @@ -1,12 +1,67 @@ import React from 'react' -import { Button, Card } from 'semantic-ui-react' +import { List, Icon, Segment, Divider, Grid, Header, Button, Card } from 'semantic-ui-react' +import { Link } from 'react-router-dom' import BoardsItem from './BoardsItem' export default function Boards({ boards, createBoard }) { - return
- - {Object.values(boards).map(board => )} - - -
+ return + +
+ IPFS Boards + Experimental Build +
+ + + + + + Boards + {Object.keys(boards).length} + + + + + + Connected Peers + ? + + + + + + Used Space + ? + + + + + + IPFS ID + ? + + + + + + OrbitDB Public Key + ? + + + +
+ + +
+
+ + + {Object.values(boards).map(board => )} + {Object.keys(boards).length === 0 ? No boards opened : null} + + +
} \ No newline at end of file diff --git a/src/components/BoardsItem.js b/src/components/BoardsItem.js index 2553a79..1f99074 100644 --- a/src/components/BoardsItem.js +++ b/src/components/BoardsItem.js @@ -4,14 +4,16 @@ import { Link } from 'react-router-dom' import { shortenAddress } from '../utils/orbitdb' export default function BoardsItem({ address, title }) { - return + return - { title || 'Untitled board' } + { title || 'Unnamed board' } Board + + {address} diff --git a/src/components/Post.js b/src/components/Post.js index 66f0661..596dd50 100644 --- a/src/components/Post.js +++ b/src/components/Post.js @@ -4,7 +4,10 @@ import { Card, Icon } from 'semantic-ui-react' export default function Post({ title, multihash}) { return - {title} + + {title} + + Post View diff --git a/src/containers/BoardEditor.js b/src/containers/BoardEditor.js index 793aa73..0c75ac1 100644 --- a/src/containers/BoardEditor.js +++ b/src/containers/BoardEditor.js @@ -3,13 +3,13 @@ import { connect } from 'react-redux' import BoardForm from '../components/BoardForm' import { openBoard } from '../actions/board' -function BoardEditor({ board, openBoard }) { - return +function BoardEditor(props) { + return } function mapStateToProps(state){ return { - board: state.boardEditor.board + opening: state.boardEditor.opening } } diff --git a/src/reducers/boardEditor.js b/src/reducers/boardEditor.js index 2f9267c..d010406 100644 --- a/src/reducers/boardEditor.js +++ b/src/reducers/boardEditor.js @@ -5,19 +5,16 @@ import { function getInitialState() { return { - board: { - name: '' - }, - creating: false + opening: false } } export default function BoardEditorReducer(state = getInitialState(), action) { switch (action.type) { case OPEN_BOARD: - return Object.assign({}, state, { board: action.board, opening: true }) + return Object.assign({}, state, { opening: true }) case OPENED_BOARD: - return Object.assign({}, state, { opening: false, board: action.board }) + return Object.assign({}, state, { opening: false }) default: return state } diff --git a/src/reducers/boards.js b/src/reducers/boards.js index 35d6261..bfafd4c 100644 --- a/src/reducers/boards.js +++ b/src/reducers/boards.js @@ -1,4 +1,4 @@ -import { OPENED_BOARD, UPDATE_BOARD } from '../actions/actionTypes' +import { OPENED_BOARD, UPDATE_BOARD, ORBITDB_REPLICATED, ORBITDB_REPLICATE } from '../actions/actionTypes' import { getBoardIdFromAddress } from '../utils/orbitdb' function getInitialState() { @@ -7,20 +7,32 @@ function getInitialState() { } } +function updateBoard(existingBoards, address, value) { + return Object.assign({}, existingBoards, { + [address]: Object.assign({}, existingBoards[address] || {}, value) + }) +} + export default function BoardsReducer(state = getInitialState(), action) { - let address, newBoards + let address switch (action.type) { case OPENED_BOARD: address = action.board.address - newBoards = Object.assign({}, state.boards, { [address]: action.board }) - return Object.assign({}, state, { boards: newBoards }) + return Object.assign({}, state, { boards: updateBoard(state.boards, address, action.board) }) case UPDATE_BOARD: address = action.address let { posts, metadata } = action - newBoards = Object.assign({}, state.boards, { - [address]: Object.assign({}, state.boards[address], { posts, metadata }) - }) - return Object.assign({}, state, { boards: newBoards }) + return Object.assign({}, state, { boards: updateBoard(state.boards, address, { posts, metadata })}) + case ORBITDB_REPLICATE: + address = action.address + return Object.assign({}, state, { boards: updateBoard(state.boards, address, { + replicating: true + })}) + case ORBITDB_REPLICATED: + address = action.address + return Object.assign({}, state, { boards: updateBoard(state.boards, address, { + replicating: false + })}) default: return state; } diff --git a/src/sagas/boards.js b/src/sagas/boards.js index 513ca87..8ae9bd9 100644 --- a/src/sagas/boards.js +++ b/src/sagas/boards.js @@ -3,9 +3,13 @@ import { eventChannel } from 'redux-saga' import { push } from 'react-router-redux' import { open, connectDb } from '../orbitdb' import { creatingBoard, createdBoard, boardError } from '../actions/board' -import { getBoardIdFromAddress } from '../utils/orbitdb' +import { getBoardIdFromAddress, shortenAddress } from '../utils/orbitdb' import { UPDATE_BOARD } from '../actions/actionTypes' +export function* goToBoard({ board }){ + yield put(push(shortenAddress(board.address))) +} + export function* updateBoard({ address }){ const db = window.dbs[address] yield put({ diff --git a/src/sagas/index.js b/src/sagas/index.js index 399bb6f..5ab63f1 100644 --- a/src/sagas/index.js +++ b/src/sagas/index.js @@ -1,10 +1,11 @@ import { takeEvery } from 'redux-saga/effects' -import { OPEN_BOARD, ADD_POST, ORBITDB_REPLICATED, ORBITDB_WRITE } from '../actions/actionTypes' -import { openBoard, updateBoard } from './boards' +import { OPEN_BOARD, OPENED_BOARD, ADD_POST, ORBITDB_REPLICATED, ORBITDB_WRITE } from '../actions/actionTypes' +import { openBoard, updateBoard, goToBoard } from './boards' import { addPost } from './posts' export default function* saga(){ yield takeEvery(OPEN_BOARD, openBoard) + yield takeEvery(OPENED_BOARD, goToBoard) yield takeEvery(ADD_POST, addPost) yield takeEvery(ORBITDB_WRITE, updateBoard) yield takeEvery(ORBITDB_REPLICATED, updateBoard)