From 1711807308480eb50df926f6a9d48d3f1f57fa6b Mon Sep 17 00:00:00 2001 From: Enrico Fasoli Date: Wed, 13 Nov 2019 01:02:56 +0100 Subject: [PATCH] implement commenting and posting --- components/AddComment.js | 43 ++ components/Board.js | 2 +- components/Comments.js | 82 +++ components/Container.js | 27 + components/Post.js | 37 ++ components/Status.js | 5 +- components/system.js | 94 +++- package-lock.json | 999 +++++++++++++++++++++++------------- package.json | 2 +- pages/_app.js | 8 +- pages/api/status.js | 8 + pages/b/[board]/p/[post].js | 71 +-- pages/b/[board]/p/new.js | 117 ++++- pages/b/open.js | 31 +- pages/index.js | 13 +- 15 files changed, 1112 insertions(+), 427 deletions(-) create mode 100644 components/AddComment.js create mode 100644 components/Comments.js create mode 100644 components/Container.js create mode 100644 components/Post.js create mode 100644 pages/api/status.js diff --git a/components/AddComment.js b/components/AddComment.js new file mode 100644 index 0000000..8d3fe3d --- /dev/null +++ b/components/AddComment.js @@ -0,0 +1,43 @@ +import React from 'react' +import { TextField, InputAdornment, IconButton } from '@material-ui/core' +import SendIcon from '@material-ui/icons/Send' +import { openBoard } from './system' + +class AddComment extends React.PureComponent { + state = { text: '' } + + render() { + const { text } = this.state + return ( + this.setState({ text: event.target.value })} + InputProps={{ + endAdornment: ( + + + + + + ) + }} + /> + ) + } + + submit = async () => { + const { boardId, postId, parentId, afterSend } = this.props + const { text } = this.state + const board = await openBoard(boardId) + const comment = { text } + await board.commentPost(postId, comment, parentId) + if (afterSend) afterSend() + } +} + +export default AddComment + + diff --git a/components/Board.js b/components/Board.js index cc5796e..1e9f9e5 100644 --- a/components/Board.js +++ b/components/Board.js @@ -37,7 +37,7 @@ export default function Board({ boardId, posts }){ } title="No Posts Yet" - subheader="Why don't you break the ice?" + subheader="Don't panic. Your device will keep looking for new posts in the network." /> } + {comments.map(c => ( + + + {c.text} + + + + ))} + + ) + } +} + +export default Comments + diff --git a/components/Container.js b/components/Container.js new file mode 100644 index 0000000..f156496 --- /dev/null +++ b/components/Container.js @@ -0,0 +1,27 @@ +import React from 'react' +import { makeStyles } from '@material-ui/core/styles' + +const useStyles = makeStyles(theme => ({ + container: { + padding: theme.spacing(2), + display: 'flex', + justifyContent: 'center', + }, + content: { + maxWidth: '600px', + flexGrow: 2 + } +})) + +const Container = ({ children }) => { + const styles = useStyles() + return ( +
+
+ {children} +
+
+ ) +} + +export default Container \ No newline at end of file diff --git a/components/Post.js b/components/Post.js new file mode 100644 index 0000000..9a38f0c --- /dev/null +++ b/components/Post.js @@ -0,0 +1,37 @@ +import React from 'react' +import { Fab, Card, CardContent, CardHeader, List, ListItem, ListItemAvatar, ListItemText } from '@material-ui/core' +import { makeStyles } from '@material-ui/core/styles' +import Comments from './Comments' +import AddIcon from '@material-ui/icons/Add' +import ProfileIcon from '@material-ui/icons/AccountCircle' + +const Post = ({ post = {}, boardId }) => { + const found = Boolean(post.multihash) + return ( + + + + + {post.text || post.multihash || '(This post is empty)'} + + + + + + + + + {boardId && post.multihash && ( + + )} + + ) +} + +export default Post diff --git a/components/Status.js b/components/Status.js index 4c2dda0..0a6ee21 100644 --- a/components/Status.js +++ b/components/Status.js @@ -28,11 +28,12 @@ class Status extends React.PureComponent { let statusText = 'Pre-Rendered' if (!info.isServer) { statusText = 'Offline' + if (info.ipfsLoading) statusText = 'Starting IPFS' if (info.ipfsReady) { - statusText = 'Starting DB' Icon = ConnectedIcon + statusText = `${info.ipfsPeers.length} Peers` } - if (info.orbitDbReady) statusText = `${info.ipfsPeers.length} Peers` + if (info.orbitDbLoading) statusText = 'Starting DB' } return - - + + + } CreatePost.getInitialProps = ({ query }) => { return { boardId: query.board } -} +} \ No newline at end of file diff --git a/pages/b/open.js b/pages/b/open.js index 983435d..a79fce9 100644 --- a/pages/b/open.js +++ b/pages/b/open.js @@ -1,19 +1,44 @@ import React, { useState } from 'react' -import { Card, CardContent, TextField, Button } from '@material-ui/core' +import { Card, CardContent, TextField, Button, Typography, Divider} from '@material-ui/core' import OpenIcon from '@material-ui/icons/Add' +import Router from 'next/router' +import { makeStyles } from '@material-ui/styles' + +const useStyles = makeStyles(theme => ({ + button: { + marginTop: theme.spacing(2), + marginLeft: 'auto', + } +})) export default function OpenBoard() { const [name, setName] = useState('') + const styles = useStyles() return + + + Open a Board + + + IPFS Boards is a work in progress. Thank you for testing the app! + + + setName(e.target.value)} autoFocus + fullWidth /> - diff --git a/pages/index.js b/pages/index.js index 90b7267..c2abb41 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,12 +1,21 @@ import React from 'react' import { Fab, Card, CardActions, CardHeader, Button } from '@material-ui/core' +import { makeStyles } from '@material-ui/core/styles' 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 useStyles = makeStyles(theme => ({ + fab: { + float: 'right', + marginTop: theme.spacing(2) + }, +})) + const Home = () => { + const styles = useStyles() return ( @@ -24,7 +33,9 @@ const Home = () => { - + + + )