Adding comment voting

- Extracting out some components.
- Fixing an issue with window refreshing websockets.
pull/722/head
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, fedi_user_id text not null,
published timestamp not null default now() 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 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()
); );

View File

@ -11,7 +11,9 @@ create table comment (
create table comment_like ( create table comment_like (
id serial primary key, id serial primary key,
comment_id int references comment on update cascade on delete cascade not null, 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, fedi_user_id text not null,
score smallint not null, -- -1, or 1 for dislike, like, no row for no opinion 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> pub updated: Option<chrono::NaiveDateTime>
} }
#[derive(Identifiable, Queryable, Associations, PartialEq, Debug)] #[derive(Identifiable, Queryable, Associations, PartialEq, Debug, Clone)]
#[belongs_to(Comment)] #[belongs_to(Comment)]
#[table_name = "comment_like"] #[table_name = "comment_like"]
pub struct CommentLike { pub struct CommentLike {
pub id: i32, pub id: i32,
pub comment_id: i32, pub comment_id: i32,
pub post_id: i32,
pub fedi_user_id: String, pub fedi_user_id: String,
pub score: i16, pub score: i16,
pub published: chrono::NaiveDateTime, pub published: chrono::NaiveDateTime,
@ -51,6 +52,7 @@ pub struct CommentLike {
#[table_name="comment_like"] #[table_name="comment_like"]
pub struct CommentLikeForm { pub struct CommentLikeForm {
pub comment_id: i32, pub comment_id: i32,
pub post_id: i32,
pub fedi_user_id: String, pub fedi_user_id: String,
pub score: i16 pub score: i16
} }
@ -84,6 +86,13 @@ impl Crud<CommentForm> for Comment {
} }
impl Likeable <CommentLikeForm> for CommentLike { 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> { fn like(conn: &PgConnection, comment_like_form: &CommentLikeForm) -> Result<Self, Error> {
use schema::comment_like::dsl::*; use schema::comment_like::dsl::*;
insert_into(comment_like) insert_into(comment_like)
@ -99,15 +108,110 @@ impl Likeable <CommentLikeForm> for CommentLike {
} }
} }
impl Comment { impl CommentLike {
pub fn from_post(conn: &PgConnection, post: &Post) -> Result<Vec<Self>, Error> { pub fn from_post(conn: &PgConnection, post_id_from: i32) -> Result<Vec<Self>, Error> {
use schema::community::dsl::*; use schema::comment_like::dsl::*;
Comment::belonging_to(post) comment_like
.order_by(comment::published.desc()) .filter(post_id.eq(post_id_from))
.load::<Self>(conn) .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)] #[cfg(test)]
mod tests { mod tests {
use establish_connection; use establish_connection;
@ -169,6 +273,7 @@ mod tests {
let comment_like_form = CommentLikeForm { let comment_like_form = CommentLikeForm {
comment_id: inserted_comment.id, comment_id: inserted_comment.id,
post_id: inserted_post.id,
fedi_user_id: "test".into(), fedi_user_id: "test".into(),
score: 1 score: 1
}; };
@ -178,6 +283,7 @@ mod tests {
let expected_comment_like = CommentLike { let expected_comment_like = CommentLike {
id: inserted_comment_like.id, id: inserted_comment_like.id,
comment_id: inserted_comment.id, comment_id: inserted_comment.id,
post_id: inserted_post.id,
fedi_user_id: "test".into(), fedi_user_id: "test".into(),
published: inserted_comment_like.published, published: inserted_comment_like.published,
score: 1 score: 1

View File

@ -77,6 +77,12 @@ impl Crud<PostForm> for Post {
} }
impl Likeable <PostLikeForm> for PostLike { 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> { fn like(conn: &PgConnection, post_like_form: &PostLikeForm) -> Result<Self, Error> {
use schema::post_like::dsl::*; use schema::post_like::dsl::*;
insert_into(post_like) insert_into(post_like)

View File

@ -43,6 +43,7 @@ pub trait Joinable<T> {
} }
pub trait Likeable<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 like(conn: &PgConnection, form: &T) -> Result<Self, Error> where Self: Sized;
fn remove(conn: &PgConnection, form: &T) -> Result<usize, 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) { comment_like (id) {
id -> Int4, id -> Int4,
comment_id -> Int4, comment_id -> Int4,
post_id -> Int4,
fedi_user_id -> Text, fedi_user_id -> Text,
score -> Int2, score -> Int2,
published -> Timestamp, published -> Timestamp,
@ -85,6 +86,7 @@ table! {
joinable!(comment -> post (post_id)); joinable!(comment -> post (post_id));
joinable!(comment_like -> comment (comment_id)); joinable!(comment_like -> comment (comment_id));
joinable!(comment_like -> post (post_id));
joinable!(community_follower -> community (community_id)); joinable!(community_follower -> community (community_id));
joinable!(community_user -> community (community_id)); joinable!(community_user -> community (community_id));
joinable!(post -> community (community_id)); joinable!(post -> community (community_id));

View File

@ -9,8 +9,9 @@ use serde::{Deserialize, Serialize};
use serde_json::{Result, Value}; use serde_json::{Result, Value};
use bcrypt::{verify}; use bcrypt::{verify};
use std::str::FromStr; use std::str::FromStr;
use std::{thread, time};
use {Crud, Joinable, establish_connection}; use {Crud, Joinable, Likeable, establish_connection};
use actions::community::*; use actions::community::*;
use actions::user::*; use actions::user::*;
use actions::post::*; use actions::post::*;
@ -19,7 +20,7 @@ use actions::comment::*;
#[derive(EnumString,ToString,Debug)] #[derive(EnumString,ToString,Debug)]
pub enum UserOperation { 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)] #[derive(Serialize, Deserialize)]
pub struct GetPost { pub struct GetPost {
id: i32 id: i32,
auth: Option<String>
} }
#[derive(Serialize, Deserialize)] #[derive(Serialize, Deserialize)]
pub struct GetPostResponse { pub struct GetPostResponse {
op: String, op: String,
post: Post, post: Post,
comments: Vec<Comment> comments: Vec<CommentView>
} }
#[derive(Serialize, Deserialize)] #[derive(Serialize, Deserialize)]
@ -183,7 +185,22 @@ pub struct CreateComment {
#[derive(Serialize, Deserialize)] #[derive(Serialize, Deserialize)]
pub struct CreateCommentResponse { pub struct CreateCommentResponse {
op: String, 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 /// `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(); let create_comment: CreateComment = serde_json::from_str(&data.to_string()).unwrap();
create_comment.perform(self, msg.id) 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 { let e = ErrorMessage {
op: "Unknown".to_string(), op: "Unknown".to_string(),
@ -576,6 +597,22 @@ impl Perform for GetPost {
let conn = establish_connection(); 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) { let post = match Post::read(&conn, self.id) {
Ok(post) => post, Ok(post) => post,
Err(e) => { Err(e) => {
@ -583,37 +620,21 @@ impl Perform for GetPost {
} }
}; };
// let mut rooms = Vec::new();
// remove session from all rooms // remove session from all rooms
for (n, sessions) in &mut chat.rooms { for (n, sessions) in &mut chat.rooms {
// if sessions.remove(&addr) {
// // rooms.push(*n);
// }
sessions.remove(&addr); 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() { if chat.rooms.get_mut(&self.id).is_none() {
chat.rooms.insert(self.id, HashSet::new()); 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); 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.keys());
println!("{:?}", chat.rooms.get(&5i32).unwrap()); // println!("{:?}", chat.rooms.get(&5i32).unwrap());
// Return the jwt // Return the jwt
serde_json::to_string( 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( let comment_out = serde_json::to_string(
&CreateCommentResponse { &CreateCommentResponse {
op: self.op_type().to_string(), op: self.op_type().to_string(),
comment: inserted_comment comment: comment_view
} }
) )
.unwrap(); .unwrap();
chat.send_room_message(self.post_id, &comment_out, addr); chat.send_room_message(self.post_id, &comment_out, addr);
println!("{:?}", chat.rooms.keys()); // println!("{:?}", chat.rooms.keys());
println!("{:?}", chat.rooms.get(&5i32).unwrap()); // println!("{:?}", chat.rooms.get(&5i32).unwrap());
comment_out 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 { // impl Handler<Login> for ChatServer {

View File

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

View File

@ -1,5 +1,5 @@
export enum UserOperation { export enum UserOperation {
Login, Register, CreateCommunity, CreatePost, ListCommunities, GetPost, GetCommunity, CreateComment Login, Register, CreateCommunity, CreatePost, ListCommunities, GetPost, GetCommunity, CreateComment, CreateCommentLike
} }
export interface User { export interface User {
@ -63,6 +63,10 @@ export interface Comment {
parent_id?: number; parent_id?: number;
published: string; published: string;
updated?: string; updated?: string;
score: number;
upvotes: number;
downvotes: number;
my_vote?: number;
} }
export interface CommentForm { export interface CommentForm {
@ -77,6 +81,18 @@ export interface CommentResponse {
comment: Comment; 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 { export interface LoginForm {
username_or_email: string; username_or_email: string;
password: string; password: string;

View File

@ -1,5 +1,5 @@
import { wsUri } from '../env'; 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 { webSocket } from 'rxjs/webSocket';
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
import { retryWhen, delay, take } from 'rxjs/operators'; import { retryWhen, delay, take } from 'rxjs/operators';
@ -47,7 +47,8 @@ export class WebSocketService {
} }
public getPost(postId: number) { 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) { public getCommunity(communityId: number) {
@ -59,6 +60,11 @@ export class WebSocketService {
this.subject.next(this.wsSendWrapper(UserOperation.CreateComment, commentForm)); 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) { private wsSendWrapper(op: UserOperation, data: any) {
let send = { op: UserOperation[op], data: data }; let send = { op: UserOperation[op], data: data };
console.log(send); console.log(send);
@ -72,4 +78,10 @@ export class WebSocketService {
throw "Not logged in"; throw "Not logged in";
} }
} }
} }
window.onbeforeunload = (e => {
WebSocketService.Instance.subject.unsubscribe();
});