Merge pull request #91 from tahnik/profile

Profile
tahnik · Jul 23, 2017 · dea2023 · dea2023
2 parents d265d3e + 4430e7c
commit dea2023
Show file tree

Hide file tree

Showing 35 changed files with 687 additions and 16,886 deletions.
diff --git a/app/src/main/app.js b/app/src/main/app.js
@@ -111,8 +111,8 @@ function createWindow() {
   mainWindow = new BrowserWindow({
     width: 1024,
     height: 768,
-    minHeight: 600,
-    minWidth: 900,
+    minHeight: 768,
+    minWidth: 1024,
     show: false,
   });
 

diff --git a/app/src/main/index.ejs b/app/src/main/index.ejs
@@ -11,7 +11,7 @@
 	<!-- Bootstrap CSS -->
 	<link rel="stylesheet" href="res/fonts/icon.css" >
   <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500" rel="stylesheet">
 	<link rel="stylesheet" href="./res/css/ionicons.min.css" >
 </head>
 

diff --git a/app/src/main/js/actions/modal.js b/app/src/main/js/actions/modal.js
@@ -1,5 +1,18 @@
 import { MODAL } from '../consts/types';
 
+
+/**
+ * Closes the modal.
+ *
+ */
+const closeModal = () => (dispatch) => {
+  dispatch({
+    type: MODAL.CLOSE,
+    item: null,
+  });
+};
+
+
 /**
  * Opens the modal. It can contain rant or collab
  *
@@ -16,15 +29,4 @@ const openModal = (type, id = 0) => (dispatch) => {
   });
 };
 
-/**
- * Closes the modal.
- *
- */
-const closeModal = () => (dispatch) => {
-  dispatch({
-    type: MODAL.CLOSE,
-    item: null,
-  });
-};
-
 export { openModal, closeModal };
diff --git a/app/src/main/js/actions/notifs.js b/app/src/main/js/actions/notifs.js
@@ -1,6 +1,7 @@
 import { NOTIFS, ITEM } from '../consts/types';
 import rantscript from '../consts/rantscript';
 import { openModal } from './modal';
+import { fetchUser } from './user';
 
 const { ipcRenderer } = require('electron');
 
@@ -60,6 +61,8 @@ const clearNotifs = () => (dispatch, getState) => {
 const showNotifs = notif => (dispatch, getState) => {
   const notifSettings = getState().settings.general.notifications.options;
 
+  dispatch(fetchUser());
+
   if (!notifSettings.notif_enabled.value) {
     return;
   }

diff --git a/app/src/main/js/actions/user.js b/app/src/main/js/actions/user.js
@@ -31,6 +31,7 @@ const fetchUser = () => (dispatch, getState) => {
           about: res.about,
           location: res.location,
           avatar: res.avatar,
+          id: userID,
         };
         dispatch({
           type: USER.FETCH,

diff --git a/app/src/main/js/components/columns/column.js b/app/src/main/js/components/columns/column.js
@@ -4,6 +4,8 @@ import ItemCard from '../item/item_card';
 import Loading from '../utilities/loading';
 import ColumnTopBar from './column_topbar';
 import { getRandomInt } from '../../consts/DOMFunctions';
+import { ITEM } from '../../consts/types';
+import CommentCard from '../comments/comment_card';
 
 class Column extends Component {
   constructor() {
@@ -55,18 +57,25 @@ class Column extends Component {
               <Loading
                 backgroundColor={theme.backgroundColor}
               /> :
-              column.items.map(item => (
-                <ItemCard
-                  fetch={fetch}
-                  item={item}
-                  open={(type, id) => open(type, id)}
-                  key={item.id}
-                  theme={theme}
-                  vote={vote}
-                  itemType={itemType}
-                  auth={auth}
-                />
-              ))
+              column.items.map((item) => {
+                if (column.itemType === ITEM.COMMENT.NAME) {
+                  return (
+                    <CommentCard {...this.props} item={item} key={item.id} />
+                  );
+                }
+                return (
+                  <ItemCard
+                    fetch={fetch}
+                    item={item}
+                    open={(type, id) => open(type, id)}
+                    key={item.id}
+                    theme={theme}
+                    vote={vote}
+                    itemType={itemType}
+                    auth={auth}
+                  />
+                );
+              })
           }
         </div>
       </div>

diff --git a/app/src/main/js/components/comments/comment_card.js b/app/src/main/js/components/comments/comment_card.js
@@ -7,7 +7,7 @@ import { ITEM } from '../../consts/types';
 
 
 const CommentCard = (props) => {
-  const { item, theme, vote, auth } = props;
+  const { item, theme, vote, auth, open } = props;
   const user = {
     avatar: item.user_avatar,
     score: item.user_score,
@@ -29,7 +29,7 @@ const CommentCard = (props) => {
       <div
         className="top_container"
       >
-        <UserBadge user={user} theme={theme} />
+        <UserBadge user={user} theme={theme} open={open} />
         <Twemoji><p>{item.body}</p></Twemoji>
       </div>
       <BottomBar
@@ -49,6 +49,7 @@ CommentCard.propTypes = {
   theme: PropTypes.object.isRequired,
   auth: PropTypes.object.isRequired,
   vote: PropTypes.func.isRequired,
+  open: PropTypes.func.isRequired,
 };
 
 export default CommentCard;
diff --git a/app/src/main/js/components/comments/comments.js b/app/src/main/js/components/comments/comments.js
@@ -16,7 +16,7 @@ class Comments extends Component {
     return true;
   }
   render() {
-    const { theme, vote, comments, auth } = this.props;
+    const { theme, vote, comments, auth, open } = this.props;
     return (
       <div className="comments_container">
         {
@@ -30,6 +30,7 @@ class Comments extends Component {
               theme={theme}
               vote={vote}
               auth={auth}
+              open={open}
             />
           ))
         }
@@ -41,6 +42,7 @@ class Comments extends Component {
 Comments.propTypes = {
   theme: PropTypes.object.isRequired,
   vote: PropTypes.func.isRequired,
+  open: PropTypes.func.isRequired,
   comments: PropTypes.array.isRequired,
   auth: PropTypes.object.isRequired,
 };

diff --git a/app/src/main/js/components/item/item.js b/app/src/main/js/components/item/item.js
@@ -63,7 +63,7 @@ class Item extends Component {
   }
   renderMutliCol() {
     const { item } = this.state;
-    const { theme, vote, cardItem, auth } = this.props;
+    const { theme, vote, cardItem, auth, open } = this.props;
     return (
       <div className="item_column">
         <div
@@ -78,13 +78,20 @@ class Item extends Component {
             vote={vote}
             itemType={cardItem.type}
             auth={auth}
+            open={open}
           />
         </div>
         <div
           className="comments_and_post"
           style={{ width: `${theme.column.width}px` }}
         >
-          <Comments comments={item.comments} theme={theme} vote={vote} auth={auth} />
+          <Comments
+            comments={item.comments}
+            theme={theme}
+            vote={vote}
+            auth={auth}
+            open={open}
+          />
           <PostComment
             theme={theme}
             auth={auth}
@@ -97,7 +104,7 @@ class Item extends Component {
   }
   renderSingleColumn() {
     const { item } = this.state;
-    const { theme, vote, cardItem, auth } = this.props;
+    const { theme, vote, cardItem, auth, open } = this.props;
     return (
       <div className="item_compact_column">
         <ItemCard
@@ -108,12 +115,14 @@ class Item extends Component {
           vote={vote}
           itemType={cardItem.type}
           auth={auth}
+          open={open}
         />
         <Comments
           comments={item.comments}
           theme={theme}
           vote={vote}
           auth={auth}
+          open={open}
         />
         <PostComment
           theme={theme}
@@ -152,6 +161,7 @@ Item.propTypes = {
   cardItem: PropTypes.object.isRequired,
   auth: PropTypes.object.isRequired,
   close: PropTypes.func.isRequired,
+  open: PropTypes.func.isRequired,
   fetchNotifs: PropTypes.func.isRequired,
 };
 

diff --git a/app/src/main/js/components/item/item_card.js b/app/src/main/js/components/item/item_card.js
@@ -66,12 +66,13 @@ class ItemCard extends Component {
     );
   }
   render() {
-    const { item, theme, vote, modal, itemType, auth } = this.props;
+    const { item, theme, vote, modal, itemType, auth, open } = this.props;
     const user = {
       avatar: item.user_avatar,
       score: item.user_score,
       id: item.user_id,
       username: item.user_username,
+      dpp: item.user_dpp,
     };
     let isUser = false;
     if (auth.user) {
@@ -86,7 +87,11 @@ class ItemCard extends Component {
           color: theme.item_card.color,
         }}
       >
-        <UserBadge user={user} theme={theme} />
+        <UserBadge
+          user={user}
+          theme={theme}
+          open={open}
+        />
         <div
           className="body_container"
           onClick={() => this.open()}

diff --git a/app/src/main/js/components/modal/modal.js b/app/src/main/js/components/modal/modal.js
@@ -3,13 +3,16 @@ import PropTypes from 'prop-types';
 import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
 import Item from '../item/item';
 import PostRant from '../utilities/post_rant';
+import UserProfile from '../user/user_profile';
 import { ITEM } from '../../consts/types';
 
 class Modal extends Component {
   getItem() {
     const { item } = this.props;
     if (item.type === ITEM.POST_RANT.NAME) {
       return <PostRant {...this.props} />;
+    } else if (item.type === ITEM.PROFILE.NAME) {
+      return <UserProfile {...this.props} />;
     }
     return <Item key={item.id} cardItem={item} {...this.props} />;
   }
@@ -18,6 +21,7 @@ class Modal extends Component {
       e.target.className === 'item_container modal'
       || e.target.className === 'comments_and_post'
       || e.target.className === 'item_column'
+      || e.target.className === 'profile_container modal'
     ) {
       this.props.close();
     }

diff --git a/app/src/main/js/components/navigation/sidenav.js b/app/src/main/js/components/navigation/sidenav.js
@@ -17,12 +17,13 @@ class SideNav extends Component {
     ipcRenderer.on('compose_rant', () => { this.props.open(); });
   }
   getUserCard() {
-    const { user, logout, login, fetchUser } = this.props;
+    const { user, logout, login, fetchUser, open } = this.props;
     return (<CompactUserCard
       user={user}
       login={login}
       logout={logout}
       fetchUser={fetchUser}
+      open={open}
     />);
   }
   render() {

diff --git a/app/src/main/js/components/user/compact_user_card.js b/app/src/main/js/components/user/compact_user_card.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { ITEM } from '../../consts/types';
 
 class CompactUserCard extends Component {
   componentWillMount() {
@@ -33,7 +34,23 @@ class CompactUserCard extends Component {
         className="user_compact"
         style={{ background: 'url(./res/images/profile_banner.png)' }}
       >
-        <img className="user_image" src={imgsrc} style={{ background: `#${profile.avatar.b}` }} alt="avatar" />
+        <div
+          className="user_image_container"
+          onClick={() => this.props.open(ITEM.PROFILE.NAME, profile.id)}
+        >
+          <img className="user_image" src={imgsrc} style={{ background: `#${profile.avatar.b}` }} alt="avatar" />
+        </div>
+        <div
+          className="name_and_score"
+          onClick={() => this.props.open(ITEM.PROFILE.NAME, profile.id)}
+        >
+          <div className="name">
+            {profile.username}
+          </div>
+          <div className="score">
+            <p>+{profile.score}</p>
+          </div>
+        </div>
         <div className="user_bg_tint" style={{ background: `#${profile.avatar.b}` }} />
         <div className="logout" onClick={() => this.props.logout()}>
           <i className="ion-log-out" />
@@ -46,6 +63,7 @@ class CompactUserCard extends Component {
 CompactUserCard.propTypes = {
   logout: PropTypes.func.isRequired,
   login: PropTypes.func.isRequired,
+  open: PropTypes.func.isRequired,
   user: PropTypes.object.isRequired,
   fetchUser: PropTypes.func.isRequired,
 };