implemented auto-opening of comment threads on mobile when there is a comment hash in URL and smooth scrolling to such comments

maxceem · maxceem · commit d169c48917a5 · 2018-04-25T19:06:11.000+08:00
replaced screen breakpoints in react components with constants
diff --git a/src/components/ActionCard/CommentMobile.jsx b/src/components/ActionCard/CommentMobile.jsx
@@ -16,7 +16,7 @@ const CommentMobile = ({ messageId, author, date, children }) => {
   const messageLink = window.location.pathname.substr(0, window.location.pathname.indexOf('#')) + `#comment-${messageId}`
 
   return (
-    <div styleName="comment">
+    <div styleName="comment" id={`comment-${messageId}`}>
       <div styleName="header">
         <UserWithName {..._.pick(author, 'firstName', 'lastName', 'photoURL')} size="40" />
         <Link styleName="date" to={messageLink}>{moment(date).fromNow()}</Link>
diff --git a/src/components/Feed/FeedComments.jsx b/src/components/Feed/FeedComments.jsx
@@ -7,7 +7,7 @@ import Comment from '../ActionCard/Comment'
 import cn from 'classnames'
 import MediaQuery from 'react-responsive'
 import CommentMobile from '../ActionCard/CommentMobile'
-// import { THREAD_MESSAGES_PAGE_SIZE } from '../../config/constants'
+import { SCREEN_BREAKPOINT_MD } from '../../config/constants'
 
 const getCommentCount = (totalComments) => {
   if (!totalComments) {
@@ -71,7 +71,7 @@ class FeedComments extends React.Component {
             </div>
           </div>
         </Panel.Body>
-        <MediaQuery minWidth={768}>
+        <MediaQuery minWidth={SCREEN_BREAKPOINT_MD}>
           {(matches) => (matches ? (
             <div>
               {comments.map((item, idx) => (
diff --git a/src/components/Feed/FeedMobile.jsx b/src/components/Feed/FeedMobile.jsx
@@ -26,6 +26,33 @@ class FeedMobile extends React.Component {
     }
   }
 
+  componentWillReceiveProps(nextProps) {
+    // if comments just has been loaded, check if have to open the thread
+    if (this.props.comments.length === 0 && nextProps.comments.length > 0) {
+      this.openCommentFromHash(nextProps.comments)
+    }
+  }
+
+  componentWillMount() {
+    this.openCommentFromHash(this.props.comments)
+  }
+
+  /**
+   * If there is hash in the URL referencing some comment,
+   * open the comments thread by default
+   *
+   * @param {Array} comments list of comments
+   */
+  openCommentFromHash(comments) {
+    const { isCommentsShown } = this.state
+    const commentInHash = window.location.hash.match(/#comment-(\d+)/)
+    const isCommentInTheFeed = !!(commentInHash && _.find(comments, (comment) => (comment.id.toString() === commentInHash[1])))
+
+    if (!isCommentsShown && isCommentInTheFeed) {
+      this.toggleComments()
+    }
+  }
+
   toggleComments() {
     this.setState({ isCommentsShown: !this.state.isCommentsShown })
   }
diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
@@ -3,7 +3,7 @@ import MenuBar from 'appirio-tech-react-components/components/MenuBar/MenuBar'
 import moment from 'moment'
 import MediaQuery from 'react-responsive'
 import FooterV2 from '../FooterV2/FooterV2'
-import { NEW_PROJECT_PATH } from '../../config/constants'
+import { NEW_PROJECT_PATH, SCREEN_BREAKPOINT_MD } from '../../config/constants'
 
 require('./Footer.scss')
 
@@ -25,14 +25,14 @@ const Footer = () => {
   const shouldHideOnMobile =  window.location.pathname !== '/'
 
   return (
-    <MediaQuery minWidth={768}>
+    <MediaQuery minWidth={SCREEN_BREAKPOINT_MD}>
       {(matches) => {
         if (matches) {
           return (shouldHideOnDesktop ? null :
             <div className="Footer">
               <p className="copyright-notice">© Topcoder { currentYear }</p>
               <div className="footer-menu">
-                <MenuBar items={otherNavigationItems} orientation="horizontal" mobileBreakPoint={767} />
+                <MenuBar items={otherNavigationItems} orientation="horizontal" mobileBreakPoint={SCREEN_BREAKPOINT_MD - 1} />
               </div>
             </div>
           )
diff --git a/src/components/NotificationsDropdown/NotificationsDropdownContainer.jsx b/src/components/NotificationsDropdown/NotificationsDropdownContainer.jsx
@@ -18,7 +18,7 @@ import NotificationsMobilePage from  './NotificationsMobilePage'
 import NotificationsReadAll from './NotificationsReadAll'
 import ScrollLock from 'react-scroll-lock-component'
 import MediaQuery from 'react-responsive'
-import { NOTIFICATIONS_DROPDOWN_PER_SOURCE, NOTIFICATIONS_DROPDOWN_MAX_TOTAL, REFRESH_NOTIFICATIONS_INTERVAL } from '../../config/constants'
+import { NOTIFICATIONS_DROPDOWN_PER_SOURCE, NOTIFICATIONS_DROPDOWN_MAX_TOTAL, REFRESH_NOTIFICATIONS_INTERVAL, SCREEN_BREAKPOINT_MD } from '../../config/constants'
 import './NotificationsDropdown.scss'
 
 class NotificationsDropdownContainer extends React.Component {
@@ -141,7 +141,7 @@ class NotificationsDropdownContainer extends React.Component {
     }
 
     return (
-      <MediaQuery minWidth={768}>
+      <MediaQuery minWidth={SCREEN_BREAKPOINT_MD}>
         {(matches) => (matches ? (
           <NotificationsDropdown hasUnread={hasUnread} hasNew={hasNew} onToggle={visitNotifications}>
             <NotificationsDropdownHeader onMarkAllClick={() => !pending && markAllNotificationsRead()} hasUnread={hasUnread}/>
diff --git a/src/components/ProjectInfo/ProjectInfo.jsx b/src/components/ProjectInfo/ProjectInfo.jsx
@@ -7,6 +7,7 @@ import ProjectCardBody from '../../projects/list/components/Projects/ProjectCard
 import ProjectDirectLinks from '../../projects/list/components/Projects/ProjectDirectLinks'
 import MobileExpandable from '../MobileExpandable/MobileExpandable'
 import MediaQuery from 'react-responsive'
+import { SCREEN_BREAKPOINT_MD } from '../../config/constants'
 
 import './ProjectInfo.scss'
 
@@ -54,7 +55,7 @@ class ProjectInfo extends Component {
               />
             }
           </Panel>
-          <MediaQuery minWidth={768}>
+          <MediaQuery minWidth={SCREEN_BREAKPOINT_MD}>
             {(matches) => (
               <ProjectCardBody
                 project={project}
diff --git a/src/components/ScrollToAnchors.jsx b/src/components/ScrollToAnchors.jsx
@@ -7,7 +7,7 @@
  * If there is any hash we check if component has element with such id and scroll to it.
  */
 import React from 'react'
-import { SCROLL_TO_MARGIN } from '../config/constants'
+import { SCROLL_TO_MARGIN, SCROLL_TO_DURATION } from '../config/constants'
 import { scroller } from 'react-scroll'
 
 /**
@@ -17,12 +17,16 @@ import { scroller } from 'react-scroll'
  */
 export function scrollToHash(hash) {
   const id = hash.replace('#', '')
+  const windowWidth = window.innerWidth
+    || document.documentElement.clientWidth
+    || document.body.clientWidth
 
   scroller.scrollTo(id, {
     spy: true,
     smooth: true,
-    offset: -SCROLL_TO_MARGIN,
-    duration: 500
+    offset: windowWidth < 768 ? 0 : -SCROLL_TO_MARGIN,
+    duration: SCROLL_TO_DURATION,
+    activeClass: 'active'
   })
 }
 
diff --git a/src/config/constants.js b/src/config/constants.js
@@ -384,11 +384,18 @@ export const NOTIFICATIONS_LIMIT = 1000
 // old notification time in minutes, a notification is old if its date is later than this time
 export const OLD_NOTIFICATION_TIME = 60 * 48 // 2 day2
 
-export const SCROLL_TO_MARGIN = 70 // px - 60px of toolbar height + 10px to make sume margin
+export const SCROLL_TO_MARGIN = 70 // px - 60px of toolbar height + 10px to make some margin
 export const SCROLL_TO_DURATION = 500 // ms
 
 // Settings
 export const MAX_USERNAME_LENGTH = 15
 export const EMAIL_AVAILABILITY_CHECK_DEBOUNCE = 300 /* in ms */
 export const PASSWORD_MIN_LENGTH = 8
 export const PASSWORD_REG_EXP = /^(?=.*[a-z])(?=.*[^a-z]).+$/i
+
+// Screen breakpoints
+export const SCREEN_BREAKPOINT_LG = 1360
+export const SCREEN_BREAKPOINT_RG = 992
+export const SCREEN_BREAKPOINT_MD = 768
+export const SCREEN_BREAKPOINT_SM = 640
+export const SCREEN_BREAKPOINT_XS = 320
diff --git a/src/projects/detail/Dashboard.jsx b/src/projects/detail/Dashboard.jsx
@@ -6,6 +6,7 @@ import FeedContainer from './containers/FeedContainer'
 import MobileNavigationTabs from './components/MobileNavigationTabs'
 import Sticky from 'react-stickynode'
 import spinnerWhileLoading from '../../components/LoadingSpinner'
+import { SCREEN_BREAKPOINT_MD } from '../../config/constants'
 
 require('./Dashboard.scss')
 
@@ -25,7 +26,7 @@ const DashboardView = ({project, currentMemberRole, route, params, isSuperUser }
       <div className="dashboard-container">
         <MobileNavigationTabs projectId={project.id} />
         <div className="left-area">
-          <MediaQuery minWidth={768}>
+          <MediaQuery minWidth={SCREEN_BREAKPOINT_MD}>
             {(matches) => {
               if (matches) {
                 return <Sticky top={80}>{leftArea}</Sticky>
diff --git a/src/projects/detail/components/ProjectSpecSidebar.jsx b/src/projects/detail/components/ProjectSpecSidebar.jsx
@@ -8,7 +8,7 @@ import Sticky from 'react-stickynode'
 import MediaQuery from 'react-responsive'
 import SidebarNav from './SidebarNav'
 import VisualDesignProjectEstimateSection from './VisualDesignProjectEstimateSection'
-import { PROJECT_ROLE_OWNER, PROJECT_ROLE_CUSTOMER } from '../../../config/constants'
+import { PROJECT_ROLE_OWNER, PROJECT_ROLE_CUSTOMER, SCREEN_BREAKPOINT_MD } from '../../../config/constants'
 import { updateProject } from '../../actions/project'
 import { findProduct } from '../../../config/projectWizard'
 import './ProjectSpecSidebar.scss'
@@ -165,7 +165,7 @@ class ProjectSpecSidebar extends Component {
               you a good estimate.
             </p>
           </div>
-          <MediaQuery minWidth={768}>
+          <MediaQuery minWidth={SCREEN_BREAKPOINT_MD}>
             {(matches) => {
               if (matches) {
                 return (
diff --git a/src/projects/detail/containers/FeedContainer.js b/src/projects/detail/containers/FeedContainer.js
@@ -10,7 +10,8 @@ import {
   DISCOURSE_BOT_USERID,
   CODER_BOT_USERID,
   CODER_BOT_USER_FNAME,
-  CODER_BOT_USER_LNAME
+  CODER_BOT_USER_LNAME,
+  SCREEN_BREAKPOINT_MD
 } from '../../../config/constants'
 import { connect } from 'react-redux'
 import Sticky from 'react-stickynode'
@@ -31,10 +32,12 @@ import FeedMobile from '../../../components/Feed/FeedMobile'
 import './Specification.scss'
 import Refresh from '../../../assets/icons/icon-refresh.svg'
 
-import { ScrollElement, scroller } from 'react-scroll'
+import { ScrollElement } from 'react-scroll'
+import { scrollToHash } from '../../../components/ScrollToAnchors'
 
 /*eslint-disable new-cap */
 const ScrollableFeed = ScrollElement(Feed)
+const ScrollableFeedMobile = ScrollElement(FeedMobile)
 
 const SYSTEM_USER = {
   firstName: CODER_BOT_USER_FNAME,
@@ -240,15 +243,8 @@ class FeedView extends React.Component {
         return
       }
       const scrollTo = window.location.hash ? window.location.hash.substring(1) : null
-      // const scrollTo = _.get(props, 'params.statusId', null)
       if (scrollTo) {
-        scroller.scrollTo(scrollTo, {
-          spy: true,
-          smooth: true,
-          offset: -80, // 60px for top bar and 20px for margin from nav bar
-          duration: 500,
-          activeClass: 'active'
-        })
+        scrollToHash(scrollTo)
       }
     })
   }
@@ -415,7 +411,7 @@ class FeedView extends React.Component {
       const anchorId = 'feed-' + item.id
       return (
         <div className="feed-action-card" key={`${item.id}-${i}`}>
-          <MediaQuery minWidth={768}>
+          <MediaQuery minWidth={SCREEN_BREAKPOINT_MD}>
             {(matches) => (matches ?
               (
                 <ScrollableFeed
@@ -441,7 +437,7 @@ class FeedView extends React.Component {
                   </div>}
                 </ScrollableFeed>
               ) : (
-                <FeedMobile
+                <ScrollableFeedMobile
                   {...Object.assign({}, item, {id: `${item.id}`})}
                   name={anchorId}
                   allowComments={item.allowComments && !!currentMemberRole}
@@ -462,7 +458,7 @@ class FeedView extends React.Component {
                   {item.sendForReview && <div className="panel-buttons">
                     <button className="tc-btn tc-btn-primary tc-btn-md">Send for review</button>
                   </div>}
-                </FeedMobile>
+                </ScrollableFeedMobile>
               )
             )}
           </MediaQuery>
@@ -493,7 +489,7 @@ class FeedView extends React.Component {
               />
             </div>
           }
-          <MediaQuery minWidth={768}>
+          <MediaQuery minWidth={SCREEN_BREAKPOINT_MD}>
             <NewPost
               currentUser={currentUser}
               allMembers={allMembers}
@@ -508,7 +504,7 @@ class FeedView extends React.Component {
           { feeds.map(renderFeed) }
         </div>
         { !isNewPostMobileOpen &&
-          <MediaQuery maxWidth={768 - 1}>
+          <MediaQuery maxWidth={SCREEN_BREAKPOINT_MD - 1}>
             <ChatButton onClick={this.toggleNewPostMobile} />
           </MediaQuery>
         }
diff --git a/src/projects/detail/containers/SpecificationContainer.jsx b/src/projects/detail/containers/SpecificationContainer.jsx
@@ -12,6 +12,7 @@ import MobileNavigationTabs from '../components/MobileNavigationTabs'
 import FooterV2 from '../../../components/FooterV2/FooterV2'
 import EditProjectForm from '../components/EditProjectForm'
 import { findProduct } from '../../../config/projectWizard'
+import { SCREEN_BREAKPOINT_MD } from '../../../config/constants'
 import { updateProject, fireProjectDirty, fireProjectDirtyUndo } from '../../actions/project'
 import spinnerWhileLoading from '../../../components/LoadingSpinner'
 import typeToSpecification from '../../../config/projectSpecification/typeToSpecification'
@@ -73,7 +74,7 @@ class SpecificationContainer extends Component {
         <MobileNavigationTabs projectId={project.id} />
         <div className="container">
           <div className="left-area">
-            <MediaQuery minWidth={768}>
+            <MediaQuery minWidth={SCREEN_BREAKPOINT_MD}>
               {(matches) => {
                 if (matches) {
                   return <Sticky top={80}>{leftArea}</Sticky>
diff --git a/src/projects/list/components/Projects/ProjectCard.jsx b/src/projects/list/components/Projects/ProjectCard.jsx
@@ -6,6 +6,7 @@ import ProjectCardHeader from './ProjectCardHeader'
 import ProjectCardBody from './ProjectCardBody'
 import ProjectManagerAvatars from './ProjectManagerAvatars'
 import MediaQuery from 'react-responsive'
+import { SCREEN_BREAKPOINT_MD } from '../../../../config/constants'
 import './ProjectCard.scss'
 
 function ProjectCard({ project, duration, disabled, currentUser, history, onChangeStatus}) {
@@ -23,7 +24,7 @@ function ProjectCard({ project, duration, disabled, currentUser, history, onChan
         />
       </div>
       <div className="card-body">
-        <MediaQuery minWidth={768}>
+        <MediaQuery minWidth={SCREEN_BREAKPOINT_MD}>
           {(matches) => (
             <ProjectCardBody
               project={project}
diff --git a/src/projects/list/components/Projects/ProjectListNavHeader.jsx b/src/projects/list/components/Projects/ProjectListNavHeader.jsx
@@ -7,6 +7,7 @@ import PT from 'prop-types'
 import StatusFilters from '../../../../components/StatusFilters/StatusFilters'
 import StatusFiltersMobile from '../../../../components/StatusFilters/StatusFiltersMobile'
 import MediaQuery from 'react-responsive'
+import { SCREEN_BREAKPOINT_SM } from '../../../../config/constants'
 import CardView from '../../../../assets/icons/ui-16px-2_grid-45-gray.svg'
 import GridView from '../../../../assets/icons/grid-list-ico.svg'
 import { SwitchButton } from 'appirio-tech-react-components'
@@ -77,7 +78,7 @@ export default class ProjectListNavHeader extends Component {
     return (
       <nav className="list-nav-container">
         <div className="left-wrapper">
-          <MediaQuery minWidth={640}>
+          <MediaQuery minWidth={SCREEN_BREAKPOINT_SM}>
             {(matches) => (
               matches ? (
                 <StatusFilters currentStatus={this.state.currentStatus} onStatusClick={this.onStatusClick}/>
