fedi/lemmy
1
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy.git synced 2024-11-27 08:16:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'dev' into moderation

Browse source
This commit is contained in:
Dessalines 2019-04-09 08:37:08 -07:00
parent 5f3b95c0c2 85d16e8632
commit fd0cbfe4e2
42 changed files with 1291 additions and 784 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
README.md
View file

@ -1,4 +1,4 @@
<h1><img src="https://image.flaticon.com/icons/svg/194/194242.svg" width="30px"/> Lemmy</h1> <h1><img src="https://image.flaticon.com/icons/svg/194/194242.svg" width="50px" height="50px" /> Lemmy</h1>
[![Build Status](https://travis-ci.org/dessalines/lemmy.svg?branch=master)](https://travis-ci.org/dessalines/lemmy) [![Build Status](https://travis-ci.org/dessalines/lemmy.svg?branch=master)](https://travis-ci.org/dessalines/lemmy)
[![star this repo](http://githubbadges.com/star.svg?user=dessalines&repo=lemmy&style=flat)](https://github.com/dessalines/lemmy) [![star this repo](http://githubbadges.com/star.svg?user=dessalines&repo=lemmy&style=flat)](https://github.com/dessalines/lemmy)
@ -19,6 +19,15 @@ Made with [Rust](https://www.rust-lang.org), [Actix](https://actix.rs/), [Infern
## Features ## Features
- TBD - TBD
-
the name
Lead singer from motorhead.
The old school video game.
The furry rodents.
Goals r/ censorship
## Install ## Install
### Docker ### Docker
``` ```

4
server/migrations/2019-02-27-170003_create_community/up.sql
View file

@ -31,8 +31,6 @@ insert into category (name) values
('Meta'), ('Meta'),
('Other'); ('Other');
create table community ( create table community (
id serial primary key, id serial primary key,
name varchar(20) not null unique, name varchar(20) not null unique,
@ -58,4 +56,4 @@ create table community_follower (
published timestamp not null default now() published timestamp not null default now()
); );
insert into community (name, title, category_id, creator_id) values ('main', 'The default Community', 1, 1); insert into community (name, title, category_id, creator_id) values ('main', 'The Default Community', 1, 1);

1
server/migrations/2019-04-08-015947_create_user_view/down.sql Normal file
View file

@ -0,0 +1 @@
drop view user_view;

11
server/migrations/2019-04-08-015947_create_user_view/up.sql Normal file
View file

@ -0,0 +1,11 @@
create view user_view as
select id,
name,
fedi_name,
published,
(select count(*) from post p where p.creator_id = u.id) as number_of_posts,
(select coalesce(sum(score), 0) from post p, post_like pl where u.id = p.creator_id and p.id = pl.post_id) as post_score,
(select count(*) from comment c where c.creator_id = u.id) as number_of_comments,
(select coalesce(sum(score), 0) from comment c, comment_like cl where u.id = c.creator_id and c.id = cl.comment_id) as comment_score
from user_ u;

54
server/src/actions/comment_view.rs
View file

@ -1,7 +1,9 @@
extern crate diesel; extern crate diesel;
use diesel::*; use diesel::*;
use diesel::result::Error; use diesel::result::Error;
use diesel::dsl::*;
use serde::{Deserialize, Serialize}; use serde::{Deserialize, Serialize};
use { SortType };
// The faked schema since diesel doesn't do views // The faked schema since diesel doesn't do views
table! { table! {
@ -42,33 +44,61 @@ pub struct CommentView {
impl CommentView { impl CommentView {
pub fn list(conn: &PgConnection, from_post_id: i32, from_user_id: Option<i32>) -> Result<Vec<Self>, Error> { pub fn list(conn: &PgConnection,
sort: &SortType,
for_post_id: Option<i32>,
for_creator_id: Option<i32>,
my_user_id: Option<i32>,
limit: i64) -> Result<Vec<Self>, Error> {
use actions::comment_view::comment_view::dsl::*; use actions::comment_view::comment_view::dsl::*;
use diesel::prelude::*;
let mut query = comment_view.into_boxed(); let mut query = comment_view.limit(limit).into_boxed();
// The view lets you pass a null user_id, if you're not logged in // The view lets you pass a null user_id, if you're not logged in
if let Some(from_user_id) = from_user_id { if let Some(my_user_id) = my_user_id {
query = query.filter(user_id.eq(from_user_id)); query = query.filter(user_id.eq(my_user_id));
} else { } else {
query = query.filter(user_id.is_null()); query = query.filter(user_id.is_null());
} }
query = query.filter(post_id.eq(from_post_id)).order_by(published.desc()); if let Some(for_creator_id) = for_creator_id {
query = query.filter(creator_id.eq(for_creator_id));
};
if let Some(for_post_id) = for_post_id {
query = query.filter(post_id.eq(for_post_id));
};
query = match sort {
// SortType::Hot => query.order_by(hot_rank.desc()),
SortType::New => query.order_by(published.desc()),
SortType::TopAll => query.order_by(score.desc()),
SortType::TopYear => query
.filter(published.gt(now - 1.years()))
.order_by(score.desc()),
SortType::TopMonth => query
.filter(published.gt(now - 1.months()))
.order_by(score.desc()),
SortType::TopWeek => query
.filter(published.gt(now - 1.weeks()))
.order_by(score.desc()),
SortType::TopDay => query
.filter(published.gt(now - 1.days()))
.order_by(score.desc()),
_ => query.order_by(published.desc())
};
query.load::<Self>(conn) query.load::<Self>(conn)
} }
pub fn read(conn: &PgConnection, from_comment_id: i32, from_user_id: Option<i32>) -> Result<Self, Error> { pub fn read(conn: &PgConnection, from_comment_id: i32, my_user_id: Option<i32>) -> Result<Self, Error> {
use actions::comment_view::comment_view::dsl::*; use actions::comment_view::comment_view::dsl::*;
use diesel::prelude::*;
let mut query = comment_view.into_boxed(); let mut query = comment_view.into_boxed();
// The view lets you pass a null user_id, if you're not logged in // The view lets you pass a null user_id, if you're not logged in
if let Some(from_user_id) = from_user_id { if let Some(my_user_id) = my_user_id {
query = query.filter(user_id.eq(from_user_id)); query = query.filter(user_id.eq(my_user_id));
} else { } else {
query = query.filter(user_id.is_null()); query = query.filter(user_id.is_null());
} }
@ -178,8 +208,8 @@ mod tests {
my_vote: Some(1), my_vote: Some(1),
}; };
let read_comment_views_no_user = CommentView::list(&conn, inserted_post.id, None).unwrap(); let read_comment_views_no_user = CommentView::list(&conn, &SortType::New, Some(inserted_post.id), None, None, 999).unwrap();
let read_comment_views_with_user = CommentView::list(&conn, inserted_post.id, Some(inserted_user.id)).unwrap(); let read_comment_views_with_user = CommentView::list(&conn, &SortType::New, Some(inserted_post.id), None, Some(inserted_user.id), 999).unwrap();
let like_removed = CommentLike::remove(&conn, &comment_like_form).unwrap(); let like_removed = CommentLike::remove(&conn, &comment_like_form).unwrap();
let num_deleted = Comment::delete(&conn, inserted_comment.id).unwrap(); let num_deleted = Comment::delete(&conn, inserted_comment.id).unwrap();
Post::delete(&conn, inserted_post.id).unwrap(); Post::delete(&conn, inserted_post.id).unwrap();

1
server/src/actions/mod.rs
View file

@ -6,3 +6,4 @@ pub mod post_view;
pub mod comment_view; pub mod comment_view;
pub mod category; pub mod category;
pub mod community_view; pub mod community_view;
pub mod user_view;

57
server/src/actions/post_view.rs
View file

@ -1,18 +1,15 @@
extern crate diesel; extern crate diesel;
use diesel::*; use diesel::*;
use diesel::result::Error; use diesel::result::Error;
use diesel::dsl::*;
use serde::{Deserialize, Serialize}; use serde::{Deserialize, Serialize};
use { SortType };
#[derive(EnumString,ToString,Debug, Serialize, Deserialize)] #[derive(EnumString,ToString,Debug, Serialize, Deserialize)]
pub enum ListingType { pub enum PostListingType {
All, Subscribed, Community All, Subscribed, Community
} }
#[derive(EnumString,ToString,Debug, Serialize, Deserialize)]
pub enum ListingSortType {
Hot, New, TopDay, TopWeek, TopMonth, TopYear, TopAll
}
// The faked schema since diesel doesn't do views // The faked schema since diesel doesn't do views
table! { table! {
post_view (id) { post_view (id) {
@ -62,45 +59,53 @@ pub struct PostView {
} }
impl PostView { impl PostView {
pub fn list(conn: &PgConnection, type_: ListingType, sort: ListingSortType, from_community_id: Option<i32>, from_user_id: Option<i32>, limit: i64) -> Result<Vec<Self>, Error> { pub fn list(conn: &PgConnection,
type_: PostListingType,
sort: &SortType,
for_community_id: Option<i32>,
for_creator_id: Option<i32>,
my_user_id: Option<i32>,
limit: i64) -> Result<Vec<Self>, Error> {
use actions::post_view::post_view::dsl::*; use actions::post_view::post_view::dsl::*;
use diesel::dsl::*;
use diesel::prelude::*;
let mut query = post_view.limit(limit).into_boxed(); let mut query = post_view.limit(limit).into_boxed();
if let Some(from_community_id) = from_community_id { if let Some(for_community_id) = for_community_id {
query = query.filter(community_id.eq(from_community_id)); query = query.filter(community_id.eq(for_community_id));
};
if let Some(for_creator_id) = for_creator_id {
query = query.filter(creator_id.eq(for_creator_id));
}; };
match type_ { match type_ {
ListingType::Subscribed => { PostListingType::Subscribed => {
query = query.filter(subscribed.eq(true)); query = query.filter(subscribed.eq(true));
}, },
_ => {} _ => {}
}; };
// The view lets you pass a null user_id, if you're not logged in // The view lets you pass a null user_id, if you're not logged in
if let Some(from_user_id) = from_user_id { if let Some(my_user_id) = my_user_id {
query = query.filter(user_id.eq(from_user_id)); query = query.filter(user_id.eq(my_user_id));
} else { } else {
query = query.filter(user_id.is_null()); query = query.filter(user_id.is_null());
} }
query = match sort { query = match sort {
ListingSortType::Hot => query.order_by(hot_rank.desc()), SortType::Hot => query.order_by(hot_rank.desc()),
ListingSortType::New => query.order_by(published.desc()), SortType::New => query.order_by(published.desc()),
ListingSortType::TopAll => query.order_by(score.desc()), SortType::TopAll => query.order_by(score.desc()),
ListingSortType::TopYear => query SortType::TopYear => query
.filter(published.gt(now - 1.years())) .filter(published.gt(now - 1.years()))
.order_by(score.desc()), .order_by(score.desc()),
ListingSortType::TopMonth => query SortType::TopMonth => query
.filter(published.gt(now - 1.months())) .filter(published.gt(now - 1.months()))
.order_by(score.desc()), .order_by(score.desc()),
ListingSortType::TopWeek => query SortType::TopWeek => query
.filter(published.gt(now - 1.weeks())) .filter(published.gt(now - 1.weeks()))
.order_by(score.desc()), .order_by(score.desc()),
ListingSortType::TopDay => query SortType::TopDay => query
.filter(published.gt(now - 1.days())) .filter(published.gt(now - 1.days()))
.order_by(score.desc()) .order_by(score.desc())
}; };
@ -109,7 +114,7 @@ impl PostView {
} }
pub fn read(conn: &PgConnection, from_post_id: i32, from_user_id: Option<i32>) -> Result<Self, Error> { pub fn read(conn: &PgConnection, from_post_id: i32, my_user_id: Option<i32>) -> Result<Self, Error> {
use actions::post_view::post_view::dsl::*; use actions::post_view::post_view::dsl::*;
use diesel::prelude::*; use diesel::prelude::*;
@ -118,8 +123,8 @@ impl PostView {
query = query.filter(id.eq(from_post_id)); query = query.filter(id.eq(from_post_id));
if let Some(from_user_id) = from_user_id { if let Some(my_user_id) = my_user_id {
query = query.filter(user_id.eq(from_user_id)); query = query.filter(user_id.eq(my_user_id));
} else { } else {
query = query.filter(user_id.is_null()); query = query.filter(user_id.is_null());
}; };
@ -244,8 +249,8 @@ mod tests {
}; };
let read_post_listings_with_user = PostView::list(&conn, ListingType::Community, ListingSortType::New, Some(inserted_community.id), Some(inserted_user.id), 10).unwrap(); let read_post_listings_with_user = PostView::list(&conn, PostListingType::Community, &SortType::New, Some(inserted_community.id), None, Some(inserted_user.id), 10).unwrap();
let read_post_listings_no_user = PostView::list(&conn, ListingType::Community, ListingSortType::New, Some(inserted_community.id), None, 10).unwrap(); let read_post_listings_no_user = PostView::list(&conn, PostListingType::Community, &SortType::New, Some(inserted_community.id), None, None, 10).unwrap();
let read_post_listing_no_user = PostView::read(&conn, inserted_post.id, None).unwrap(); let read_post_listing_no_user = PostView::read(&conn, inserted_post.id, None).unwrap();
let read_post_listing_with_user = PostView::read(&conn, inserted_post.id, Some(inserted_user.id)).unwrap(); let read_post_listing_with_user = PostView::read(&conn, inserted_post.id, Some(inserted_user.id)).unwrap();

40
server/src/actions/user_view.rs Normal file
View file

@ -0,0 +1,40 @@
extern crate diesel;
use diesel::*;
use diesel::result::Error;
use serde::{Deserialize, Serialize};
table! {
user_view (id) {
id -> Int4,
name -> Varchar,
fedi_name -> Varchar,
published -> Timestamp,
number_of_posts -> BigInt,
post_score -> BigInt,
number_of_comments -> BigInt,
comment_score -> BigInt,
}
}
#[derive(Queryable, Identifiable, PartialEq, Debug, Serialize, Deserialize,QueryableByName,Clone)]
#[table_name="user_view"]
pub struct UserView {
pub id: i32,
pub name: String,
pub fedi_name: String,
pub published: chrono::NaiveDateTime,
pub number_of_posts: i64,
pub post_score: i64,
pub number_of_comments: i64,
pub comment_score: i64,
}
impl UserView {
pub fn read(conn: &PgConnection, from_user_id: i32) -> Result<Self, Error> {
use actions::user_view::user_view::dsl::*;
user_view.find(from_user_id)
.first::<Self>(conn)
}
}

5
server/src/bin/main.rs
View file

@ -82,11 +82,12 @@ impl Actor for WSSession {
} }
/// Handle messages from chat server, we simply send it to peer websocket /// Handle messages from chat server, we simply send it to peer websocket
/// These are room messages, IE sent to others in the room
impl Handler<WSMessage> for WSSession { impl Handler<WSMessage> for WSSession {
type Result = (); type Result = ();
fn handle(&mut self, msg: WSMessage, ctx: &mut Self::Context) { fn handle(&mut self, msg: WSMessage, ctx: &mut Self::Context) {
println!("id: {} msg: {}", self.id, msg.0); // println!("id: {} msg: {}", self.id, msg.0);
ctx.text(msg.0); ctx.text(msg.0);
} }
} }
@ -94,7 +95,7 @@ impl Handler<WSMessage> for WSSession {
/// WebSocket message handler /// WebSocket message handler
impl StreamHandler<ws::Message, ws::ProtocolError> for WSSession { impl StreamHandler<ws::Message, ws::ProtocolError> for WSSession {
fn handle(&mut self, msg: ws::Message, ctx: &mut Self::Context) { fn handle(&mut self, msg: ws::Message, ctx: &mut Self::Context) {
println!("WEBSOCKET MESSAGE: {:?} from id: {}", msg, self.id); // println!("WEBSOCKET MESSAGE: {:?} from id: {}", msg, self.id);
match msg { match msg {
ws::Message::Ping(msg) => { ws::Message::Ping(msg) => {
self.hb = Instant::now(); self.hb = Instant::now();

8
server/src/lib.rs
View file

@ -24,6 +24,8 @@ use diesel::result::Error;
use dotenv::dotenv; use dotenv::dotenv;
use std::env; use std::env;
use regex::Regex; use regex::Regex;
use serde::{Deserialize, Serialize};
use chrono::{DateTime, NaiveDateTime, Utc};
pub trait Crud<T> { pub trait Crud<T> {
fn create(conn: &PgConnection, form: &T) -> Result<Self, Error> where Self: Sized; fn create(conn: &PgConnection, form: &T) -> Result<Self, Error> where Self: Sized;
@ -73,7 +75,11 @@ impl Settings {
} }
} }
use chrono::{DateTime, NaiveDateTime, Utc}; #[derive(EnumString,ToString,Debug, Serialize, Deserialize)]
pub enum SortType {
Hot, New, TopDay, TopWeek, TopMonth, TopYear, TopAll
}
pub fn to_datetime_utc(ndt: NaiveDateTime) -> DateTime<Utc> { pub fn to_datetime_utc(ndt: NaiveDateTime) -> DateTime<Utc> {
DateTime::<Utc>::from_utc(ndt, Utc) DateTime::<Utc>::from_utc(ndt, Utc)
} }

292
server/src/websocket_server/server.rs
View file

@ -10,7 +10,7 @@ use serde_json::{Value};
use bcrypt::{verify}; use bcrypt::{verify};
use std::str::FromStr; use std::str::FromStr;
use {Crud, Joinable, Likeable, Followable, establish_connection, naive_now}; use {Crud, Joinable, Likeable, Followable, establish_connection, naive_now, SortType};
use actions::community::*; use actions::community::*;
use actions::user::*; use actions::user::*;
use actions::post::*; use actions::post::*;
@ -19,10 +19,11 @@ use actions::post_view::*;
use actions::comment_view::*; use actions::comment_view::*;
use actions::category::*; use actions::category::*;
use actions::community_view::*; use actions::community_view::*;
use actions::user_view::*;
#[derive(EnumString,ToString,Debug)] #[derive(EnumString,ToString,Debug)]
pub enum UserOperation { pub enum UserOperation {
Login, Register, CreateCommunity, CreatePost, ListCommunities, ListCategories, GetPost, GetCommunity, CreateComment, EditComment, CreateCommentLike, GetPosts, CreatePostLike, EditPost, EditCommunity, FollowCommunity, GetFollowedCommunities Login, Register, CreateCommunity, CreatePost, ListCommunities, ListCategories, GetPost, GetCommunity, CreateComment, EditComment, CreateCommentLike, GetPosts, CreatePostLike, EditPost, EditCommunity, FollowCommunity, GetFollowedCommunities, GetUserDetails
} }
#[derive(Serialize, Deserialize)] #[derive(Serialize, Deserialize)]
@ -272,6 +273,26 @@ pub struct GetFollowedCommunitiesResponse {
communities: Vec<CommunityFollowerView> communities: Vec<CommunityFollowerView>
} }
#[derive(Serialize, Deserialize)]
pub struct GetUserDetails {
user_id: i32,
sort: String,
limit: i64,
community_id: Option<i32>,
auth: Option<String>
}
#[derive(Serialize, Deserialize)]
pub struct GetUserDetailsResponse {
op: String,
user: UserView,
follows: Vec<CommunityFollowerView>,
moderates: Vec<CommunityModeratorView>,
comments: Vec<CommentView>,
posts: Vec<PostView>,
saved_posts: Vec<PostView>,
saved_comments: Vec<CommentView>,
}
/// `ChatServer` manages chat rooms and responsible for coordinating chat /// `ChatServer` manages chat rooms and responsible for coordinating chat
/// session. implementation is super primitive /// session. implementation is super primitive
@ -307,16 +328,6 @@ impl ChatServer {
} }
} }
} }
// /// Send message only to self
// fn send(&self, message: &str, id: &usize) {
// // println!("{:?}", self.sessions);
// if let Some(addr) = self.sessions.get(id) {
// println!("msg: {}", message);
// // println!("{:?}", addr.connected());
// let _ = addr.do_send(WSMessage(message.to_owned()));
// }
// }
} }
/// Make actor from `ChatServer` /// Make actor from `ChatServer`
@ -368,22 +379,9 @@ impl Handler<Disconnect> for ChatServer {
} }
} }
} }
// send message to other users
// for room in rooms {
// self.send_room_message(room, "Someone disconnected", 0);
// }
} }
} }
/// Handler for Message message.
// 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);
// }
// }
/// Handler for Message message. /// Handler for Message message.
impl Handler<StandardMessage> for ChatServer { impl Handler<StandardMessage> for ChatServer {
type Result = MessageResult<StandardMessage>; type Result = MessageResult<StandardMessage>;
@ -466,13 +464,17 @@ impl Handler<StandardMessage> for ChatServer {
let followed_communities: GetFollowedCommunities = serde_json::from_str(&data.to_string()).unwrap(); let followed_communities: GetFollowedCommunities = serde_json::from_str(&data.to_string()).unwrap();
followed_communities.perform(self, msg.id) followed_communities.perform(self, msg.id)
}, },
_ => { UserOperation::GetUserDetails => {
let e = ErrorMessage { let get_user_details: GetUserDetails = serde_json::from_str(&data.to_string()).unwrap();
op: "Unknown".to_string(), get_user_details.perform(self, msg.id)
error: "Unknown User Operation".to_string() },
}; // _ => {
serde_json::to_string(&e).unwrap() // let e = ErrorMessage {
} // op: "Unknown".to_string(),
// error: "Unknown User Operation".to_string()
// };
// serde_json::to_string(&e).unwrap()
// }
}; };
MessageResult(res) MessageResult(res)
@ -775,8 +777,6 @@ impl Perform for GetPost {
let conn = establish_connection(); let conn = establish_connection();
println!("{:?}", self.auth);
let user_id: Option<i32> = match &self.auth { let user_id: Option<i32> = match &self.auth {
Some(auth) => { Some(auth) => {
match Claims::decode(&auth) { match Claims::decode(&auth) {
@ -808,7 +808,7 @@ impl Perform for GetPost {
chat.rooms.get_mut(&self.id).unwrap().insert(addr); chat.rooms.get_mut(&self.id).unwrap().insert(addr);
let comments = CommentView::list(&conn, self.id, user_id).unwrap(); let comments = CommentView::list(&conn, &SortType::New, Some(self.id), None, user_id, 999).unwrap();
let community = CommunityView::read(&conn, post_view.community_id, user_id).unwrap(); let community = CommunityView::read(&conn, post_view.community_id, user_id).unwrap();
@ -1110,13 +1110,12 @@ impl Perform for GetPosts {
None => None None => None
}; };
let type_ = ListingType::from_str(&self.type_).expect("listing type"); let type_ = PostListingType::from_str(&self.type_).expect("listing type");
let sort = ListingSortType::from_str(&self.sort).expect("listing sort"); let sort = SortType::from_str(&self.sort).expect("listing sort");
let posts = match PostView::list(&conn, type_, sort, self.community_id, user_id, self.limit) { let posts = match PostView::list(&conn, type_, &sort, self.community_id, None, user_id, self.limit) {
Ok(posts) => posts, Ok(posts) => posts,
Err(_e) => { Err(_e) => {
eprintln!("{}", _e);
return self.error("Couldn't get posts"); return self.error("Couldn't get posts");
} }
}; };
@ -1412,185 +1411,52 @@ impl Perform for GetFollowedCommunities {
} }
} }
// impl Handler<Login> for ChatServer { impl Perform for GetUserDetails {
fn op_type(&self) -> UserOperation {
UserOperation::GetUserDetails
}
// type Result = MessageResult<Login>; fn perform(&self, _chat: &mut ChatServer, _addr: usize) -> String {
// fn handle(&mut self, msg: Login, _: &mut Context<Self>) -> Self::Result {
// let conn = establish_connection(); let conn = establish_connection();
// // Fetch that username / email let user_id: Option<i32> = match &self.auth {
// let user: User_ = match User_::find_by_email_or_username(&conn, &msg.username_or_email) { Some(auth) => {
// Ok(user) => user, match Claims::decode(&auth) {
// Err(_e) => return MessageResult( Ok(claims) => {
// Err( let user_id = claims.claims.id;
// ErrorMessage { Some(user_id)
// op: UserOperation::Login.to_string(), }
// error: "Couldn't find that username or email".to_string() Err(_e) => None
// } }
// ) }
// ) None => None
// }; };
// // Verify the password
// let valid: bool = verify(&msg.password, &user.password_encrypted).unwrap_or(false);
// if !valid {
// return MessageResult(
// Err(
// ErrorMessage {
// op: UserOperation::Login.to_string(),
// error: "Password incorrect".to_string()
// }
// )
// )
// }
// // Return the jwt
// MessageResult(
// Ok(
// LoginResponse {
// op: UserOperation::Login.to_string(),
// jwt: user.jwt()
// }
// )
// )
// }
// }
// impl Handler<Register> for ChatServer {
// type Result = MessageResult<Register>;
// fn handle(&mut self, msg: Register, _: &mut Context<Self>) -> Self::Result {
// let conn = establish_connection();
// // Make sure passwords match
// if msg.password != msg.password_verify {
// return MessageResult(
// Err(
// ErrorMessage {
// op: UserOperation::Register.to_string(),
// error: "Passwords do not match.".to_string()
// }
// )
// );
// }
// // Register the new user
// let user_form = UserForm {
// name: msg.username,
// email: msg.email,
// password_encrypted: msg.password,
// preferred_username: None,
// updated: None
// };
// // Create the user
// let inserted_user = match User_::create(&conn, &user_form) {
// Ok(user) => user,
// Err(_e) => return MessageResult(
// Err(
// ErrorMessage {
// op: UserOperation::Register.to_string(),
// error: "User already exists.".to_string() // overwrite the diesel error
// }
// )
// )
// };
// // Return the jwt
// MessageResult(
// Ok(
// LoginResponse {
// op: UserOperation::Register.to_string(),
// jwt: inserted_user.jwt()
// }
// )
// )
// }
// }
// impl Handler<CreateCommunity> for ChatServer { //TODO add save
let sort = SortType::from_str(&self.sort).expect("listing sort");
// type Result = MessageResult<CreateCommunity>; let user_view = UserView::read(&conn, self.user_id).unwrap();
let posts = PostView::list(&conn, PostListingType::All, &sort, self.community_id, Some(self.user_id), user_id, self.limit).unwrap();
let comments = CommentView::list(&conn, &sort, None, Some(self.user_id), user_id, self.limit).unwrap();
let follows = CommunityFollowerView::for_user(&conn, self.user_id).unwrap();
let moderates = CommunityModeratorView::for_user(&conn, self.user_id).unwrap();
// fn handle(&mut self, msg: CreateCommunity, _: &mut Context<Self>) -> Self::Result { // Return the jwt
// let conn = establish_connection(); serde_json::to_string(
&GetUserDetailsResponse {
op: self.op_type().to_string(),
user: user_view,
follows: follows,
moderates: moderates,
comments: comments,
posts: posts,
saved_posts: Vec::new(),
saved_comments: Vec::new(),
}
)
.unwrap()
}
}
// let user_id = Claims::decode(&msg.auth).id;
// let community_form = CommunityForm {
// name: msg.name,
// updated: None
// };
// let community = match Community::create(&conn, &community_form) {
// Ok(community) => community,
// Err(_e) => return MessageResult(
// Err(
// ErrorMessage {
// op: UserOperation::CreateCommunity.to_string(),
// error: "Community already exists.".to_string() // overwrite the diesel error
// }
// )
// )
// };
// MessageResult(
// Ok(
// CommunityResponse {
// op: UserOperation::CreateCommunity.to_string(),
// community: community
// }
// )
// )
// }
// }
//
//
//
// /// Handler for `ListRooms` message.
// impl Handler<ListRooms> for ChatServer {
// type Result = MessageResult<ListRooms>;
// fn handle(&mut self, _: ListRooms, _: &mut Context<Self>) -> Self::Result {
// let mut rooms = Vec::new();
// for key in self.rooms.keys() {
// rooms.push(key.to_owned())
// }
// MessageResult(rooms)
// }
// }
// /// Join room, send disconnect message to old room
// /// send join message to new room
// impl Handler<Join> for ChatServer {
// type Result = ();
// fn handle(&mut self, msg: Join, _: &mut Context<Self>) {
// let Join { id, name } = msg;
// let mut rooms = Vec::new();
// // remove session from all rooms
// for (n, sessions) in &mut self.rooms {
// if sessions.remove(&id) {
// rooms.push(n.to_owned());
// }
// }
// // send message to other users
// for room in rooms {
// self.send_room_message(&room, "Someone disconnected", 0);
// }
// if self.rooms.get_mut(&name).is_none() {
// self.rooms.insert(name.clone(), HashSet::new());
// }
// self.send_room_message(&name, "Someone connected", id);
// self.rooms.get_mut(&name).unwrap().insert(id);
// }
// }

2
ui/fuse.js
View file

@ -11,6 +11,7 @@ const transformInferno = require('ts-transform-inferno').default;
const transformClasscat = require('ts-transform-classcat').default; const transformClasscat = require('ts-transform-classcat').default;
let fuse, app; let fuse, app;
let isProduction = false; let isProduction = false;
var setVersion = require('./set_version.js').setVersion;
Sparky.task('config', _ => { Sparky.task('config', _ => {
fuse = new FuseBox({ fuse = new FuseBox({
@ -41,6 +42,7 @@ Sparky.task('config', _ => {
}); });
app = fuse.bundle('app').instructions('>index.tsx'); app = fuse.bundle('app').instructions('>index.tsx');
}); });
Sparky.task('version', _ => setVersion());
Sparky.task('clean', _ => Sparky.src('dist/').clean('dist/')); Sparky.task('clean', _ => Sparky.src('dist/').clean('dist/'));
Sparky.task('env', _ => (isProduction = true)); Sparky.task('env', _ => (isProduction = true));
Sparky.task('copy-assets', () => Sparky.src('assets/*.svg').dest('dist/')); Sparky.task('copy-assets', () => Sparky.src('assets/*.svg').dest('dist/'));

3
ui/package.json
View file

@ -15,7 +15,10 @@
}, },
"engineStrict": true, "engineStrict": true,
"dependencies": { "dependencies": {
"@types/autosize": "^3.0.6",
"@types/js-cookie": "^2.2.1", "@types/js-cookie": "^2.2.1",
"@types/jwt-decode": "^2.2.1",
"@types/markdown-it": "^0.0.7",
"autosize": "^4.0.2", "autosize": "^4.0.2",
"classcat": "^1.1.3", "classcat": "^1.1.3",
"dotenv": "^6.1.0", "dotenv": "^6.1.0",

9
ui/set_version.js Normal file
View file

@ -0,0 +1,9 @@
const fs = require('fs');
exports.setVersion = function() {
let revision = require('child_process')
.execSync('git describe --tags --long')
.toString().trim();
let line = `export let version: string = "${revision}";`;
fs.writeFileSync("./src/version.ts", line);
}

93
ui/src/components/comment-form.tsx Normal file
View file

@ -0,0 +1,93 @@
import { Component, linkEvent } from 'inferno';
import { CommentNode as CommentNodeI, CommentForm as CommentFormI } from '../interfaces';
import { WebSocketService } from '../services';
import * as autosize from 'autosize';
interface CommentFormProps {
postId?: number;
node?: CommentNodeI;
onReplyCancel?(): any;
edit?: boolean;
}
interface CommentFormState {
commentForm: CommentFormI;
buttonTitle: string;
}
export class CommentForm extends Component<CommentFormProps, CommentFormState> {
private emptyState: CommentFormState = {
commentForm: {
auth: null,
content: null,
post_id: this.props.node ? this.props.node.comment.post_id : this.props.postId
},
buttonTitle: !this.props.node ? "Post" : this.props.edit ? "Edit" : "Reply"
}
constructor(props: any, context: any) {
super(props, context);
this.state = this.emptyState;
if (this.props.node) {
if (this.props.edit) {
this.state.commentForm.edit_id = this.props.node.comment.id;
this.state.commentForm.parent_id = this.props.node.comment.parent_id;
this.state.commentForm.content = this.props.node.comment.content;
} else {
// A reply gets a new parent id
this.state.commentForm.parent_id = this.props.node.comment.id;
}
}
}
componentDidMount() {
autosize(document.querySelectorAll('textarea'));
}
render() {
return (
<div>
<form onSubmit={linkEvent(this, this.handleCommentSubmit)}>
<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-sm btn-secondary mr-2">{this.state.buttonTitle}</button>
{this.props.node && <button type="button" class="btn btn-sm btn-secondary" onClick={linkEvent(this, this.handleReplyCancel)}>Cancel</button>}
</div>
</div>
</form>
</div>
);
}
handleCommentSubmit(i: CommentForm, event: any) {
if (i.props.edit) {
WebSocketService.Instance.editComment(i.state.commentForm);
} else {
WebSocketService.Instance.createComment(i.state.commentForm);
}
i.state.commentForm.content = undefined;
i.setState(i.state);
event.target.reset();
if (i.props.node) {
i.props.onReplyCancel();
}
}
handleCommentContentChange(i: CommentForm, event: any) {
i.state.commentForm.content = event.target.value;
i.setState(i.state);
}
handleReplyCancel(i: CommentForm) {
i.props.onReplyCancel();
}
}

148
ui/src/components/comment-node.tsx Normal file
View file

@ -0,0 +1,148 @@
import { Component, linkEvent } from 'inferno';
import { Link } from 'inferno-router';
import { CommentNode as CommentNodeI, CommentLikeForm, CommentForm as CommentFormI } from '../interfaces';
import { WebSocketService, UserService } from '../services';
import { mdToHtml } from '../utils';
import { MomentTime } from './moment-time';
import { CommentForm } from './comment-form';
import { CommentNodes } from './comment-nodes';
interface CommentNodeState {
showReply: boolean;
showEdit: boolean;
}
interface CommentNodeProps {
node: CommentNodeI;
noIndent?: boolean;
viewOnly?: boolean;
}
export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
private emptyState: CommentNodeState = {
showReply: false,
showEdit: false
}
constructor(props: any, context: any) {
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 id={`comment-${node.comment.id}`} className={`comment ${node.comment.parent_id && !this.props.noIndent ? 'ml-4' : ''}`}>
<div className={`float-left small text-center ${this.props.viewOnly && 'no-click'}`}>
<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">
<li className="list-inline-item">
<Link className="text-info" to={`/user/${node.comment.creator_id}`}>{node.comment.creator_name}</Link>
</li>
<li className="list-inline-item">
<span>(
<span className="text-info">+{node.comment.upvotes}</span>
<span> | </span>
<span className="text-danger">-{node.comment.downvotes}</span>
<span>) </span>
</span>
</li>
<li className="list-inline-item">
<span><MomentTime data={node.comment} /></span>
</li>
</ul>
{this.state.showEdit && <CommentForm node={node} edit onReplyCancel={this.handleReplyCancel} />}
{!this.state.showEdit &&
<div>
<div className="md-div" dangerouslySetInnerHTML={mdToHtml(node.comment.content)} />
<ul class="list-inline mb-1 text-muted small font-weight-bold">
{!this.props.viewOnly &&
<span class="mr-2">
<li className="list-inline-item">
<span class="pointer" onClick={linkEvent(this, this.handleReplyClick)}>reply</span>
</li>
{this.myComment &&
<li className="list-inline-item">
<span class="pointer" onClick={linkEvent(this, this.handleEditClick)}>edit</span>
</li>
}
{this.myComment &&
<li className="list-inline-item">
<span class="pointer" onClick={linkEvent(this, this.handleDeleteClick)}>delete</span>
</li>
}
</span>
}
<li className="list-inline-item">
<Link className="text-muted" to={`/post/${node.comment.post_id}/comment/${node.comment.id}`} target="_blank">link</Link>
</li>
</ul>
</div>
}
</div>
{this.state.showReply && <CommentForm node={node} onReplyCancel={this.handleReplyCancel} />}
{this.props.node.children && <CommentNodes nodes={this.props.node.children} />}
</div>
)
}
private get myComment(): boolean {
return UserService.Instance.loggedIn && this.props.node.comment.creator_id == UserService.Instance.user.id;
}
handleReplyClick(i: CommentNode) {
i.state.showReply = true;
i.setState(i.state);
}
handleEditClick(i: CommentNode) {
i.state.showEdit = true;
i.setState(i.state);
}
handleDeleteClick(i: CommentNode) {
let deleteForm: CommentFormI = {
content: "*deleted*",
edit_id: i.props.node.comment.id,
post_id: i.props.node.comment.post_id,
parent_id: i.props.node.comment.parent_id,
auth: null
};
WebSocketService.Instance.editComment(deleteForm);
}
handleReplyCancel() {
this.state.showReply = false;
this.state.showEdit = false;
this.setState(this.state);
}
handleCommentLike(i: CommentNodeI) {
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) {
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);
}
}

30
ui/src/components/comment-nodes.tsx Normal file
View file

@ -0,0 +1,30 @@
import { Component } from 'inferno';
import { CommentNode as CommentNodeI } from '../interfaces';
import { CommentNode } from './comment-node';
interface CommentNodesState {
}
interface CommentNodesProps {
nodes: Array<CommentNodeI>;
noIndent?: boolean;
viewOnly?: boolean;
}
export class CommentNodes extends Component<CommentNodesProps, CommentNodesState> {
constructor(props: any, context: any) {
super(props, context);
}
render() {
return (
<div className="comments">
{this.props.nodes.map(node =>
<CommentNode node={node} noIndent={this.props.noIndent} viewOnly={this.props.viewOnly}/>
)}
</div>
)
}
}

28
ui/src/components/communities.tsx
View file

@ -2,23 +2,25 @@ import { Component, linkEvent } from 'inferno';
import { Link } from 'inferno-router'; import { Link } from 'inferno-router';
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, GetPostResponse, PostResponse, Comment, CommentForm as CommentFormI, CommentResponse, CommentLikeForm, CommentSortType, CreatePostLikeResponse, ListCommunitiesResponse, CommunityResponse, FollowCommunityForm } from '../interfaces'; import { UserOperation, Community, ListCommunitiesResponse, CommunityResponse, FollowCommunityForm } from '../interfaces';
import { WebSocketService, UserService } from '../services'; import { WebSocketService } from '../services';
import { msgOp, hotRank,mdToHtml } from '../utils'; import { msgOp } from '../utils';
declare const Sortable: any; declare const Sortable: any;
interface CommunitiesState { interface CommunitiesState {
communities: Array<Community>; communities: Array<Community>;
loading: boolean;
} }
export class Communities extends Component<any, CommunitiesState> { export class Communities extends Component<any, CommunitiesState> {
private subscription: Subscription; private subscription: Subscription;
private emptyState: CommunitiesState = { private emptyState: CommunitiesState = {
communities: [] communities: [],
loading: true
} }
constructor(props, context) { constructor(props: any, context: any) {
super(props, context); super(props, context);
this.state = this.emptyState; this.state = this.emptyState;
this.subscription = WebSocketService.Instance.subject this.subscription = WebSocketService.Instance.subject
@ -32,6 +34,10 @@ export class Communities extends Component<any, CommunitiesState> {
} }
componentWillUnmount() {
this.subscription.unsubscribe();
}
componentDidMount() { componentDidMount() {
let table = document.querySelector('#community_table'); let table = document.querySelector('#community_table');
Sortable.initTable(table); Sortable.initTable(table);
@ -40,6 +46,9 @@ export class Communities extends Component<any, CommunitiesState> {
render() { render() {
return ( return (
<div class="container-fluid"> <div class="container-fluid">
{this.state.loading ?
<h4 class=""><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h4> :
<div>
<h4>Communities</h4> <h4>Communities</h4>
<div class="table-responsive"> <div class="table-responsive">
<table id="community_table" class="table table-sm table-hover"> <table id="community_table" class="table table-sm table-hover">
@ -64,9 +73,9 @@ export class Communities extends Component<any, CommunitiesState> {
<td class="text-right">{community.number_of_posts}</td> <td class="text-right">{community.number_of_posts}</td>
<td class="text-right">{community.number_of_comments}</td> <td class="text-right">{community.number_of_comments}</td>
<td class="text-right"> <td class="text-right">
{community.subscribed {community.subscribed ?
? <button class="btn btn-sm btn-secondary" onClick={linkEvent(community.id, this.handleUnsubscribe)}>Unsubscribe</button> <button class="btn btn-sm btn-secondary" onClick={linkEvent(community.id, this.handleUnsubscribe)}>Unsubscribe</button> :
: <button class="btn btn-sm btn-secondary" onClick={linkEvent(community.id, this.handleSubscribe)}>Subscribe</button> <button class="btn btn-sm btn-secondary" onClick={linkEvent(community.id, this.handleSubscribe)}>Subscribe</button>
} }
</td> </td>
</tr> </tr>
@ -75,6 +84,8 @@ export class Communities extends Component<any, CommunitiesState> {
</table> </table>
</div> </div>
</div> </div>
}
</div>
); );
} }
@ -105,6 +116,7 @@ export class Communities extends Component<any, CommunitiesState> {
let res: ListCommunitiesResponse = msg; let res: ListCommunitiesResponse = msg;
this.state.communities = res.communities; this.state.communities = res.communities;
this.state.communities.sort((a, b) => b.number_of_subscribers - a.number_of_subscribers); this.state.communities.sort((a, b) => b.number_of_subscribers - a.number_of_subscribers);
this.state.loading = false;
this.setState(this.state); this.setState(this.state);
} else if (op == UserOperation.FollowCommunity) { } else if (op == UserOperation.FollowCommunity) {
let res: CommunityResponse = msg; let res: CommunityResponse = msg;

43
ui/src/components/community-form.tsx
View file

@ -2,21 +2,23 @@ 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 { CommunityForm as CommunityFormI, UserOperation, Category, ListCategoriesResponse, CommunityResponse } from '../interfaces'; import { CommunityForm as CommunityFormI, UserOperation, Category, ListCategoriesResponse, CommunityResponse } from '../interfaces';
import { WebSocketService, UserService } from '../services'; import { WebSocketService } from '../services';
import { msgOp } from '../utils'; import { msgOp } from '../utils';
import * as autosize from 'autosize';
import { Community } from '../interfaces'; import { Community } from '../interfaces';
interface CommunityFormProps { interface CommunityFormProps {
community?: Community; // If a community is given, that means this is an edit community?: Community; // If a community is given, that means this is an edit
onCancel?(); onCancel?(): any;
onCreate?(id: number); onCreate?(id: number): any;
onEdit?(community: Community); onEdit?(community: Community): any;
} }
interface CommunityFormState { interface CommunityFormState {
communityForm: CommunityFormI; communityForm: CommunityFormI;
categories: Array<Category>; categories: Array<Category>;
loading: boolean;
} }
export class CommunityForm extends Component<CommunityFormProps, CommunityFormState> { export class CommunityForm extends Component<CommunityFormProps, CommunityFormState> {
@ -28,10 +30,11 @@ export class CommunityForm extends Component<CommunityFormProps, CommunityFormSt
title: null, title: null,
category_id: null category_id: null
}, },
categories: [] categories: [],
loading: false
} }
constructor(props, context) { constructor(props: any, context: any) {
super(props, context); super(props, context);
this.state = this.emptyState; this.state = this.emptyState;
@ -58,6 +61,10 @@ export class CommunityForm extends Component<CommunityFormProps, CommunityFormSt
WebSocketService.Instance.listCategories(); WebSocketService.Instance.listCategories();
} }
componentDidMount() {
autosize(document.querySelectorAll('textarea'));
}
componentWillUnmount() { componentWillUnmount() {
this.subscription.unsubscribe(); this.subscription.unsubscribe();
} }
@ -81,7 +88,7 @@ export class CommunityForm extends Component<CommunityFormProps, CommunityFormSt
<div class="form-group row"> <div class="form-group row">
<label class="col-12 col-form-label">Sidebar</label> <label class="col-12 col-form-label">Sidebar</label>
<div class="col-12"> <div class="col-12">
<textarea value={this.state.communityForm.description} onInput={linkEvent(this, this.handleCommunityDescriptionChange)} class="form-control" rows={6} /> <textarea value={this.state.communityForm.description} onInput={linkEvent(this, this.handleCommunityDescriptionChange)} class="form-control" rows={3} />
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
@ -96,7 +103,10 @@ export class CommunityForm extends Component<CommunityFormProps, CommunityFormSt
</div> </div>
<div class="form-group row"> <div class="form-group row">
<div class="col-12"> <div class="col-12">
<button type="submit" class="btn btn-secondary mr-2">{this.props.community ? 'Save' : 'Create'}</button> <button type="submit" class="btn btn-secondary mr-2">
{this.state.loading ?
<svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg> :
this.props.community ? 'Save' : 'Create'}</button>
{this.props.community && <button type="button" class="btn btn-secondary" onClick={linkEvent(this, this.handleCancel)}>Cancel</button>} {this.props.community && <button type="button" class="btn btn-secondary" onClick={linkEvent(this, this.handleCancel)}>Cancel</button>}
</div> </div>
</div> </div>
@ -104,36 +114,38 @@ export class CommunityForm extends Component<CommunityFormProps, CommunityFormSt
); );
} }
handleCreateCommunitySubmit(i: CommunityForm, event) { handleCreateCommunitySubmit(i: CommunityForm, event: any) {
event.preventDefault(); event.preventDefault();
i.state.loading = true;
if (i.props.community) { if (i.props.community) {
WebSocketService.Instance.editCommunity(i.state.communityForm); WebSocketService.Instance.editCommunity(i.state.communityForm);
} else { } else {
WebSocketService.Instance.createCommunity(i.state.communityForm); WebSocketService.Instance.createCommunity(i.state.communityForm);
} }
i.setState(i.state);
} }
handleCommunityNameChange(i: CommunityForm, event) { handleCommunityNameChange(i: CommunityForm, event: any) {
i.state.communityForm.name = event.target.value; i.state.communityForm.name = event.target.value;
i.setState(i.state); i.setState(i.state);
} }
handleCommunityTitleChange(i: CommunityForm, event) { handleCommunityTitleChange(i: CommunityForm, event: any) {
i.state.communityForm.title = event.target.value; i.state.communityForm.title = event.target.value;
i.setState(i.state); i.setState(i.state);
} }
handleCommunityDescriptionChange(i: CommunityForm, event) { handleCommunityDescriptionChange(i: CommunityForm, event: any) {
i.state.communityForm.description = event.target.value; i.state.communityForm.description = event.target.value;
i.setState(i.state); i.setState(i.state);
} }
handleCommunityCategoryChange(i: CommunityForm, event) { handleCommunityCategoryChange(i: CommunityForm, event: any) {
i.state.communityForm.category_id = Number(event.target.value); i.state.communityForm.category_id = Number(event.target.value);
i.setState(i.state); i.setState(i.state);
} }
handleCancel(i: CommunityForm, event) { handleCancel(i: CommunityForm) {
i.props.onCancel(); i.props.onCancel();
} }
@ -142,6 +154,7 @@ export class CommunityForm extends Component<CommunityFormProps, CommunityFormSt
console.log(msg); console.log(msg);
if (msg.error) { if (msg.error) {
alert(msg.error); alert(msg.error);
this.state.loading = false;
return; return;
} else if (op == UserOperation.ListCategories){ } else if (op == UserOperation.ListCategories){
let res: ListCategoriesResponse = msg; let res: ListCategoriesResponse = msg;
@ -150,9 +163,11 @@ export class CommunityForm extends Component<CommunityFormProps, CommunityFormSt
this.setState(this.state); this.setState(this.state);
} else if (op == UserOperation.CreateCommunity) { } else if (op == UserOperation.CreateCommunity) {
let res: CommunityResponse = msg; let res: CommunityResponse = msg;
this.state.loading = false;
this.props.onCreate(res.community.id); this.props.onCreate(res.community.id);
} else if (op == UserOperation.EditCommunity) { } else if (op == UserOperation.EditCommunity) {
let res: CommunityResponse = msg; let res: CommunityResponse = msg;
this.state.loading = false;
this.props.onEdit(res.community); this.props.onEdit(res.community);
} }
} }

26
ui/src/components/community.tsx
View file

@ -1,18 +1,17 @@
import { Component, linkEvent } from 'inferno'; import { Component } from 'inferno';
import { Link } from 'inferno-router';
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 as CommunityI, GetCommunityResponse, CommunityResponse, Post, GetPostsForm, ListingSortType, ListingType, GetPostsResponse, CreatePostLikeForm, CreatePostLikeResponse, CommunityUser} from '../interfaces'; import { UserOperation, Community as CommunityI, GetCommunityResponse, CommunityResponse, CommunityUser} from '../interfaces';
import { WebSocketService, UserService } from '../services'; import { WebSocketService } from '../services';
import { MomentTime } from './moment-time';
import { PostListings } from './post-listings'; import { PostListings } from './post-listings';
import { Sidebar } from './sidebar'; import { Sidebar } from './sidebar';
import { msgOp, mdToHtml } from '../utils'; import { msgOp } from '../utils';
interface State { interface State {
community: CommunityI; community: CommunityI;
communityId: number; communityId: number;
moderators: Array<CommunityUser>; moderators: Array<CommunityUser>;
loading: boolean;
} }
export class Community extends Component<any, State> { export class Community extends Component<any, State> {
@ -33,10 +32,11 @@ export class Community extends Component<any, State> {
published: null published: null
}, },
moderators: [], moderators: [],
communityId: Number(this.props.match.params.id) communityId: Number(this.props.match.params.id),
loading: true
} }
constructor(props, context) { constructor(props: any, context: any) {
super(props, context); super(props, context);
this.state = this.emptyState; this.state = this.emptyState;
@ -59,15 +59,18 @@ export class Community extends Component<any, State> {
render() { render() {
return ( return (
<div class="container"> <div class="container">
{this.state.loading ?
<h4><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h4> :
<div class="row"> <div class="row">
<div class="col-12 col-lg-9"> <div class="col-12 col-md-9">
<h4>/f/{this.state.community.name}</h4> <h4>{this.state.community.title}</h4>
<PostListings communityId={this.state.communityId} /> <PostListings communityId={this.state.communityId} />
</div> </div>
<div class="col-12 col-lg-3"> <div class="col-12 col-md-3">
<Sidebar community={this.state.community} moderators={this.state.moderators} /> <Sidebar community={this.state.community} moderators={this.state.moderators} />
</div> </div>
</div> </div>
}
</div> </div>
) )
} }
@ -83,6 +86,7 @@ export class Community extends Component<any, State> {
let res: GetCommunityResponse = msg; let res: GetCommunityResponse = msg;
this.state.community = res.community; this.state.community = res.community;
this.state.moderators = res.moderators; this.state.moderators = res.moderators;
this.state.loading = false;
this.setState(this.state); this.setState(this.state);
} else if (op == UserOperation.EditCommunity) { } else if (op == UserOperation.EditCommunity) {
let res: CommunityResponse = msg; let res: CommunityResponse = msg;

4
ui/src/components/create-community.tsx
View file

@ -1,9 +1,9 @@
import { Component, linkEvent } from 'inferno'; import { Component } from 'inferno';
import { CommunityForm } from './community-form'; import { CommunityForm } from './community-form';
export class CreateCommunity extends Component<any, any> { export class CreateCommunity extends Component<any, any> {
constructor(props, context) { constructor(props: any, context: any) {
super(props, context); super(props, context);
this.handleCommunityCreate = this.handleCommunityCreate.bind(this); this.handleCommunityCreate = this.handleCommunityCreate.bind(this);
} }

4
ui/src/components/create-post.tsx
View file

@ -1,9 +1,9 @@
import { Component, linkEvent } from 'inferno'; import { Component } from 'inferno';
import { PostForm } from './post-form'; import { PostForm } from './post-form';
export class CreatePost extends Component<any, any> { export class CreatePost extends Component<any, any> {
constructor(props, context) { constructor(props: any, context: any) {
super(props, context); super(props, context);
this.handlePostCreate = this.handlePostCreate.bind(this); this.handlePostCreate = this.handlePostCreate.bind(this);
} }

1
ui/src/components/home.tsx
View file

@ -1,5 +1,4 @@
import { Component } from 'inferno'; import { Component } from 'inferno';
import { repoUrl } from '../utils';
import { Main } from './main'; import { Main } from './main';
export class Home extends Component<any, any> { export class Home extends Component<any, any> {

42
ui/src/components/login.tsx
View file

@ -8,6 +8,8 @@ import { msgOp } from '../utils';
interface State { interface State {
loginForm: LoginForm; loginForm: LoginForm;
registerForm: RegisterForm; registerForm: RegisterForm;
loginLoading: boolean;
registerLoading: boolean;
} }
let emptyState: State = { let emptyState: State = {
@ -19,13 +21,15 @@ let emptyState: State = {
username: undefined, username: undefined,
password: undefined, password: undefined,
password_verify: undefined password_verify: undefined
} },
loginLoading: false,
registerLoading: false
} }
export class Login extends Component<any, State> { export class Login extends Component<any, State> {
private subscription: Subscription; private subscription: Subscription;
constructor(props, context) { constructor(props: any, context: any) {
super(props, context); super(props, context);
this.state = emptyState; this.state = emptyState;
@ -77,7 +81,8 @@ export class Login extends Component<any, State> {
</div> </div>
<div class="form-group row"> <div class="form-group row">
<div class="col-sm-10"> <div class="col-sm-10">
<button type="submit" class="btn btn-secondary">Login</button> <button type="submit" class="btn btn-secondary">{this.state.loginLoading ?
<svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg> : 'Login'}</button>
</div> </div>
</div> </div>
</form> </form>
@ -115,49 +120,55 @@ export class Login extends Component<any, State> {
</div> </div>
<div class="form-group row"> <div class="form-group row">
<div class="col-sm-10"> <div class="col-sm-10">
<button type="submit" class="btn btn-secondary">Sign Up</button> <button type="submit" class="btn btn-secondary">{this.state.registerLoading ?
<svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg> : 'Sign Up'}</button>
</div> </div>
</div> </div>
</form> </form>
); );
} }
handleLoginSubmit(i: Login, event) { handleLoginSubmit(i: Login, event: any) {
event.preventDefault(); event.preventDefault();
i.state.loginLoading = true;
i.setState(i.state);
WebSocketService.Instance.login(i.state.loginForm); WebSocketService.Instance.login(i.state.loginForm);
} }
handleLoginUsernameChange(i: Login, event) { handleLoginUsernameChange(i: Login, event: any) {
i.state.loginForm.username_or_email = event.target.value; i.state.loginForm.username_or_email = event.target.value;
i.setState(i.state); i.setState(i.state);
} }
handleLoginPasswordChange(i: Login, event) { handleLoginPasswordChange(i: Login, event: any) {
i.state.loginForm.password = event.target.value; i.state.loginForm.password = event.target.value;
i.setState(i.state); i.setState(i.state);
} }
handleRegisterSubmit(i: Login, event) { handleRegisterSubmit(i: Login, event: any) {
i.state.registerLoading = true;
i.setState(i.state);
event.preventDefault(); event.preventDefault();
WebSocketService.Instance.register(i.state.registerForm); WebSocketService.Instance.register(i.state.registerForm);
} }
handleRegisterUsernameChange(i: Login, event) { handleRegisterUsernameChange(i: Login, event: any) {
i.state.registerForm.username = event.target.value; i.state.registerForm.username = event.target.value;
i.setState(i.state); i.setState(i.state);
} }
handleRegisterEmailChange(i: Login, event) { handleRegisterEmailChange(i: Login, event: any) {
i.state.registerForm.email = event.target.value; i.state.registerForm.email = event.target.value;
i.setState(i.state); i.setState(i.state);
} }
handleRegisterPasswordChange(i: Login, event) { handleRegisterPasswordChange(i: Login, event: any) {
i.state.registerForm.password = event.target.value; i.state.registerForm.password = event.target.value;
i.setState(i.state); i.setState(i.state);
} }
handleRegisterPasswordVerifyChange(i: Login, event) { handleRegisterPasswordVerifyChange(i: Login, event: any) {
i.state.registerForm.password_verify = event.target.value; i.state.registerForm.password_verify = event.target.value;
i.setState(i.state); i.setState(i.state);
} }
@ -166,11 +177,16 @@ export class Login extends Component<any, State> {
let op: UserOperation = msgOp(msg); let op: UserOperation = msgOp(msg);
if (msg.error) { if (msg.error) {
alert(msg.error); alert(msg.error);
this.state.loginLoading = false;
this.state.registerLoading = false;
this.setState(this.state);
return; return;
} else { } else {
if (op == UserOperation.Register || op == UserOperation.Login) { if (op == UserOperation.Register || op == UserOperation.Login) {
this.state.loginLoading = false;
this.state.registerLoading = false;
let res: LoginResponse = msg; let res: LoginResponse = msg;
UserService.Instance.login(msg); UserService.Instance.login(res);
this.props.history.push('/'); this.props.history.push('/');
} }
} }

24
ui/src/components/main.tsx
View file

@ -1,26 +1,26 @@
import { Component, linkEvent } from 'inferno'; import { Component } from 'inferno';
import { Link } from 'inferno-router'; import { Link } from 'inferno-router';
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 as CommunityI, GetCommunityResponse, CommunityResponse, Post, GetPostsForm, ListingSortType, ListingType, GetPostsResponse, CreatePostLikeForm, CreatePostLikeResponse, CommunityUser, GetFollowedCommunitiesResponse } from '../interfaces'; import { UserOperation, CommunityUser, GetFollowedCommunitiesResponse } from '../interfaces';
import { WebSocketService, UserService } from '../services'; import { WebSocketService, UserService } from '../services';
import { MomentTime } from './moment-time';
import { PostListings } from './post-listings'; import { PostListings } from './post-listings';
import { Sidebar } from './sidebar'; import { msgOp } from '../utils';
import { msgOp, mdToHtml } from '../utils';
interface State { interface State {
subscribedCommunities: Array<CommunityUser>; subscribedCommunities: Array<CommunityUser>;
loading: boolean;
} }
export class Main extends Component<any, State> { export class Main extends Component<any, State> {
private subscription: Subscription; private subscription: Subscription;
private emptyState: State = { private emptyState: State = {
subscribedCommunities: [] subscribedCommunities: [],
loading: true
} }
constructor(props, context) { constructor(props: any, context: any) {
super(props, context); super(props, context);
this.state = this.emptyState; this.state = this.emptyState;
@ -46,12 +46,15 @@ export class Main extends Component<any, State> {
return ( return (
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-12 col-lg-9"> <div class="col-12 col-md-9">
<PostListings /> <PostListings />
</div> </div>
<div class="col-12 col-lg-3"> <div class="col-12 col-md-3">
<h4>A Landing message</h4> <h4>A Landing message</h4>
{UserService.Instance.loggedIn && {UserService.Instance.loggedIn &&
<div>
{this.state.loading ?
<h4 class="mt-3"><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h4> :
<div> <div>
<hr /> <hr />
<h4>Subscribed forums</h4> <h4>Subscribed forums</h4>
@ -63,6 +66,8 @@ export class Main extends Component<any, State> {
</div> </div>
} }
</div> </div>
}
</div>
</div> </div>
</div> </div>
) )
@ -78,6 +83,7 @@ export class Main extends Component<any, State> {
} else if (op == UserOperation.GetFollowedCommunities) { } else if (op == UserOperation.GetFollowedCommunities) {
let res: GetFollowedCommunitiesResponse = msg; let res: GetFollowedCommunitiesResponse = msg;
this.state.subscribedCommunities = res.communities; this.state.subscribedCommunities = res.communities;
this.state.loading = false;
this.setState(this.state); this.setState(this.state);
} }
} }

8
ui/src/components/moment-time.tsx
View file

@ -1,4 +1,4 @@
import { Component, linkEvent } from 'inferno'; import { Component } from 'inferno';
import * as moment from 'moment'; import * as moment from 'moment';
interface MomentTimeProps { interface MomentTimeProps {
@ -10,18 +10,18 @@ interface MomentTimeProps {
export class MomentTime extends Component<MomentTimeProps, any> { export class MomentTime extends Component<MomentTimeProps, any> {
constructor(props, context) { constructor(props: any, context: any) {
super(props, context); super(props, context);
} }
render() { render() {
if (this.props.data.updated) { if (this.props.data.updated) {
return ( return (
<span className="font-italics">modified {moment.utc(this.props.data.updated).fromNow()}</span> <span title={this.props.data.updated} className="font-italics">modified {moment.utc(this.props.data.updated).fromNow()}</span>
) )
} else { } else {
return ( return (
<span>{moment.utc(this.props.data.published).fromNow()}</span> <span title={this.props.data.published}>{moment.utc(this.props.data.published).fromNow()}</span>
) )
} }
} }

55
ui/src/components/navbar.tsx
View file

@ -2,12 +2,26 @@ import { Component, linkEvent } from 'inferno';
import { Link } from 'inferno-router'; import { Link } from 'inferno-router';
import { repoUrl } from '../utils'; import { repoUrl } from '../utils';
import { UserService } from '../services'; import { UserService } from '../services';
import { version } from '../version';
export class Navbar extends Component<any, any> { interface NavbarState {
isLoggedIn: boolean;
expanded: boolean;
expandUserDropdown: boolean;
}
constructor(props, context) { export class Navbar extends Component<any, NavbarState> {
emptyState: NavbarState = {
isLoggedIn: UserService.Instance.loggedIn,
expanded: false,
expandUserDropdown: false
}
constructor(props: any, context: any) {
super(props, context); super(props, context);
this.state = {isLoggedIn: UserService.Instance.loggedIn, expanded: false}; this.state = this.emptyState;
this.handleOverviewClick = this.handleOverviewClick.bind(this);
// Subscribe to user changes // Subscribe to user changes
UserService.Instance.sub.subscribe(user => { UserService.Instance.sub.subscribe(user => {
@ -27,7 +41,7 @@ export class Navbar extends Component<any, any> {
navbar() { navbar() {
return ( return (
<nav class="navbar navbar-expand-sm navbar-light bg-light p-0 px-3 shadow"> <nav class="navbar navbar-expand-sm navbar-light bg-light p-0 px-3 shadow">
<a class="navbar-brand" href="#"> <a title={version} class="navbar-brand" href="#">
<svg class="icon mr-2"><use xlinkHref="#icon-mouse"></use></svg> <svg class="icon mr-2"><use xlinkHref="#icon-mouse"></use></svg>
Lemmy Lemmy
</a> </a>
@ -50,25 +64,44 @@ export class Navbar extends Component<any, any> {
</li> </li>
</ul> </ul>
<ul class="navbar-nav ml-auto mr-2"> <ul class="navbar-nav ml-auto mr-2">
<li class="nav-item">
{this.state.isLoggedIn ? {this.state.isLoggedIn ?
<a role="button" class="nav-link pointer" onClick={ linkEvent(this, this.handleLogoutClick) }>Logout</a> : <li className={`nav-item dropdown ${this.state.expandUserDropdown && 'show'}`}>
<a class="pointer nav-link dropdown-toggle" onClick={linkEvent(this, this.expandUserDropdown)} role="button">
{UserService.Instance.user.username}
</a>
<div className={`dropdown-menu dropdown-menu-right ${this.state.expandUserDropdown && 'show'}`}>
<a role="button" class="dropdown-item pointer" onClick={linkEvent(this, this.handleOverviewClick)}>Overview</a>
<a role="button" class="dropdown-item pointer" onClick={ linkEvent(this, this.handleLogoutClick) }>Logout</a>
</div>
</li> :
<Link class="nav-link" to="/login">Login</Link> <Link class="nav-link" to="/login">Login</Link>
} }
</li>
</ul> </ul>
</div> </div>
</nav> </nav>
); );
} }
handleLogoutClick(i: Navbar, event) { expandUserDropdown(i: Navbar) {
UserService.Instance.logout(); i.state.expandUserDropdown = !i.state.expandUserDropdown;
// i.props.history.push('/'); i.setState(i.state);
} }
expandNavbar(i: Navbar, event) { handleLogoutClick(i: Navbar) {
i.state.expandUserDropdown = false;
UserService.Instance.logout();
}
handleOverviewClick(i: Navbar) {
i.state.expandUserDropdown = false;
i.setState(i.state);
let userPage = `/user/${UserService.Instance.user.id}`;
i.context.router.history.push(userPage);
}
expandNavbar(i: Navbar) {
i.state.expanded = !i.state.expanded; i.state.expanded = !i.state.expanded;
i.setState(i.state); i.setState(i.state);
} }
} }

46
ui/src/components/post-form.tsx
View file

@ -2,20 +2,21 @@ 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 { PostForm as PostFormI, Post, PostResponse, UserOperation, Community, ListCommunitiesResponse } from '../interfaces'; import { PostForm as PostFormI, Post, PostResponse, UserOperation, Community, ListCommunitiesResponse } from '../interfaces';
import { WebSocketService, UserService } from '../services'; import { WebSocketService } from '../services';
import { msgOp } from '../utils'; import { msgOp } from '../utils';
import { MomentTime } from './moment-time'; import * as autosize from 'autosize';
interface PostFormProps { interface PostFormProps {
post?: Post; // If a post is given, that means this is an edit post?: Post; // If a post is given, that means this is an edit
onCancel?(); onCancel?(): any;
onCreate?(id: number); onCreate?(id: number): any;
onEdit?(post: Post); onEdit?(post: Post): any;
} }
interface PostFormState { interface PostFormState {
postForm: PostFormI; postForm: PostFormI;
communities: Array<Community>; communities: Array<Community>;
loading: boolean;
} }
export class PostForm extends Component<PostFormProps, PostFormState> { export class PostForm extends Component<PostFormProps, PostFormState> {
@ -27,10 +28,11 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
auth: null, auth: null,
community_id: null community_id: null
}, },
communities: [] communities: [],
loading: false
} }
constructor(props, context) { constructor(props: any, context: any) {
super(props, context); super(props, context);
this.state = this.emptyState; this.state = this.emptyState;
@ -57,6 +59,10 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
WebSocketService.Instance.listCommunities(); WebSocketService.Instance.listCommunities();
} }
componentDidMount() {
autosize(document.querySelectorAll('textarea'));
}
componentWillUnmount() { componentWillUnmount() {
this.subscription.unsubscribe(); this.subscription.unsubscribe();
} }
@ -74,13 +80,13 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
<div class="form-group row"> <div class="form-group row">
<label class="col-sm-2 col-form-label">Title</label> <label class="col-sm-2 col-form-label">Title</label>
<div class="col-sm-10"> <div class="col-sm-10">
<textarea value={this.state.postForm.name} onInput={linkEvent(this, this.handlePostNameChange)} class="form-control" required rows={3} /> <textarea value={this.state.postForm.name} onInput={linkEvent(this, this.handlePostNameChange)} class="form-control" required rows={2} />
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label class="col-sm-2 col-form-label">Body</label> <label class="col-sm-2 col-form-label">Body</label>
<div class="col-sm-10"> <div class="col-sm-10">
<textarea value={this.state.postForm.body} onInput={linkEvent(this, this.handlePostBodyChange)} class="form-control" rows={6} /> <textarea value={this.state.postForm.body} onInput={linkEvent(this, this.handlePostBodyChange)} class="form-control" rows={4} />
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
@ -95,7 +101,10 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
</div> </div>
<div class="form-group row"> <div class="form-group row">
<div class="col-sm-10"> <div class="col-sm-10">
<button type="submit" class="btn btn-secondary mr-2">{this.props.post ? 'Save' : 'Create'}</button> <button type="submit" class="btn btn-secondary mr-2">
{this.state.loading ?
<svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg> :
this.props.post ? 'Save' : 'Create'}</button>
{this.props.post && <button type="button" class="btn btn-secondary" onClick={linkEvent(this, this.handleCancel)}>Cancel</button>} {this.props.post && <button type="button" class="btn btn-secondary" onClick={linkEvent(this, this.handleCancel)}>Cancel</button>}
</div> </div>
</div> </div>
@ -104,42 +113,45 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
); );
} }
handlePostSubmit(i: PostForm, event) { handlePostSubmit(i: PostForm, event: any) {
event.preventDefault(); event.preventDefault();
if (i.props.post) { if (i.props.post) {
WebSocketService.Instance.editPost(i.state.postForm); WebSocketService.Instance.editPost(i.state.postForm);
} else { } else {
WebSocketService.Instance.createPost(i.state.postForm); WebSocketService.Instance.createPost(i.state.postForm);
} }
i.state.loading = true;
i.setState(i.state);
} }
handlePostUrlChange(i: PostForm, event) { handlePostUrlChange(i: PostForm, event: any) {
i.state.postForm.url = event.target.value; i.state.postForm.url = event.target.value;
i.setState(i.state); i.setState(i.state);
} }
handlePostNameChange(i: PostForm, event) { handlePostNameChange(i: PostForm, event: any) {
i.state.postForm.name = event.target.value; i.state.postForm.name = event.target.value;
i.setState(i.state); i.setState(i.state);
} }
handlePostBodyChange(i: PostForm, event) { handlePostBodyChange(i: PostForm, event: any) {
i.state.postForm.body = event.target.value; i.state.postForm.body = event.target.value;
i.setState(i.state); i.setState(i.state);
} }
handlePostCommunityChange(i: PostForm, event) { handlePostCommunityChange(i: PostForm, event: any) {
i.state.postForm.community_id = Number(event.target.value); i.state.postForm.community_id = Number(event.target.value);
i.setState(i.state); i.setState(i.state);
} }
handleCancel(i: PostForm, event) { handleCancel(i: PostForm) {
i.props.onCancel(); i.props.onCancel();
} }
parseMessage(msg: any) { parseMessage(msg: any) {
let op: UserOperation = msgOp(msg); let op: UserOperation = msgOp(msg);
if (msg.error) { if (msg.error) {
this.state.loading = false;
return; return;
} else if (op == UserOperation.ListCommunities) { } else if (op == UserOperation.ListCommunities) {
let res: ListCommunitiesResponse = msg; let res: ListCommunitiesResponse = msg;
@ -151,9 +163,11 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
} }
this.setState(this.state); this.setState(this.state);
} else if (op == UserOperation.CreatePost) { } else if (op == UserOperation.CreatePost) {
this.state.loading = false;
let res: PostResponse = msg; let res: PostResponse = msg;
this.props.onCreate(res.post.id); this.props.onCreate(res.post.id);
} else if (op == UserOperation.EditPost) { } else if (op == UserOperation.EditPost) {
this.state.loading = false;
let res: PostResponse = msg; let res: PostResponse = msg;
this.props.onEdit(res.post); this.props.onEdit(res.post);
} }

25
ui/src/components/post-listing.tsx
View file

@ -1,9 +1,7 @@
import { Component, linkEvent } from 'inferno'; import { Component, linkEvent } from 'inferno';
import { Link } from 'inferno-router'; import { Link } from 'inferno-router';
import { Subscription } from "rxjs";
import { retryWhen, delay, take } from 'rxjs/operators';
import { WebSocketService, UserService } from '../services'; import { WebSocketService, UserService } from '../services';
import { Post, CreatePostLikeResponse, CreatePostLikeForm, PostForm as PostFormI } from '../interfaces'; import { Post, CreatePostLikeForm, PostForm as PostFormI } from '../interfaces';
import { MomentTime } from './moment-time'; import { MomentTime } from './moment-time';
import { PostForm } from './post-form'; import { PostForm } from './post-form';
import { mdToHtml } from '../utils'; import { mdToHtml } from '../utils';
@ -18,6 +16,7 @@ interface PostListingProps {
editable?: boolean; editable?: boolean;
showCommunity?: boolean; showCommunity?: boolean;
showBody?: boolean; showBody?: boolean;
viewOnly?: boolean;
} }
export class PostListing extends Component<PostListingProps, PostListingState> { export class PostListing extends Component<PostListingProps, PostListingState> {
@ -27,7 +26,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
iframeExpanded: false iframeExpanded: false
} }
constructor(props, context) { constructor(props: any, context: any) {
super(props, context); super(props, context);
this.state = this.emptyState; this.state = this.emptyState;
@ -52,7 +51,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
let post = this.props.post; let post = this.props.post;
return ( return (
<div class="listing"> <div class="listing">
<div className="float-left small text-center"> <div className={`float-left small text-center ${this.props.viewOnly && 'no-click'}`}>
<div className={`pointer upvote ${post.my_vote == 1 ? 'text-info' : 'text-muted'}`} onClick={linkEvent(this, this.handlePostLike)}>▲</div> <div className={`pointer upvote ${post.my_vote == 1 ? 'text-info' : 'text-muted'}`} onClick={linkEvent(this, this.handlePostLike)}>▲</div>
<div>{post.score}</div> <div>{post.score}</div>
<div className={`pointer downvote ${post.my_vote == -1 && 'text-danger'}`} onClick={linkEvent(this, this.handlePostDisLike)}>▼</div> <div className={`pointer downvote ${post.my_vote == -1 && 'text-danger'}`} onClick={linkEvent(this, this.handlePostDisLike)}>▼</div>
@ -80,7 +79,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
<ul class="list-inline mb-0 text-muted small"> <ul class="list-inline mb-0 text-muted small">
<li className="list-inline-item"> <li className="list-inline-item">
<span>by </span> <span>by </span>
<Link to={`/user/${post.creator_id}`}>{post.creator_name}</Link> <Link className="text-info" to={`/user/${post.creator_id}`}>{post.creator_name}</Link>
{this.props.showCommunity && {this.props.showCommunity &&
<span> <span>
<span> to </span> <span> to </span>
@ -100,7 +99,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
</span> </span>
</li> </li>
<li className="list-inline-item"> <li className="list-inline-item">
<Link to={`/post/${post.id}`}>{post.number_of_comments} Comments</Link> <Link className="text-muted" to={`/post/${post.id}`}>{post.number_of_comments} Comments</Link>
</li> </li>
</ul> </ul>
{this.myPost && {this.myPost &&
@ -123,7 +122,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
return this.props.editable && UserService.Instance.loggedIn && this.props.post.creator_id == UserService.Instance.user.id; return this.props.editable && UserService.Instance.loggedIn && this.props.post.creator_id == UserService.Instance.user.id;
} }
handlePostLike(i: PostListing, event) { handlePostLike(i: PostListing) {
let form: CreatePostLikeForm = { let form: CreatePostLikeForm = {
post_id: i.props.post.id, post_id: i.props.post.id,
@ -132,7 +131,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
WebSocketService.Instance.likePost(form); WebSocketService.Instance.likePost(form);
} }
handlePostDisLike(i: PostListing, event) { handlePostDisLike(i: PostListing) {
let form: CreatePostLikeForm = { let form: CreatePostLikeForm = {
post_id: i.props.post.id, post_id: i.props.post.id,
score: (i.props.post.my_vote == -1) ? 0 : -1 score: (i.props.post.my_vote == -1) ? 0 : -1
@ -140,7 +139,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
WebSocketService.Instance.likePost(form); WebSocketService.Instance.likePost(form);
} }
handleEditClick(i: PostListing, event) { handleEditClick(i: PostListing) {
i.state.showEdit = true; i.state.showEdit = true;
i.setState(i.state); i.setState(i.state);
} }
@ -151,12 +150,12 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
} }
// The actual editing is done in the recieve for post // The actual editing is done in the recieve for post
handleEditPost(post: Post) { handleEditPost() {
this.state.showEdit = false; this.state.showEdit = false;
this.setState(this.state); this.setState(this.state);
} }
handleDeleteClick(i: PostListing, event) { handleDeleteClick(i: PostListing) {
let deleteForm: PostFormI = { let deleteForm: PostFormI = {
body: '', body: '',
community_id: i.props.post.community_id, community_id: i.props.post.community_id,
@ -168,7 +167,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
WebSocketService.Instance.editPost(deleteForm); WebSocketService.Instance.editPost(deleteForm);
} }
handleIframeExpandClick(i: PostListing, event) { handleIframeExpandClick(i: PostListing) {
i.state.iframeExpanded = !i.state.iframeExpanded; i.state.iframeExpanded = !i.state.iframeExpanded;
i.setState(i.state); i.setState(i.state);
} }

46
ui/src/components/post-listings.tsx
View file

@ -2,12 +2,10 @@ import { Component, linkEvent } from 'inferno';
import { Link } from 'inferno-router'; import { Link } from 'inferno-router';
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 as CommunityI, GetCommunityResponse, CommunityResponse, Post, GetPostsForm, ListingSortType, ListingType, GetPostsResponse, CreatePostLikeForm, CreatePostLikeResponse, CommunityUser} from '../interfaces'; import { UserOperation, Community as CommunityI, Post, GetPostsForm, SortType, ListingType, GetPostsResponse, CreatePostLikeResponse, CommunityUser} from '../interfaces';
import { WebSocketService, UserService } from '../services'; import { WebSocketService, UserService } from '../services';
import { MomentTime } from './moment-time';
import { PostListing } from './post-listing'; import { PostListing } from './post-listing';
import { Sidebar } from './sidebar'; import { msgOp } from '../utils';
import { msgOp, mdToHtml } from '../utils';
interface PostListingsProps { interface PostListingsProps {
@ -18,8 +16,9 @@ interface PostListingsState {
community: CommunityI; community: CommunityI;
moderators: Array<CommunityUser>; moderators: Array<CommunityUser>;
posts: Array<Post>; posts: Array<Post>;
sortType: ListingSortType; sortType: SortType;
type_: ListingType; type_: ListingType;
loading: boolean;
} }
export class PostListings extends Component<PostListingsProps, PostListingsState> { export class PostListings extends Component<PostListingsProps, PostListingsState> {
@ -41,15 +40,16 @@ export class PostListings extends Component<PostListingsProps, PostListingsState
}, },
moderators: [], moderators: [],
posts: [], posts: [],
sortType: ListingSortType.Hot, sortType: SortType.Hot,
type_: this.props.communityId type_: this.props.communityId
? ListingType.Community ? ListingType.Community
: UserService.Instance.loggedIn : UserService.Instance.loggedIn
? ListingType.Subscribed ? ListingType.Subscribed
: ListingType.All : ListingType.All,
loading: true
} }
constructor(props, context) { constructor(props: any, context: any) {
super(props, context); super(props, context);
@ -67,7 +67,7 @@ export class PostListings extends Component<PostListingsProps, PostListingsState
type_: ListingType[this.state.type_], type_: ListingType[this.state.type_],
community_id: this.props.communityId, community_id: this.props.communityId,
limit: 10, limit: 10,
sort: ListingSortType[ListingSortType.Hot], sort: SortType[SortType.Hot],
} }
WebSocketService.Instance.getPosts(getPostsForm); WebSocketService.Instance.getPosts(getPostsForm);
} }
@ -78,6 +78,9 @@ export class PostListings extends Component<PostListingsProps, PostListingsState
render() { render() {
return ( return (
<div>
{this.state.loading ?
<h4><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h4> :
<div> <div>
<div>{this.selects()}</div> <div>{this.selects()}</div>
{this.state.posts.length > 0 {this.state.posts.length > 0
@ -86,6 +89,8 @@ export class PostListings extends Component<PostListingsProps, PostListingsState
: <div>No Listings. Subscribe to some <Link to="/communities">forums</Link>.</div> : <div>No Listings. Subscribe to some <Link to="/communities">forums</Link>.</div>
} }
</div> </div>
}
</div>
) )
} }
@ -94,14 +99,14 @@ export class PostListings extends Component<PostListingsProps, PostListingsState
<div className="mb-2"> <div className="mb-2">
<select value={this.state.sortType} onChange={linkEvent(this, this.handleSortChange)} class="custom-select w-auto"> <select value={this.state.sortType} onChange={linkEvent(this, this.handleSortChange)} class="custom-select w-auto">
<option disabled>Sort Type</option> <option disabled>Sort Type</option>
<option value={ListingSortType.Hot}>Hot</option> <option value={SortType.Hot}>Hot</option>
<option value={ListingSortType.New}>New</option> <option value={SortType.New}>New</option>
<option disabled>──────────</option> <option disabled>──────────</option>
<option value={ListingSortType.TopDay}>Top Day</option> <option value={SortType.TopDay}>Top Day</option>
<option value={ListingSortType.TopWeek}>Week</option> <option value={SortType.TopWeek}>Week</option>
<option value={ListingSortType.TopMonth}>Month</option> <option value={SortType.TopMonth}>Month</option>
<option value={ListingSortType.TopYear}>Year</option> <option value={SortType.TopYear}>Year</option>
<option value={ListingSortType.TopAll}>All</option> <option value={SortType.TopAll}>All</option>
</select> </select>
{!this.props.communityId && {!this.props.communityId &&
UserService.Instance.loggedIn && UserService.Instance.loggedIn &&
@ -117,26 +122,26 @@ export class PostListings extends Component<PostListingsProps, PostListingsState
} }
handleSortChange(i: PostListings, event) { handleSortChange(i: PostListings, event: any) {
i.state.sortType = Number(event.target.value); i.state.sortType = Number(event.target.value);
i.setState(i.state); i.setState(i.state);
let getPostsForm: GetPostsForm = { let getPostsForm: GetPostsForm = {
community_id: i.state.community.id, community_id: i.state.community.id,
limit: 10, limit: 10,
sort: ListingSortType[i.state.sortType], sort: SortType[i.state.sortType],
type_: ListingType[ListingType.Community] type_: ListingType[ListingType.Community]
} }
WebSocketService.Instance.getPosts(getPostsForm); WebSocketService.Instance.getPosts(getPostsForm);
} }
handleTypeChange(i: PostListings, event) { handleTypeChange(i: PostListings, event: any) {
i.state.type_ = Number(event.target.value); i.state.type_ = Number(event.target.value);
i.setState(i.state); i.setState(i.state);
let getPostsForm: GetPostsForm = { let getPostsForm: GetPostsForm = {
limit: 10, limit: 10,
sort: ListingSortType[i.state.sortType], sort: SortType[i.state.sortType],
type_: ListingType[i.state.type_] type_: ListingType[i.state.type_]
} }
WebSocketService.Instance.getPosts(getPostsForm); WebSocketService.Instance.getPosts(getPostsForm);
@ -151,6 +156,7 @@ export class PostListings extends Component<PostListingsProps, PostListingsState
} else if (op == UserOperation.GetPosts) { } else if (op == UserOperation.GetPosts) {
let res: GetPostsResponse = msg; let res: GetPostsResponse = msg;
this.state.posts = res.posts; this.state.posts = res.posts;
this.state.loading = false;
this.setState(this.state); this.setState(this.state);
} else if (op == UserOperation.CreatePostLike) { } else if (op == UserOperation.CreatePostLike) {
let res: CreatePostLikeResponse = msg; let res: CreatePostLikeResponse = msg;

287
ui/src/components/post.tsx
View file

@ -1,19 +1,15 @@
import { Component, linkEvent } from 'inferno'; import { Component, linkEvent } from 'inferno';
import { Link } from 'inferno-router';
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, GetPostResponse, PostResponse, Comment, CommentForm as CommentFormI, CommentResponse, CommentLikeForm, CommentSortType, CreatePostLikeResponse, CommunityUser, CommunityResponse } from '../interfaces'; import { UserOperation, Community, Post as PostI, GetPostResponse, PostResponse, Comment, CommentResponse, CommentSortType, CreatePostLikeResponse, CommunityUser, CommunityResponse, CommentNode as CommentNodeI } from '../interfaces';
import { WebSocketService, UserService } from '../services'; import { WebSocketService } from '../services';
import { msgOp, hotRank,mdToHtml } from '../utils'; import { msgOp, hotRank } from '../utils';
import { MomentTime } from './moment-time';
import { PostListing } from './post-listing'; import { PostListing } from './post-listing';
import { Sidebar } from './sidebar'; import { Sidebar } from './sidebar';
import { CommentForm } from './comment-form';
import { CommentNodes } from './comment-nodes';
import * as autosize from 'autosize'; import * as autosize from 'autosize';
interface CommentNodeI {
comment: Comment;
children?: Array<CommentNodeI>;
};
interface PostState { interface PostState {
post: PostI; post: PostI;
@ -21,7 +17,9 @@ interface PostState {
commentSort: CommentSortType; commentSort: CommentSortType;
community: Community; community: Community;
moderators: Array<CommunityUser>; moderators: Array<CommunityUser>;
scrolled: boolean; scrolled?: boolean;
scrolled_comment_id?: number;
loading: boolean;
} }
export class Post extends Component<any, PostState> { export class Post extends Component<any, PostState> {
@ -33,15 +31,19 @@ export class Post extends Component<any, PostState> {
commentSort: CommentSortType.Hot, commentSort: CommentSortType.Hot,
community: null, community: null,
moderators: [], moderators: [],
scrolled: false scrolled: false,
loading: true
} }
constructor(props, context) { constructor(props: any, context: any) {
super(props, context); super(props, context);
this.state = this.emptyState; this.state = this.emptyState;
let postId = Number(this.props.match.params.id); let postId = Number(this.props.match.params.id);
if (this.props.match.params.comment_id) {
this.state.scrolled_comment_id = this.props.match.params.comment_id;
}
this.subscription = WebSocketService.Instance.subject this.subscription = WebSocketService.Instance.subject
.pipe(retryWhen(errors => errors.pipe(delay(3000), take(10)))) .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
@ -62,11 +64,11 @@ export class Post extends Component<any, PostState> {
autosize(document.querySelectorAll('textarea')); autosize(document.querySelectorAll('textarea'));
} }
componentDidUpdate(lastProps: any, lastState: PostState, snapshot: any) { componentDidUpdate(_lastProps: any, lastState: PostState, _snapshot: any) {
if (!this.state.scrolled && lastState.comments.length > 0 && window.location.href.includes('#comment-')) { if (this.state.scrolled_comment_id && !this.state.scrolled && lastState.comments.length > 0) {
let id = window.location.hash.split("#")[2]; var elmnt = document.getElementById(`comment-${this.state.scrolled_comment_id}`);
var elmnt = document.getElementById(`${id}`);
elmnt.scrollIntoView(); elmnt.scrollIntoView();
elmnt.classList.add("mark");
this.state.scrolled = true; this.state.scrolled = true;
} }
} }
@ -74,7 +76,8 @@ export class Post extends Component<any, PostState> {
render() { render() {
return ( return (
<div class="container"> <div class="container">
{this.state.post && {this.state.loading ?
<h4><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h4> :
<div class="row"> <div class="row">
<div class="col-12 col-sm-8 col-lg-7 mb-3"> <div class="col-12 col-sm-8 col-lg-7 mb-3">
<PostListing post={this.state.post} showBody showCommunity editable /> <PostListing post={this.state.post} showBody showCommunity editable />
@ -136,7 +139,7 @@ export class Post extends Component<any, PostState> {
); );
} }
handleCommentSortChange(i: Post, event) { handleCommentSortChange(i: Post, event: any) {
i.state.commentSort = Number(event.target.value); i.state.commentSort = Number(event.target.value);
i.setState(i.state); i.setState(i.state);
} }
@ -202,6 +205,7 @@ export class Post extends Component<any, PostState> {
this.state.comments = res.comments; this.state.comments = res.comments;
this.state.community = res.community; this.state.community = res.community;
this.state.moderators = res.moderators; this.state.moderators = res.moderators;
this.state.loading = false;
this.setState(this.state); this.setState(this.state);
} else if (op == UserOperation.CreateComment) { } else if (op == UserOperation.CreateComment) {
let res: CommentResponse = msg; let res: CommentResponse = msg;
@ -250,252 +254,5 @@ export class Post extends Component<any, PostState> {
} }
} }
interface CommentNodesState {
}
interface CommentNodesProps {
nodes: Array<CommentNodeI>;
noIndent?: boolean;
}
export class CommentNodes extends Component<CommentNodesProps, CommentNodesState> {
constructor(props, context) {
super(props, context);
}
render() {
return (
<div className="comments">
{this.props.nodes.map(node =>
<CommentNode node={node} noIndent={this.props.noIndent} />
)}
</div>
)
}
}
interface CommentNodeState {
showReply: boolean;
showEdit: boolean;
}
interface CommentNodeProps {
node: CommentNodeI;
noIndent?: boolean;
}
export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
private emptyState: CommentNodeState = {
showReply: false,
showEdit: 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 id={`comment-${node.comment.id}`} className={`comment ${node.comment.parent_id && !this.props.noIndent ? 'ml-4' : ''}`}>
<div className="float-left small text-center">
<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">
<li className="list-inline-item">
<Link to={`/user/${node.comment.creator_id}`}>{node.comment.creator_name}</Link>
</li>
<li className="list-inline-item">
<span>(
<span className="text-info">+{node.comment.upvotes}</span>
<span> | </span>
<span className="text-danger">-{node.comment.downvotes}</span>
<span>) </span>
</span>
</li>
<li className="list-inline-item">
<span><MomentTime data={node.comment} /></span>
</li>
</ul>
{this.state.showEdit && <CommentForm node={node} edit onReplyCancel={this.handleReplyCancel} />}
{!this.state.showEdit &&
<div>
<div className="md-div" dangerouslySetInnerHTML={mdToHtml(node.comment.content)} />
<ul class="list-inline mb-1 text-muted small font-weight-bold">
<li className="list-inline-item">
<span class="pointer" onClick={linkEvent(this, this.handleReplyClick)}>reply</span>
</li>
{this.myComment &&
<li className="list-inline-item">
<span class="pointer" onClick={linkEvent(this, this.handleEditClick)}>edit</span>
</li>
}
{this.myComment &&
<li className="list-inline-item">
<span class="pointer" onClick={linkEvent(this, this.handleDeleteClick)}>delete</span>
</li>
}
<li className="list-inline-item">
<Link className="text-muted" to={`/post/${node.comment.post_id}#comment-${node.comment.id}`}>link</Link>
</li>
</ul>
</div>
}
</div>
{this.state.showReply && <CommentForm node={node} onReplyCancel={this.handleReplyCancel} />}
{this.props.node.children && <CommentNodes nodes={this.props.node.children} />}
</div>
)
}
private get myComment(): boolean {
return UserService.Instance.loggedIn && this.props.node.comment.creator_id == UserService.Instance.user.id;
}
handleReplyClick(i: CommentNode, event) {
i.state.showReply = true;
i.setState(i.state);
}
handleEditClick(i: CommentNode, event) {
i.state.showEdit = true;
i.setState(i.state);
}
handleDeleteClick(i: CommentNode, event) {
let deleteForm: CommentFormI = {
content: "*deleted*",
edit_id: i.props.node.comment.id,
post_id: i.props.node.comment.post_id,
parent_id: i.props.node.comment.parent_id,
auth: null
};
WebSocketService.Instance.editComment(deleteForm);
}
handleReplyCancel(): any {
this.state.showReply = false;
this.state.showEdit = 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?();
edit?: boolean;
}
interface CommentFormState {
commentForm: CommentFormI;
buttonTitle: string;
}
export class CommentForm extends Component<CommentFormProps, CommentFormState> {
private emptyState: CommentFormState = {
commentForm: {
auth: null,
content: null,
post_id: this.props.node ? this.props.node.comment.post_id : this.props.postId
},
buttonTitle: !this.props.node ? "Post" : this.props.edit ? "Edit" : "Reply"
}
constructor(props, context) {
super(props, context);
this.state = this.emptyState;
if (this.props.node) {
if (this.props.edit) {
this.state.commentForm.edit_id = this.props.node.comment.id;
this.state.commentForm.parent_id = this.props.node.comment.parent_id;
this.state.commentForm.content = this.props.node.comment.content;
} else {
// A reply gets a new parent id
this.state.commentForm.parent_id = this.props.node.comment.id;
}
}
}
componentDidMount() {
autosize(document.querySelectorAll('textarea'));
}
render() {
return (
<div>
<form onSubmit={linkEvent(this, this.handleCommentSubmit)}>
<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-sm btn-secondary mr-2">{this.state.buttonTitle}</button>
{this.props.node && <button type="button" class="btn btn-sm btn-secondary" onClick={linkEvent(this, this.handleReplyCancel)}>Cancel</button>}
</div>
</div>
</form>
</div>
);
}
handleCommentSubmit(i: CommentForm, event) {
if (i.props.edit) {
WebSocketService.Instance.editComment(i.state.commentForm);
} else {
WebSocketService.Instance.createComment(i.state.commentForm);
}
i.state.commentForm.content = undefined;
i.setState(i.state);
event.target.reset();
if (i.props.node) {
i.props.onReplyCancel();
}
}
handleCommentContentChange(i: CommentForm, event) {
i.state.commentForm.content = event.target.value;
i.setState(i.state);
}
handleReplyCancel(i: CommentForm, event) {
i.props.onReplyCancel();
}
}

13
ui/src/components/sidebar.tsx
View file

@ -20,7 +20,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
showEdit: false showEdit: false
} }
constructor(props, context) { constructor(props: any, context: any) {
super(props, context); super(props, context);
this.state = this.emptyState; this.state = this.emptyState;
this.handleEditCommunity = this.handleEditCommunity.bind(this); this.handleEditCommunity = this.handleEditCommunity.bind(this);
@ -42,7 +42,8 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
let community = this.props.community; let community = this.props.community;
return ( return (
<div> <div>
<h4>{community.title}</h4> <h4 className="mb-0">{community.title}</h4>
<Link className="text-muted" to={`/community/${community.id}`}>/f/{community.name}</Link>
{this.amMod && {this.amMod &&
<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">
@ -82,12 +83,12 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
); );
} }
handleEditClick(i: Sidebar, event) { handleEditClick(i: Sidebar) {
i.state.showEdit = true; i.state.showEdit = true;
i.setState(i.state); i.setState(i.state);
} }
handleEditCommunity(community: Community) { handleEditCommunity() {
this.state.showEdit = false; this.state.showEdit = false;
this.setState(this.state); this.setState(this.state);
} }
@ -98,8 +99,8 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
} }
// TODO no deleting communities yet // TODO no deleting communities yet
handleDeleteClick(i: Sidebar, event) { // handleDeleteClick(i: Sidebar, event) {
} // }
handleUnsubscribe(communityId: number) { handleUnsubscribe(communityId: number) {
let form: FollowCommunityForm = { let form: FollowCommunityForm = {

80
ui/src/components/symbols.tsx Normal file
View file

@ -0,0 +1,80 @@
import { Component } from 'inferno';
export class Symbols extends Component<any, any> {
constructor(props: any, context: any) {
super(props, context);
}
render() {
return (
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-mouse" version="1.1" x="0px" y="0px"
viewBox="0 0 512 512">
<g>
<g>
<path d="M499.059,323.505l-7.52-32.532l-70.047,16.19c1.513-11.983,2.297-24.042,2.297-36.037c0-18.334-1.801-35.785-5.316-52.19
c29.365-12.101,55.143-28.885,69.372-45.529c17.524-20.498,25.985-46.568,23.822-73.406
c-2.163-26.862-14.706-51.268-35.316-68.724C433.879-4.694,369.917,0.439,333.774,42.718
c-9.546,11.168-18.318,27.381-25.379,46.649c-16.512-5.419-34.132-8.243-52.395-8.243s-35.885,2.824-52.395,8.243
c-7.06-19.267-15.832-35.481-25.379-46.649C142.082,0.44,78.123-4.695,35.648,31.277C15.038,48.733,2.494,73.141,0.332,100.001
c-2.161,26.838,6.297,52.907,23.822,73.406c14.229,16.644,40.006,33.427,69.372,45.529c-3.515,16.405-5.316,33.856-5.316,52.189
c0,11.995,0.785,24.053,2.297,36.037l-70.047-16.19l-7.52,32.532l84.337,19.492c4.349,17.217,10.201,33.953,17.421,49.752
L12.941,416.27l7.52,32.532l110.634-25.57c1.38,2.197,2.779,4.373,4.218,6.509c32.548,48.323,75.409,74.934,120.687,74.934
c45.278,0,88.138-26.612,120.687-74.934c1.439-2.136,2.839-4.313,4.218-6.509l110.634,25.57l7.52-32.532l-101.758-23.519
c7.221-15.799,13.072-32.535,17.421-49.752L499.059,323.505z M183.578,220.372c0-11.41,9.189-20.65,20.482-20.65
c11.306,0,20.494,9.24,20.494,20.65c0,11.408-9.188,20.656-20.494,20.656C192.768,241.028,183.578,231.78,183.578,220.372z
M256,413.29c-29.895,0-54.216-19.471-54.216-43.403c0-23.932,24.322-43.403,54.216-43.403s54.216,19.471,54.216,43.403
C310.216,393.819,285.895,413.29,256,413.29z M307.785,241.183c-11.402,0-20.65-9.317-20.65-20.81
c0-11.494,9.248-20.81,20.65-20.81c11.387,0,20.635,9.317,20.635,20.81C328.422,231.866,319.173,241.183,307.785,241.183z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</symbol>
<symbol id="icon-search" viewBox="0 0 32 32">
<title>search</title>
<path d="M31.008 27.231l-7.58-6.447c-0.784-0.705-1.622-1.029-2.299-0.998 1.789-2.096 2.87-4.815 2.87-7.787 0-6.627-5.373-12-12-12s-12 5.373-12 12 5.373 12 12 12c2.972 0 5.691-1.081 7.787-2.87-0.031 0.677 0.293 1.515 0.998 2.299l6.447 7.58c1.104 1.226 2.907 1.33 4.007 0.23s0.997-2.903-0.23-4.007zM12 20c-4.418 0-8-3.582-8-8s3.582-8 8-8 8 3.582 8 8-3.582 8-8 8z"></path>
</symbol>
<symbol id="icon-github" viewBox="0 0 32 32">
<title>github</title>
<path d="M16 0.395c-8.836 0-16 7.163-16 16 0 7.069 4.585 13.067 10.942 15.182 0.8 0.148 1.094-0.347 1.094-0.77 0-0.381-0.015-1.642-0.022-2.979-4.452 0.968-5.391-1.888-5.391-1.888-0.728-1.849-1.776-2.341-1.776-2.341-1.452-0.993 0.11-0.973 0.11-0.973 1.606 0.113 2.452 1.649 2.452 1.649 1.427 2.446 3.743 1.739 4.656 1.33 0.143-1.034 0.558-1.74 1.016-2.14-3.554-0.404-7.29-1.777-7.29-7.907 0-1.747 0.625-3.174 1.649-4.295-0.166-0.403-0.714-2.030 0.155-4.234 0 0 1.344-0.43 4.401 1.64 1.276-0.355 2.645-0.532 4.005-0.539 1.359 0.006 2.729 0.184 4.008 0.539 3.054-2.070 4.395-1.64 4.395-1.64 0.871 2.204 0.323 3.831 0.157 4.234 1.026 1.12 1.647 2.548 1.647 4.295 0 6.145-3.743 7.498-7.306 7.895 0.574 0.497 1.085 1.47 1.085 2.963 0 2.141-0.019 3.864-0.019 4.391 0 0.426 0.288 0.925 1.099 0.768 6.354-2.118 10.933-8.113 10.933-15.18 0-8.837-7.164-16-16-16z"></path>
</symbol>
<symbol id="icon-spinner" viewBox="0 0 32 32">
<title>spinner</title>
<path d="M16 32c-4.274 0-8.292-1.664-11.314-4.686s-4.686-7.040-4.686-11.314c0-3.026 0.849-5.973 2.456-8.522 1.563-2.478 3.771-4.48 6.386-5.791l1.344 2.682c-2.126 1.065-3.922 2.693-5.192 4.708-1.305 2.069-1.994 4.462-1.994 6.922 0 7.168 5.832 13 13 13s13-5.832 13-13c0-2.459-0.69-4.853-1.994-6.922-1.271-2.015-3.066-3.643-5.192-4.708l1.344-2.682c2.615 1.31 4.824 3.313 6.386 5.791 1.607 2.549 2.456 5.495 2.456 8.522 0 4.274-1.664 8.292-4.686 11.314s-7.040 4.686-11.314 4.686z"></path>
</symbol>
</defs>
</svg>
);
}
}

264
ui/src/components/user.tsx Normal file
View file

@ -0,0 +1,264 @@
import { Component, linkEvent } from 'inferno';
import { Link } from 'inferno-router';
import { Subscription } from "rxjs";
import { retryWhen, delay, take } from 'rxjs/operators';
import { UserOperation, Post, Comment, CommunityUser, GetUserDetailsForm, SortType, UserDetailsResponse, UserView } from '../interfaces';
import { WebSocketService } from '../services';
import { msgOp } from '../utils';
import { PostListing } from './post-listing';
import { CommentNodes } from './comment-nodes';
import { MomentTime } from './moment-time';
enum View {
Overview, Comments, Posts, Saved
}
interface UserState {
user: UserView;
follows: Array<CommunityUser>;
moderates: Array<CommunityUser>;
comments: Array<Comment>;
posts: Array<Post>;
saved?: Array<Post>;
view: View;
sort: SortType;
}
export class User extends Component<any, UserState> {
private subscription: Subscription;
private emptyState: UserState = {
user: {
id: null,
name: null,
fedi_name: null,
published: null,
number_of_posts: null,
post_score: null,
number_of_comments: null,
comment_score: null,
},
follows: [],
moderates: [],
comments: [],
posts: [],
view: View.Overview,
sort: SortType.New
}
constructor(props: any, context: any) {
super(props, context);
this.state = this.emptyState;
let userId = Number(this.props.match.params.id);
this.subscription = WebSocketService.Instance.subject
.pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
.subscribe(
(msg) => this.parseMessage(msg),
(err) => console.error(err),
() => console.log('complete')
);
let form: GetUserDetailsForm = {
user_id: userId,
sort: SortType[this.state.sort],
limit: 999
};
WebSocketService.Instance.getUserDetails(form);
}
componentWillUnmount() {
this.subscription.unsubscribe();
}
render() {
return (
<div class="container">
<div class="row">
<div class="col-12 col-md-9">
<h4>/u/{this.state.user.name}</h4>
{this.selects()}
{this.state.view == View.Overview &&
this.overview()
}
{this.state.view == View.Comments &&
this.comments()
}
{this.state.view == View.Posts &&
this.posts()
}
</div>
<div class="col-12 col-md-3">
{this.userInfo()}
{this.moderates()}
{this.follows()}
</div>
</div>
</div>
)
}
selects() {
return (
<div className="mb-2">
<select value={this.state.view} onChange={linkEvent(this, this.handleViewChange)} class="custom-select w-auto">
<option disabled>View</option>
<option value={View.Overview}>Overview</option>
<option value={View.Comments}>Comments</option>
<option value={View.Posts}>Posts</option>
{/* <option value={View.Saved}>Saved</option> */}
</select>
<select value={this.state.sort} onChange={linkEvent(this, this.handleSortChange)} class="custom-select w-auto ml-2">
<option disabled>Sort Type</option>
<option value={SortType.New}>New</option>
<option value={SortType.TopDay}>Top Day</option>
<option value={SortType.TopWeek}>Week</option>
<option value={SortType.TopMonth}>Month</option>
<option value={SortType.TopYear}>Year</option>
<option value={SortType.TopAll}>All</option>
</select>
</div>
)
}
overview() {
let combined: Array<any> = [];
combined.push(...this.state.comments);
combined.push(...this.state.posts);
// Sort it
if (this.state.sort == SortType.New) {
combined.sort((a, b) => b.published.localeCompare(a.published));
} else {
combined.sort((a, b) => b.score - a.score);
}
return (
<div>
{combined.map(i =>
<div>
{i.community_id
? <PostListing post={i} showCommunity viewOnly />
: <CommentNodes nodes={[{comment: i}]} noIndent viewOnly />
}
</div>
)
}
</div>
)
}
comments() {
return (
<div>
{this.state.comments.map(comment =>
<CommentNodes nodes={[{comment: comment}]} noIndent viewOnly />
)}
</div>
);
}
posts() {
return (
<div>
{this.state.posts.map(post =>
<PostListing post={post} showCommunity viewOnly />
)}
</div>
);
}
userInfo() {
let user = this.state.user;
return (
<div>
<h4>{user.name}</h4>
<div>Joined <MomentTime data={user} /></div>
<table class="table table-bordered table-sm mt-2">
<tr>
<td>{user.post_score} points</td>
<td>{user.number_of_posts} posts</td>
</tr>
<tr>
<td>{user.comment_score} points</td>
<td>{user.number_of_comments} comments</td>
</tr>
</table>
<hr />
</div>
)
}
moderates() {
return (
<div>
{this.state.moderates.length > 0 &&
<div>
<h4>Moderates</h4>
<ul class="list-unstyled">
{this.state.moderates.map(community =>
<li><Link to={`/community/${community.community_id}`}>{community.community_name}</Link></li>
)}
</ul>
</div>
}
</div>
)
}
follows() {
return (
<div>
{this.state.follows.length > 0 &&
<div>
<hr />
<h4>Subscribed</h4>
<ul class="list-unstyled">
{this.state.follows.map(community =>
<li><Link to={`/community/${community.community_id}`}>{community.community_name}</Link></li>
)}
</ul>
</div>
}
</div>
)
}
handleSortChange(i: User, event: any) {
i.state.sort = Number(event.target.value);
i.setState(i.state);
let form: GetUserDetailsForm = {
user_id: i.state.user.id,
sort: SortType[i.state.sort],
limit: 999
};
WebSocketService.Instance.getUserDetails(form);
}
handleViewChange(i: User, event: any) {
i.state.view = Number(event.target.value);
i.setState(i.state);
}
parseMessage(msg: any) {
console.log(msg);
let op: UserOperation = msgOp(msg);
if (msg.error) {
alert(msg.error);
return;
} else if (op == UserOperation.GetUserDetails) {
let res: UserDetailsResponse = msg;
this.state.user = res.user;
this.state.comments = res.comments;
this.state.follows = res.follows;
this.state.moderates = res.moderates;
this.state.posts = res.posts;
this.setState(this.state);
}
}
}

6
ui/src/env.ts
View file

@ -1,2 +1,4 @@
export const endpoint = `${window.location.hostname}:8536`; let host = `${window.location.hostname}`;
export let wsUri = (window.location.protocol=='https:') ? 'wss://' : 'ws://' + endpoint + '/service/ws'; let port = `${window.location.port == "4444" ? '8536' : window.location.port}`;
let endpoint = `${host}:${port}`;
export let wsUri = `${(window.location.protocol=='https:') ? 'wss://' : 'ws://'}${endpoint}/service/ws`;

65
ui/src/index.tsx
View file

@ -9,6 +9,8 @@ import { CreateCommunity } from './components/create-community';
import { Post } from './components/post'; import { Post } from './components/post';
import { Community } from './components/community'; import { Community } from './components/community';
import { Communities } from './components/communities'; import { Communities } from './components/communities';
import { User } from './components/user';
import { Symbols } from './components/symbols';
import './main.css'; import './main.css';
@ -18,7 +20,7 @@ const container = document.getElementById('app');
class Index extends Component<any, any> { class Index extends Component<any, any> {
constructor(props, context) { constructor(props: any, context: any) {
super(props, context); super(props, context);
WebSocketService.Instance; WebSocketService.Instance;
UserService.Instance; UserService.Instance;
@ -35,71 +37,18 @@ class Index extends Component<any, any> {
<Route path={`/create_post`} component={CreatePost} /> <Route path={`/create_post`} component={CreatePost} />
<Route path={`/create_community`} component={CreateCommunity} /> <Route path={`/create_community`} component={CreateCommunity} />
<Route path={`/communities`} component={Communities} /> <Route path={`/communities`} component={Communities} />
<Route path={`/post/:id/comment/:comment_id`} component={Post} />
<Route path={`/post/:id`} component={Post} /> <Route path={`/post/:id`} component={Post} />
<Route path={`/community/:id`} component={Community} /> <Route path={`/community/:id`} component={Community} />
<Route path={`/user/:id/:heading`} component={User} />
<Route path={`/user/:id`} component={User} />
</Switch> </Switch>
{this.symbols()} <Symbols />
</div> </div>
</HashRouter> </HashRouter>
); );
} }
symbols() {
return(
<symbol id="icon-mouse" version="1.1" x="0px" y="0px"
viewBox="0 0 512 512">
<g>
<g>
<path d="M499.059,323.505l-7.52-32.532l-70.047,16.19c1.513-11.983,2.297-24.042,2.297-36.037c0-18.334-1.801-35.785-5.316-52.19
c29.365-12.101,55.143-28.885,69.372-45.529c17.524-20.498,25.985-46.568,23.822-73.406
c-2.163-26.862-14.706-51.268-35.316-68.724C433.879-4.694,369.917,0.439,333.774,42.718
c-9.546,11.168-18.318,27.381-25.379,46.649c-16.512-5.419-34.132-8.243-52.395-8.243s-35.885,2.824-52.395,8.243
c-7.06-19.267-15.832-35.481-25.379-46.649C142.082,0.44,78.123-4.695,35.648,31.277C15.038,48.733,2.494,73.141,0.332,100.001
c-2.161,26.838,6.297,52.907,23.822,73.406c14.229,16.644,40.006,33.427,69.372,45.529c-3.515,16.405-5.316,33.856-5.316,52.189
c0,11.995,0.785,24.053,2.297,36.037l-70.047-16.19l-7.52,32.532l84.337,19.492c4.349,17.217,10.201,33.953,17.421,49.752
L12.941,416.27l7.52,32.532l110.634-25.57c1.38,2.197,2.779,4.373,4.218,6.509c32.548,48.323,75.409,74.934,120.687,74.934
c45.278,0,88.138-26.612,120.687-74.934c1.439-2.136,2.839-4.313,4.218-6.509l110.634,25.57l7.52-32.532l-101.758-23.519
c7.221-15.799,13.072-32.535,17.421-49.752L499.059,323.505z M183.578,220.372c0-11.41,9.189-20.65,20.482-20.65
c11.306,0,20.494,9.24,20.494,20.65c0,11.408-9.188,20.656-20.494,20.656C192.768,241.028,183.578,231.78,183.578,220.372z
M256,413.29c-29.895,0-54.216-19.471-54.216-43.403c0-23.932,24.322-43.403,54.216-43.403s54.216,19.471,54.216,43.403
C310.216,393.819,285.895,413.29,256,413.29z M307.785,241.183c-11.402,0-20.65-9.317-20.65-20.81
c0-11.494,9.248-20.81,20.65-20.81c11.387,0,20.635,9.317,20.635,20.81C328.422,231.866,319.173,241.183,307.785,241.183z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</symbol>
);
}
} }
render(<Index />, container); render(<Index />, container);

41
ui/src/interfaces.ts
View file

@ -1,5 +1,5 @@
export enum UserOperation { export enum UserOperation {
Login, Register, CreateCommunity, CreatePost, ListCommunities, ListCategories, GetPost, GetCommunity, CreateComment, EditComment, CreateCommentLike, GetPosts, CreatePostLike, EditPost, EditCommunity, FollowCommunity, GetFollowedCommunities Login, Register, CreateCommunity, CreatePost, ListCommunities, ListCategories, GetPost, GetCommunity, CreateComment, EditComment, CreateCommentLike, GetPosts, CreatePostLike, EditPost, EditCommunity, FollowCommunity, GetFollowedCommunities, GetUserDetails
} }
export interface User { export interface User {
@ -8,6 +8,17 @@ export interface User {
username: string; username: string;
} }
export interface UserView {
id: number;
name: string;
fedi_name: string;
published: string;
number_of_posts: number;
post_score: number;
number_of_comments: number;
comment_score: number;
}
export interface CommunityUser { export interface CommunityUser {
id: number; id: number;
user_id: number; user_id: number;
@ -144,6 +155,11 @@ export interface CommentLikeForm {
auth?: string; auth?: string;
} }
export interface CommentNode {
comment: Comment;
children?: Array<CommentNode>;
}
export interface GetPostsForm { export interface GetPostsForm {
type_: string; type_: string;
sort: string; sort: string;
@ -184,6 +200,27 @@ export interface GetFollowedCommunitiesResponse {
communities: Array<CommunityUser>; communities: Array<CommunityUser>;
} }
export interface GetUserDetailsForm {
user_id: number;
sort: string; // TODO figure this one out
limit: number;
community_id?: number;
auth?: string;
}
export interface UserDetailsResponse {
op: string;
user: UserView;
follows: Array<CommunityUser>;
moderates: Array<CommunityUser>;
comments: Array<Comment>;
posts: Array<Post>;
saved?: Array<Post>;
}
export interface LoginForm { export interface LoginForm {
username_or_email: string; username_or_email: string;
password: string; password: string;
@ -210,7 +247,7 @@ export enum ListingType {
All, Subscribed, Community All, Subscribed, Community
} }
export enum ListingSortType { export enum SortType {
Hot, New, TopDay, TopWeek, TopMonth, TopYear, TopAll Hot, New, TopDay, TopWeek, TopMonth, TopYear, TopAll
} }

21
ui/src/main.css
View file

@ -6,6 +6,11 @@ body {
cursor: pointer; cursor: pointer;
} }
.no-click {
pointer-events:none;
opacity: 0.65;
}
.upvote:hover { .upvote:hover {
color: var(--info); color: var(--info);
} }
@ -24,6 +29,10 @@ body {
background-color: var(--secondary); background-color: var(--secondary);
} }
.mark {
background-color: #322a00;
}
.md-div p { .md-div p {
margin-bottom: 0px; margin-bottom: 0px;
} }
@ -45,5 +54,15 @@ body {
stroke: currentColor; stroke: currentColor;
fill: currentColor; fill: currentColor;
vertical-align: middle; vertical-align: middle;
margin-bottom: 6px; align-self: center;
}
.spin {
animation: spins 2s linear infinite;
}
@keyframes spins {
0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); }
} }

9
ui/src/services/WebSocketService.ts
View file

@ -1,5 +1,5 @@
import { wsUri } from '../env'; import { wsUri } from '../env';
import { LoginForm, RegisterForm, UserOperation, CommunityForm, PostForm, CommentForm, CommentLikeForm, GetPostsForm, CreatePostLikeForm, FollowCommunityForm } from '../interfaces'; import { LoginForm, RegisterForm, UserOperation, CommunityForm, PostForm, CommentForm, CommentLikeForm, GetPostsForm, CreatePostLikeForm, FollowCommunityForm, GetUserDetailsForm } 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';
@ -106,6 +106,11 @@ export class WebSocketService {
this.subject.next(this.wsSendWrapper(UserOperation.EditPost, postForm)); this.subject.next(this.wsSendWrapper(UserOperation.EditPost, postForm));
} }
public getUserDetails(form: GetUserDetailsForm) {
this.setAuth(form, false);
this.subject.next(this.wsSendWrapper(UserOperation.GetUserDetails, 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);
@ -122,7 +127,7 @@ export class WebSocketService {
} }
window.onbeforeunload = (e => { window.onbeforeunload = (() => {
WebSocketService.Instance.subject.unsubscribe(); WebSocketService.Instance.subject.unsubscribe();
WebSocketService.Instance.subject = null; WebSocketService.Instance.subject = null;
}); });

1
ui/src/utils.ts
View file

@ -2,7 +2,6 @@ import { UserOperation, Comment } from './interfaces';
import * as markdown_it from 'markdown-it'; import * as markdown_it from 'markdown-it';
export let repoUrl = 'https://github.com/dessalines/lemmy'; export let repoUrl = 'https://github.com/dessalines/lemmy';
export let wsUri = (window.location.protocol=='https:'&&'wss://'||'ws://')+window.location.host + '/service/ws/';
export function msgOp(msg: any): UserOperation { export function msgOp(msg: any): UserOperation {
let opStr: string = msg.op; let opStr: string = msg.op;

1
ui/src/version.ts Normal file
View file

@ -0,0 +1 @@
export let version: string = "v0.0.2-0-gdae6651";

36
ui/yarn.lock
View file

@ -9,11 +9,47 @@
dependencies: dependencies:
regenerator-runtime "^0.12.0" regenerator-runtime "^0.12.0"
"@types/autosize@^3.0.6":
version "3.0.6"
resolved "https://registry.yarnpkg.com/@types/autosize/-/autosize-3.0.6.tgz#9022e6a783ec5a4d5e570013701dbc0bfe7667fa"
integrity sha512-gpfmXswGISLSWNOOdF2PDK96SfkaZdNtNixWJbYH10xn3Hqdt4VyS1GmoutuwOshWyCLuJw2jGhF0zkK7PUhrg==
dependencies:
"@types/jquery" "*"
"@types/jquery@*":
version "3.3.29"
resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-3.3.29.tgz#680a2219ce3c9250483722fccf5570d1e2d08abd"
integrity sha512-FhJvBninYD36v3k6c+bVk1DSZwh7B5Dpb/Pyk3HKVsiohn0nhbefZZ+3JXbWQhFyt0MxSl2jRDdGQPHeOHFXrQ==
dependencies:
"@types/sizzle" "*"
"@types/js-cookie@^2.2.1": "@types/js-cookie@^2.2.1":
version "2.2.1" version "2.2.1"
resolved "https://registry.yarnpkg.com/@types/js-cookie/-/js-cookie-2.2.1.tgz#aa6f6d5e5aaf7d97959e9fa938ac2501cf1a76f4" resolved "https://registry.yarnpkg.com/@types/js-cookie/-/js-cookie-2.2.1.tgz#aa6f6d5e5aaf7d97959e9fa938ac2501cf1a76f4"
integrity sha512-VIVurImEhQ95jxtjs8baVU5qCzVfwYfuMrpXwdRykJ5MCI5iY7/jB4cDSgwBVeYqeXrhT7GfJUwoDOmN0OMVCA== integrity sha512-VIVurImEhQ95jxtjs8baVU5qCzVfwYfuMrpXwdRykJ5MCI5iY7/jB4cDSgwBVeYqeXrhT7GfJUwoDOmN0OMVCA==
"@types/jwt-decode@^2.2.1":
version "2.2.1"
resolved "https://registry.yarnpkg.com/@types/jwt-decode/-/jwt-decode-2.2.1.tgz#afdf5c527fcfccbd4009b5fd02d1e18241f2d2f2"
integrity sha512-aWw2YTtAdT7CskFyxEX2K21/zSDStuf/ikI3yBqmwpwJF0pS+/IX5DWv+1UFffZIbruP6cnT9/LAJV1gFwAT1A==
"@types/linkify-it@*":
version "2.1.0"
resolved "https://registry.yarnpkg.com/@types/linkify-it/-/linkify-it-2.1.0.tgz#ea3dd64c4805597311790b61e872cbd1ed2cd806"
integrity sha512-Q7DYAOi9O/+cLLhdaSvKdaumWyHbm7HAk/bFwwyTuU0arR5yyCeW5GOoqt4tJTpDRxhpx9Q8kQL6vMpuw9hDSw==
"@types/markdown-it@^0.0.7":
version "0.0.7"
resolved "https://registry.yarnpkg.com/@types/markdown-it/-/markdown-it-0.0.7.tgz#75070485a3d8ad11e7deb8287f4430be15bf4d39"
integrity sha512-WyL6pa76ollQFQNEaLVa41ZUUvDvPY+qAUmlsphnrpL6I9p1m868b26FyeoOmo7X3/Ta/S9WKXcEYXUSHnxoVQ==
dependencies:
"@types/linkify-it" "*"
"@types/sizzle@*":
version "2.3.2"
resolved "https://registry.yarnpkg.com/@types/sizzle/-/sizzle-2.3.2.tgz#a811b8c18e2babab7d542b3365887ae2e4d9de47"
integrity sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg==
abbrev@1: abbrev@1:
version "1.1.1" version "1.1.1"
resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8" resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"