From 1a5d37f116acb44e96144178a244b9457e63cdbe Mon Sep 17 00:00:00 2001 From: Asara Date: Sun, 26 Jan 2020 00:13:20 -0500 Subject: [PATCH 01/14] Update actions to include getting comments --- src/actions/index.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/actions/index.js b/src/actions/index.js index d37274c..21d7ba3 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -7,8 +7,10 @@ export const fetchPosts = () => async (dispatch) => { }; export const fetchPost = (slug) => async (dispatch) => { - const response = await sudoscientist.get('/blog/posts/by-slug/' + slug); - dispatch({ type: 'FETCH_POST', payload: response.data }) + const post = await sudoscientist.get('/blog/posts/by-slug/' + slug) + const comments = await sudoscientist.get('/blog/comments/' + post.data.id); + const response = { ...post.data, ...comments.data } + dispatch({ type: 'FETCH_POST', payload: response }) }; From c8ba3ebaf39f90d80d9b61719e1fd8b76ba0c087 Mon Sep 17 00:00:00 2001 From: Asara Date: Sun, 26 Jan 2020 01:25:58 -0500 Subject: [PATCH 02/14] Trying to figure out comments --- src/actions/index.js | 2 +- src/components/Post.js | 59 ++++++++++++++++++++++++++---------- src/reducers/postsReducer.js | 4 +-- 3 files changed, 46 insertions(+), 19 deletions(-) diff --git a/src/actions/index.js b/src/actions/index.js index 21d7ba3..56164d0 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -9,7 +9,7 @@ export const fetchPosts = () => async (dispatch) => { export const fetchPost = (slug) => async (dispatch) => { const post = await sudoscientist.get('/blog/posts/by-slug/' + slug) const comments = await sudoscientist.get('/blog/comments/' + post.data.id); - const response = { ...post.data, ...comments.data } + const response = { post: post.data, comments: comments.data } dispatch({ type: 'FETCH_POST', payload: response }) }; diff --git a/src/components/Post.js b/src/components/Post.js index 350fd85..45abaed 100644 --- a/src/components/Post.js +++ b/src/components/Post.js @@ -18,27 +18,55 @@ class Post extends React.Component { .then(() => this.setState({isLoading: false})) } - render () { + renderComments() { + //if (comments.length) { + //return comments.map(comment => { + // return ( + //
+ //
+ //
+ // + //
+ //
+ //
+ // ); + //}); + //} + } + + renderPost() { const {posts} = this.props + const post = posts.entities[posts.currentId] + console.log(post) + return( +
+
+
+
+

{post.title}

+

By {post.author}

+

Posted {post.time_published}

+
+ +
+
+
+
+ { this.renderComments(post.comments) } +
+ ) + } + + render () { const {isLoading} = this.state if (isLoading) { return

Loading

} else { - const post = posts.entities[posts.currentId] return ( -
-
-
-

{post.title}

-

By {post.author}

-

Posted {post.time_published}

-
- -
-
-
-
+
+ { this.renderPost() } +
); } } @@ -47,8 +75,7 @@ class Post extends React.Component { const mapStateToProps = (state) => { return { posts: state.posts, - slug: state.slug, - comments: state.comments + slug: state.slug }; } diff --git a/src/reducers/postsReducer.js b/src/reducers/postsReducer.js index 87faf24..e9feb70 100644 --- a/src/reducers/postsReducer.js +++ b/src/reducers/postsReducer.js @@ -17,8 +17,8 @@ export default (state = initialState, action) => { return {...state, ...{entities: mergedEntities}} case 'FETCH_POST': - mergedEntities = normalizeEntities(state.entities, [action.payload]) - return {...state, ...{entities: mergedEntities, currentId: action.payload.id}} + mergedEntities = normalizeEntities(state.entities, [action.payload.post]) + return {...state, ...{entities: mergedEntities, currentId: action.payload.post.id}} default: return state; } From e182a5e9208e819b85a7f6f16720411c43b59ec0 Mon Sep 17 00:00:00 2001 From: Asara Date: Tue, 28 Jan 2020 23:39:52 -0500 Subject: [PATCH 03/14] Add fediverse link --- src/static/about.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/static/about.md b/src/static/about.md index d7b2d5e..5ca6a14 100644 --- a/src/static/about.md +++ b/src/static/about.md @@ -12,6 +12,8 @@ The frontend for this blog is written using react-redux and can be [found here]( ### Communication Matrix: `@Asara:devvul.com` +Fediverse: https://social.devvul.com/Asara + Email: `amarpreet@minhas.io` ### Lightning Network From 25e536bf7e5f589eba909c8e7f51edc49bde1bf9 Mon Sep 17 00:00:00 2001 From: Asara Date: Wed, 29 Jan 2020 20:39:48 -0500 Subject: [PATCH 04/14] Add comments as a child of the post --- src/actions/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/actions/index.js b/src/actions/index.js index 56164d0..fe98b11 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -9,7 +9,8 @@ export const fetchPosts = () => async (dispatch) => { export const fetchPost = (slug) => async (dispatch) => { const post = await sudoscientist.get('/blog/posts/by-slug/' + slug) const comments = await sudoscientist.get('/blog/comments/' + post.data.id); - const response = { post: post.data, comments: comments.data } + const response = { post: post.data } + response.post.comments = comments.data dispatch({ type: 'FETCH_POST', payload: response }) }; From 221787eba43e488f9371d1babea57faa3c75455f Mon Sep 17 00:00:00 2001 From: Asara Date: Wed, 29 Jan 2020 20:56:22 -0500 Subject: [PATCH 05/14] fix up comments logic for displaying --- src/components/Post.js | 29 ++++++++++++++--------------- 1 file changed, 14 insertions(+), 15 deletions(-) diff --git a/src/components/Post.js b/src/components/Post.js index 45abaed..645a2c3 100644 --- a/src/components/Post.js +++ b/src/components/Post.js @@ -18,26 +18,25 @@ class Post extends React.Component { .then(() => this.setState({isLoading: false})) } - renderComments() { - //if (comments.length) { - //return comments.map(comment => { - // return ( - //
- //
- //
- // - //
- //
- //
- // ); - //}); - //} + renderComments(comments) { + if (comments) { + return comments.map(comment => { + return ( +
+
+
+ +
+
+
+ ); + }); + } } renderPost() { const {posts} = this.props const post = posts.entities[posts.currentId] - console.log(post) return(
From 9c3037fb7e3fee7737c4b7a8cc467492b6e51bdc Mon Sep 17 00:00:00 2001 From: Asara Date: Wed, 29 Jan 2020 21:23:23 -0500 Subject: [PATCH 06/14] Breakpoint for breaking changes --- src/actions/index.js | 7 +++ src/components/Post.js | 131 ++++++++++++++++++++--------------------- 2 files changed, 72 insertions(+), 66 deletions(-) diff --git a/src/actions/index.js b/src/actions/index.js index fe98b11..f0fa858 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -64,3 +64,10 @@ export const newBlogPost = (payload) => async (dispatch) => { history.push('/posts/' + response.data.slug) } }; + +export const newComment = (payload, parent_id) => async (dispatch) => { + const response = await sudoscientist.post('/blog/comments' + parent_id, payload) + if (response.status === 201) { + window.location.reload() + } +}; diff --git a/src/components/Post.js b/src/components/Post.js index 645a2c3..d7af679 100644 --- a/src/components/Post.js +++ b/src/components/Post.js @@ -2,83 +2,82 @@ import React from 'react'; import ReactMarkdown from 'react-markdown'; import 'github-markdown-css' import { connect } from 'react-redux'; -import { fetchPost } from '../actions'; +import { fetchPost,newComment } from '../actions'; import { Link } from 'react-router-dom'; class Post extends React.Component { - constructor (props) { - super(props) - this.state = { - isLoading: true - } - } - componentDidMount() { - const { slug } = this.props.match.params - this.props.fetchPost(slug) - .then(() => this.setState({isLoading: false})) + constructor (props) { + super(props) + this.state = { + isLoading: true } + } + componentDidMount() { + const { slug } = this.props.match.params + this.props.fetchPost(slug) + .then(() => this.setState({isLoading: false})) + } - renderComments(comments) { - if (comments) { - return comments.map(comment => { - return ( -
-
-
- -
-
-
- ); - }); - } - } - - renderPost() { - const {posts} = this.props - const post = posts.entities[posts.currentId] - return( -
-
-
-
-

{post.title}

-

By {post.author}

-

Posted {post.time_published}

-
- -
-
-
-
- { this.renderComments(post.comments) } -
- ) - } - - render () { - const {isLoading} = this.state - - if (isLoading) { - return

Loading

- } else { - return ( -
- { this.renderPost() } + renderComments(comments, parent_id) { + if (comments) { + return comments.map(comment => { + return ( +
+
+
+
- ); - } +
+
+ ); + }); } + } + + renderPost() { + const {posts} = this.props + const post = posts.entities[posts.currentId] + return( +
+
+
+
+

{post.title}

+

By {post.author}

+

Posted {post.time_published}

+
+ +
+
+
+
+ { this.renderComments(post.comments,post.id) } +
+ ) + } + + render () { + const {isLoading} = this.state + if (isLoading) { + return

Loading

+ } else { + return ( +
+ { this.renderPost() } +
+ ); + } + } } const mapStateToProps = (state) => { - return { - posts: state.posts, - slug: state.slug - }; + return { + posts: state.posts, + slug: state.slug + }; } export default connect( - mapStateToProps, - { fetchPost } + mapStateToProps, + { fetchPost, newComment }, )(Post); From 180a0a0cfb3ff3a0a51ad15f5c3412f8ae19232e Mon Sep 17 00:00:00 2001 From: Asara Date: Wed, 29 Jan 2020 22:18:32 -0500 Subject: [PATCH 07/14] Some formatting --- src/components/PostList.js | 82 +++++++++++++++++++------------------- 1 file changed, 41 insertions(+), 41 deletions(-) diff --git a/src/components/PostList.js b/src/components/PostList.js index 450a449..24e8805 100644 --- a/src/components/PostList.js +++ b/src/components/PostList.js @@ -7,52 +7,52 @@ import { Link } from 'react-router-dom'; class PostList extends React.Component { - componentDidMount() { - this.props.fetchPosts(); - } - renderList() { - const {posts} = this.props - const postKeys = Object.keys(posts.entities) - return postKeys.map(id => { - const post = posts.entities[id] - return ( -
-
-
-

{post.title}

-

By {post.author}

-

Posted {post.time_published}

-
- -
-
-
-
- ); - }).reverse(); - } - - - render () { - return ( -
-

Blog Posts

-
- {this.renderList()} -
+ componentDidMount() { + this.props.fetchPosts(); + } + renderList() { + const {posts} = this.props + const postKeys = Object.keys(posts.entities) + return postKeys.map(id => { + const post = posts.entities[id] + return ( +
+
+
+

{post.title}

+

By {post.author}

+

Posted {post.time_published}

+
+ +
- ); - } +
+
+ ); + }).reverse(); + } + + + render () { + return ( +
+

Blog Posts

+
+ {this.renderList()} +
+
+ ); + } } const mapStateToProps = (state) => { - return { - posts: state.posts, - slug: state.slug - }; + return { + posts: state.posts, + slug: state.slug + }; } export default connect( - mapStateToProps, - { fetchPosts } + mapStateToProps, + { fetchPosts } )(PostList); From 8123b0d65f2d60d7fb23a2a29acc4676fde647c7 Mon Sep 17 00:00:00 2001 From: Asara Date: Wed, 29 Jan 2020 23:06:31 -0500 Subject: [PATCH 08/14] Set up basic comment stuff --- src/components/Comments.js | 47 ++++++++++++++++++++++++++++++++++++++ src/components/Post.js | 6 ++++- 2 files changed, 52 insertions(+), 1 deletion(-) create mode 100644 src/components/Comments.js diff --git a/src/components/Comments.js b/src/components/Comments.js new file mode 100644 index 0000000..8410f6a --- /dev/null +++ b/src/components/Comments.js @@ -0,0 +1,47 @@ +import React from 'react'; +import ReactMde from "react-mde"; +import ReactMarkdown from 'react-markdown'; +import { useSelector } from "react-redux"; +import { connect } from 'react-redux'; +import 'github-markdown-css' +import "react-mde/lib/styles/css/react-mde-all.css" +import { newComment } from '../actions'; + +const Comment = (props) => { + const [content, setContent] = React.useState(""); + const [selectedTab, setSelectedTab] = React.useState("write"); + const username = useSelector(state => state.auth.username); + const submitComment = () => { + const payload = { + content: content + } + props.newComment(username, payload) + } + return ( +
+
+

Leave a comment!

+
+
+ + Promise.resolve()} + /> +
+
+ ) +} +const mapStateToProps = (state) => { + return { + user: state.auth + }; +} + +export default connect( + mapStateToProps, + { newComment }, +)(Comment); diff --git a/src/components/Post.js b/src/components/Post.js index d7af679..42c8f54 100644 --- a/src/components/Post.js +++ b/src/components/Post.js @@ -4,6 +4,8 @@ import 'github-markdown-css' import { connect } from 'react-redux'; import { fetchPost,newComment } from '../actions'; import { Link } from 'react-router-dom'; +import Comment from './Comments'; +import { useSelector } from "react-redux"; class Post extends React.Component { constructor (props) { @@ -11,11 +13,12 @@ class Post extends React.Component { this.state = { isLoading: true } + console.log(props) } componentDidMount() { const { slug } = this.props.match.params this.props.fetchPost(slug) - .then(() => this.setState({isLoading: false})) + .then(() => this.setState({isLoading: false, slug: slug})) } renderComments(comments, parent_id) { @@ -50,6 +53,7 @@ class Post extends React.Component {
+
{ this.renderComments(post.comments,post.id) } From e1dee7fe146848c21ffeb7a42a23463812136151 Mon Sep 17 00:00:00 2001 From: Asara Date: Thu, 30 Jan 2020 00:37:37 -0500 Subject: [PATCH 09/14] I think I get it, again! --- src/actions/index.js | 2 +- src/components/Comments.js | 10 ++++++---- src/components/Post.js | 3 +-- 3 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/actions/index.js b/src/actions/index.js index f0fa858..af17cf4 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -66,7 +66,7 @@ export const newBlogPost = (payload) => async (dispatch) => { }; export const newComment = (payload, parent_id) => async (dispatch) => { - const response = await sudoscientist.post('/blog/comments' + parent_id, payload) + const response = await sudoscientist.post('/blog/comments/' + parent_id, payload) if (response.status === 201) { window.location.reload() } diff --git a/src/components/Comments.js b/src/components/Comments.js index 8410f6a..362f232 100644 --- a/src/components/Comments.js +++ b/src/components/Comments.js @@ -1,7 +1,6 @@ import React from 'react'; import ReactMde from "react-mde"; import ReactMarkdown from 'react-markdown'; -import { useSelector } from "react-redux"; import { connect } from 'react-redux'; import 'github-markdown-css' import "react-mde/lib/styles/css/react-mde-all.css" @@ -10,12 +9,11 @@ import { newComment } from '../actions'; const Comment = (props) => { const [content, setContent] = React.useState(""); const [selectedTab, setSelectedTab] = React.useState("write"); - const username = useSelector(state => state.auth.username); const submitComment = () => { const payload = { content: content } - props.newComment(username, payload) + props.newComment(payload, props.post.currentId) } return (
@@ -32,12 +30,16 @@ const Comment = (props) => { Promise.resolve()} />
+
+ +
) } const mapStateToProps = (state) => { return { - user: state.auth + post: state.posts, + user: state.auth, }; } diff --git a/src/components/Post.js b/src/components/Post.js index 42c8f54..1221596 100644 --- a/src/components/Post.js +++ b/src/components/Post.js @@ -5,7 +5,6 @@ import { connect } from 'react-redux'; import { fetchPost,newComment } from '../actions'; import { Link } from 'react-router-dom'; import Comment from './Comments'; -import { useSelector } from "react-redux"; class Post extends React.Component { constructor (props) { @@ -13,8 +12,8 @@ class Post extends React.Component { this.state = { isLoading: true } - console.log(props) } + componentDidMount() { const { slug } = this.props.match.params this.props.fetchPost(slug) From 892d6288e3ad5cc11d76f757f906f5de1f2d8d4a Mon Sep 17 00:00:00 2001 From: Asara Date: Sat, 1 Feb 2020 18:01:48 -0500 Subject: [PATCH 10/14] Some cleanup around comments --- src/components/Post.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/components/Post.js b/src/components/Post.js index 1221596..de720b2 100644 --- a/src/components/Post.js +++ b/src/components/Post.js @@ -25,11 +25,13 @@ class Post extends React.Component { return comments.map(comment => { return (
-
-
- +

Comment by {comment.author}

+
+
+ +
-
+
); }); @@ -44,7 +46,7 @@ class Post extends React.Component {
-

{post.title}

+

{post.title}

By {post.author}

Posted {post.time_published}

@@ -54,6 +56,8 @@ class Post extends React.Component {
+

Comments:

+
{ this.renderComments(post.comments,post.id) }
) From 911fe6ebbcc8c717b2296e3c42e38371d39855ed Mon Sep 17 00:00:00 2001 From: Asara Date: Sat, 1 Feb 2020 18:08:25 -0500 Subject: [PATCH 11/14] Fix up rendering of comments for only verified users --- src/components/Post.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/Post.js b/src/components/Post.js index de720b2..f181cfb 100644 --- a/src/components/Post.js +++ b/src/components/Post.js @@ -54,7 +54,9 @@ class Post extends React.Component {
- + { this.props.auth.verified && + + }

Comments:

@@ -80,7 +82,8 @@ class Post extends React.Component { const mapStateToProps = (state) => { return { posts: state.posts, - slug: state.slug + slug: state.slug, + auth: state.auth }; } From 84f7b6951f033ee6b4f760d12c04179f2266c155 Mon Sep 17 00:00:00 2001 From: Asara Date: Mon, 3 Feb 2020 19:46:11 -0500 Subject: [PATCH 12/14] Some basic ghetto display stuff --- src/components/Post.js | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/src/components/Post.js b/src/components/Post.js index f181cfb..365e011 100644 --- a/src/components/Post.js +++ b/src/components/Post.js @@ -24,15 +24,20 @@ class Post extends React.Component { if (comments) { return comments.map(comment => { return ( -
-

Comment by {comment.author}

-
-
- +
+
+
Comment by {comment.author}

+ Posted: {comment.time_published} +
+
+
+
+ +
-
-
+

+
); }); } @@ -59,7 +64,6 @@ class Post extends React.Component { }

Comments:

-
{ this.renderComments(post.comments,post.id) }
) From bb55c1460b82e9fe65c4f0c244ea8b34d8a9f8ca Mon Sep 17 00:00:00 2001 From: Asara Date: Sat, 8 Feb 2020 23:11:19 -0500 Subject: [PATCH 13/14] Replace border with outline --- src/components/Post.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Post.js b/src/components/Post.js index 365e011..5ee2765 100644 --- a/src/components/Post.js +++ b/src/components/Post.js @@ -25,7 +25,7 @@ class Post extends React.Component { return comments.map(comment => { return (
-
+
Comment by {comment.author}

Posted: {comment.time_published}
From 0091db60b5ec82dd4782283c4055868f96a2063b Mon Sep 17 00:00:00 2001 From: Asara Date: Sat, 8 Feb 2020 23:27:31 -0500 Subject: [PATCH 14/14] Update readme --- TODO.md | 1 - 1 file changed, 1 deletion(-) diff --git a/TODO.md b/TODO.md index b067a1c..9ebdf9e 100644 --- a/TODO.md +++ b/TODO.md @@ -2,4 +2,3 @@ 1. Fix up UX, return errors to screen instead of doing nothing. 2. Add filtering posts by tags -3. Comments