Update with icon follow/unfollow

busyorg · Oct 12, 2016 · 4757bb4 · 4757bb4
1 parent 4894c4b
commit 4757bb4
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 25 deletions.
diff --git a/bin/www b/bin/www
@@ -5,7 +5,7 @@
  */
 
 var app = require('../app').app;
-var debug = require('debug')('yo:server');
+var debug = require('debug')('busy:server');
 var http = require('http');
 
 /**

diff --git a/src/app/PageActions.js b/src/app/PageActions.js
@@ -1,7 +1,42 @@
-let React = require('react'),
-  { Link } = require('react-router');
+import React, { Component, PropTypes } from 'react';
+import classNames from 'classnames';
+import { Link } from 'react-router';
+
+export default class PageActions extends Component {
+  static propTypes = {
+    // Follow Button
+    followButton: PropTypes.bool,
+    isFollowing: PropTypes.bool,
+    isFollowingIsLoading: PropTypes.bool,
+    onClickFollow: PropTypes.func,
+  };
+
+  renderFollowButton() {
+    const {
+      followButton,
+      isFollowing,
+      isFollowingIsLoading,
+      onClickFollow
+    } = this.props;
+
+    if (!followButton) return null;
+
+    // TODO - Add Tooltip
+    return (
+      <a
+        href="#"
+        className={classNames('trigger', {
+          disabled: isFollowingIsLoading,
+        })}
+        onClick={onClickFollow}
+      >
+        <i className="icon icon-person-add material-icons">
+          {isFollowing ? 'person outline' : 'person_add'}
+        </i>
+      </a>
+    );
+  }
 
-module.exports = React.createClass({
   render() {
     let channel = '';
     if (this.props.params && this.props.params.name) {
@@ -12,7 +47,9 @@ module.exports = React.createClass({
 
     return (
       <div className="actions">
-        <div className="triggers">
+       <div className="triggers">
+         {this.renderFollowButton()}
+
           {this.props.edit && <Link to="/profile/edit" className="trigger"><i className="icon icon-md material-icons">format_paint</i></Link>}
           {this.props.likes && <a href="#replies" className="trigger"><i className="icon icon-md material-icons">thumb_up</i></a>}
           {this.props.replies && <a href="#replies" className="trigger"><i className="icon icon-md material-icons">reply</i></a>}
@@ -22,4 +59,4 @@ module.exports = React.createClass({
       </div>
     );
   }
-});
+}
diff --git a/src/user/profile.js b/src/user/profile.js
@@ -72,7 +72,8 @@ class Profile extends Component {
     });
   }
 
-  onClickFollow = () => {
+  onClickFollow = (e) => {
+    if (e && e.preventDefault) e.preventDefault();
     const isFollowing = this.props.following && !!find(this.props.following, (u) => (
       u.following === this.props.params.name
     ));
@@ -119,7 +120,17 @@ class Profile extends Component {
 
     return (
       <div>
-        <PageActions params={this.props.params} messages={!edit} edit={edit} />
+        <PageActions
+          params={this.props.params}
+          messages={!edit}
+          edit={edit}
+
+          followButton
+          isFollowingIsLoading={isFollowingIsLoading}
+          isFollowing={isFollowing}
+          onClickFollow={this.onClickFollow}
+        />
+
         <Header account={username} />
         <section
           className="align-center bg-green profile-header"
@@ -129,23 +140,6 @@ class Profile extends Component {
             position: 'relative',
           }}
         >
-          <div
-            style={{
-              position: 'absolute',
-              right: 15,
-              top: 15
-            }}
-          >
-            <button
-              className={classNames('btn btn-primary', {
-                disabled: isFollowingIsLoading,
-              })}
-              onClick={this.onClickFollow}
-            >
-              {isFollowing ? 'Unfollow' : 'Follow'}
-            </button>
-          </div>
-
           <div className="mvl">
             <div className="avatar avatar-xl">
               {_.has(account, 'name') && <div className="reputation">{formatter.reputation(account.reputation)}</div>}

diff --git a/src/widgets/Tooltip.js b/src/widgets/Tooltip.js
@@ -0,0 +1,53 @@
+import React, { Component } from 'react';
+
+export default class Tooltip extends Component {
+  onMouseOver() {
+    console.log('over')
+    this.setState({
+      mouseover: true,
+    });
+  }
+
+  onMouseLeave() {
+    console.log('leave')
+    this.setState({
+      mouseover: false,
+    });
+  }
+
+
+  render() {
+    return (
+      <span
+        style={{
+          position: 'relative',
+          display: 'inline-block',
+        }}
+      >
+        <div
+          style={{
+            position: 'absolute',
+            borderRadius: 10,
+            top: 0,
+            zIndex: 2000,
+            backgroundColor: '#3756a0',
+            width: 'auto',
+            color: 'white',
+            padding: 13,
+            left: '-120%',
+            visibility: null, // this.state.over ? null : 'hidden',
+          }}
+        >
+          {this.props.overlay}
+        </div>
+
+        <span
+          onMouseOver={this.onMouseOver.bind(this)}
+          onMouseLeave={this.onMouseLeave.bind(this)}
+        >
+          {this.props.children}
+        </span>
+      </span>
+    );
+  }
+}