Merge pull request #358 from CPSSD/c/react-template

Add ability for user to stick custom CSS into their posts

chump/src/components/account_edit.tsx

@@ -9,6 +9,8 @@ interface IAccountEditState {
   currentPassword: string;
   displayName: string;
   newPassword: string;
+  postBodyCss: string;
+  postTitleCss: string;
   privateAccount: boolean;
   redirect: boolean;
 }
@@ -26,6 +28,8 @@ export class AccountEdit extends React.Component<IAccountEditProps, IAccountEdit
       currentPassword: "",
       displayName: "",
       newPassword: "",
+      postBodyCss: "",
+      postTitleCss: "",
       privateAccount: false,
       redirect: false,
     };
@@ -34,6 +38,8 @@ export class AccountEdit extends React.Component<IAccountEditProps, IAccountEdit
     this.handleNewPassword = this.handleNewPassword.bind(this);
     this.handleBio = this.handleBio.bind(this);
     this.handleDisplayName = this.handleDisplayName.bind(this);
+    this.handlePostTitleCss = this.handlePostTitleCss.bind(this);
+    this.handlePostBodyCss = this.handlePostBodyCss.bind(this);
     this.handlePrivate = this.handlePrivate.bind(this);
     this.handleUpdate = this.handleUpdate.bind(this);
     this.handleCancel = this.handleCancel.bind(this);
@@ -67,6 +73,8 @@ export class AccountEdit extends React.Component<IAccountEditProps, IAccountEdit
       this.state.currentPassword,
       this.state.newPassword,
       this.state.privateAccount,
+      this.state.postTitleCss,
+      this.state.postBodyCss,
     ).then((response: IEditUserResult) => {
       if (!response.success) {
         alert("Error editing: " + response.error);
@@ -131,6 +139,26 @@ export class AccountEdit extends React.Component<IAccountEditProps, IAccountEdit
                   onChange={this.handleBio}
                 />
             </div>
+            <div className="pure-control-group">
+                <label htmlFor="name">{"Post Title CSS"}</label>
+                <textarea
+                  id="post_title_css"
+                  placeholder='{"color": "red"}'
+                  className="pure-input-2-3 bio-form"
+                  value={this.state.postTitleCss}
+                  onChange={this.handlePostTitleCss}
+                />
+            </div>
+            <div className="pure-control-group">
+                <label htmlFor="name">{"Post Body CSS"}</label>
+                <textarea
+                  id="post_body_css"
+                  placeholder='{"color": "red"}'
+                  className="pure-input-2-3 bio-form"
+                  value={this.state.postBodyCss}
+                  onChange={this.handlePostBodyCss}
+                />
+            </div>
 
             <div className="pure-control-group">
               <label htmlFor="private">{config.private_account}</label>
@@ -221,6 +249,20 @@ export class AccountEdit extends React.Component<IAccountEditProps, IAccountEdit
     });
   }
 
+  private handlePostTitleCss(event: React.ChangeEvent<HTMLTextAreaElement>) {
+    const target = event.target;
+    this.setState({
+      postTitleCss: target.value,
+    });
+  }
+
+  private handlePostBodyCss(event: React.ChangeEvent<HTMLTextAreaElement>) {
+    const target = event.target;
+    this.setState({
+      postBodyCss: target.value,
+    });
+  }
+
   private handleUpdateError(e: any) {
     alert("Error attempting to update: " + e.toString());
   }

chump/src/components/create_article_form.tsx

@@ -82,7 +82,7 @@ export class CreateArticleForm extends React.Component<IFormProps, IFormState> {
           </div>
           <div className="pure-g" key={1}>
             <HashRouter>
-            <Post username={this.props.username} blogPost={this.state.post} preview={true}/>
+            <Post username={this.props.username} blogPost={this.state.post} preview={true} customCss={true}/>
             </HashRouter>
           </div>
         </RModal>

chump/src/components/feed.tsx

@@ -41,7 +41,7 @@ export class Feed extends React.Component<IFeedProps, IFeedState> {
     return this.state.publicBlog.map((e: IParsedPost, i: number) => {
       return (
         <div className="pure-g" key={i}>
-          <Post username={this.props.username} blogPost={e} preview={false}/>
+          <Post username={this.props.username} blogPost={e} preview={false} customCss={false}/>
         </div>
       );
     });

chump/src/components/post.tsx

@@ -10,6 +10,7 @@ interface IPostProps {
   blogPost: IParsedPost;
   username: string;
   preview: boolean;
+  customCss: boolean;
 }
 
 interface IPostState {
@@ -47,6 +48,9 @@ export class Post extends React.Component<IPostProps, IPostState> {
         this.props.preview === true) {
       LikeButton = false;
     }
+    // Set custom CSS for user if enabled.
+    const bodyStyle = this.props.customCss ? this.props.blogPost.body_css : undefined;
+    const titleStyle = this.props.customCss ? this.props.blogPost.title_css : undefined;
     return (
       <div className="blog-post-holder">
         <div className="pure-u-5-24"/>
@@ -55,10 +59,15 @@ export class Post extends React.Component<IPostProps, IPostState> {
           <Link
             to={`/@${this.props.blogPost.author}/${this.props.blogPost.global_id}`}
             className="article-title"
+            style={titleStyle}
           >
             {this.props.blogPost.title}
           </Link>
-          <p className="article-body" dangerouslySetInnerHTML={{ __html: this.props.blogPost.body }}/>
+          <p
+            className="article-body"
+            style={bodyStyle}
+            dangerouslySetInnerHTML={{ __html: this.props.blogPost.body }}
+          />
         </div>
         <div className="pure-u-1-24"/>
         <div className="pure-u-3-24">

chump/src/components/search_results.tsx

@@ -105,7 +105,7 @@ export class SearchResults extends React.Component<ISearchResultsProps, ISearchR
     return this.state.foundPosts.map((e: IParsedPost, i: number) => {
       return (
         <div className="pure-g pure-u-1" key={i}>
-          <Post username={this.props.username} blogPost={e} preview={false}/>
+          <Post username={this.props.username} blogPost={e} preview={false} customCss={false}/>
         </div>
       );
     });

chump/src/components/single_post.tsx

@@ -57,7 +57,7 @@ export class SinglePost extends React.Component<ISinglePostProps, ISinglePostSta
 
     return (
       <div className="pure-g" key={1}>
-        <Post username={this.props.username} blogPost={this.state.posts[0]} preview={false}/>
+        <Post username={this.props.username} blogPost={this.state.posts[0]} preview={false} customCss={true}/>
       </div>
     );
   }

chump/src/components/user_feed.tsx

@@ -94,7 +94,7 @@ export class User extends React.Component<IUserProps, IUserState> {
     return this.state.publicBlog.map((e: IParsedPost, i: number) => {
       return (
         <div className="pure-g" key={i}>
-          <Post username={this.props.username} blogPost={e} preview={false}/>
+          <Post username={this.props.username} blogPost={e} preview={false} customCss={true}/>
         </div>
       );
     });

chump/src/models/edit_user.ts

@@ -45,13 +45,16 @@ export function EditUserPromise(
   bio: string, displayName: string,
   currentPassword: string,  newPassword: string,
   privateAccount: boolean,
+  postTitleCss: string, postBodyCss: string,
 ) {
   const url = "/c2s/update/user";
   const postBody = {
     bio,
     current_password: currentPassword,
     display_name: displayName,
     new_password: newPassword,
+    post_body_css: postBodyCss,
+    post_title_css: postTitleCss,
     private: {
       value: privateAccount,
     },

chump/src/models/posts.ts

@@ -14,39 +14,66 @@ interface IBlogPost {
   is_followed: boolean;
 }
 
+export interface IFeedResponse {
+  post_body_css: string;
+  post_title_css: string;
+  results: IBlogPost[];
+}
+
 export interface IParsedPost extends IBlogPost {
   // parsed_date is a javascript Date object built from published key in
   // IBlogPost
   parsed_date: Date;
+  body_css?: React.CSSProperties;
+  title_css?: React.CSSProperties;
 }
 
 const feedApiURL = "/c2s/feed";
 const perUserApiURL = "/c2s/@";
 
-export function ParsePosts(b: IBlogPost[]) {
-  b = b as IParsedPost[];
+function ParseCSSJson(j?: string) {
+  if (j === undefined || j === "") {
+    return undefined;
+  }
+  let p = {};
+  try {
+    p = JSON.parse(j);
+  } catch (err) {
+    // Invalid JSON.
+    return undefined;
+  }
+  // TODO(CianLR): Check if p is actually an instace of React.CSSProperties.
+  return p as React.CSSProperties;
+}
+
+export function ParsePosts(b: IBlogPost[], bodyCssJson?: string, titleCssJson?: string) {
+  const bodyCss = ParseCSSJson(bodyCssJson);
+  const titleCss = ParseCSSJson(titleCssJson);
   // convert published string to js datetime obj
+  b = b as IParsedPost[];
   b.map((e: IParsedPost) => {
     e.parsed_date = new Date(e.published);
+    e.body_css = bodyCss;
+    e.title_css = titleCss;
     if (e.bio === undefined || e.bio === "") {
       e.bio = "Nowadays everybody wanna talk like they got something to say. \
       But nothing comes out when they move their lips; just a bunch of gibberish.";
     }
     return e;
   });
-  return b;
+  return b as IParsedPost[];
 }
 
-export function SortPosts(b: IBlogPost[]) {
-  b = ParsePosts(b);
-  b.sort((n: IParsedPost, m: IParsedPost) => {
+export function SortPosts(b: IFeedResponse) {
+  const p: IParsedPost[] = ParsePosts(b.results, b.post_body_css, b.post_title_css);
+  p.sort((n: IParsedPost, m: IParsedPost) => {
     return m.parsed_date.getTime() - n.parsed_date.getTime();
   });
-  return b;
+  return p;
 }
 
 export function PostsAPIPromise(url: string) {
-  return new Promise<IBlogPost[]>((resolve, reject) => {
+  return new Promise<IParsedPost[]>((resolve, reject) => {
     superagent
       .get(url)
       .set("Accept", "application/json")
@@ -58,7 +85,7 @@ export function PostsAPIPromise(url: string) {
         // Feed will respond with an empty response if no blogs are avaiable.
         let posts = res!.body;
         if (posts === null) {
-          posts = [];
+          posts = {results: []};
         }
         const parsedPosts = SortPosts(posts);
         resolve(parsedPosts);

chump/test/models/posts.spec.ts

@@ -4,12 +4,12 @@ import { expect } from "chai";
 import * as sinon from "sinon";
 import * as superagent from "superagent";
 
-import { GetPublicPosts, GetSinglePost, IParsedPost } from "../../src/models/posts";
+import { GetPublicPosts, GetSinglePost, IFeedResponse, IParsedPost } from "../../src/models/posts";
 
 const sandbox: sinon.SinonSandbox = sinon.createSandbox();
 const now: Date = new Date();
 
-function createFakeResponse(body: IParsedPost[] | Error | null) {
+function createFakeResponse(body: IFeedResponse | Error | null) {
   const end = (cb: any) => {
       cb(null, {ok: true, body });
   };
@@ -18,10 +18,28 @@ function createFakeResponse(body: IParsedPost[] | Error | null) {
   return sandbox.stub(superagent, "get").returns(root);
 }
 
-const validBody: IParsedPost[] = [{
+const validBody: IFeedResponse = {
+ post_body_css: "",
+ post_title_css: "",
+ results: [{
+   author: "aaron",
+   bio: "bio",
+   body: "rm -rf steely/",
+   global_id: 2,
+   image: "",
+   is_followed: false,
+   is_liked: false,
+   likes_count: 1,
+   published: "",
+   title: "how to write a plugin",
+ }],
+};
+
+const evalidBody: IParsedPost[] = [{
   author: "aaron",
   bio: "bio",
   body: "rm -rf steely/",
+  body_css: undefined,
   global_id: 2,
   image: "",
   is_followed: false,
@@ -30,6 +48,7 @@ const validBody: IParsedPost[] = [{
   parsed_date: now,
   published: "",
   title: "how to write a plugin",
+  title_css: undefined,
 }];
 
 describe("GetPublicPosts", () => {
@@ -43,7 +62,7 @@ describe("GetPublicPosts", () => {
     GetPublicPosts().then((posts: IParsedPost[]) => {
       expect(getRequest).to.have.property("callCount", 1);
       expect(getRequest.calledWith("/c2s/feed")).to.be.ok;
-      expect(posts).to.eql(validBody);
+      expect(posts).to.eql(validBody.results);
       done();
     });
   });
@@ -53,7 +72,7 @@ describe("GetPublicPosts", () => {
     GetPublicPosts("username").then((posts: IParsedPost[]) => {
       expect(getRequest).to.have.property("callCount", 1);
       expect(getRequest.calledWith("/c2s/feed/username")).to.be.ok;
-      expect(posts).to.eql(validBody);
+      expect(posts).to.eql(validBody.results);
       done();
     });
   });
@@ -85,7 +104,7 @@ describe("GetPublicPosts", () => {
     GetSinglePost("username", "id").then((posts: IParsedPost[]) => {
       expect(getRequest).to.have.property("callCount", 1);
       expect(getRequest.calledWith("/c2s/@username/id")).to.be.ok;
-      expect(posts).to.eql(validBody);
+      expect(posts).to.eql(validBody.results);
       done();
     });
   });

services/database/rabble_schema.sql

@@ -21,6 +21,8 @@ CREATE TABLE IF NOT EXISTS users (
   /* account_type refers to the account_type enum in the database.proto file.
    * In normal cases, this will be 0, a normal user. */
   private           boolean NOT NULL,
+  post_title_css    text    NOT NULL DEFAULt '',
+  post_body_css     text    NOT NULL DEFAULT '',
   UNIQUE (handle, host)
 );
 

services/database/users_servicer.py

@@ -18,7 +18,8 @@ def __init__(self, db, logger):
         self._select_base = (
             "SELECT u.global_id, u.handle, u.host, u.display_name, "
             "u.password, u.bio, u.rss, u.private, "
-            "f.follower IS NOT NULL FROM users u "
+            "f.follower IS NOT NULL, "
+            "u.post_title_css, u.post_body_css FROM users u "
             "LEFT OUTER JOIN follows f ON "
             "f.followed=u.global_id AND f.follower=? "
         )
@@ -38,7 +39,7 @@ def _private_to_filter(self, entry):
         return entry.private.value
 
     def _db_tuple_to_entry(self, tup, entry):
-        if len(tup) != 9:
+        if len(tup) != 11:
             self._logger.warning(
                 "Error converting tuple to UsersEntry: " +
                 "Wrong number of elements " + str(tup))
@@ -54,6 +55,8 @@ def _db_tuple_to_entry(self, tup, entry):
             entry.rss = tup[6]
             entry.private.value = tup[7]
             entry.is_followed = tup[8]
+            entry.post_title_css = tup[9]
+            entry.post_body_css = tup[10]
         except Exception as e:
             self._logger.warning(
                 "Error converting tuple to UsersEntry: " +