Merge pull request #94 from tahnik/rant_composer

Rant composer
tahnik · Jul 25, 2017 · 8b5af5a · 8b5af5a
2 parents 7e0c78d + dcff96c
commit 8b5af5a
Show file tree

Hide file tree

Showing 9 changed files with 4,683 additions and 649 deletions.
diff --git a/app/src/main/js/components/user/user_card.js b/app/src/main/js/components/user/user_card.js
@@ -98,7 +98,7 @@ class UserCard extends Component {
       return <div />;
     }
     return (
-      <div className="user_card" id="user_card">
+      <div className="user_card" id="user_card" style={{ background: 'url(./res/images/profile_banner.png)' }}>
         <div
           className="close"
           onClick={() => this.props.closeCard()}

diff --git a/app/src/main/js/components/utilities/post_rant.js b/app/src/main/js/components/utilities/post_rant.js
@@ -5,45 +5,112 @@ import Twemoji from 'twemoji';
 import rantscript from '../../consts/rantscript';
 import EmojiPicker from '../emoji_picker/emoji_picker';
 
+const electron = require('electron');
+
 const HELPER_TYPES = {
   EMOJI: 'EMOJI',
 };
 
+function replaceAll(str, search, replacement) {
+  const target = str;
+  return target.replace(new RegExp(search, 'g'), replacement);
+}
+
 class PostRant extends Component {
   constructor() {
     super();
     this.state = {
       rant_content: '',
       tags: '',
       posting: false,
-      limitCrossed: false,
+      limitCrossed: null,
       activeHelper: null,
+      image: null,
     };
   }
 
+  static parseHtml(string) {
+    let str = string;
+    const parser = new DOMParser();
+    str = replaceAll(str, '<br>', '\n\r');
+    const imgtags = str.match(/<(img+)\s+\w+.*?>/g);
+    let parsedStr = '';
+    if (imgtags === null) {
+      return parser.parseFromString(`<!doctype html><body> ${str}`, 'text/html').body.textContent;
+    }
+    for (let i = 0; i < imgtags.length; i += 1) {
+      parsedStr = str.replace(imgtags[i], imgtags[i].match(/alt="(.*?)"/)[1]);
+    }
+    return parser.parseFromString(`<!doctype html><body> ${parsedStr}`, 'text/html').body.textContent;
+  }
+
   onPost() {
     const { auth } = this.props;
     this.setState({ posting: true });
-    const rantText = document.getElementById('post_rant_content').innerHTML;
-    rantscript
-    .postRant(rantText, this.state.tags, auth.user.authToken)
-    .then((res) => {
-      if (!res.success) {
-        this.setState({ limitCrossed: true });
-      }
-      this.setState({ posting: false, rant_content: '', tags: '' });
-    })
-    .catch(() => {
-      this.setState({ posting: false });
-    });
+    const rantText = PostRant.parseHtml(document.getElementById('post_rant_content').innerHTML);
+    if (this.state.image !== null) {
+      rantscript
+        .postRant(rantText, this.state.tags, auth.user.authToken, this.state.image)
+        .then((res) => {
+          if (!res.success) {
+            this.setState({ limitCrossed: res.error });
+            return;
+          }
+          this.setState({
+            posting: false,
+            rant_content: '',
+            tags: '',
+            limitCrossed: null,
+          });
+          this.props.close();
+        })
+        .catch(() => {
+          this.setState({ posting: false });
+        });
+    } else {
+      rantscript
+      .postRant(rantText, this.state.tags, auth.user.authToken)
+      .then((res) => {
+        if (!res.success) {
+          this.setState({ limitCrossed: res.error });
+          return;
+        }
+        this.setState({
+          posting: false,
+          rant_content: '',
+          tags: '',
+          limitCrossed: null,
+        });
+        this.props.close();
+      })
+      .catch(() => {
+        this.setState({ posting: false });
+      });
+    }
+  }
+
+  selectImage() {
+    if (this.state.image !== null) {
+      this.setState({ image: null });
+    } else {
+      const { dialog } = electron.remote;
+      dialog.showOpenDialog({
+        title: 'Upload image',
+        filters: [{ name: 'Images', extensions: ['jpg', 'png', 'gif'] }],
+      }, (image) => {
+        this.setState({ image: image[0] });
+      });
+    }
   }
+
   toggleEmoji() {
     if (this.state.activeHelper === HELPER_TYPES.EMOJI) {
       this.setState({ activeHelper: null });
       return;
     }
     this.setState({ activeHelper: HELPER_TYPES.EMOJI });
   }
+
   static addEmoji(emoji) {
     const div = document.getElementById('post_rant_content');
 
@@ -93,15 +160,18 @@ class PostRant extends Component {
               className="tags"
             />
             <div className="post">
+              <button
+                onClick={() => this.selectImage()}
+              >
+                {this.state.image === null && 'Add Image'}
+                {this.state.image !== null && 'Remove Image'}
+              </button>
               <button
                 onClick={() => this.onPost()}
                 disabled={this.state.posting}
               >Post Rant</button>
             </div>
-            { this.state.limitCrossed ? <p>Right now you can only add 1 rant every 2 hours
-               (every 1 hour for devRant++ members) because we want
-                to make sure everyones content gets good exposure! Please contact
-                 [email protected] if you have any questions :)</p> : null}
+            <p>{this.state.limitCrossed || ''}</p>
           </div>
         </div>
       </div>
@@ -112,6 +182,7 @@ class PostRant extends Component {
 
 PostRant.propTypes = {
   auth: PropTypes.object.isRequired,
+  close: PropTypes.func.isRequired,
 };
 
 export default PostRant;
diff --git a/app/src/main/res/css/modules/comments.sass b/app/src/main/res/css/modules/comments.sass
@@ -28,6 +28,10 @@
   transition: all 0.2s ease
   margin-right: 0.5rem
   .top_container
+    p
+      font-family: 'Roboto', sans-serif
+      font-weight: 400
+      font-size: 1rem
   .details
     p
       padding: 0px

diff --git a/app/src/main/res/css/modules/item.sass b/app/src/main/res/css/modules/item.sass
@@ -7,6 +7,7 @@
     height: 100vh
     width: 450px
     overflow-y: scroll
+    overflow-x: hidden
     margin-bottom: calc(#{$post_comment_height} + 1rem)
   .item_column
     display: flex

diff --git a/app/src/main/res/css/modules/item_card.sass b/app/src/main/res/css/modules/item_card.sass
@@ -5,6 +5,9 @@
   margin-right: 0.5rem
   .body_container
     .top_container
+      font-family: 'Roboto', sans-serif
+      font-weight: 400
+      font-size: 1rem
       padding: 1rem
       span
         padding: 0.2rem 0

diff --git a/app/src/main/res/css/modules/user_badge.sass b/app/src/main/res/css/modules/user_badge.sass
@@ -34,7 +34,8 @@
     padding-top: 2px
     cursor: pointer
     p
-      margin: 1px 0 4px 0
+      margin: 0 0 8px 0
+      font-weight: 400
     .score
       padding: 4px
       border-radius: 5px

diff --git a/app/src/main/res/css/modules/user_card.sass b/app/src/main/res/css/modules/user_card.sass
@@ -1,9 +1,8 @@
 .user_card
   position: absolute
   width: 25rem
-  background: url(http://localhost:8080/res/images/profile_banner.png)
-  background-size: cover
-  background-repeat: no-repeat
+  background-size: cover !important
+  background-repeat: no-repeat !important
   padding: 1rem 1rem 0rem 1rem
   transform: translate(-1rem, -1rem)
   z-index: 99