- [Sticky Sidebar](https://stackoverflow.com/questions/38382043/how-to-use-css-position-sticky-to-keep-a-sidebar-visible-with-bootstrap-4/49111934)
- [RXJS websocket](https://stackoverflow.com/questions/44060315/reconnecting-a-websocket-in-angular-and-rxjs/44067972#44067972)
- [Rust JWT](https://github.com/Keats/jsonwebtoken)
+- [Hierarchical tree building javascript](https://stackoverflow.com/a/40732240/1655478)
## TODOs
- Endpoints
fn handle(&mut self, msg: WSMessage, ctx: &mut Self::Context) {
println!("id: {} msg: {}", self.id, msg.0);
ctx.text(msg.0);
- ctx.text("NO");
}
}
// _ => ctx.stop(),
fut::ok(())
})
- .wait(ctx);
+ .wait(ctx);
// we check for /sss type of messages
// if m.starts_with('/') {
/// session. implementation is super primitive
pub struct ChatServer {
sessions: HashMap<usize, Recipient<WSMessage>>, // A map from generated random ID to session addr
- rooms: HashMap<String, HashSet<usize>>, // A map from room name to set of connectionIDs
+ rooms: HashMap<i32, HashSet<usize>>, // A map from room / post name to set of connectionIDs
rng: ThreadRng,
}
impl Default for ChatServer {
fn default() -> ChatServer {
// default room
- let mut rooms = HashMap::new();
- rooms.insert("Main".to_owned(), HashSet::new());
+ let rooms = HashMap::new();
ChatServer {
sessions: HashMap::new(),
impl ChatServer {
/// Send message to all users in the room
- fn send_room_message(&self, room: &str, message: &str, skip_id: usize) {
- if let Some(sessions) = self.rooms.get(room) {
+ fn send_room_message(&self, room: i32, message: &str, skip_id: usize) {
+ if let Some(sessions) = self.rooms.get(&room) {
for id in sessions {
if *id != skip_id {
if let Some(addr) = self.sessions.get(id) {
println!("Someone joined");
// notify all users in same room
- self.send_room_message(&"Main".to_owned(), "Someone joined", 0);
+ // self.send_room_message(&"Main".to_owned(), "Someone joined", 0);
// register session with random id
let id = self.rng.gen::<usize>();
self.sessions.insert(id, msg.addr);
// auto join session to Main room
- self.rooms.get_mut(&"Main".to_owned()).unwrap().insert(id);
+ // self.rooms.get_mut(&"Main".to_owned()).unwrap().insert(id);
// send id back
id
fn handle(&mut self, msg: Disconnect, _: &mut Context<Self>) {
println!("Someone disconnected");
- let mut rooms: Vec<String> = Vec::new();
+ let mut rooms: Vec<i32> = Vec::new();
// remove address
if self.sessions.remove(&msg.id).is_some() {
// remove session from all rooms
- for (name, sessions) in &mut self.rooms {
+ for (id, sessions) in &mut self.rooms {
if sessions.remove(&msg.id) {
- rooms.push(name.to_owned());
+ // rooms.push(*id);
}
}
}
// send message to other users
- for room in rooms {
- self.send_room_message(&room, "Someone disconnected", 0);
- }
+ // for room in rooms {
+ // self.send_room_message(room, "Someone disconnected", 0);
+ // }
}
}
/// Handler for Message message.
-impl Handler<ClientMessage> for ChatServer {
- type Result = ();
+// impl Handler<ClientMessage> for ChatServer {
+// type Result = ();
- fn handle(&mut self, msg: ClientMessage, _: &mut Context<Self>) {
- self.send_room_message(&msg.room, msg.msg.as_str(), msg.id);
- }
-}
+// fn handle(&mut self, msg: ClientMessage, _: &mut Context<Self>) {
+// self.send_room_message(&msg.room, msg.msg.as_str(), msg.id);
+// }
+// }
/// Handler for Message message.
impl Handler<StandardMessage> for ChatServer {
let res: String = match user_operation {
UserOperation::Login => {
let login: Login = serde_json::from_str(&data.to_string()).unwrap();
- login.perform()
+ login.perform(self, msg.id)
},
UserOperation::Register => {
let register: Register = serde_json::from_str(&data.to_string()).unwrap();
- register.perform()
+ register.perform(self, msg.id)
},
UserOperation::CreateCommunity => {
let create_community: CreateCommunity = serde_json::from_str(&data.to_string()).unwrap();
- create_community.perform()
+ create_community.perform(self, msg.id)
},
UserOperation::ListCommunities => {
let list_communities: ListCommunities = ListCommunities;
- list_communities.perform()
+ list_communities.perform(self, msg.id)
},
UserOperation::CreatePost => {
let create_post: CreatePost = serde_json::from_str(&data.to_string()).unwrap();
- create_post.perform()
+ create_post.perform(self, msg.id)
},
UserOperation::GetPost => {
let get_post: GetPost = serde_json::from_str(&data.to_string()).unwrap();
- get_post.perform()
+ get_post.perform(self, msg.id)
},
UserOperation::GetCommunity => {
let get_community: GetCommunity = serde_json::from_str(&data.to_string()).unwrap();
- get_community.perform()
+ get_community.perform(self, msg.id)
},
UserOperation::CreateComment => {
let create_comment: CreateComment = serde_json::from_str(&data.to_string()).unwrap();
- create_comment.perform()
+ create_comment.perform(self, msg.id)
},
_ => {
let e = ErrorMessage {
};
serde_json::to_string(&e).unwrap()
}
- // _ => "no".to_string()
};
MessageResult(res)
pub trait Perform {
- fn perform(&self) -> String;
+ fn perform(&self, chat: &mut ChatServer, addr: usize) -> String;
fn op_type(&self) -> UserOperation;
fn error(&self, error_msg: &str) -> String {
serde_json::to_string(
fn op_type(&self) -> UserOperation {
UserOperation::Login
}
- fn perform(&self) -> String {
+ fn perform(&self, chat: &mut ChatServer, addr: usize) -> String {
let conn = establish_connection();
fn op_type(&self) -> UserOperation {
UserOperation::Register
}
- fn perform(&self) -> String {
+ fn perform(&self, chat: &mut ChatServer, addr: usize) -> String {
let conn = establish_connection();
UserOperation::CreateCommunity
}
- fn perform(&self) -> String {
+ fn perform(&self, chat: &mut ChatServer, addr: usize) -> String {
let conn = establish_connection();
UserOperation::ListCommunities
}
- fn perform(&self) -> String {
+ fn perform(&self, chat: &mut ChatServer, addr: usize) -> String {
let conn = establish_connection();
UserOperation::CreatePost
}
- fn perform(&self) -> String {
+ fn perform(&self, chat: &mut ChatServer, addr: usize) -> String {
let conn = establish_connection();
UserOperation::GetPost
}
- fn perform(&self) -> String {
+ fn perform(&self, chat: &mut ChatServer, addr: usize) -> String {
let conn = establish_connection();
}
};
+
+ // 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();
+ println!("{:?}", chat.rooms.keys());
+ println!("{:?}", chat.rooms.get(&5i32).unwrap());
+
// Return the jwt
serde_json::to_string(
&GetPostResponse {
UserOperation::GetCommunity
}
- fn perform(&self) -> String {
+ fn perform(&self, chat: &mut ChatServer, addr: usize) -> String {
let conn = establish_connection();
UserOperation::CreateComment
}
- fn perform(&self) -> String {
+ fn perform(&self, chat: &mut ChatServer, addr: usize) -> String {
let conn = establish_connection();
}
};
- serde_json::to_string(
+ let comment_out = serde_json::to_string(
&CreateCommentResponse {
op: self.op_type().to_string(),
comment: inserted_comment
}
)
- .unwrap()
+ .unwrap();
+
+ chat.send_room_message(self.post_id, &comment_out, addr);
+
+ println!("{:?}", chat.rooms.keys());
+ println!("{:?}", chat.rooms.get(&5i32).unwrap());
+
+ comment_out
}
}
handleCommunityNameChange(i: CreateCommunity, event) {
i.state.communityForm.name = event.target.value;
- i.setState(i.state);
}
parseMessage(msg: any) {
handlePostUrlChange(i: CreatePost, event) {
i.state.postForm.url = event.target.value;
- i.setState(i.state);
}
handlePostNameChange(i: CreatePost, event) {
i.state.postForm.name = event.target.value;
- i.setState(i.state);
}
handlePostBodyChange(i: CreatePost, event) {
i.state.postForm.body = event.target.value;
- i.setState(i.state);
}
handlePostCommunityChange(i: CreatePost, event) {
i.state.postForm.community_id = Number(event.target.value);
- i.setState(i.state);
}
parseMessage(msg: any) {
} else if (op == UserOperation.ListCommunities) {
let res: ListCommunitiesResponse = msg;
this.state.communities = res.communities;
+ this.state.postForm.community_id = res.communities[0].id; // TODO set it to the default community
this.setState(this.state);
} else if (op == UserOperation.CreatePost) {
let res: PostResponse = msg;
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 } from '../interfaces';
+import { UserOperation, Community, Post as PostI, PostResponse, Comment, CommentForm as CommentFormI, CommentResponse } from '../interfaces';
import { WebSocketService, UserService } from '../services';
import { msgOp } from '../utils';
+interface CommentNodeI {
+ comment: Comment;
+ children?: Array<CommentNodeI>;
+ showReply?: boolean;
+};
+
interface State {
post: PostI;
- commentForm: CommentForm;
comments: Array<Comment>;
}
id: null,
published: null,
},
- commentForm: {
- auth: null,
- content: null,
- post_id: null
- },
comments: []
}
constructor(props, context) {
super(props, context);
- let postId = Number(this.props.match.params.id);
-
this.state = this.emptyState;
- this.state.commentForm.post_id = postId;
+
+ this.state.post.id = Number(this.props.match.params.id);
this.subscription = WebSocketService.Instance.subject
.pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
() => console.log('complete')
);
- WebSocketService.Instance.getPost(postId);
+ WebSocketService.Instance.getPost(this.state.post.id);
}
componentWillUnmount() {
return (
<div class="container">
<div class="row">
- <div class="col-12 col-lg-6 mb-4">
- {this.state.post.name}
- {this.commentForm()}
- {this.comments()}
+ <div class="col-12 col-sm-8 col-lg-7 mb-3">
+ {this.postHeader()}
+ <CommentForm postId={this.state.post.id} />
+ {this.commentsTree()}
+ </div>
+ <div class="col-12 col-sm-4 col-lg-3 mb-3">
+ {this.newComments()}
+ </div>
+ <div class="col-12 col-sm-12 col-lg-2">
+ {this.sidebar()}
</div>
</div>
</div>
)
}
- comments() {
+ postHeader() {
+ let title = this.state.post.url
+ ? <h5><a href={this.state.post.url}>{this.state.post.name}</a></h5>
+ : <h5>{this.state.post.name}</h5>;
return (
<div>
- <h3>Comments</h3>
+ {title}
+ via {this.state.post.attributed_to} X hours ago
+ {this.state.post.body}
+ </div>
+ )
+ }
+
+ newComments() {
+ return (
+ <div class="sticky-top">
+ <h4>New Comments</h4>
{this.state.comments.map(comment =>
- <div>{comment.content}</div>
+ <CommentNodes nodes={[{comment: comment}]} />
)}
</div>
)
}
-
-
- commentForm() {
- return (
- <div>
- <form onSubmit={linkEvent(this, this.handleCreateCommentSubmit)}>
- <h3>Create Comment</h3>
- <div class="form-group row">
- <label class="col-sm-2 col-form-label">Name</label>
- <div class="col-sm-10">
- <textarea class="form-control" value={this.state.commentForm.content} onInput={linkEvent(this, this.handleCommentContentChange)} required minLength={3} />
- </div>
- </div>
- <div class="form-group row">
- <div class="col-sm-10">
- <button type="submit" class="btn btn-secondary">Create</button>
- </div>
- </div>
- </form>
+
+ sidebar() {
+ return (
+ <div class="sticky-top">
+ <h4>Sidebar</h4>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
);
}
-
- handleCreateCommentSubmit(i: Post, event) {
- event.preventDefault();
- WebSocketService.Instance.createComment(i.state.commentForm);
+
+ // buildCommentsTree(): Array<CommentNodeI> {
+ buildCommentsTree(): any {
+ let tree: Array<CommentNodeI> = this.createCommentsTree(this.state.comments);
+ console.log(tree); // TODO this is redoing every time and it shouldn't
+ return tree;
}
- handleCommentContentChange(i: Post, event) {
- i.state.commentForm.content = event.target.value;
- i.setState(i.state);
+ private createCommentsTree(comments: Array<Comment>): Array<CommentNodeI> {
+ let hashTable = {};
+ for (let comment of comments) {
+ let node: CommentNodeI = {
+ comment: comment
+ };
+ hashTable[comment.id] = { ...node, children : [] };
+ }
+ let tree: Array<CommentNodeI> = [];
+ for (let comment of comments) {
+ if( comment.parent_id ) hashTable[comment.parent_id].children.push(hashTable[comment.id]);
+ else tree.push(hashTable[comment.id]);
+ }
+ return tree;
+ }
+
+ commentsTree() {
+ let nodes = this.buildCommentsTree();
+ return (
+ <div className="sticky-top">
+ <CommentNodes nodes={nodes} />
+ </div>
+ );
}
+
parseMessage(msg: any) {
console.log(msg);
let op: UserOperation = msgOp(msg);
} else if (op == UserOperation.GetPost) {
let res: PostResponse = msg;
this.state.post = res.post;
- this.state.comments = res.comments;
+ this.state.comments = res.comments.reverse();
+ this.setState(this.state);
+ } else if (op == UserOperation.CreateComment) {
+ let res: CommentResponse = msg;
+ this.state.comments.unshift(res.comment);
this.setState(this.state);
}
+
+ }
+}
+
+interface CommentNodesState {
+}
+
+interface CommentNodesProps {
+ nodes: Array<CommentNodeI>;
+}
+
+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 =>
+ <div className="comment ml-2">
+ <div className="float-left small font-weight-light">
+ <div className="pointer">▲</div>
+ <div className="pointer">▼</div>
+ </div>
+ <div className="details ml-4">
+ <ul class="list-inline mb-0 text-muted small">
+ <li className="list-inline-item">
+ <a href={node.comment.attributed_to}>{node.comment.attributed_to}</a>
+ </li>
+ <li className="list-inline-item">
+ <span>(
+ <span className="text-info"> 1300</span>
+ <span> | </span>
+ <span className="text-danger">-29</span>
+ <span> ) points</span>
+ </span>
+ </li>
+ <li className="list-inline-item">
+ <span>X hours ago</span>
+ </li>
+ </ul>
+ <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>
+ </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>
+ )}
+ </div>
+ )
+ }
+
+ handleReplyClick(i: CommentNodeI, event) {
+ i.showReply = true;
+ this.setState(this.state);
+ }
+
+ handleReplyCancel(i: CommentNodeI): any {
+ i.showReply = false;
+ this.setState(this.state);
+ }
+}
+
+interface CommentFormProps {
+ postId?: number;
+ node?: CommentNodeI;
+ onReplyCancel?(node: CommentNodeI);
+}
+
+interface CommentFormState {
+ commentForm: CommentFormI;
+ topReply: boolean;
+}
+
+export class CommentForm extends Component<CommentFormProps, CommentFormState> {
+
+ private emptyState: CommentFormState = {
+ commentForm: {
+ auth: null,
+ content: null,
+ post_id: null,
+ parent_id: null
+ },
+ topReply: true
+ }
+
+ constructor(props, context) {
+ super(props, context);
+
+ 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() {
+ return (
+ <div>
+ <form onSubmit={linkEvent(this, this.handleCreateCommentSubmit)}>
+ <div class="form-group row">
+ <div class="col-sm-12">
+ <textarea class="form-control" value={this.state.commentForm.content} onInput={linkEvent(this, this.handleCommentContentChange)} placeholder="Comment here" required />
+ </div>
+ </div>
+ <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>}
+ </div>
+ </div>
+ </form>
+ </div>
+ );
+ }
+
+ handleCreateCommentSubmit(i: CommentForm, event) {
+ WebSocketService.Instance.createComment(i.state.commentForm);
+ i.state.commentForm.content = undefined;
+ i.setState(i.state);
+ event.target.reset();
+ }
+
+ handleCommentContentChange(i: CommentForm, event) {
+ // TODO don't use setState, it triggers a re-render
+ i.state.commentForm.content = event.target.value;
+ }
+
+ handleReplyCancel(event) {
+ this.props.onReplyCancel(this.props.node);
}
}
-
-
.pointer {
cursor: pointer;
}
this.subject.next(this.wsSendWrapper(UserOperation.CreateComment, commentForm));
}
- public getComments(postId: number) {
- this.subject.next(this.wsSendWrapper(UserOperation.GetComments, {post_id: postId}));
- }
-
private wsSendWrapper(op: UserOperation, data: any) {
let send = { op: UserOperation[op], data: data };
console.log(send);
projects / lemmy.git / commitdiff