General improvements to postlist and post

This commit is contained in:
riggraz
2019-09-21 11:17:58 +02:00
parent 38345f9c42
commit 7874015580
11 changed files with 25 additions and 13 deletions

View File

@@ -15,7 +15,8 @@ class CommentsController < ApplicationController
comment = Comment.new(comment_params) comment = Comment.new(comment_params)
if comment.save if comment.save
render json: comment, status: :created render json: comment.attributes.merge({ user_full_name: current_user.full_name}),
status: :created
else else
render json: { render json: {
error: I18n.t('errors.comment.create', message: comment.errors.full_messages) error: I18n.t('errors.comment.create', message: comment.errors.full_messages)

View File

@@ -3,7 +3,9 @@ class PostsController < ApplicationController
def index def index
posts = Post posts = Post
.select(:id, :title, :description, :post_status_id) .select('posts.id, title, description, post_status_id, COUNT(comments.id) as comments_count')
.left_outer_joins(:comments)
.group('posts.id')
.where(filter_params) .where(filter_params)
.search_by_name_or_description(params[:search]) .search_by_name_or_description(params[:search])
.page(params[:page]) .page(params[:page])
@@ -16,7 +18,7 @@ class PostsController < ApplicationController
post = Post.new(post_params) post = Post.new(post_params)
if post.save if post.save
render json: post, status: :no_content render json: post, status: :created
else else
render json: { render json: {
error: I18n.t('errors.post.create', message: post.errors.full_messages) error: I18n.t('errors.post.create', message: post.errors.full_messages)

View File

@@ -92,7 +92,7 @@ class NewPost extends React.Component<Props, State> {
} }
try { try {
let res = await fetch('/posts', { const res = await fetch('/posts', {
method: 'POST', method: 'POST',
headers: { headers: {
Accept: 'application/json', Accept: 'application/json',
@@ -107,18 +107,22 @@ class NewPost extends React.Component<Props, State> {
}, },
}), }),
}); });
const json = await res.json();
this.setState({isLoading: false}); this.setState({isLoading: false});
if (res.status === 204) { if (res.status === 201) {
this.setState({ this.setState({
success: 'Your post has been published!', success: 'Post published! You will be redirected soon...',
title: '', title: '',
description: '', description: '',
}); });
setTimeout(() => (
window.location.href = `/posts/${json.id}`
), 1000);
} else { } else {
let data = await res.json(); this.setState({error: json.error});
this.setState({error: data.error});
} }
} catch (e) { } catch (e) {

View File

@@ -50,6 +50,7 @@ const PostList = ({
title={post.title} title={post.title}
description={post.description} description={post.description}
postStatus={postStatuses.find(postStatus => postStatus.id === post.postStatusId)} postStatus={postStatuses.find(postStatus => postStatus.id === post.postStatusId)}
commentsCount={post.commentsCount}
key={i} key={i}
/> />

View File

@@ -11,16 +11,17 @@ interface Props {
title: string; title: string;
description?: string; description?: string;
postStatus: IPostStatus; postStatus: IPostStatus;
commentsCount: number;
} }
const PostListItem = ({ id, title, description, postStatus}: Props) => ( const PostListItem = ({ id, title, description, postStatus, commentsCount }: Props) => (
<a href={`/posts/${id}`} className="postLink"> <a href={`/posts/${id}`} className="postLink">
<div className="postListItem"> <div className="postListItem">
<span className="postTitle">{title}</span> <span className="postTitle">{title}</span>
<DescriptionText limit={120}>{description}</DescriptionText> <DescriptionText limit={120}>{description}</DescriptionText>
<div className="postDetails"> <div className="postDetails">
<CommentsNumber number={0} /> <CommentsNumber number={commentsCount} />
{ postStatus ? <PostStatusLabel {...postStatus} /> : null } { postStatus ? <PostStatusLabel {...postStatus} /> : null }
</div> </div>
</div> </div>

View File

@@ -31,6 +31,7 @@ const NewComment = ({
value={body} value={body}
onChange={handleChange} onChange={handleChange}
placeholder="Leave a comment" placeholder="Leave a comment"
autoFocus
className="newCommentBody" className="newCommentBody"
/> />
<Button <Button

View File

@@ -5,8 +5,7 @@ const friendlyDate = date => {
var secondsPast = (now.getTime() - timeStamp.getTime()) / 1000; var secondsPast = (now.getTime() - timeStamp.getTime()) / 1000;
if (secondsPast < 60) { if (secondsPast < 60) {
secondsPast = parseInt(secondsPast); return 'just now';
return secondsPast + ' ' + (secondsPast === 1 ? 'second' : 'seconds') + ' ago';
} else if (secondsPast < 3600) { } else if (secondsPast < 3600) {
let minutesPast = parseInt(secondsPast / 60); let minutesPast = parseInt(secondsPast / 60);
return minutesPast + ' ' + (minutesPast === 1 ? 'minute' : 'minutes') + ' ago'; return minutesPast + ' ' + (minutesPast === 1 ? 'minute' : 'minutes') + ' ago';

View File

@@ -4,6 +4,7 @@ interface IPost {
description?: string; description?: string;
boardId: number; boardId: number;
postStatusId?: number; postStatusId?: number;
commentsCount: number;
userId: number; userId: number;
createdAt: string; createdAt: string;
} }

View File

@@ -4,6 +4,7 @@ interface IPostJSON {
description?: string; description?: string;
board_id: number; board_id: number;
post_status_id?: number; post_status_id?: number;
comments_count: number;
user_id: number; user_id: number;
created_at: string; created_at: string;
} }

View File

@@ -100,7 +100,6 @@ const commentsReducer = (
}; };
case COMMENT_SUBMIT_SUCCESS: case COMMENT_SUBMIT_SUCCESS:
console.log(action.comment);
return { return {
...state, ...state,
items: [commentReducer(undefined, commentRequestSuccess(action.comment)), ...state.items], items: [commentReducer(undefined, commentRequestSuccess(action.comment)), ...state.items],

View File

@@ -14,6 +14,7 @@ const initialState: IPost = {
description: null, description: null,
boardId: 0, boardId: 0,
postStatusId: null, postStatusId: null,
commentsCount: 0,
userId: 0, userId: 0,
createdAt: '', createdAt: '',
}; };
@@ -30,6 +31,7 @@ const postReducer = (
description: action.post.description, description: action.post.description,
boardId: action.post.board_id, boardId: action.post.board_id,
postStatusId: action.post.post_status_id, postStatusId: action.post.post_status_id,
commentsCount: action.post.comments_count,
userId: action.post.user_id, userId: action.post.user_id,
createdAt: action.post.created_at, createdAt: action.post.created_at,
}; };