Adding comment voting

- Extracting out some components.
- Fixing an issue with window refreshing websockets.
This commit is contained in:
Dessalines 2019-03-28 12:32:08 -07:00
parent 05f0aee3ea
commit 49c61fc318
11 changed files with 401 additions and 102 deletions

View file

@ -18,3 +18,5 @@ create table community_follower (
fedi_user_id text not null,
published timestamp not null default now()
);
insert into community (name) values ('main');

View file

@ -16,4 +16,3 @@ create table post_like (
score smallint not null, -- -1, or 1 for dislike, like, no row for no opinion
published timestamp not null default now()
);

View file

@ -11,7 +11,9 @@ create table comment (
create table comment_like (
id serial primary key,
comment_id int references comment on update cascade on delete cascade not null,
post_id int references post on update cascade on delete cascade not null,
fedi_user_id text not null,
score smallint not null, -- -1, or 1 for dislike, like, no row for no opinion
published timestamp not null default now()
published timestamp not null default now(),
unique(comment_id, fedi_user_id)
);

View file

@ -36,12 +36,13 @@ pub struct CommentForm {
pub updated: Option<chrono::NaiveDateTime>
}
#[derive(Identifiable, Queryable, Associations, PartialEq, Debug)]
#[derive(Identifiable, Queryable, Associations, PartialEq, Debug, Clone)]
#[belongs_to(Comment)]
#[table_name = "comment_like"]
pub struct CommentLike {
pub id: i32,
pub comment_id: i32,
pub post_id: i32,
pub fedi_user_id: String,
pub score: i16,
pub published: chrono::NaiveDateTime,
@ -51,6 +52,7 @@ pub struct CommentLike {
#[table_name="comment_like"]
pub struct CommentLikeForm {
pub comment_id: i32,
pub post_id: i32,
pub fedi_user_id: String,
pub score: i16
}
@ -84,6 +86,13 @@ impl Crud<CommentForm> for Comment {
}
impl Likeable <CommentLikeForm> for CommentLike {
fn read(conn: &PgConnection, comment_id_from: i32) -> Result<Vec<Self>, Error> {
use schema::comment_like::dsl::*;
comment_like
.filter(comment_id.eq(comment_id_from))
.load::<Self>(conn)
}
fn like(conn: &PgConnection, comment_like_form: &CommentLikeForm) -> Result<Self, Error> {
use schema::comment_like::dsl::*;
insert_into(comment_like)
@ -99,15 +108,110 @@ impl Likeable <CommentLikeForm> for CommentLike {
}
}
impl Comment {
pub fn from_post(conn: &PgConnection, post: &Post) -> Result<Vec<Self>, Error> {
use schema::community::dsl::*;
Comment::belonging_to(post)
.order_by(comment::published.desc())
impl CommentLike {
pub fn from_post(conn: &PgConnection, post_id_from: i32) -> Result<Vec<Self>, Error> {
use schema::comment_like::dsl::*;
comment_like
.filter(post_id.eq(post_id_from))
.load::<Self>(conn)
}
}
impl Comment {
fn from_post(conn: &PgConnection, post_id_from: i32) -> Result<Vec<Self>, Error> {
use schema::comment::dsl::*;
comment
.filter(post_id.eq(post_id_from))
.order_by(published.desc())
.load::<Self>(conn)
}
}
#[derive(Debug, Serialize, Deserialize, Clone)]
pub struct CommentView {
pub id: i32,
pub content: String,
pub attributed_to: String,
pub post_id: i32,
pub parent_id: Option<i32>,
pub published: chrono::NaiveDateTime,
pub updated: Option<chrono::NaiveDateTime>,
pub score: i32,
pub upvotes: i32,
pub downvotes: i32,
pub my_vote: Option<i16>
}
impl CommentView {
fn from_comment(comment: &Comment, likes: &Vec<CommentLike>, fedi_user_id: &Option<String>) -> Self {
let mut upvotes: i32 = 0;
let mut downvotes: i32 = 0;
let mut my_vote: Option<i16> = Some(0);
for like in likes.iter() {
if like.score == 1 {
upvotes += 1
} else if like.score == -1 {
downvotes += 1;
}
if let Some(user) = fedi_user_id {
if like.fedi_user_id == *user {
my_vote = Some(like.score);
}
}
}
let score: i32 = upvotes - downvotes;
CommentView {
id: comment.id,
content: comment.content.to_owned(),
parent_id: comment.parent_id,
post_id: comment.post_id,
attributed_to: comment.attributed_to.to_owned(),
published: comment.published,
updated: None,
upvotes: upvotes,
score: score,
downvotes: downvotes,
my_vote: my_vote
}
}
pub fn from_new_comment(comment: &Comment) -> Self {
Self::from_comment(comment, &Vec::new(), &None)
}
pub fn read(conn: &PgConnection, comment_id: i32, fedi_user_id: &Option<String>) -> Self {
let comment = Comment::read(&conn, comment_id).unwrap();
let likes = CommentLike::read(&conn, comment_id).unwrap();
Self::from_comment(&comment, &likes, fedi_user_id)
}
pub fn from_post(conn: &PgConnection, post_id: i32, fedi_user_id: &Option<String>) -> Vec<Self> {
let comments = Comment::from_post(&conn, post_id).unwrap();
let post_comment_likes = CommentLike::from_post(&conn, post_id).unwrap();
let mut views = Vec::new();
for comment in comments.iter() {
let comment_likes: Vec<CommentLike> = post_comment_likes
.iter()
.filter(|like| comment.id == like.comment_id)
.cloned()
.collect();
let comment_view = CommentView::from_comment(&comment, &comment_likes, fedi_user_id);
views.push(comment_view);
};
views
}
}
#[cfg(test)]
mod tests {
use establish_connection;
@ -169,6 +273,7 @@ mod tests {
let comment_like_form = CommentLikeForm {
comment_id: inserted_comment.id,
post_id: inserted_post.id,
fedi_user_id: "test".into(),
score: 1
};
@ -178,6 +283,7 @@ mod tests {
let expected_comment_like = CommentLike {
id: inserted_comment_like.id,
comment_id: inserted_comment.id,
post_id: inserted_post.id,
fedi_user_id: "test".into(),
published: inserted_comment_like.published,
score: 1

View file

@ -77,6 +77,12 @@ impl Crud<PostForm> for Post {
}
impl Likeable <PostLikeForm> for PostLike {
fn read(conn: &PgConnection, post_id_from: i32) -> Result<Vec<Self>, Error> {
use schema::post_like::dsl::*;
post_like
.filter(post_id.eq(post_id_from))
.load::<Self>(conn)
}
fn like(conn: &PgConnection, post_like_form: &PostLikeForm) -> Result<Self, Error> {
use schema::post_like::dsl::*;
insert_into(post_like)

View file

@ -43,6 +43,7 @@ pub trait Joinable<T> {
}
pub trait Likeable<T> {
fn read(conn: &PgConnection, id: i32) -> Result<Vec<Self>, Error> where Self: Sized;
fn like(conn: &PgConnection, form: &T) -> Result<Self, Error> where Self: Sized;
fn remove(conn: &PgConnection, form: &T) -> Result<usize, Error> where Self: Sized;
}

View file

@ -14,6 +14,7 @@ table! {
comment_like (id) {
id -> Int4,
comment_id -> Int4,
post_id -> Int4,
fedi_user_id -> Text,
score -> Int2,
published -> Timestamp,
@ -85,6 +86,7 @@ table! {
joinable!(comment -> post (post_id));
joinable!(comment_like -> comment (comment_id));
joinable!(comment_like -> post (post_id));
joinable!(community_follower -> community (community_id));
joinable!(community_user -> community (community_id));
joinable!(post -> community (community_id));

View file

@ -9,8 +9,9 @@ use serde::{Deserialize, Serialize};
use serde_json::{Result, Value};
use bcrypt::{verify};
use std::str::FromStr;
use std::{thread, time};
use {Crud, Joinable, establish_connection};
use {Crud, Joinable, Likeable, establish_connection};
use actions::community::*;
use actions::user::*;
use actions::post::*;
@ -19,7 +20,7 @@ use actions::comment::*;
#[derive(EnumString,ToString,Debug)]
pub enum UserOperation {
Login, Register, Logout, CreateCommunity, ListCommunities, CreatePost, GetPost, GetCommunity, CreateComment, Join, Edit, Reply, Vote, Delete, NextPage, Sticky
Login, Register, Logout, CreateCommunity, ListCommunities, CreatePost, GetPost, GetCommunity, CreateComment, CreateCommentLike, Join, Edit, Reply, Vote, Delete, NextPage, Sticky
}
@ -151,14 +152,15 @@ pub struct CreatePostResponse {
#[derive(Serialize, Deserialize)]
pub struct GetPost {
id: i32
id: i32,
auth: Option<String>
}
#[derive(Serialize, Deserialize)]
pub struct GetPostResponse {
op: String,
post: Post,
comments: Vec<Comment>
comments: Vec<CommentView>
}
#[derive(Serialize, Deserialize)]
@ -183,7 +185,22 @@ pub struct CreateComment {
#[derive(Serialize, Deserialize)]
pub struct CreateCommentResponse {
op: String,
comment: Comment
comment: CommentView
}
#[derive(Serialize, Deserialize)]
pub struct CreateCommentLike {
comment_id: i32,
post_id: i32,
score: i16,
auth: String
}
#[derive(Serialize, Deserialize)]
pub struct CreateCommentLikeResponse {
op: String,
comment: CommentView
}
/// `ChatServer` manages chat rooms and responsible for coordinating chat
@ -343,6 +360,10 @@ impl Handler<StandardMessage> for ChatServer {
let create_comment: CreateComment = serde_json::from_str(&data.to_string()).unwrap();
create_comment.perform(self, msg.id)
},
UserOperation::CreateCommentLike => {
let create_comment_like: CreateCommentLike = serde_json::from_str(&data.to_string()).unwrap();
create_comment_like.perform(self, msg.id)
},
_ => {
let e = ErrorMessage {
op: "Unknown".to_string(),
@ -576,6 +597,22 @@ impl Perform for GetPost {
let conn = establish_connection();
println!("{:?}", self.auth);
let fedi_user_id: Option<String> = match &self.auth {
Some(auth) => {
match Claims::decode(&auth) {
Ok(claims) => {
let user_id = claims.claims.id;
let iss = claims.claims.iss;
Some(format!("{}/{}", iss, user_id))
}
Err(e) => None
}
}
None => None
};
let post = match Post::read(&conn, self.id) {
Ok(post) => post,
Err(e) => {
@ -583,37 +620,21 @@ impl Perform for GetPost {
}
};
// let mut rooms = Vec::new();
// remove session from all rooms
for (n, sessions) in &mut chat.rooms {
// if sessions.remove(&addr) {
// // rooms.push(*n);
// }
sessions.remove(&addr);
}
// // send message to other users
// for room in rooms {
// self.send_room_message(&room, "Someone disconnected", 0);
// }
if chat.rooms.get_mut(&self.id).is_none() {
chat.rooms.insert(self.id, HashSet::new());
}
// TODO send a Joined response
// chat.send_room_message(addr,)
// self.send_room_message(&name, "Someone connected", id);
chat.rooms.get_mut(&self.id).unwrap().insert(addr);
let comments = Comment::from_post(&conn, &post).unwrap();
let comments = CommentView::from_post(&conn, post.id, &fedi_user_id);
println!("{:?}", chat.rooms.keys());
println!("{:?}", chat.rooms.get(&5i32).unwrap());
// println!("{:?}", chat.rooms.keys());
// println!("{:?}", chat.rooms.get(&5i32).unwrap());
// Return the jwt
serde_json::to_string(
@ -688,24 +709,98 @@ impl Perform for CreateComment {
}
};
// TODO You like your own comment by default
// Simulate a comment view to get back blank score, no need to fetch anything
let comment_view = CommentView::from_new_comment(&inserted_comment);
let comment_out = serde_json::to_string(
&CreateCommentResponse {
op: self.op_type().to_string(),
comment: inserted_comment
comment: comment_view
}
)
.unwrap();
chat.send_room_message(self.post_id, &comment_out, addr);
println!("{:?}", chat.rooms.keys());
println!("{:?}", chat.rooms.get(&5i32).unwrap());
// println!("{:?}", chat.rooms.keys());
// println!("{:?}", chat.rooms.get(&5i32).unwrap());
comment_out
}
}
impl Perform for CreateCommentLike {
fn op_type(&self) -> UserOperation {
UserOperation::CreateCommentLike
}
fn perform(&self, chat: &mut ChatServer, addr: usize) -> String {
let conn = establish_connection();
let claims = match Claims::decode(&self.auth) {
Ok(claims) => claims.claims,
Err(e) => {
return self.error("Not logged in.");
}
};
let user_id = claims.id;
let iss = claims.iss;
let fedi_user_id = format!("{}/{}", iss, user_id);
let like_form = CommentLikeForm {
comment_id: self.comment_id,
post_id: self.post_id,
fedi_user_id: fedi_user_id.to_owned(),
score: self.score
};
// Remove any likes first
CommentLike::remove(&conn, &like_form).unwrap();
// Only add the like if the score isnt 0
if &like_form.score != &0 {
let inserted_like = match CommentLike::like(&conn, &like_form) {
Ok(like) => like,
Err(e) => {
return self.error("Couldn't like comment.");
}
};
}
// Have to refetch the comment to get the current state
// thread::sleep(time::Duration::from_secs(1));
let liked_comment = CommentView::read(&conn, self.comment_id, &Some(fedi_user_id));
let mut liked_comment_sent = liked_comment.clone();
liked_comment_sent.my_vote = None;
let like_out = serde_json::to_string(
&CreateCommentLikeResponse {
op: self.op_type().to_string(),
comment: liked_comment
}
)
.unwrap();
let like_sent_out = serde_json::to_string(
&CreateCommentLikeResponse {
op: self.op_type().to_string(),
comment: liked_comment_sent
}
)
.unwrap();
chat.send_room_message(self.post_id, &like_sent_out, addr);
like_out
}
}
// impl Handler<Login> for ChatServer {

View file

@ -1,7 +1,7 @@
import { Component, linkEvent } from 'inferno';
import { Subscription } from "rxjs";
import { retryWhen, delay, take } from 'rxjs/operators';
import { UserOperation, Community, Post as PostI, PostResponse, Comment, CommentForm as CommentFormI, CommentResponse } from '../interfaces';
import { UserOperation, Community, Post as PostI, PostResponse, Comment, CommentForm as CommentFormI, CommentResponse, CommentLikeForm, CreateCommentLikeResponse } from '../interfaces';
import { WebSocketService, UserService } from '../services';
import { msgOp } from '../utils';
import { MomentTime } from './moment-time';
@ -9,7 +9,6 @@ import { MomentTime } from './moment-time';
interface CommentNodeI {
comment: Comment;
children?: Array<CommentNodeI>;
showReply?: boolean;
};
interface State {
@ -141,7 +140,6 @@ export class Post extends Component<any, State> {
);
}
parseMessage(msg: any) {
console.log(msg);
let op: UserOperation = msgOp(msg);
@ -157,6 +155,16 @@ export class Post extends Component<any, State> {
let res: CommentResponse = msg;
this.state.comments.unshift(res.comment);
this.setState(this.state);
} else if (op == UserOperation.CreateCommentLike) {
let res: CreateCommentLikeResponse = msg;
let found: Comment = this.state.comments.find(c => c.id === res.comment.id);
found.score = res.comment.score;
found.upvotes = res.comment.upvotes;
found.downvotes = res.comment.downvotes;
if (res.comment.my_vote !== null)
found.my_vote = res.comment.my_vote;
console.log(res.comment.my_vote);
this.setState(this.state);
}
}
@ -174,19 +182,52 @@ export class CommentNodes extends Component<CommentNodesProps, CommentNodesState
constructor(props, context) {
super(props, context);
this.handleReplyClick = this.handleReplyClick.bind(this);
this.handleReplyCancel = this.handleReplyCancel.bind(this);
}
render() {
return (
<div className="comments">
{this.props.nodes.map(node =>
<CommentNode node={node} noIndent={this.props.noIndent} />
)}
</div>
)
}
}
interface CommentNodeState {
showReply: boolean;
}
interface CommentNodeProps {
node: CommentNodeI;
noIndent?: boolean;
}
export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
private emptyState: CommentNodeState = {
showReply: false
}
constructor(props, context) {
super(props, context);
this.state = this.emptyState;
this.handleReplyCancel = this.handleReplyCancel.bind(this);
this.handleCommentLike = this.handleCommentLike.bind(this);
this.handleCommentDisLike = this.handleCommentDisLike.bind(this);
}
render() {
let node = this.props.node;
return (
<div className={`comment ${node.comment.parent_id && !this.props.noIndent ? 'ml-4' : ''}`}>
<div className="float-left small text-center">
<div className="pointer upvote"></div>
<div>20</div>
<div className="pointer downvote"></div>
<div className={`pointer upvote ${node.comment.my_vote == 1 ? 'text-info' : 'text-muted'}`} onClick={linkEvent(node, this.handleCommentLike)}></div>
<div>{node.comment.score}</div>
<div className={`pointer downvote ${node.comment.my_vote == -1 && 'text-danger'}`} onClick={linkEvent(node, this.handleCommentDisLike)}></div>
</div>
<div className="details ml-4">
<ul class="list-inline mb-0 text-muted small">
@ -195,9 +236,9 @@ export class CommentNodes extends Component<CommentNodesProps, CommentNodesState
</li>
<li className="list-inline-item">
<span>(
<span className="text-info">+1300</span>
<span className="text-info">+{node.comment.upvotes}</span>
<span> | </span>
<span className="text-danger">-29</span>
<span className="text-danger">-{node.comment.downvotes}</span>
<span>) </span>
</span>
</li>
@ -208,41 +249,61 @@ export class CommentNodes extends Component<CommentNodesProps, CommentNodesState
<p className="mb-0">{node.comment.content}</p>
<ul class="list-inline mb-1 text-muted small font-weight-bold">
<li className="list-inline-item">
<span class="pointer" onClick={linkEvent(node, this.handleReplyClick)}>reply</span>
<span class="pointer" onClick={linkEvent(this, this.handleReplyClick)}>reply</span>
</li>
<li className="list-inline-item">
<a className="text-muted" href="test">link</a>
</li>
</ul>
</div>
{node.showReply && <CommentForm node={node} onReplyCancel={this.handleReplyCancel} />}
{node.children && <CommentNodes nodes={node.children}/>}
</div>
)}
{this.state.showReply && <CommentForm node={node} onReplyCancel={this.handleReplyCancel} />}
{this.props.node.children && <CommentNodes nodes={this.props.node.children}/>}
</div>
)
}
handleReplyClick(i: CommentNodeI, event) {
i.showReply = true;
private getScore(): number {
return (this.props.node.comment.upvotes - this.props.node.comment.downvotes) || 0;
}
handleReplyClick(i: CommentNode, event) {
i.state.showReply = true;
i.setState(i.state);
}
handleReplyCancel(): any {
this.state.showReply = false;
this.setState(this.state);
}
handleReplyCancel(i: CommentNodeI): any {
i.showReply = false;
this.setState(this.state);
handleCommentLike(i: CommentNodeI, event) {
let form: CommentLikeForm = {
comment_id: i.comment.id,
post_id: i.comment.post_id,
score: (i.comment.my_vote == 1) ? 0 : 1
};
WebSocketService.Instance.likeComment(form);
}
handleCommentDisLike(i: CommentNodeI, event) {
let form: CommentLikeForm = {
comment_id: i.comment.id,
post_id: i.comment.post_id,
score: (i.comment.my_vote == -1) ? 0 : -1
};
WebSocketService.Instance.likeComment(form);
}
}
interface CommentFormProps {
postId?: number;
node?: CommentNodeI;
onReplyCancel?(node: CommentNodeI);
onReplyCancel?();
}
interface CommentFormState {
commentForm: CommentFormI;
topReply: boolean;
}
export class CommentForm extends Component<CommentFormProps, CommentFormState> {
@ -253,8 +314,7 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
content: null,
post_id: null,
parent_id: null
},
topReply: true
}
}
constructor(props, context) {
@ -262,16 +322,11 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
this.state = this.emptyState;
if (this.props.node) {
this.state.topReply = false;
this.state.commentForm.post_id = this.props.node.comment.post_id;
this.state.commentForm.parent_id = this.props.node.comment.id;
} else {
this.state.commentForm.post_id = this.props.postId;
}
console.log(this.state);
this.handleReplyCancel = this.handleReplyCancel.bind(this);
}
render() {
@ -286,7 +341,7 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
<div class="row">
<div class="col-sm-12">
<button type="submit" class="btn btn-secondary mr-2">Post</button>
{!this.state.topReply && <button type="button" class="btn btn-secondary" onClick={this.handleReplyCancel}>Cancel</button>}
{this.props.node && <button type="button" class="btn btn-secondary" onClick={linkEvent(this, this.handleReplyCancel)}>Cancel</button>}
</div>
</div>
</form>
@ -299,6 +354,9 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
i.state.commentForm.content = undefined;
i.setState(i.state);
event.target.reset();
if (i.props.node) {
i.props.onReplyCancel();
}
}
handleCommentContentChange(i: CommentForm, event) {
@ -306,7 +364,7 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
i.state.commentForm.content = event.target.value;
}
handleReplyCancel(event) {
this.props.onReplyCancel(this.props.node);
handleReplyCancel(i: CommentForm, event) {
i.props.onReplyCancel();
}
}

View file

@ -1,5 +1,5 @@
export enum UserOperation {
Login, Register, CreateCommunity, CreatePost, ListCommunities, GetPost, GetCommunity, CreateComment
Login, Register, CreateCommunity, CreatePost, ListCommunities, GetPost, GetCommunity, CreateComment, CreateCommentLike
}
export interface User {
@ -63,6 +63,10 @@ export interface Comment {
parent_id?: number;
published: string;
updated?: string;
score: number;
upvotes: number;
downvotes: number;
my_vote?: number;
}
export interface CommentForm {
@ -77,6 +81,18 @@ export interface CommentResponse {
comment: Comment;
}
export interface CommentLikeForm {
comment_id: number;
post_id: number;
score: number;
auth?: string;
}
export interface CreateCommentLikeResponse {
op: string;
comment: Comment;
}
export interface LoginForm {
username_or_email: string;
password: string;

View file

@ -1,5 +1,5 @@
import { wsUri } from '../env';
import { LoginForm, RegisterForm, UserOperation, CommunityForm, PostForm, CommentForm } from '../interfaces';
import { LoginForm, RegisterForm, UserOperation, CommunityForm, PostForm, CommentForm, CommentLikeForm } from '../interfaces';
import { webSocket } from 'rxjs/webSocket';
import { Subject } from 'rxjs';
import { retryWhen, delay, take } from 'rxjs/operators';
@ -47,7 +47,8 @@ export class WebSocketService {
}
public getPost(postId: number) {
this.subject.next(this.wsSendWrapper(UserOperation.GetPost, {id: postId}));
let data = {id: postId, auth: UserService.Instance.auth };
this.subject.next(this.wsSendWrapper(UserOperation.GetPost, data));
}
public getCommunity(communityId: number) {
@ -59,6 +60,11 @@ export class WebSocketService {
this.subject.next(this.wsSendWrapper(UserOperation.CreateComment, commentForm));
}
public likeComment(form: CommentLikeForm) {
this.setAuth(form);
this.subject.next(this.wsSendWrapper(UserOperation.CreateCommentLike, form));
}
private wsSendWrapper(op: UserOperation, data: any) {
let send = { op: UserOperation[op], data: data };
console.log(send);
@ -72,4 +78,10 @@ export class WebSocketService {
throw "Not logged in";
}
}
}
window.onbeforeunload = (e => {
WebSocketService.Instance.subject.unsubscribe();
});