merge from master

src/Events/Details/index.js

@@ -4,8 +4,9 @@ import { connect } from 'react-redux';
 import * as _ from 'lodash';
 
 import Loading from '../../common/Loading';
+import HeartFullIcon from '../../common/HeartFullIcon';
+import TooltipItem from '../../common/TooltipItem';
 import going from '../../assets/images/going.svg';
-import PopoverItem from '../../common/PopoverItem';
 import Event from '../Event';
 import { getFormattedDate } from '../../core/Dates';
 import { fetchConferenceDeatails } from './duck';
@@ -133,35 +134,40 @@ class InsidePage extends Component {
         }, 10000);
     }
 
+    tagClicked = (event) => {
+        this.props.history.push({
+            pathname: `/search/${event.target.textContent}`,
+            state: {
+                wishListData: {},
+            },
+        });
+    }
+
     renderSpeakers() {
         const renderImages = [];
         this.props.event.data.speakers.map((speaker, key) => {
-            renderImages.push(<div className="d-inline mr-2" key={key} >
-                    <PopoverItem shouldTogglePopover key={key} item={speaker} id={`p${key}`}>
+            renderImages.push(<div className="mr-2" key={speaker.twitterId} >
+                <TooltipItem speaker={speaker} id={speaker.twitterId}>
+                    <a
+                        style={{ cursor: 'pointer', display: 'inline-block' }}
+                        target="_blank"
+                        href={`https://twitter.com/@${speaker.twitterName}`}
+                    >
                         <img
-                            className="rounded-circle mr-2"
-                            key={key}
+                            className="rounded-circle"
                             src={speaker.pictureUrl}
                             width="40"
                             height="40"
                             alt={speaker.name}
                         />
-                    </PopoverItem>
-                </div>);
+                    </a>
+                </TooltipItem>
+            </div>);
             return key;
         });
         return renderImages;
     }
 
-    tagClicked = (event) => {
-        this.props.history.push({
-            pathname: `/search/${event.target.textContent}`,
-            state: {
-                wishListData: {},
-            },
-        });
-    }
-
     renderMessage() {
         if (this.state.isUpdated) {
             return (
@@ -274,7 +280,9 @@ class InsidePage extends Component {
 
                 <div className="mb-5">
                     <h4 className="mb-3">Speakers:</h4>
-                    {this.renderSpeakers()}
+                    <div className='d-flex'>
+                        {this.renderSpeakers()}
+                    </div>
                 </div>
 
                 <div className="text-center">

src/Events/WishList/index.js

@@ -199,7 +199,7 @@ class WishList extends Component {
             return <Loading />;
         }
 
-        if (this.props.wishList.isFetching && this.props.wishList.isFetching === null) {
+        if (this.props.wishList.isFetching || this.props.wishList.isFetching === null) {
             return <Loading />;
         }
 

src/common/Card.js

@@ -60,7 +60,9 @@ class Card extends Component {
      * @param  {number} changedValue
      */
     changeAttendeesHandler = (changedValue) => {
-        this.setState({ attendeesCount: changedValue });
+        if (this.props.authToken) {
+            this.setState({ attendeesCount: changedValue });
+        }
     }
 
     /**

src/common/Header.js

@@ -9,7 +9,7 @@ import {
     NavbarToggler,
     Nav,
     NavItem,
-    UncontrolledDropdown,
+    Dropdown,
     DropdownToggle,
     DropdownMenu,
     DropdownItem,
@@ -36,6 +36,7 @@ class Header extends Component {
             location: PropTypes.shape({
                 pathname: PropTypes.string.isRequired,
             }),
+            listen: PropTypes.func.isRequired,
         }).isRequired,
     };
 
@@ -46,18 +47,34 @@ class Header extends Component {
     constructor(props) {
         super(props);
 
-        this.toggleNavbar = this.toggleNavbar.bind(this);
         this.state = {
             collapsed: true,
+            dropdownOpen: false,
         };
     }
 
-    toggleNavbar() {
+    componentDidMount() {
+        // On route change, close navbar
+        this.props.history.listen((location, action) => {
+            this.setState({
+                collapsed: true,
+            });
+        });
+    }
+
+
+    toggleNavbar = () => {
         this.setState({
             collapsed: !this.state.collapsed,
         });
     }
 
+    toggleDropdown = () => {
+        this.setState({
+            dropdownOpen: !this.state.dropdownOpen,
+        });
+    }
+
     handleSubmit = (event) => {
         event.preventDefault();
     }
@@ -88,7 +105,7 @@ class Header extends Component {
 
         if (!_.isEmpty(_userData)) {
             return (
-                <UncontrolledDropdown nav>
+                <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggleDropdown} nav>
                     <DropdownToggle nav caret>
                         <img
                             className="mr-1 rounded-circle"
@@ -99,22 +116,37 @@ class Header extends Component {
                         />
                         {_userData.name}
                     </DropdownToggle>
-                    <DropdownMenu >
-                        <Link className="dropdown-item" to="/profile-settings">
-                            Profile Settings
-                        </Link>
-                        <Link className="dropdown-item" to="/my-subscriptions">
-                        My Subscriptions
-                        </Link>
-                        <Link className="dropdown-item" to="/wanna-go-list">
-                            Wanna go list
-                        </Link>
+                    <DropdownMenu>
+                        <DropdownItem>
+                            <Link
+                                className="dropdown-item px-0"
+                                to="/profile-settings"
+                            >
+                                Profile Settings
+                            </Link>
+                        </DropdownItem>
+                        <DropdownItem>
+                            <Link
+                                className="dropdown-item px-0"
+                                to="/my-subscriptions"
+                            >
+                                My Subscriptions
+                            </Link>
+                        </DropdownItem>
+                        <DropdownItem>
+                            <Link
+                                className="dropdown-item px-0"
+                                to="/wanna-go-list"
+                            >
+                                Wanna go list
+                            </Link>
+                        </DropdownItem>
                         <DropdownItem divider />
                         <DropdownItem className="color-primary" onClick={this.logOut}>
                             Log out
                         </DropdownItem>
                     </DropdownMenu>
-                </UncontrolledDropdown>
+                </Dropdown>
             );
         }
 
@@ -163,15 +195,20 @@ class Header extends Component {
                     style={style}
                     className={`p-relative navbar fixed-top navbar-expand-lg py-4 px-4 px-xxxl-5 ${this.renderNavClass(isAuthenticated)}`}
                 >
-
-                    <NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
+                    <NavbarToggler
+                        onClick={this.toggleNavbar}
+                        className="mr-2"
+                    />
                     <Collapse
                         className="justify-content-between"
                         isOpen={!this.state.collapsed}
                         navbar
                     >
                         <div className="navbar-item">
-                            <Link className="" href="#home" to="/home">
+                            <Link
+                                href="#home"
+                                to="/home"
+                            >
                                 <Logo
                                     authentication={isAuthenticated}
                                 />
@@ -188,7 +225,10 @@ class Header extends Component {
                         <div className="navbar-item">
                             <Nav className="nav navbar-nav justify-content-end">
                                 <NavItem>
-                                    <Link className="nav-link" to="/conference-suggest">
+                                    <Link
+                                        className="nav-link"
+                                        to="/conference-suggest"
+                                    >
                                         Suggest a conference
                                     </Link>
                                 </NavItem>

src/common/PopoverItem.js

@@ -10,7 +10,7 @@ class PopoverItem extends Component {
         }).isRequired,
         id: PropTypes.string.isRequired,
         shouldTogglePopover: PropTypes.bool,
-        children: PropTypes.object,
+        children: PropTypes.node.isRequired,
 
         // received from parent component Attend
         onClick: PropTypes.func,
@@ -20,6 +20,7 @@ class PopoverItem extends Component {
     static defaultProps = {
         onClick: () => {},
         isActive: true,
+        shouldTogglePopover: false,
     };
 
     constructor(props) {
@@ -69,19 +70,15 @@ class PopoverItem extends Component {
         const style = { cursor: 'pointer' };
         return (
             <span>
-                {this.props.item.twitterId ?
-                    <a style={style} target="_blank" role="button" id={'Popover-' + this.props.id} onClick={this.toggle} href={`https://twitter.com/@${this.props.item.twitterName}`}>
-                        {this.props.children}
-                    </a> : <span style={style} role="button" id={'Popover-' + this.props.id} onClick={this.toggle}>
-                        {this.props.children}
-                    </span>
-                }
+                <span style={style} role="button" id={'Popover-' + this.props.id} onClick={this.toggle}>
+                    {this.props.children}
+                </span>
 
                 <Popover
                     className="mb-3"
                     placement="top"
                     isOpen={this.state.popoverOpen}
-                    target={'Popover-' + this.props.id}
+                    target={`Popover-${this.props.id}`}
                     toggle={this.toggle}
                 >
                     <PopoverBody>{this.props.item.name}</PopoverBody>

src/common/TooltipItem.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Tooltip } from 'reactstrap';
+
+class TooltipItem extends React.Component {
+    static propTypes = {
+        speaker: PropTypes.shape({
+            name: PropTypes.string,
+        }).isRequired,
+        id: PropTypes.string.isRequired,
+        children: PropTypes.node.isRequired,
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            tooltipOpen: false,
+        };
+    }
+
+  toggle = () => {
+      this.setState({
+          tooltipOpen: !this.state.tooltipOpen,
+      });
+  }
+
+  render() {
+      return (
+          <React.Fragment>
+              <span className="d-inline-block" id={`Tooltip-${this.props.id}`}>
+                  {this.props.children}
+              </span>
+
+              <Tooltip
+                  target={`Tooltip-${this.props.id}`}
+                  placement="top"
+                  isOpen={this.state.tooltipOpen}
+                  toggle={this.toggle}
+              >
+                  {this.props.speaker.name}
+              </Tooltip>
+          </React.Fragment>
+      );
+  }
+}
+
+export default TooltipItem;