From: Dessalines <tyhou13@gmx.com>
Date: Wed, 3 Apr 2019 23:01:20 +0000 (-0700)
Subject: Adding a sidebar, title, and forum categories
X-Git-Url: http://these/git/%7B%60/static/assets/css/themes/%7Bthis.captchaPngSrc%28%29%7D?a=commitdiff_plain;h=927cb6d35637c886df019bcbf8f2434afe63ca80;p=lemmy.git

Adding a sidebar, title, and forum categories

- Adding a Sidebar component
- Starting on forum categories. #17
- Adding a Sidebar and title to community. Fixes #16
---

diff --git a/server/migrations/2019-04-03-155205_create_community_view/up.sql b/server/migrations/2019-04-03-155205_create_community_view/up.sql
index e731b7f2..74972507 100644
--- a/server/migrations/2019-04-03-155205_create_community_view/up.sql
+++ b/server/migrations/2019-04-03-155205_create_community_view/up.sql
@@ -1,6 +1,7 @@
 create view community_view as 
 select *,
 (select name from user_ u where c.creator_id = u.id) as creator_name,
+(select name from category ct where c.category_id = ct.id) as category_name,
 (select count(*) from community_follower cf where cf.community_id = c.id) as number_of_subscribers,
 (select count(*) from post p where p.community_id = c.id) as number_of_posts
 from community c;
diff --git a/server/src/actions/category.rs b/server/src/actions/category.rs
new file mode 100644
index 00000000..8491f1ec
--- /dev/null
+++ b/server/src/actions/category.rs
@@ -0,0 +1,73 @@
+extern crate diesel;
+use schema::{category};
+use diesel::*;
+use diesel::result::Error;
+use serde::{Deserialize, Serialize};
+use {Crud};
+
+#[derive(Queryable, Identifiable, PartialEq, Debug, Serialize, Deserialize)]
+#[table_name="category"]
+pub struct Category {
+  pub id: i32,
+  pub name: String
+}
+
+#[derive(Insertable, AsChangeset, Clone, Serialize, Deserialize)]
+#[table_name="category"]
+pub struct CategoryForm {
+  pub name: String,
+}
+
+impl Crud<CategoryForm> for Category {
+  fn read(conn: &PgConnection, category_id: i32) -> Result<Self, Error> {
+    use schema::category::dsl::*;
+    category.find(category_id)
+      .first::<Self>(conn)
+  }
+
+  fn delete(conn: &PgConnection, category_id: i32) -> Result<usize, Error> {
+    use schema::category::dsl::*;
+    diesel::delete(category.find(category_id))
+      .execute(conn)
+  }
+
+  fn create(conn: &PgConnection, new_category: &CategoryForm) -> Result<Self, Error> {
+    use schema::category::dsl::*;
+      insert_into(category)
+        .values(new_category)
+        .get_result::<Self>(conn)
+  }
+
+  fn update(conn: &PgConnection, category_id: i32, new_category: &CategoryForm) -> Result<Self, Error> {
+    use schema::category::dsl::*;
+    diesel::update(category.find(category_id))
+      .set(new_category)
+      .get_result::<Self>(conn)
+  }
+}
+
+impl Category {
+  pub fn list_all(conn: &PgConnection) -> Result<Vec<Self>, Error> {
+    use schema::category::dsl::*;
+    category.load::<Self>(conn)
+  }
+}
+
+#[cfg(test)]
+mod tests {
+  use establish_connection;
+  use super::*;
+  // use Crud;
+ #[test]
+  fn test_crud() {
+    let conn = establish_connection();
+
+    let categories = Category::list_all(&conn).unwrap();
+    let expected_first_category = Category {
+      id: 1,
+      name: "Discussion".into()
+    };
+
+    assert_eq!(expected_first_category, categories[0]);
+  }
+}
diff --git a/server/src/actions/community.rs b/server/src/actions/community.rs
index a3fdbbd4..1c6343d0 100644
--- a/server/src/actions/community.rs
+++ b/server/src/actions/community.rs
@@ -125,13 +125,6 @@ impl Joinable<CommunityModeratorForm> for CommunityModerator {
   }
 }
 
-impl Community {
-  pub fn list_all(conn: &PgConnection) -> Result<Vec<Self>, Error> {
-    use schema::community::dsl::*;
-    community.load::<Self>(conn)
-  }
-}
-
 #[cfg(test)]
 mod tests {
   use establish_connection;
diff --git a/server/src/actions/community_view.rs b/server/src/actions/community_view.rs
new file mode 100644
index 00000000..9da6215d
--- /dev/null
+++ b/server/src/actions/community_view.rs
@@ -0,0 +1,51 @@
+extern crate diesel;
+use diesel::*;
+use diesel::result::Error;
+use serde::{Deserialize, Serialize};
+
+table! {
+  community_view (id) {
+    id -> Int4,
+    name -> Varchar,
+    title -> Varchar,
+    description -> Nullable<Text>,
+    category_id -> Int4,
+    creator_id -> Int4,
+    published -> Timestamp,
+    updated -> Nullable<Timestamp>,
+    creator_name -> Varchar,
+    category_name -> Varchar,
+    number_of_subscribers -> BigInt,
+    number_of_posts -> BigInt,
+  }
+}
+
+#[derive(Queryable, Identifiable, PartialEq, Debug, Serialize, Deserialize,QueryableByName,Clone)]
+#[table_name="community_view"]
+pub struct CommunityView {
+  pub id: i32,
+  pub name: String,
+  pub title: String,
+  pub description: Option<String>,
+  pub category_id: i32,
+  pub creator_id: i32,
+  pub published: chrono::NaiveDateTime,
+  pub updated: Option<chrono::NaiveDateTime>,
+  pub creator_name: String,
+  pub category_name: String,
+  pub number_of_subscribers: i64,
+  pub number_of_posts: i64
+}
+
+impl CommunityView {
+  pub fn read(conn: &PgConnection, from_community_id: i32) -> Result<Self, Error> {
+    use actions::community_view::community_view::dsl::*;
+    community_view.find(from_community_id).first::<Self>(conn)
+  }
+
+  pub fn list_all(conn: &PgConnection) -> Result<Vec<Self>, Error> {
+    use actions::community_view::community_view::dsl::*;
+    community_view.load::<Self>(conn)
+  }
+}
+
diff --git a/server/src/actions/mod.rs b/server/src/actions/mod.rs
index 8b4574d4..c17fd81a 100644
--- a/server/src/actions/mod.rs
+++ b/server/src/actions/mod.rs
@@ -4,3 +4,5 @@ pub mod post;
 pub mod comment;
 pub mod post_view;
 pub mod comment_view;
+pub mod category;
+pub mod community_view;
diff --git a/server/src/actions/post_view.rs b/server/src/actions/post_view.rs
index a1d71de1..f53a9f0c 100644
--- a/server/src/actions/post_view.rs
+++ b/server/src/actions/post_view.rs
@@ -100,7 +100,7 @@ impl PostView {
   }
 
 
-  pub fn get(conn: &PgConnection, from_post_id: i32, from_user_id: Option<i32>) -> Result<Self, Error> {
+  pub fn read(conn: &PgConnection, from_post_id: i32, from_user_id: Option<i32>) -> Result<Self, Error> {
 
     use actions::post_view::post_view::dsl::*;
     use diesel::prelude::*;
@@ -235,8 +235,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_no_user = PostView::list(&conn, ListingType::Community, ListingSortType::New, Some(inserted_community.id), None, 10).unwrap();
-    let read_post_listing_no_user = PostView::get(&conn, inserted_post.id, None).unwrap();
-    let read_post_listing_with_user = PostView::get(&conn, inserted_post.id, Some(inserted_user.id)).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 like_removed = PostLike::remove(&conn, &post_like_form).unwrap();
     let num_deleted = Post::delete(&conn, inserted_post.id).unwrap();
diff --git a/server/src/actions/user.rs b/server/src/actions/user.rs
index 70a02135..d646adcb 100644
--- a/server/src/actions/user.rs
+++ b/server/src/actions/user.rs
@@ -117,7 +117,7 @@ mod tests {
     let conn = establish_connection();
     
     let new_user = UserForm {
-      name: "thom".into(),
+      name: "thommy".into(),
       fedi_name: "rrf".into(),
       preferred_username: None,
       password_encrypted: "nope".into(),
@@ -129,7 +129,7 @@ mod tests {
 
     let expected_user = User_ {
       id: inserted_user.id,
-      name: "thom".into(),
+      name: "thommy".into(),
       fedi_name: "rrf".into(),
       preferred_username: None,
       password_encrypted: "$2y$12$YXpNpYsdfjmed.QlYLvw4OfTCgyKUnKHc/V8Dgcf9YcVKHPaYXYYy".into(),
diff --git a/server/src/bin/main.rs b/server/src/bin/main.rs
index 08663f56..fa0f532b 100644
--- a/server/src/bin/main.rs
+++ b/server/src/bin/main.rs
@@ -3,7 +3,7 @@ extern crate server;
 use std::time::{Instant, Duration};
 use server::actix::*;
 use server::actix_web::server::HttpServer;
-use server::actix_web::{fs, http, ws, App, Error, HttpRequest, HttpResponse};
+use server::actix_web::{ws, App, Error, HttpRequest, HttpResponse};
 
 use server::websocket_server::server::*;
 
diff --git a/server/src/websocket_server/server.rs b/server/src/websocket_server/server.rs
index 4a2a746c..e5e117ef 100644
--- a/server/src/websocket_server/server.rs
+++ b/server/src/websocket_server/server.rs
@@ -17,10 +17,12 @@ use actions::post::*;
 use actions::comment::*;
 use actions::post_view::*;
 use actions::comment_view::*;
+use actions::category::*;
+use actions::community_view::*;
 
 #[derive(EnumString,ToString,Debug)]
 pub enum UserOperation {
-  Login, Register, CreateCommunity, CreatePost, ListCommunities, GetPost, GetCommunity, CreateComment, EditComment, CreateCommentLike, GetPosts, CreatePostLike, EditPost, EditCommunity
+  Login, Register, CreateCommunity, CreatePost, ListCommunities, ListCategories, GetPost, GetCommunity, CreateComment, EditComment, CreateCommentLike, GetPosts, CreatePostLike, EditPost, EditCommunity
 }
 
 #[derive(Serialize, Deserialize)]
@@ -103,7 +105,7 @@ pub struct CreateCommunity {
 #[derive(Serialize, Deserialize)]
 pub struct CreateCommunityResponse {
   op: String,
-  community: Community
+  community: CommunityView
 }
 
 #[derive(Serialize, Deserialize)]
@@ -112,7 +114,16 @@ pub struct ListCommunities;
 #[derive(Serialize, Deserialize)]
 pub struct ListCommunitiesResponse {
   op: String,
-  communities: Vec<Community>
+  communities: Vec<CommunityView>
+}
+
+#[derive(Serialize, Deserialize)]
+pub struct ListCategories;
+
+#[derive(Serialize, Deserialize)]
+pub struct ListCategoriesResponse {
+  op: String,
+  categories: Vec<Category>
 }
 
 #[derive(Serialize, Deserialize)]
@@ -141,7 +152,8 @@ pub struct GetPost {
 pub struct GetPostResponse {
   op: String,
   post: PostView,
-  comments: Vec<CommentView>
+  comments: Vec<CommentView>,
+  community: CommunityView
 }
 
 #[derive(Serialize, Deserialize)]
@@ -167,7 +179,7 @@ pub struct GetCommunity {
 #[derive(Serialize, Deserialize)]
 pub struct GetCommunityResponse {
   op: String,
-  community: Community
+  community: CommunityView
 }
 
 #[derive(Serialize, Deserialize)]
@@ -333,7 +345,7 @@ impl Handler<Disconnect> for ChatServer {
     }
     // send message to other users
     // for room in rooms {
-      // self.send_room_message(room, "Someone disconnected", 0);
+    // self.send_room_message(room, "Someone disconnected", 0);
     // }
   }
 }
@@ -377,6 +389,10 @@ impl Handler<StandardMessage> for ChatServer {
         let list_communities: ListCommunities = ListCommunities;
         list_communities.perform(self, msg.id)
       },
+      UserOperation::ListCategories => {
+        let list_categories: ListCategories = ListCategories;
+        list_categories.perform(self, msg.id)
+      },
       UserOperation::CreatePost => {
         let create_post: CreatePost = serde_json::from_str(&data.to_string()).unwrap();
         create_post.perform(self, msg.id)
@@ -576,10 +592,12 @@ impl Perform for CreateCommunity {
       }
     };
 
+    let community_view = CommunityView::read(&conn, inserted_community.id).unwrap();
+
     serde_json::to_string(
       &CreateCommunityResponse {
         op: self.op_type().to_string(), 
-        community: inserted_community
+        community: community_view
       }
       )
       .unwrap()
@@ -595,7 +613,7 @@ impl Perform for ListCommunities {
 
     let conn = establish_connection();
 
-    let communities: Vec<Community> = Community::list_all(&conn).unwrap();
+    let communities: Vec<CommunityView> = CommunityView::list_all(&conn).unwrap();
 
     // Return the jwt
     serde_json::to_string(
@@ -608,6 +626,28 @@ impl Perform for ListCommunities {
   }
 }
 
+impl Perform for ListCategories {
+  fn op_type(&self) -> UserOperation {
+    UserOperation::ListCategories
+  }
+
+  fn perform(&self, _chat: &mut ChatServer, _addr: usize) -> String {
+
+    let conn = establish_connection();
+
+    let categories: Vec<Category> = Category::list_all(&conn).unwrap();
+
+    // Return the jwt
+    serde_json::to_string(
+      &ListCategoriesResponse {
+        op: self.op_type().to_string(),
+        categories: categories
+      }
+      )
+      .unwrap()
+  }
+}
+
 impl Perform for CreatePost {
   fn op_type(&self) -> UserOperation {
     UserOperation::CreatePost
@@ -656,9 +696,9 @@ impl Perform for CreatePost {
         return self.error("Couldn't like post.");
       }
     };
-  
+
     // Refetch the view
-    let post_view = match PostView::get(&conn, inserted_post.id, Some(user_id)) {
+    let post_view = match PostView::read(&conn, inserted_post.id, Some(user_id)) {
       Ok(post) => post,
       Err(_e) => {
         return self.error("Couldn't find Post");
@@ -700,7 +740,7 @@ impl Perform for GetPost {
       None => None
     };
 
-    let post_view = match PostView::get(&conn, self.id, user_id) {
+    let post_view = match PostView::read(&conn, self.id, user_id) {
       Ok(post) => post,
       Err(_e) => {
         return self.error("Couldn't find Post");
@@ -720,12 +760,15 @@ impl Perform for GetPost {
 
     let comments = CommentView::list(&conn, self.id, user_id).unwrap();
 
+    let community = CommunityView::read(&conn, post_view.community_id).unwrap();
+
     // Return the jwt
     serde_json::to_string(
       &GetPostResponse {
         op: self.op_type().to_string(),
         post: post_view,
-        comments: comments
+        comments: comments,
+        community: community
       }
       )
       .unwrap()
@@ -741,7 +784,7 @@ impl Perform for GetCommunity {
 
     let conn = establish_connection();
 
-    let community = match Community::read(&conn, self.id) {
+    let community_view = match CommunityView::read(&conn, self.id) {
       Ok(community) => community,
       Err(_e) => {
         return self.error("Couldn't find Community");
@@ -752,7 +795,7 @@ impl Perform for GetCommunity {
     serde_json::to_string(
       &GetCommunityResponse {
         op: self.op_type().to_string(),
-        community: community
+        community: community_view
       }
       )
       .unwrap()
@@ -828,7 +871,7 @@ impl Perform for CreateComment {
       }
       )
       .unwrap();
-    
+
     chat.send_room_message(self.post_id, &comment_sent_out, addr);
 
     comment_out
@@ -890,7 +933,7 @@ impl Perform for EditComment {
       }
       )
       .unwrap();
-    
+
     chat.send_room_message(self.post_id, &comment_sent_out, addr);
 
     comment_out
@@ -958,9 +1001,9 @@ impl Perform for CreateCommentLike {
       )
       .unwrap();
 
-      chat.send_room_message(self.post_id, &like_sent_out, addr);
+    chat.send_room_message(self.post_id, &like_sent_out, addr);
 
-      like_out
+    like_out
   }
 }
 
@@ -1049,7 +1092,7 @@ impl Perform for CreatePostLike {
       };
     }
 
-    let post_view = match PostView::get(&conn, self.post_id, Some(user_id)) {
+    let post_view = match PostView::read(&conn, self.post_id, Some(user_id)) {
       Ok(post) => post,
       Err(_e) => {
         return self.error("Couldn't find Post");
@@ -1066,7 +1109,7 @@ impl Perform for CreatePostLike {
       )
       .unwrap();
 
-      like_out
+    like_out
   }
 }
 
@@ -1104,7 +1147,7 @@ impl Perform for EditPost {
       }
     };
 
-    let post_view = PostView::get(&conn, self.edit_id, Some(user_id)).unwrap();
+    let post_view = PostView::read(&conn, self.edit_id, Some(user_id)).unwrap();
 
     let mut post_sent = post_view.clone();
     post_sent.my_vote = None;
@@ -1124,7 +1167,7 @@ impl Perform for EditPost {
       }
       )
       .unwrap();
-    
+
     chat.send_room_message(self.edit_id, &post_sent_out, addr);
 
     post_out
@@ -1255,7 +1298,7 @@ impl Perform for EditPost {
 //           )
 //         )
 //     };
-    
+
 //     MessageResult(
 //       Ok(
 //         CreateCommunityResponse {
diff --git a/ui/src/components/community.tsx b/ui/src/components/community.tsx
index 5bef29bb..820db90d 100644
--- a/ui/src/components/community.tsx
+++ b/ui/src/components/community.tsx
@@ -6,7 +6,8 @@ import { UserOperation, Community as CommunityI, CommunityResponse, Post, GetPos
 import { WebSocketService, UserService } from '../services';
 import { MomentTime } from './moment-time';
 import { PostListing } from './post-listing';
-import { msgOp } from '../utils';
+import { Sidebar } from './sidebar';
+import { msgOp, mdToHtml } from '../utils';
 
 interface State {
   community: CommunityI;
@@ -21,6 +22,13 @@ export class Community extends Component<any, State> {
     community: {
       id: null,
       name: null,
+      title: null,
+      category_id: null,
+      category_name: null,
+      creator_id: null,
+      creator_name: null,
+      number_of_subscribers: null,
+      number_of_posts: null,
       published: null
     },
     posts: [],
@@ -70,10 +78,8 @@ export class Community extends Component<any, State> {
             }
           </div>
           <div class="col-12 col-sm-2 col-lg-3">
-            Sidebar
+            <Sidebar community={this.state.community} />
           </div>
-      
-          
         </div>
       </div>
     )
diff --git a/ui/src/components/create-community.tsx b/ui/src/components/create-community.tsx
index 7e56fcda..c5149f0a 100644
--- a/ui/src/components/create-community.tsx
+++ b/ui/src/components/create-community.tsx
@@ -1,7 +1,7 @@
 import { Component, linkEvent } from 'inferno';
 import { Subscription } from "rxjs";
 import { retryWhen, delay, take } from 'rxjs/operators';
-import { CommunityForm, UserOperation } from '../interfaces';
+import { CommunityForm, UserOperation, Category, ListCategoriesResponse } from '../interfaces';
 import { WebSocketService, UserService } from '../services';
 import { msgOp } from '../utils';
 
@@ -9,6 +9,7 @@ import { Community } from '../interfaces';
 
 interface State {
   communityForm: CommunityForm;
+  categories: Array<Category>;
 }
 
 export class CreateCommunity extends Component<any, State> {
@@ -17,14 +18,17 @@ export class CreateCommunity extends Component<any, State> {
   private emptyState: State = {
     communityForm: {
       name: null,
-    }
+      title: null,
+      category_id: null
+    },
+    categories: []
   }
 
   constructor(props, context) {
     super(props, context);
 
     this.state = this.emptyState;
-    
+
     this.subscription = WebSocketService.Instance.subject
       .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
       .subscribe(
@@ -32,6 +36,8 @@ export class CreateCommunity extends Component<any, State> {
         (err) => console.error(err),
         () => console.log("complete")
       );
+
+    WebSocketService.Instance.listCategories();
   }
 
   componentWillUnmount() {
@@ -61,6 +67,28 @@ export class CreateCommunity extends Component<any, State> {
               <input type="text" class="form-control" value={this.state.communityForm.name} onInput={linkEvent(this, this.handleCommunityNameChange)} required minLength={3} />
             </div>
           </div>
+          <div class="form-group row">
+            <label class="col-sm-2 col-form-label">Title / Headline</label>
+            <div class="col-sm-10">
+              <input type="text" value={this.state.communityForm.title} onInput={linkEvent(this, this.handleCommunityTitleChange)} class="form-control" required minLength={3} />
+            </div>
+          </div>
+          <div class="form-group row">
+            <label class="col-sm-2 col-form-label">Description / Sidebar</label>
+            <div class="col-sm-10">
+              <textarea value={this.state.communityForm.description} onInput={linkEvent(this, this.handleCommunityDescriptionChange)} class="form-control" rows={6} />
+            </div>
+          </div>
+          <div class="form-group row">
+            <label class="col-sm-2 col-form-label">Category</label>
+            <div class="col-sm-10">
+              <select class="form-control" value={this.state.communityForm.category_id} onInput={linkEvent(this, this.handleCommunityCategoryChange)}>
+                {this.state.categories.map(category =>
+                  <option value={category.id}>{category.name}</option>
+                )}
+              </select>
+            </div>
+          </div>
           <div class="form-group row">
             <div class="col-sm-10">
               <button type="submit" class="btn btn-secondary">Create</button>
@@ -70,7 +98,7 @@ export class CreateCommunity extends Component<any, State> {
       </div>
     );
   }
-  
+
   handleCreateCommunitySubmit(i: CreateCommunity, event) {
     event.preventDefault();
     WebSocketService.Instance.createCommunity(i.state.communityForm);
@@ -78,6 +106,22 @@ export class CreateCommunity extends Component<any, State> {
 
   handleCommunityNameChange(i: CreateCommunity, event) {
     i.state.communityForm.name = event.target.value;
+    i.setState(i.state);
+  }
+
+  handleCommunityTitleChange(i: CreateCommunity, event) {
+    i.state.communityForm.title = event.target.value;
+    i.setState(i.state);
+  }
+
+  handleCommunityDescriptionChange(i: CreateCommunity, event) {
+    i.state.communityForm.description = event.target.value;
+    i.setState(i.state);
+  }
+
+  handleCommunityCategoryChange(i: CreateCommunity, event) {
+    i.state.communityForm.category_id = Number(event.target.value);
+    i.setState(i.state);
   }
 
   parseMessage(msg: any) {
@@ -86,11 +130,14 @@ export class CreateCommunity extends Component<any, State> {
     if (msg.error) {
       alert(msg.error);
       return;
-    } else {
-      if (op == UserOperation.CreateCommunity) {
-        let community: Community = msg.community;
-        this.props.history.push(`/community/${community.id}`);
-      }
+    } else if (op == UserOperation.ListCategories){
+      let res: ListCategoriesResponse = msg;
+      this.state.categories = res.categories;
+      this.state.communityForm.category_id = res.categories[0].id;
+      this.setState(this.state);
+    } else if (op == UserOperation.CreateCommunity) {
+      let community: Community = msg.community;
+      this.props.history.push(`/community/${community.id}`);
     }
   }
 
diff --git a/ui/src/components/post.tsx b/ui/src/components/post.tsx
index 68ba9634..457b286e 100644
--- a/ui/src/components/post.tsx
+++ b/ui/src/components/post.tsx
@@ -2,11 +2,12 @@ import { Component, linkEvent } from 'inferno';
 import { Link } from 'inferno-router';
 import { Subscription } from "rxjs";
 import { retryWhen, delay, take } from 'rxjs/operators';
-import { UserOperation, Community, Post as PostI, GetPostResponse, PostResponse, Comment, CommentForm as CommentFormI, CommentResponse, CommentLikeForm, CreateCommentLikeResponse, CommentSortType, CreatePostLikeResponse } from '../interfaces';
+import { UserOperation, Community, Post as PostI, GetPostResponse, PostResponse, Comment, CommentForm as CommentFormI, CommentResponse, CommentLikeForm, CommentSortType, CreatePostLikeResponse } from '../interfaces';
 import { WebSocketService, UserService } from '../services';
 import { msgOp, hotRank,mdToHtml } from '../utils';
 import { MomentTime } from './moment-time';
 import { PostListing } from './post-listing';
+import { Sidebar } from './sidebar';
 import * as autosize from 'autosize';
 
 interface CommentNodeI {
@@ -14,19 +15,21 @@ interface CommentNodeI {
   children?: Array<CommentNodeI>;
 };
 
-interface State {
+interface PostState {
   post: PostI;
   comments: Array<Comment>;
   commentSort: CommentSortType;
+  community: Community;
 }
 
-export class Post extends Component<any, State> {
+export class Post extends Component<any, PostState> {
 
   private subscription: Subscription;
-  private emptyState: State = {
+  private emptyState: PostState = {
     post: null,
     comments: [],
-    commentSort: CommentSortType.Hot
+    commentSort: CommentSortType.Hot,
+    community: null,
   }
 
   constructor(props, context) {
@@ -115,8 +118,7 @@ export class Post extends Component<any, State> {
   sidebar() {
     return ( 
       <div class="sticky-top">
-        <h5>Sidebar</h5>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <Sidebar community={this.state.community} />
       </div>
     );
   }
@@ -185,6 +187,7 @@ export class Post extends Component<any, State> {
       let res: GetPostResponse = msg;
       this.state.post = res.post;
       this.state.comments = res.comments;
+      this.state.community = res.community;
       this.setState(this.state);
     } else if (op == UserOperation.CreateComment) {
       let res: CommentResponse = msg;
@@ -198,7 +201,7 @@ export class Post extends Component<any, State> {
       this.setState(this.state);
     }
     else if (op == UserOperation.CreateCommentLike) {
-      let res: CreateCommentLikeResponse = msg;
+      let res: CommentResponse = msg;
       let found: Comment = this.state.comments.find(c => c.id === res.comment.id);
       found.score = res.comment.score;
       found.upvotes = res.comment.upvotes;
diff --git a/ui/src/components/sidebar.tsx b/ui/src/components/sidebar.tsx
new file mode 100644
index 00000000..8a88b870
--- /dev/null
+++ b/ui/src/components/sidebar.tsx
@@ -0,0 +1,33 @@
+import { Component, linkEvent } from 'inferno';
+import { Community } from '../interfaces';
+import { mdToHtml } from '../utils';
+
+interface SidebarProps {
+  community: Community;
+}
+
+interface SidebarState {
+}
+
+export class Sidebar extends Component<SidebarProps, SidebarState> {
+
+  constructor(props, context) {
+    super(props, context);
+  }
+
+
+  render() {
+    let community = this.props.community;
+    return (
+      <div>
+        <h4>{community.title}</h4>
+        <div><button type="button" class="btn btn-secondary mb-2">Subscribe</button></div>
+        <div className="badge badge-light">{community.category_name}</div>
+        <div>{community.number_of_subscribers} Subscribers</div>
+        <div>{community.number_of_posts} Posts</div>
+        <hr />
+        {community.description && <div className="md-div" dangerouslySetInnerHTML={mdToHtml(community.description)} />}
+      </div>
+    );
+  }
+}
diff --git a/ui/src/interfaces.ts b/ui/src/interfaces.ts
index e21edf77..5d5ea12a 100644
--- a/ui/src/interfaces.ts
+++ b/ui/src/interfaces.ts
@@ -1,5 +1,5 @@
 export enum UserOperation {
-  Login, Register, CreateCommunity, CreatePost, ListCommunities, GetPost, GetCommunity, CreateComment, EditComment, CreateCommentLike, GetPosts, CreatePostLike, EditPost, EditCommunity
+  Login, Register, CreateCommunity, CreatePost, ListCommunities, ListCategories, GetPost, GetCommunity, CreateComment, EditComment, CreateCommentLike, GetPosts, CreatePostLike, EditPost, EditCommunity
 }
 
 export interface User {
@@ -11,12 +11,23 @@ export interface User {
 export interface Community {
   id: number;
   name: string;
+  title: string;
+  description?: string;
+  creator_id: number;
+  creator_name: string;
+  category_id: number;
+  category_name: string;
+  number_of_subscribers: number;
+  number_of_posts: number;
   published: string;
   updated?: string;
 }
 
 export interface CommunityForm {
   name: string;
+  title: string;
+  description?: string,
+  category_id: number,
   auth?: string;
 }
 
@@ -30,6 +41,11 @@ export interface ListCommunitiesResponse {
   communities: Array<Community>;
 }
 
+export interface ListCategoriesResponse {
+  op: string;
+  categories: Array<Category>;
+}
+
 export interface Post {
   user_id?: number;
   my_vote?: number;
@@ -64,6 +80,7 @@ export interface GetPostResponse {
   op: string;
   post: Post;
   comments: Array<Comment>;
+  community: Community;
 }
 
 export interface PostResponse {
@@ -130,6 +147,11 @@ export interface CreatePostLikeResponse {
   post: Post;
 }
 
+export interface Category {
+  id: number;
+  name: string;
+}
+
 export interface LoginForm {
   username_or_email: string;
   password: string;
diff --git a/ui/src/services/WebSocketService.ts b/ui/src/services/WebSocketService.ts
index c1fdb73b..c99cfcfa 100644
--- a/ui/src/services/WebSocketService.ts
+++ b/ui/src/services/WebSocketService.ts
@@ -41,6 +41,10 @@ export class WebSocketService {
     this.subject.next(this.wsSendWrapper(UserOperation.ListCommunities, undefined));
   }
 
+  public listCategories() {
+    this.subject.next(this.wsSendWrapper(UserOperation.ListCategories, undefined));
+  }
+
   public createPost(postForm: PostForm) {
     this.setAuth(postForm);
     this.subject.next(this.wsSendWrapper(UserOperation.CreatePost, postForm));