Develop Reference

Clicking link from focused side nav opens page scrolled down - javascript

I've inherited a react/node/prismic application which has a ScrollToTop.js file to make sure pages load at the top, which they do when accessed from our main navigation menu.
This application also has a little side nav that's hidden until you scroll down (controlled with tabIndex).
The bug: when you click a link from the side nav, the resulting page comes up however far down you had scrolled when opening the side nav. Instead, I want these to start at the top.
We have a Layout.js file for the overall layout, and a specific SideNav.js for that little side nav. I'm new to react/javascript, and I haven't been able to figure out how to either (a) apply the ScrollToTop logic to these sidenav links or (b) add an additional window.scrollTo(0,0) for this special case. Can anyone recommend how/where this can be updated?
SideNav.js:
import React from 'react'
import CTAButton from './CTAButton'
import { Link } from 'react-router-dom'
import { Link as PrismicLink } from 'prismic-reactjs'
import PrismicConfig from '../../../prismic-configuration'
import PropTypes from 'prop-types'
import * as PrismicTypes from '../Utils/Types'
const matchPaths = {
'about': 'About us',
'projects': 'Projects',
'news': 'News'
}
class SideNav extends React.Component {
constructor(props) {
super(props)
this.state = {
expanded: false
}
this.handleKey = this.handleKey.bind(this)
this.expandMenu = this.expandMenu.bind(this)
this.keypressed = undefined
this.main = undefined
this.bug = undefined
this.toggle = false
this.windowTop = 0
}
checkMobile() {
if (window.innerWidth <= 800) {
this.setState({scrollThreshold: 50})
}
}
componentDidMount() {
this.checkMobile()
this.keypressed = this.handleKey
window.addEventListener('keydown', this.keypressed)
this.main = document.getElementsByClassName('top-nav-logo')[0]
this.bug = document.getElementsByClassName('side-nav-bug-wrap')[0]
}
componentWillUnMount() {
window.removeEventListener('keydown', this.keypressed)
}
handleKey(e) {
if (e.keyCode === 27 && this.state.expanded) {
this.expandMenu()
}
}
expandMenu() {
const el = document.scrollingElement || document.documentElement
if (!this.state.expanded) {
this.windowTop = el.scrollTop
} else {
el.scrollTop = this.windowTop
}
this.setState({
expanded: !this.state.expanded
})
document.body.classList.toggle('nav-lock')
}
render() {
const expanded = this.state.expanded ? 'expanded' : 'contracted'
const tabIndex = this.state.expanded ? '1' : '-1'
if (this.state.scrollThreshold === 50 && this.state.expanded) {
this.props.removeListener()
this.main.setAttribute('style', 'display:none')
this.bug.setAttribute('style', 'display:none; position:absolute')
}
else if (this.state.scrollThreshold === 50 && !this.state.expanded) {
this.props.addListener()
this.main.setAttribute('style', 'display:inline')
this.bug.setAttribute('style', 'display:flex; position:fixed')
}
const menu = this.props.menu.map((menuItem, index) => {
const menuLink = PrismicLink.url(menuItem.link, PrismicConfig.linkResolver)
const label = menuItem.label[0].text
let marker
if (typeof this.props.location !== 'undefined') {
// Match label to window location to move indicator dot
marker = label === matchPaths[this.props.location] ? this.props.location : 'inactive'
}
return (
<li key={index} className="side-nav-li">
<Link to={label} className="side-nav-link" onClick={this.expandMenu} tabIndex={tabIndex}>{label}</Link>
<div className={`side-nav-marker ${marker}`}/>
</li>
)
})
return (
<div className='side-nav-wrapper'>
<Link to='/' className={`side-nav-logo-main ${this.props.visibility}`} alt=""/>
<div className={`side-nav-bug-wrap ${this.props.visibility}`} onClick={this.expandMenu}>
<div className='side-nav-bug-icon' />
</div>
<div className={`side-nav ${expanded}`}>
<div className={'side-nav-menu-wrap'}>
<div className="side-nav-control-wrap">
<Link to="/" className="side-nav-logo" alt="Count Me In logo" onClick={this.expandMenu} tabIndex={tabIndex}/>
<button className="side-nav-exit" onClick={this.expandMenu} tabIndex={tabIndex}/>
</div>
<nav>
<ul className="side-nav-menu-items">
{ menu }
<CTAButton />
</ul>
</nav>
</div>
</div>
<div className={`side-nav-overlay ${expanded}`} onClick={this.expandMenu}/>
</div>
)
}
}
SideNav.propTypes = {
removeListener: PropTypes.func,
addListener: PropTypes.func,
location: PropTypes.string,
visibility: PropTypes.string,
menu: PropTypes.arrayOf(PropTypes.shape({
label: PrismicTypes.PrismicTextTypes,
link: PropTypes.shape({
id: PropTypes.string,
isBroken: PropTypes.bool,
lang: PropTypes.string,
link_type: PropTypes.string,
slug: PropTypes.string,
tags: PropTypes.array,
type: PropTypes.string,
uid: PropTypes.string
})
}))
}
export default SideNav
Layout.js:
const matchPaths = {
'about': 'About us',
'projects': 'Projects',
'news': 'News'
}
class Layout extends React.Component {
constructor(props) {
super(props)
this.state = {
location: undefined,
displayMobile: false,
visibility: 'offscreen',
scrollThreshold: 100
}
this.onMobileClick = this.onMobileClick.bind(this)
this.logoClick = this.logoClick.bind(this)
this.scrollCheck = this.scrollCheck.bind(this)
this.addScrollCheck = this.addScrollCheck.bind(this)
this.removeScrollCheck = this.removeScrollCheck.bind(this)
this.addChildScroll = this.addChildScroll.bind(this)
this.removeChildScroll = this.removeChildScroll.bind(this)
this.checkCount = 0
this.childCheckCount = 0
this.scrollCheckToggle = true
this.childCheckToggle = true
}
getBodyScrollTop () {
const el = document.scrollingElement || document.documentElement
return el.scrollTop
}
// Need to do this on didMount so window object is available.
componentDidMount() {
const loc = window.location.pathname.substr(1)
this.setState({ location: loc })
//Hide the loader and display the site content.
setTimeout(function() {
document.body.classList.add('is-loaded')
}, 50)
this.addScrollCheck()
if (this.getBodyScrollTop() > this.state.scrollThreshold) {
this.setState({
visibility: 'onscreen'
})
}
}
addChildScroll() {
if (this.childCheckCount < 1 ) {
window.addEventListener('scroll', this.scrollCheck)
this.childCheckCount++
this.childCheckToggle = true
}
}
removeChildScroll() {
if (this.childCheckCount === 1) {
window.removeEventListener('scroll', this.scrollCheck)
this.childCheckCount--
this.childCheckToggle = false
}
}
addScrollCheck() {
if (this.checkCount < 1 ) {
window.addEventListener('scroll', this.scrollCheck)
this.checkCount++
this.scrollCheckToggle = true
}
}
removeScrollCheck() {
if (this.checkCount === 1) {
window.removeEventListener('scroll', this.scrollCheck)
this.checkCount--
this.scrollCheckToggle = false
}
}
componentWillUnMount() {
this.removeScrollCheck()
}
scrollCheck() {
const scrollPos = this.getBodyScrollTop()
const newVis = scrollPos > this.state.scrollThreshold ? 'onscreen' : 'offscreen'
const curVis = this.state.visibility
newVis !== curVis && (
this.setState({
visibility: scrollPos > this.state.scrollThreshold ? 'onscreen' : 'offscreen'
})
)
}
// Need to do it again on didUpdate to handle nav updates
componentDidUpdate() {
let loc = window.location.pathname
loc = loc.substr(1)
if (loc !== this.state.location) {
this.setState({ location: loc })
}
}
// this class assignment sets all the mobile menu style changes & transitions
onMobileClick() {
// but we only want to do this setting on mobile
if (window.innerWidth < 800) {
this.scrollCheckToggle ? this.removeScrollCheck() : this.addScrollCheck()
this.setState({
displayMobile: this.state.displayMobile === true ? false : true
})
const appContainer = document.getElementsByClassName('app-container')[0]
appContainer.classList.toggle('locked')
}
}
logoClick() {
if (this.state.displayMobile === true) {
this.setState({displayMobile: false})
const appContainer = document.getElementsByClassName('app-container')[0]
appContainer.classList.toggle('locked')
}
}
render() {
const mobileDisplay = this.state.displayMobile === true ? '-active' : '-inactive'
const menu = this.props.menu.map((menuItem, index) => {
const menuLink = PrismicLink.url(menuItem.link, PrismicConfig.linkResolver)
const label = menuItem.label[0].text
let marker
if (typeof this.state.location !== 'undefined') {
// Match label to window location to move indicator dot
marker = label === matchPaths[this.state.location] ? this.state.location : 'inactive'
}
return (
<li key={index} className="top-nav-li">
<Link to={label} className="top-nav-link" onClick={this.onMobileClick}>{label}</Link>
<div className={`top-nav-marker ${marker}`} />
</li>
)
})
return (
<div className="app-container">
<Loader />
<SideNav menu={this.props.menu} location={this.state.location} visibility={this.state.visibility} addListener={this.addChildScroll} removeListener={this.removeChildScroll}/>
<header className='top-nav-container CONSTRAIN'>
<Link to="/" className={`top-nav-logo ${this.state.visibility}`} onClick={this.logoClick} alt="Count Me In logo"/>
<div className="top-nav-mobile-wrapper">
<div className={'top-nav-mobile-title'} onClick={this.onMobileClick} tabIndex="0">
<span className={`top-nav-mobile-title-text${mobileDisplay}`}>Menu</span>
<div className={`top-nav-mobile-icon${mobileDisplay}`} />
</div>
</div>
<nav className={`top-nav-menu-container${mobileDisplay}`}>
<ul className="top-nav-ul">
{menu}
<CTAButton/>
</ul>
</nav>
</header>
<main>
{this.props.children}
</main>
<Footer projects={this.props.projects} footerData={this.props.footerData} />
</div>
)
}
}
Layout.propTypes = {
children: PropTypes.node,
menu: PropTypes.arrayOf(PropTypes.shape({
label: PrismicTypes.PrismicTextTypes,
link: PropTypes.shape({
id: PropTypes.string,
isBroken: PropTypes.bool,
lang: PropTypes.string,
link_type: PropTypes.string,
slug: PropTypes.string,
tags: PropTypes.array,
type: PropTypes.string,
uid: PropTypes.string
})
})),
projects: PropTypes.arrayOf(PropTypes.shape({
data: PropTypes.shape({
project_name: PrismicTypes.PrismicTextTypes,
learn_more_link: PropTypes.shape({
link_type: PropTypes.string,
target: PropTypes.string,
url: PropTypes.string
})
})
})),
footerData: PropTypes.arrayOf(PropTypes.shape({
label: PrismicTypes.PrismicTextTypes,
link: PropTypes.shape({
link_type: PropTypes.string,
target: PropTypes.string,
url: PropTypes.string
})
}))
}
export default Layout
ScrollToTop.js:
import React from 'react'
class ScrollToTop extends React.Component {
componentDidUpdate(prevProps) {
if (this.props.location !== prevProps.location) {
window.scrollTo(0, 0)
}
}
componentDidMount() {
window.scrollTo(0, 0)
}
render() {
return this.props.children
}
}
export default (ScrollToTop)
router.js:
import React from 'react'
import { Route, Switch } from 'react-router-dom'
import ScrollToTop from './app/Utils/ScrollToTop'
import routes from './routes'
export default (({prismicCtx, PRISMIC_UNIVERSAL_DATA}) => {
return (
<ScrollToTop>
<Switch>
{routes(prismicCtx, PRISMIC_UNIVERSAL_DATA).map((route, index) => {
const copyRoute = Object.assign({}, route)
if (copyRoute.render) delete copyRoute.component
return <Route key={`route-${index}`} {...copyRoute} />
})}
</Switch>
</ScrollToTop>
)
})

Looking at the different react lifecycle steps, I added the same scrollTo behavior for componentWillUpdate (in ScrollToTop.js), and these pages load at the top from this menu again!
componentWillUpdate() {
window.scrollTo(0, 0)
}

Related

I've inherited a react/node/prismic application where we need to update the prismic-reactjs package, which resulted in needing to update a few others- in total, we changed:
prismic-reactjs: 0.2.0 → 1.1.0
react: 15.6.1 → 16.0.0
webpack: 3.12.0 → 4.39.2
react-dom: 15.6.1 → 16.0.0
react-router-dom: 4.1.2 → 5.0.1
extract-text-webpack-plugin (deprecated) → mini-css-extract-plugin
Then removed one use of "withRouter()" because of new error when starting up the local server (but I confirmed in another branch that making that edit alone doesn't produce the symptom below)
Context: we have a personMap that shows a icons for a set of people, and you click one of them to open a PersonMapStory modal, which shows that person's story, then links to everybody else in a list at the bottom. If you scroll down and click one of those links, the story up top is replaced accordingly (with the new person's story), and list below is everyone else. In the code, the button onClick behavior for these bottom links is setActivePerson() to this new person.
New bug: in this new branch, when I have the story modal open and simply hover off the page and back again, we're repeating the setQueuedUpPerson and setNoQueuedUpPerson calls that are associated with onMouseEnter and onMouseLeave. (Doesn't happen in the previous/production code). It's causing downstream problems and I'm trying to figure out how to prevent this.
Further info: I've already seen a propagation issue where the solution was to pass the event and call stopPropagation in the appropriate method, and this seems like the same kind of behavior. Is there a way to do the same sort of thing to have it stop listening to the hover behavior when the modal is up?
Updated PersonMap.js (from first suggested answer):
import Modal from 'react-modal'
import PropTypes from 'prop-types'
import React from 'react'
import PersonMapPoint from './PersonMapPoint'
import PersonMapStory from './PersonMapStory'
import PersonMapCallout from './PersonMapCallout'
import PersonMapLocator from './PersonMapLocator'
import PersonMapBackground from './PersonMapBackground'
const CUSTOM_STYLES = {
content: {
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: '#fff',
zIndex: 10,
border: 'none'
}
}
class PersonMap extends React.Component {
constructor(props) {
super(props)
this.setActivePerson = this.setActivePerson.bind(this)
this.setNoActivePerson = this.setNoActivePerson.bind(this)
this.setQueuedUpPerson = this.setQueuedUpPerson.bind(this)
this.setNoQueuedUpPerson = this.setNoQueuedUpPerson.bind(this)
this.checkBlurEvent = this.checkBlurEvent.bind(this)
this.setIsDesktop = this.setIsDesktop.bind(this)
this.checkHasBeenScrolledTo = this.checkHasBeenScrolledTo.bind(this)
this.setTopRef = this.setTopRef.bind(this)
this.handleKeyPress = this.handleKeyPress.bind(this)
this.state = {
activePerson: null,
queuedUpPerson: null,
scrollPos: 0,
isDesktop: false,
hasBeenScrolledTo: false,
lastQueuedPerson: null
}
}
componentDidMount() {
this.setIsDesktop()
this.checkHasBeenScrolledTo()
window.addEventListener('resize', this.setIsDesktop)
window.addEventListener('scroll', this.checkHasBeenScrolledTo)
}
componentWillUnmount() {
window.removeEventListener('resize', this.setIsDesktop)
window.removeEventListener('scroll', this.checkHasBeenScrolledTo)
}
setTopRef(element) {
this.topRef = element
}
setActivePerson(personName) {
this.setState({
activePerson: personName,
scrollPos: window.scrollY
})
}
setNoActivePerson() {
this.setState({
queuedUpPerson: this.state.activePerson,
activePerson: null
}, () => {
setTimeout(() => {
window.scrollTo(0, this.state.scrollPos)
}, 50)
})
}
setQueuedUpPerson(e, personName) {
this.setState({
queuedUpPerson: personName,
lastQueuedPerson: personName
})
e.stopPropagation()
}
setNoQueuedUpPerson(e) {
this.setState({
queuedUpPerson: null
})
e.stopPropagation()
}
handleKeyPress(e, name) {
if (e.key !== ' ' && e.key !== 'Enter') {
return
}
this.setActivePerson(name)
}
checkBlurEvent(e) {
if (Array.from(e.currentTarget.childNodes[0].childNodes).includes(e.relatedTarget)) {
return
}
this.setNoQueuedUpPerson(e)
}
render() {
return (
<section className="slice-area person-map CONSTRAIN">
<div className="person-map-headers">
<div className="person-map-headers-inner">
<h1 className="person-map-title">
{this.props.title}
</h1>
<p className="person-map-disclaimer">
{this.props.disclaimer}
</p>
</div>
</div>
{
!this.state.isDesktop &&
<div className="person-map-graphic" ref={this.setTopRef}>
{
this.props.personStories.map(person => (
<PersonMapLocator
x={person.x}
y={person.y}
key={person.name}
>
<PersonMapPoint name={person.name}/>
</PersonMapLocator>
))
}
<PersonMapBackground isVisible={this.state.hasBeenScrolledTo} />
</div>
}
<div
className={`person-map-list-wrap${ this.state.isDesktop ? ' --desktop' : '' }`}
ref={this.state.isDesktop && this.setTopRef}
>
{ this.state.isDesktop &&
<PersonMapBackground isVisible={this.state.hasBeenScrolledTo}/>
}
<ul className="person-map-list">
{
this.props.personStories.map((person) => {
const thisPersonIsQueued = this.state.queuedUpPerson === person.name
const thisPersonIsActive = this.state.activePerson === person.name
const thisPersonWasLastQueued = this.state.lastQueuedPerson === person.name
return (
<li
key={person.name} className={`person-map-list-item${thisPersonWasLastQueued ? ' --active' : ''}`}
onMouseEnter={this.state.isDesktop ? (e) => this.setQueuedUpPerson(e, person.name) : null}
onMouseLeave={this.state.isDesktop ? this.setNoQueuedUpPerson : null}
onFocus={this.state.isDesktop ? (e) => this.setQueuedUpPerson(e, person.name) : null}
onBlur={this.state.isDesktop ? this.checkBlurEvent : null}
onClick={thisPersonIsQueued || !this.state.isDesktop ? () => this.setActivePerson(person.name) : null}
onKeyPress={(e) => this.handleKeyPress(e, person.name)}
>
{
this.state.isDesktop ?
<PersonMapLocator
x={person.x}
y={person.y}
>
<PersonMapPoint
name={person.name}
isInteractive
isActive={thisPersonIsQueued}
imageUrl={person.photo_url}
/>
<PersonMapCallout
name={person.name}
photo={person.photo_url}
isOpen={thisPersonIsQueued}
isDesktop
/>
</PersonMapLocator> :
<PersonMapCallout
name={person.name}
photo={person.photo_url}
/>
}
<Modal
isOpen={thisPersonIsActive}
onRequestClose={this.setNoActivePerson}
style={CUSTOM_STYLES}
>
<PersonMapStory
name={person.name}
photo={person.photo_url}
story={person.story}
setNoActivePerson={this.setNoActivePerson}
setActivePerson={this.setActivePerson}
isActive={thisPersonIsActive}
otherPersons={this.props.personStories.filter((item) => item.name !== person.name).map((item) => ({ name: item.name, photo: item.photo_url }))}
isDesktop={this.state.isDesktop}
/>
</Modal>
</li>
)
})
}
</ul>
</div>
</section>
)
}
}
PersonMap.propTypes = {
title: PropTypes.string,
disclaimer: PropTypes.string,
personStories: PropTypes.arrayOf(PropTypes.shape({
name: PropTypes.string,
photo_url: PropTypes.string,
x: PropTypes.number,
y: PropTypes.number,
story: PropTypes.shape({
title: PropTypes.string,
link: PropTypes.string,
content: PropTypes.arrayOf(PropTypes.shape({
question: PropTypes.string,
answer: PropTypes.string
}))
})
}))
}
export default PersonMap
Original PersonMap.js:
import Modal from 'react-modal'
import PropTypes from 'prop-types'
import React from 'react'
import PersonMapPoint from './PersonMapPoint'
import PersonMapStory from './PersonMapStory'
import PersonMapCallout from './PersonMapCallout'
import PersonMapLocator from './PersonMapLocator'
import PersonMapBackground from './PersonMapBackground'
const CUSTOM_STYLES = {
content: {
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: '#fff',
zIndex: 10,
border: 'none'
}
}
class PersonMap extends React.Component {
constructor(props) {
super(props)
this.setActivePerson = this.setActivePerson.bind(this)
this.setNoActivePerson = this.setNoActivePerson.bind(this)
this.setQueuedUpPerson = this.setQueuedUpPerson.bind(this)
this.setNoQueuedUpPerson = this.setNoQueuedUpPerson.bind(this)
this.checkBlurEvent = this.checkBlurEvent.bind(this)
this.setIsDesktop = this.setIsDesktop.bind(this)
this.checkHasBeenScrolledTo = this.checkHasBeenScrolledTo.bind(this)
this.setTopRef = this.setTopRef.bind(this)
this.handleKeyPress = this.handleKeyPress.bind(this)
this.state = {
activePerson: null,
queuedUpPerson: null,
scrollPos: 0,
isDesktop: false,
hasBeenScrolledTo: false,
lastQueuedPerson: null
}
}
componentDidMount() {
this.setIsDesktop()
this.checkHasBeenScrolledTo()
window.addEventListener('resize', this.setIsDesktop)
window.addEventListener('scroll', this.checkHasBeenScrolledTo)
}
componentWillUnmount() {
window.removeEventListener('resize', this.setIsDesktop)
window.removeEventListener('scroll', this.checkHasBeenScrolledTo)
}
setTopRef(element) {
this.topRef = element
}
setActivePerson(personName) {
this.setState({
activePerson: personName,
scrollPos: window.scrollY
})
event.stopPropagation()
}
setNoActivePerson() {
this.setState({
queuedUpPerson: this.state.activePerson,
activePerson: null
}, () => {
setTimeout(() => {
window.scrollTo(0, this.state.scrollPos)
}, 50)
})
}
setQueuedUpPerson(personName) {
this.setState({
queuedUpPerson: personName,
lastQueuedPerson: personName
})
}
setNoQueuedUpPerson() {
this.setState({
queuedUpPerson: null
})
event.stopPropagation()
}
handleKeyPress(e, name) {
if (e.key !== ' ' && e.key !== 'Enter') {
return
}
this.setActivePerson(name)
}
checkBlurEvent(e) {
if (Array.from(e.currentTarget.childNodes[0].childNodes).includes(e.relatedTarget)) {
return
}
this.setNoQueuedUpPerson()
}
render() {
return (
<section className="slice-area person-map CONSTRAIN">
<div className="person-map-headers">
<div className="person-map-headers-inner">
<h1 className="person-map-title">
{this.props.title}
</h1>
<p className="person-map-disclaimer">
{this.props.disclaimer}
</p>
</div>
</div>
<div
className={`person-map-list-wrap${ this.state.isDesktop ? ' --desktop' : '' }`}
ref={this.state.isDesktop && this.setTopRef}
>
{ this.state.isDesktop &&
<PersonMapBackground isVisible={this.state.hasBeenScrolledTo}/>
}
<ul className="person-map-list">
{
this.props.personStories.map((person) => {
const thisPersonIsQueued = this.state.queuedUpPerson === person.name
const thisPersonIsActive = this.state.activePerson === person.name
const thisPersonWasLastQueued = this.state.lastQueuedPerson === person.name
return (
<li
key={person.name} className={`person-map-list-item${thisPersonWasLastQueued ? ' --active' : ''}`}
onMouseEnter={this.state.isDesktop ? () => this.setQueuedUpPerson(person.name) : null}
onMouseLeave={this.state.isDesktop ? this.setNoQueuedUpPerson : null}
onFocus={this.state.isDesktop ? () => this.setQueuedUpPerson(person.name) : null}
onBlur={this.state.isDesktop ? this.checkBlurEvent : null}
onClick={thisPersonIsQueued || !this.state.isDesktop ? () => this.setActivePerson(person.name) : null}
onKeyPress={(e) => this.handleKeyPress(e, person.name)}
>
{
<PersonMapLocator
x={person.x}
y={person.y}
>
}
<Modal
isOpen={thisPersonIsActive}
onRequestClose={this.setNoActivePerson}
style={CUSTOM_STYLES}
>
<PersonMapStory
name={person.name}
photo={person.photo_url}
story={person.story}
setNoActivePerson={this.setNoActivePerson}
setActivePerson={this.setActivePerson}
isActive={thisPersonIsActive}
otherPersons={this.props.personStories.filter((item) => item.name !== person.name).map((item) => ({ name: item.name, photo: item.photo_url }))}
isDesktop={this.state.isDesktop}
/>
</Modal>
</li>
)
})
}
</ul>
</div>
</section>
)
}
}
PersonMap.propTypes = {
title: PropTypes.string,
disclaimer: PropTypes.string,
personStories: PropTypes.arrayOf(PropTypes.shape({
name: PropTypes.string,
photo_url: PropTypes.string,
x: PropTypes.number,
y: PropTypes.number,
story: PropTypes.shape({
title: PropTypes.string,
link: PropTypes.string,
content: PropTypes.arrayOf(PropTypes.shape({
question: PropTypes.string,
answer: PropTypes.string
}))
})
}))
}
export default PersonMap
PersonMapStory.js:
import PropTypes from 'prop-types'
import React from 'react'
import PersonMapPerson from './PersonMapPerson'
class PersonMapStory extends React.Component {
constructor(props) {
console.log("PersonMapStory constructor")
super(props)
this.deactivateThisPerson = this.deactivateThisPerson.bind(this)
this.check = 0
}
deactivateThisPerson(backPressed = false) {
if (!backPressed) {
history.back()
}
console.log("Set no active person ")
this.props.setNoActivePerson()
}
setActivePerson(name) {
this.props.setActivePerson(name)
event.stopPropagation()
}
componentDidMount() {
const loc = window.location.pathname.substr(1)
this.setState({ location: loc })
const openState = { modalOpen: true }
history.pushState(openState, 'signup-open', loc)
}
render() {
return (
<div className={`person-map-story${this.props.isActive ? ' --active' : ''}${this.props.isDesktop ? ' --desktop' : ''}`}>
<h2 className="person-map-story-title">
{ this.props.story.title }
</h2>
<button className="person-map-story-close-button" onClick={() => {this.deactivateThisPerson(false)}}>
<span className="person-map-story-close-button-text">
Close Story
</span>
</button>
<div className="person-map-story-body">
<span className="person-map-story-person-wrap">
<PersonMapPerson
photo={this.props.photo}
name={this.props.name}
/>
</span>
{
this.props.story.content.map((section) => {
if (section) {
return (
<div key={section.question}>
<h3 className="person-map-story-question">{section.question}</h3>
<p className="person-map-story-answer">
{section.answer}
</p>
</div>
)
}
})
}
{
this.props.story.link &&
<a href={this.props.story.link}
target="_blank"
className="person-map-story-more-link header-and-text-link"
> Read More Stories
</a>
}
<ul className="person-map-story-other-list">
{
this.props.otherPersons.map((person) => (
<li
key={person.name}
className="person-map-story-other-list-item"
>
<button className="person-map-story-other-button" onClick={() => this.setActivePerson(person.name)}>
<PersonMapPerson
name={person.name}
photo={person.photo}
ctaText="View their story"
/>
</button>
</li>
))
}
</ul>
</div>
</div>
)
}
}
PersonMapStory.propTypes = {
name: PropTypes.string,
photo: PropTypes.string,
story: PropTypes.shape({
title: PropTypes.string,
link: PropTypes.string,
content: PropTypes.arrayOf(PropTypes.shape({
question: PropTypes.string,
answer: PropTypes.string
}))
}),
setNoActivePerson: PropTypes.func,
setActivePerson: PropTypes.func,
isActive: PropTypes.bool,
otherPersons: PropTypes.arrayOf(PropTypes.shape({
name: PropTypes.string,
photo: PropTypes.string
})),
isDesktop: PropTypes.bool
}
export default PersonMapStory

UPDATE (as below does not work):
Could you key off there being an activePerson in state as to whether the modal is open or not, which would mean you wouldn't want setQueuedUpPerson or setNoQueuedUpPerson to call? Either change them like this:
setQueuedUpPerson(e, personName) {
if(!this.state.activePerson) {
this.setState({
queuedUpPerson: personName,
lastQueuedPerson: personName
})
}
e.stopPropagation()
}
setNoQueuedUpPerson(e) {
if(!this.state.activePerson) {
this.setState({
queuedUpPerson: null
})
}
e.stopPropagation()
}
Or make the onMouseEnter and onMouseLeave events null if there is an activePerson?
You should be able to change
onMouseEnter={this.state.isDesktop ? () => this.setQueuedUpPerson(person.name) : null}
to
onMouseEnter={this.state.isDesktop ? (e) => this.setQueuedUpPerson(e,person.name) : null}
And then access the event as with your previous question to stop propagation:
setQueuedUpPerson(event, personName) {
this.setState({
queuedUpPerson: personName,
lastQueuedPerson: personName
})
event.stopPropagation()
}
With onMouseLeave, you just need to add the event parameter to your function as it is already exposed since you are passing the function reference directly, as opposed to calling it from an anonymous function like with onMouseEnter:
setNoQueuedUpPerson(event) {
this.setState({
queuedUpPerson: null
})
event.stopPropagation()
}

I'm using the https://github.com/locomotivemtl/locomotive-scroll plugin in react to enable smooth scrolling. I'm trying to get it to do a Continuous scroll so it will loop round no matter what direction you scroll in by adding and removing items in the state array to change the order.
This works but causes some super flicker.
coulep of demos is
https://codesandbox.io/s/heuristic-resonance-0ybkl
https://codesandbox.io/s/young-wind-ozeeq
https://codesandbox.io/s/patient-darkness-6gxj1
Any help would be appreciated
code below
import React from "react";
import ReactDOM from "react-dom";
import LocomotiveScroll from "locomotive-scroll";
import "./styles.css";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
limit: null,
items: [
"https://www.fillmurray.com/640/460",
"https://www.fillmurray.com/g/640/560",
"https://www.fillmurray.com/640/760",
"https://www.fillmurray.com/g/640/860",
"https://www.fillmurray.com/640/160",
"https://www.fillmurray.com/g/640/260",
"https://www.fillmurray.com/g/640/360",
"https://www.fillmurray.com/g/640/460"
]
};
}
componentDidMount() {
const target = document.querySelector("#view");
const scroll = new LocomotiveScroll({
el: target,
smooth: true,
smoothMobile: true,
getDirection: true
});
scroll.on("scroll", obj => {
console.log(obj.scroll.y);
if (this.state.limit !== null) {
if (obj.direction === "up") {
var current = this.state.items;
var first = current.shift();
current.push(first);
this.setState(
{
items: current
},
() => {
scroll.update();
}
);
}
if (obj.direction === "down") {
current = this.state.items;
var last = current.pop();
current.unshift(last);
this.setState(
{
items: current
},
() => {
scroll.update();
}
);
}
} else {
var halfway = obj.limit / 2;
scroll.scrollTo(target, halfway);
this.setState({
limit: obj.limit
});
}
});
scroll.scrollTo(target, 1);
}
render() {
return (
<div className="App">
<div id="view">
<div className="left">
{this.state.items.map(item => {
return <img src={item} alt="" />;
})}
</div>
</div>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

The reason you are getting flickering is because the entire component is re-rendering on the scroll event and your elements don't have a key on them.
this.setState(
{
items: current
},
() => {
scroll.update();
}
);
In the above code, you set the state on a scroll event which will cause a full re-render of the list. You need to set a key on your elements that are in a map func.
Key docs
Code Sandbox
import React from "react";
import ReactDOM from "react-dom";
import LocomotiveScroll from "locomotive-scroll";
import "./styles.css";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
limit: null,
items: [
"https://www.fillmurray.com/640/460",
"https://www.fillmurray.com/g/640/560",
"https://www.fillmurray.com/640/760",
"https://www.fillmurray.com/g/640/860",
"https://www.fillmurray.com/640/160",
"https://www.fillmurray.com/g/640/260",
"https://www.fillmurray.com/g/640/360",
"https://www.fillmurray.com/g/640/460"
]
};
}
componentDidMount() {
const target = document.querySelector("#view");
const scroll = new LocomotiveScroll({
el: target,
smooth: true,
smoothMobile: true,
getDirection: true
});
scroll.on("scroll", ({ limit, direction }) => {
if (this.state.limit !== null) {
if (direction === "up") {
console.log("up");
var current = this.state.items;
var last = current.pop();
current.unshift(last);
this.setState(
{
items: current
},
() => {
scroll.update();
}
);
}
if (direction === "down") {
current = this.state.items;
var first = current.shift();
current.push(first);
this.setState(
{
items: current
},
() => {
scroll.update();
}
);
}
} else {
var halfway = limit / 2;
scroll.scrollTo(target, halfway);
this.setState({
limit
});
}
});
scroll.scrollTo(target, 1);
}
render() {
return (
<div className="App">
<div id="view">
<div className="left">
{this.state.items.map((item, idx) => {
return <img key={`${item}${idx}`} src={item} alt="" />;
})}
</div>
</div>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

I wanted to show logoff button after user signs in and hide visibility of button after the user logged out. Menu items are coming from Menu.js file.
The current workflow of the app is, if user signed in, the auth state is updated in the store, based on that state, I wanted to show a logoff Button in Menu.
The auth state is correctly updated in Redux store on login and I can get the value of auth in Menu.js File from Redux store, but the change is not rendered in Siderbar.js until i refresh the page.
What should i need to do in sidebar.js to fetch the menu on auth state change in Store.
Siderbar.js
<pre><code>
import React, { Component } from 'react';
import { withNamespaces, Trans } from 'react-i18next';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Link, withRouter } from 'react-router-dom';
import { Collapse, Badge } from 'reactstrap';
import SidebarRun from './Sidebar.run';
import SidebarUserBlock from './SidebarUserBlock';
import Menu from '../../Menu';
/** Component to display headings on sidebar */
const SidebarItemHeader = ({item}) => (
<li className="nav-heading">
<span><Trans i18nKey={item.translate}>{item.heading}</Trans></span>
</li>
)
/** Normal items for the sidebar */
const SidebarItem = ({item, isActive}) => (
<li className={ isActive ? 'active' : '' }>
<Link to={item.path} title={item.name}>
{item.label && <Badge tag="div" className="float-right" color={item.label.color}>{item.label.value}</Badge>}
{item.icon && <em className={item.icon}></em>}
<span><Trans i18nKey={item.translate}>{item.name}</Trans></span>
</Link>
</li>
)
/** Build a sub menu with items inside and attach collapse behavior */
const SidebarSubItem = ({item, isActive, handler, children, isOpen}) => (
<li className={ isActive ? 'active' : '' }>
<div className="nav-item" onClick={ handler }>
{item.label && <Badge tag="div" className="float-right" color={item.label.color}>{item.label.value}</Badge>}
{item.icon && <em className={item.icon}></em>}
<span><Trans i18nKey={item.translate}>{item.name}</Trans></span>
</div>
<Collapse isOpen={ isOpen }>
<ul id={item.path} className="sidebar-nav sidebar-subnav">
{ children }
</ul>
</Collapse>
</li>
)
/** Component used to display a header on menu when using collapsed/hover mode */
const SidebarSubHeader = ({item}) => (
<li className="sidebar-subnav-header">{item.name}</li>
)
class Sidebar extends Component {
state = {
collapse: {},
isLoggedIn: ''
}
componentDidMount() {
// pass navigator to access router api
SidebarRun(this.navigator.bind(this));
// prepare the flags to handle menu collapsed states
this.buildCollapseList()
}
/** prepare initial state of collapse menus. Doesnt allow same route names */
buildCollapseList = () => {
let collapse = {};
Menu
.filter(({heading}) => !heading)
.forEach(({name, path, submenu}) => {
collapse[name] = this.routeActive(submenu ? submenu.map(({path})=>path) : path)
})
this.setState({collapse});
}
navigator(route) {
this.props.history.push(route);
}
routeActive(paths) {
paths = Array.isArray(paths) ? paths : [paths];
return paths.some(p => this.props.location.pathname.indexOf(p) > -1)
}
toggleItemCollapse(stateName) {
for (let c in this.state.collapse) {
if (this.state.collapse[c] === true && c !== stateName)
this.setState({
collapse: {
[c]: false
}
});
}
this.setState({
collapse: {
[stateName]: !this.state.collapse[stateName]
}
});
}
getSubRoutes = item => item.submenu.map(({path}) => path)
/** map menu config to string to determine what element to render */
itemType = item => {
if (item){
// console.log(item)
if (item.heading) return 'heading';
if (!item.submenu) return 'menu';
if (item.submenu) return 'submenu';
}}
render() {
return (
<aside className='aside-container'>
{ /* START Sidebar (left) */ }
<div className="aside-inner">
<nav data-sidebar-anyclick-close="" className="sidebar">
{ /* START sidebar nav */ }
<ul className="sidebar-nav">
{ /* START user info */ }
<li className="has-user-block">
<SidebarUserBlock/>
</li>
{ /* END user info */ }
{ /* Iterates over all sidebar items */ }
{
Menu.map((item, i) => {
// heading
if(this.itemType(item) === 'heading')
return (
<SidebarItemHeader item={item} key={i} />
)
else {
if(this.itemType(item) === 'menu')
return (
<SidebarItem isActive={this.routeActive(item.path)} item={item} key={i} />
)
if(this.itemType(item) === 'submenu')
return [
<SidebarSubItem item={item} isOpen={this.state.collapse[item.name]} handler={ this.toggleItemCollapse.bind(this, item.name) } isActive={this.routeActive(this.getSubRoutes(item))} key={i}>
<SidebarSubHeader item={item} key={i}/>
{
item.submenu.map((subitem, i) =>
<SidebarItem key={i} item={subitem} isActive={this.routeActive(subitem.path)} />
)
}
</SidebarSubItem>
]
}
return null; // unrecognized item
})
}
</ul>
{ /* END sidebar nav */ }
</nav>
</div>
{ /* END Sidebar (left) */ }
</aside>
);
}
}
Sidebar.propTypes = {
isLoggedIn: PropTypes.object.isRequired
};
const mapStateToProps = (state, ownProps) => {
// console.log("Sidebar: ", state.auth);
return{
isLoggedIn: state.auth,
}}
export default connect(mapStateToProps)(withRouter(Sidebar));
What should i do in Sidebar.js, that it re-renders the menu on auth state change.
Any help would be highly appreciated.
Menu.js File
import configureStore from './store/store';
const store = configureStore();
function select(state) {
return state.auth
}
let loggedIn = select(store.getState());
let Meu = [
{
name: 'Analytics',
icon: 'icon-speedometer',
translate: 'sidebar.nav.DASHBOARD',
submenu: [{
name: 'Overview',
path: '/dashboard',
translate: 'sidebar.nav.element.HOME'
},
{
name: 'Revenue',
path: '/revenue',
translate: 'sidebar.nav.element.REVENUE'
},
{
name: 'Source',
path: '/source',
translate: 'sidebar.nav.element.SOURCE'
},
{
name: 'Marketing',
path: '/marketing',
translate: 'sidebar.nav.element.MARKETING'
}
]
},
{
name: 'Tools',
icon: 'fa fa-briefcase',
translate: 'sidebar.nav.TOOLS',
submenu: [
{
name: 'Customer Service',
path: '/customer-service',
translate: 'sidebar.nav.element.CUSTOMER-SERVICE'
}
]
},
{
name: 'Settings',
icon: 'icon-settings',
translate: 'sidebar.nav.SETTINGS',
submenu: [{
name: 'Profile Settings',
path: '/profile',
translate: 'sidebar.nav.element.PROFILE-SETTINGS'
},
{
name: 'Company Settings',
path: '/company-settings',
translate: 'sidebar.nav.element.SETTINGS'
}
]
},
{(loggedIn.authResponse) ?
({
name: 'Logoff',
icon: 'icon-lock',
path: '/logoff'
}) : null
}
];
const Menu = Meu.filter(word => word !== null)
export default (Menu)

Inside the parent component of your log out button you can conditionally render the log out button; take note this means your parent component is connected to redux via connect(mapStateToProps)
{ this.props.isLoggedIn ? <Button>Log Out</Button> : null }

I have a calendar builded with React and Redux. By clicking on any empty date, the modal appears that allows to add some event.
The problem is I can't figure out how to edit that event afterwards by clicking on it. What is the right algorithms?
Here is the calendar page code
/* eslint-disable no-unused-vars */
import React, { PropTypes } from 'react';
import moment from 'moment-timezone';
import Helmet from 'react-helmet';
import _ from 'lodash';
import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';
import { GoogleLogin, GoogleLogout } from 'react-google-login';
import { reduxForm, reset } from 'redux-form';
import BigCalendar from 'react-big-calendar';
import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop';
import 'react-big-calendar/lib/less/styles.less';
import 'react-big-calendar/lib/addons/dragAndDrop/styles.less';
import AddCalendarEventForm from '../../../app/components/AddCalendarEventForm';
import { translate } from '../../../common/utilities/localization';
import {
selectCurrentUser,
selectCurrentGoogleUser,
} from '../../containers/App/selectors';
import {
submitGoogleAuth,
fetchGoogleCalendarEvents,
editGoogleCalendarEvent,
addGoogleCalendarEvent,
} from './actions';
import {
selectGoogleAuth,
selectCalendarEvents,
selectAddEventProcess,
} from './selectors';
const formName = 'addCalendarEvent';
const DragAndDropCalendar = withDragAndDrop(BigCalendar);
const localizer = BigCalendar.momentLocalizer(moment);
const mapStateToProps = createStructuredSelector({
currentUser: selectCurrentUser(),
currentGoogleUser: selectCurrentGoogleUser(),
googleAuth: selectGoogleAuth(),
calendarEvents: selectCalendarEvents(),
addEventProcess: selectAddEventProcess(),
});
const mapDispatchToProps = (dispatch) => ({
submitGoogleAuth: (externalUserId, googleToken) => dispatch(submitGoogleAuth(externalUserId, googleToken)),
fetchGoogleCalendarEvents: (data) => dispatch(fetchGoogleCalendarEvents(data)),
editGoogleCalendarEvent: (data) => dispatch(editGoogleCalendarEvent(data)),
addGoogleCalendarEvent: (data) => dispatch(addGoogleCalendarEvent(data)),
resetForm: () => dispatch(reset(formName)),
});
#reduxForm({
form: formName,
})
#connect(mapStateToProps, mapDispatchToProps)
export default class CalendarPage extends React.Component {
static propTypes = {
currentUser: PropTypes.any,
currentGoogleUser: PropTypes.any,
submitGoogleAuth: PropTypes.func.isRequired,
googleAuth: PropTypes.object,
fetchGoogleCalendarEvents: PropTypes.func,
calendarEvents: PropTypes.object,
editGoogleCalendarEvent: PropTypes.func,
addGoogleCalendarEvent: PropTypes.func,
addEventProcess: PropTypes.object,
resetForm: PropTypes.func,
};
constructor(props) {
super(props);
this.state = {
events: [],
show: null,
calendarEvent: null,
};
this.onSuccess = this.onSuccess.bind(this);
this.onFailure = this.onFailure.bind(this);
this.moveEvent = this.moveEvent.bind(this);
this.newEvent = this.newEvent.bind(this);
this.showEventModal = this.showEventModal.bind(this);
this.hideEventModal = this.hideEventModal.bind(this);
}
componentDidMount() {
const { currentUser, currentGoogleUser } = this.props;
if (currentGoogleUser && currentGoogleUser.expires_at && moment(currentGoogleUser.expires_at).isAfter(moment())) {
this.props.fetchGoogleCalendarEvents({ ...currentGoogleUser, userId: currentUser.id });
}
}
componentWillReceiveProps(nextProps) {
if (nextProps.currentGoogleUser !== this.props.currentGoogleUser) {
this.props.fetchGoogleCalendarEvents({ ...nextProps.currentGoogleUser, userId: nextProps.currentUser.id });
}
if (nextProps.calendarEvents && nextProps.calendarEvents.details) {
const events = [];
for (const item of nextProps.calendarEvents.details.items) {
if (item.start && item.end) {
events.push({
id: item.id,
title: item.summary,
start: moment(item.start.dateTime || item.start.date),
end: moment(item.end.dateTime || item.end.date),
});
}
}
this.setState({ events });
}
if (!nextProps.addEventProcess.isSubmitting && this.props.addEventProcess.isSubmitting) {
this.hideEventModal();
}
}
onSuccess(ev) {
const { submitGoogleAuth, currentUser } = this.props;
submitGoogleAuth(currentUser.id, { ...ev.tokenObj, profileEmail: ev.profileObj.email });
}
onFailure(ev) {
console.log('onFailure', ev);
}
moveEvent({ event, start, end, isAllDay: droppedOnAllDaySlot }) {
const { currentUser, editGoogleCalendarEvent, calendarEvents } = this.props;
const { events } = this.state;
let onlyDate = false;
const idx = events.indexOf(event);
const eventIndex = _.findIndex(calendarEvents.details.items, { id: event.id });
let allDay = event.allDay;
if (!event.allDay && droppedOnAllDaySlot) {
allDay = true;
} else if (event.allDay && !droppedOnAllDaySlot) {
allDay = false;
}
const updatedEvent = { ...event, start, end, allDay };
const nextEvents = [...events];
nextEvents.splice(idx, 1, updatedEvent);
if (eventIndex !== -1) {
const item = calendarEvents.details.items[eventIndex];
if (item.start.date && item.end.date) {
updatedEvent.start = moment(start).format('YYYY-MM-DD');
updatedEvent.end = moment(end).format('YYYY-MM-DD');
onlyDate = true;
}
}
this.setState({
events: nextEvents,
}, () => {
editGoogleCalendarEvent({ ...updatedEvent, userId: currentUser.id, timezone: currentUser.timezone, onlyDate });
});
}
resizeEvent = ({ event, start, end }) => {
const { events } = this.state;
const nextEvents = events.map(existingEvent => {
return existingEvent.id === event.id
? { ...existingEvent, start, end }
: existingEvent;
});
this.setState({
events: nextEvents,
});
// console.log(`${event.title} was resized to ${start}-${end}`);
}
newEvent(params) {
const { currentUser, addGoogleCalendarEvent } = this.props;
const { event, formValues } = params;
const newEvent = {
title: formValues.title,
description: formValues.description ? formValues.description : null,
allDay: event.slots.length === 1,
start: moment(event.start).hours(formValues.period === 'AM' ? formValues.hour % 12 : (formValues.hour % 12) + 12).minutes(formValues.minute).toISOString(),
end: moment(event.end).hours(formValues.period === 'AM' ? formValues.hour % 12 : (formValues.hour % 12) + 12).minutes(formValues.minute).toISOString(),
};
this.setState({
calendarEvent: null,
}, () => {
addGoogleCalendarEvent({ ...newEvent, userId: currentUser.id, timezone: currentUser.timezone });
});
}
showEventModal(event) {
this.setState({ calendarEvent: event, show: true });
}
hideEventModal() {
const { resetForm } = this.props;
this.setState({ show: false, calendarEvent: null }, () => {
resetForm();
});
}
render() {
const { currentGoogleUser, addEventProcess } = this.props;
let authorized = false;
if (currentGoogleUser && currentGoogleUser.expires_at) {
authorized = moment(currentGoogleUser.expires_at).isAfter(moment());
}
return (
<div>
<div className="container-fluid">
<Helmet title={translate('portals.page.calendarPage.helmetTitle')} />
<section className="calendar-section">
<h2 className="main-heading">{translate('portals.page.calendarPage.pageTitle')}</h2>
{!authorized &&
<GoogleLogin
clientId={GOOGLE_CLIENT_ID}
scope="https://www.googleapis.com/auth/calendar"
className="google-login"
onSuccess={this.onSuccess}
onFailure={this.onFailure}
>
<i className="google-image" />
<span> Sign in with Google</span>
</GoogleLogin>
}
{authorized &&
<DragAndDropCalendar
selectable
events={this.state.events}
localizer={localizer}
onEventDrop={this.moveEvent}
resizable
onEventResize={this.resizeEvent}
onSelectSlot={this.showEventModal}
onSelectEvent={(e) => { console.log('e', e); }}
defaultView={BigCalendar.Views.MONTH}
defaultDate={new Date()}
views={{ month: true }}
/>
}
<AddCalendarEventForm
show={this.state.show}
isSubmitting={addEventProcess.isSubmitting}
calendarEvent={this.state.calendarEvent}
onSubmit={this.newEvent}
onHide={this.hideEventModal}
/>
</section>
</div>
</div>
);
}
}
And here is AddEventForm code
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';
import { Field, touch, reduxForm, reset } from 'redux-form';
import { Modal } from 'react-bootstrap';
import _ from 'lodash';
import Input from '../../../common/components/Input';
import ReactSelect from '../../../common/components/Input/ReactSelect';
import CenteredModal from '../../../common/components/CenteredModal/index';
import LoadingSpinner from '../../components/LoadingSpinner';
import { selectCurrentUser } from '../../containers/App/selectors';
import { selectSyncErrorBool, selectSyncErrors, selectValues } from '../../common/selectors/form.selector';
import validator, { fields } from './validator';
const formName = 'addCalendarEvent';
function numberSequenceCreator(start, end) {
return _.range(start, end).map(n => {
if (n < 10) {
return {
label: `0${n}`,
value: n.toString(),
};
}
return {
label: n.toString(),
value: n.toString(),
};
});
}
const hourOptions = numberSequenceCreator(1, 13);
const minuteOptions = numberSequenceCreator(0, 60);
const periodOptions = [
{ label: 'AM', value: 'AM' },
{ label: 'PM', value: 'PM' },
];
const mapDispatchToProps = (dispatch) => ({
touchFields: () => dispatch(touch(formName, ...fields)),
resetForm: () => dispatch(reset(formName)),
});
const mapStateToProps = createStructuredSelector({
currentUser: selectCurrentUser(),
formError: selectSyncErrorBool(formName),
formErrors: selectSyncErrors(formName),
formValues: selectValues(formName),
});
#reduxForm({
form: formName,
validate: validator,
enableReinitialize: true,
keepDirtyOnReinitialize: false,
})
#connect(mapStateToProps, mapDispatchToProps)
export default class AddCalendarEventForm extends Component { // eslint-disable-line react/prefer-stateless-function
static propTypes = {
resetForm: PropTypes.func,
currentUser: PropTypes.object,
formError: PropTypes.bool,
formErrors: PropTypes.object,
formValues: PropTypes.object,
show: PropTypes.bool,
onHide: PropTypes.func,
onSubmit: PropTypes.func,
touchFields: React.PropTypes.func.isRequired,
calendarEvent: PropTypes.object,
isSubmitting: PropTypes.bool,
};
constructor(props) {
super(props);
this.handleCloseModal = this.handleCloseModal.bind(this);
this.handleFormSubmit = this.handleFormSubmit.bind(this);
}
handleCloseModal() {
this.props.resetForm();
this.props.onHide(false);
}
handleFormSubmit(event) {
event.preventDefault();
const { formError, formValues, onSubmit, calendarEvent, touchFields } = this.props;
if (!formValues.title || !formValues.period || !formValues.hour || !formValues.minute) {
touchFields();
} else if (!formError) {
onSubmit({ event: calendarEvent, formValues });
}
}
render() {
const { show, isSubmitting } = this.props;
return (
<div>
<Modal
className="edit-study-modal"
id="edit-study"
dialogComponentClass={CenteredModal}
show={show}
onHide={this.handleCloseModal}
backdrop
keyboard
>
<Modal.Header>
<Modal.Title>Add Calendar Event</Modal.Title>
<a className="lightbox-close close" onClick={this.handleCloseModal}>
<i className="icomoon-icon_close" />
</a>
</Modal.Header>
<Modal.Body>
<div className="form">
<div className="inner">
<form className="" onSubmit={this.handleFormSubmit}>
<div className="form-lightbox">
<div className="clearfix">
<div className="field-row">
<strong className="required label">
<label>Title</label>
</strong>
<div className="field">
<Field
name="title"
component={Input}
type="text"
/>
</div>
</div>
<div className="field-row time-field-row">
<strong className="label required">
<label>Time</label>
</strong>
<div className="field time-field">
<div className="row">
<div className="col-small pull-left hours">
<Field
name="hour"
placeholder="Hours"
options={hourOptions}
component={ReactSelect}
/>
</div>
<div className="col-small pull-left minutes">
<Field
name="minute"
placeholder="Minutes"
options={minuteOptions}
component={ReactSelect}
/>
</div>
<div className="col-small pull-left time-mode">
<Field
name="period"
placeholder="AM/PM"
options={periodOptions}
component={ReactSelect}
/>
</div>
</div>
</div>
</div>
<div className="field-row">
<strong className="label">
<label>Description</label>
</strong>
<Field
name="description"
component={Input}
className="field"
bsClass="form-control input-lg"
componentClass="textarea"
/>
</div>
<button
type="submit"
className="btn btn-default btn-submit pull-right"
>
{isSubmitting
? <span><LoadingSpinner showOnlyIcon size={20} /></span>
: <span>Submit</span>
}
</button>
</div>
</div>
</form>
</div>
</div>
</Modal.Body>
</Modal>
</div>
);
}
}

Here is the calendar page code
/* eslint-disable no-unused-vars */
import React, { PropTypes } from 'react';
import moment from 'moment-timezone';
import Helmet from 'react-helmet';
import _ from 'lodash';
import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';
import { GoogleLogin, GoogleLogout } from 'react-google-login';
import { reduxForm, reset } from 'redux-form';
import BigCalendar from 'react-big-calendar';
import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop';
import 'react-big-calendar/lib/less/styles.less';
import 'react-big-calendar/lib/addons/dragAndDrop/styles.less';
import AddCalendarEventForm from '../../../app/components/AddCalendarEventForm';
import { translate } from '../../../common/utilities/localization';
import {
selectCurrentUser,
selectCurrentGoogleUser,
} from '../../containers/App/selectors';
import {
submitGoogleAuth,
fetchGoogleCalendarEvents,
editGoogleCalendarEvent,
addGoogleCalendarEvent,
} from './actions';
import {
selectGoogleAuth,
selectCalendarEvents,
selectAddEventProcess,
} from './selectors';
const formName = 'addCalendarEvent';
const DragAndDropCalendar = withDragAndDrop(BigCalendar);
const localizer = BigCalendar.momentLocalizer(moment);
const mapStateToProps = createStructuredSelector({
currentUser: selectCurrentUser(),
currentGoogleUser: selectCurrentGoogleUser(),
googleAuth: selectGoogleAuth(),
calendarEvents: selectCalendarEvents(),
addEventProcess: selectAddEventProcess(),
});
const mapDispatchToProps = (dispatch) => ({
submitGoogleAuth: (externalUserId, googleToken) => dispatch(submitGoogleAuth(externalUserId, googleToken)),
fetchGoogleCalendarEvents: (data) => dispatch(fetchGoogleCalendarEvents(data)),
editGoogleCalendarEvent: (data) => dispatch(editGoogleCalendarEvent(data)),
addGoogleCalendarEvent: (data) => dispatch(addGoogleCalendarEvent(data)),
resetForm: () => dispatch(reset(formName)),
});
#reduxForm({
form: formName,
})
#connect(mapStateToProps, mapDispatchToProps)
export default class CalendarPage extends React.Component {
static propTypes = {
currentUser: PropTypes.any,
currentGoogleUser: PropTypes.any,
submitGoogleAuth: PropTypes.func.isRequired,
googleAuth: PropTypes.object,
fetchGoogleCalendarEvents: PropTypes.func,
calendarEvents: PropTypes.object,
editGoogleCalendarEvent: PropTypes.func,
addGoogleCalendarEvent: PropTypes.func,
addEventProcess: PropTypes.object,
resetForm: PropTypes.func,
};
constructor(props) {
super(props);
this.state = {
events: [],
show: null,
calendarEvent: null,
};
this.onSuccess = this.onSuccess.bind(this);
this.onFailure = this.onFailure.bind(this);
this.moveEvent = this.moveEvent.bind(this);
this.newEvent = this.newEvent.bind(this);
this.showEventModal = this.showEventModal.bind(this);
this.hideEventModal = this.hideEventModal.bind(this);
}
componentDidMount() {
const { currentUser, currentGoogleUser } = this.props;
if (currentGoogleUser && currentGoogleUser.expires_at && moment(currentGoogleUser.expires_at).isAfter(moment())) {
this.props.fetchGoogleCalendarEvents({ ...currentGoogleUser, userId: currentUser.id });
}
}
componentWillReceiveProps(nextProps) {
if (nextProps.currentGoogleUser !== this.props.currentGoogleUser) {
this.props.fetchGoogleCalendarEvents({ ...nextProps.currentGoogleUser, userId: nextProps.currentUser.id });
}
if (nextProps.calendarEvents && nextProps.calendarEvents.details) {
const events = [];
for (const item of nextProps.calendarEvents.details.items) {
if (item.start && item.end) {
events.push({
id: item.id,
title: item.summary,
start: moment(item.start.dateTime || item.start.date),
end: moment(item.end.dateTime || item.end.date),
});
}
}
this.setState({ events });
}
if (!nextProps.addEventProcess.isSubmitting && this.props.addEventProcess.isSubmitting) {
this.hideEventModal();
}
}
onSuccess(ev) {
const { submitGoogleAuth, currentUser } = this.props;
submitGoogleAuth(currentUser.id, { ...ev.tokenObj, profileEmail: ev.profileObj.email });
}
onFailure(ev) {
console.log('onFailure', ev);
}
moveEvent({ event, start, end, isAllDay: droppedOnAllDaySlot }) {
const { currentUser, editGoogleCalendarEvent, calendarEvents } = this.props;
const { events } = this.state;
let onlyDate = false;
const idx = events.indexOf(event);
const eventIndex = _.findIndex(calendarEvents.details.items, { id: event.id });
let allDay = event.allDay;
if (!event.allDay && droppedOnAllDaySlot) {
allDay = true;
} else if (event.allDay && !droppedOnAllDaySlot) {
allDay = false;
}
const updatedEvent = { ...event, start, end, allDay };
const nextEvents = [...events];
nextEvents.splice(idx, 1, updatedEvent);
if (eventIndex !== -1) {
const item = calendarEvents.details.items[eventIndex];
if (item.start.date && item.end.date) {
updatedEvent.start = moment(start).format('YYYY-MM-DD');
updatedEvent.end = moment(end).format('YYYY-MM-DD');
onlyDate = true;
}
}
this.setState({
events: nextEvents,
}, () => {
editGoogleCalendarEvent({ ...updatedEvent, userId: currentUser.id, timezone: currentUser.timezone, onlyDate });
});
}
resizeEvent = ({ event, start, end }) => {
const { events } = this.state;
const nextEvents = events.map(existingEvent => {
return existingEvent.id === event.id
? { ...existingEvent, start, end }
: existingEvent;
});
this.setState({
events: nextEvents,
});
// console.log(`${event.title} was resized to ${start}-${end}`);
}
newEvent(params) {
const { currentUser, addGoogleCalendarEvent } = this.props;
const { event, formValues } = params;
const newEvent = {
title: formValues.title,
description: formValues.description ? formValues.description : null,
allDay: event.slots.length === 1,
start: moment(event.start).hours(formValues.period === 'AM' ? formValues.hour % 12 : (formValues.hour % 12) + 12).minutes(formValues.minute).toISOString(),
end: moment(event.end).hours(formValues.period === 'AM' ? formValues.hour % 12 : (formValues.hour % 12) + 12).minutes(formValues.minute).toISOString(),
};
this.setState({
calendarEvent: null,
}, () => {
addGoogleCalendarEvent({ ...newEvent, userId: currentUser.id, timezone: currentUser.timezone });
});
}
showEventModal(event) {
this.setState({ calendarEvent: event, show: true });
}
hideEventModal() {
const { resetForm } = this.props;
this.setState({ show: false, calendarEvent: null }, () => {
resetForm();
});
}
render() {
const { currentGoogleUser, addEventProcess } = this.props;
let authorized = false;
if (currentGoogleUser && currentGoogleUser.expires_at) {
authorized = moment(currentGoogleUser.expires_at).isAfter(moment());
}
return (
<div>
<div className="container-fluid">
<Helmet title={translate('portals.page.calendarPage.helmetTitle')} />
<section className="calendar-section">
<h2 className="main-heading">{translate('portals.page.calendarPage.pageTitle')}</h2>
{!authorized &&
<GoogleLogin
clientId={GOOGLE_CLIENT_ID}
scope="https://www.googleapis.com/auth/calendar"
className="google-login"
onSuccess={this.onSuccess}
onFailure={this.onFailure}
>
<i className="google-image" />
<span> Sign in with Google</span>
</GoogleLogin>
}
{authorized &&
<DragAndDropCalendar
selectable
events={this.state.events}
localizer={localizer}
onEventDrop={this.moveEvent}
resizable
onEventResize={this.resizeEvent}
onSelectSlot={this.showEventModal}
onSelectEvent={(e) => { console.log('e', e); }}
defaultView={BigCalendar.Views.MONTH}
defaultDate={new Date()}
views={{ month: true }}
/>
}
<AddCalendarEventForm
show={this.state.show}
isSubmitting={addEventProcess.isSubmitting}
calendarEvent={this.state.calendarEvent}
onSubmit={this.newEvent}
onHide={this.hideEventModal}
/>
</section>
</div>
</div>
);
}
}
And here is AddEventForm code
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';
import { Field, touch, reduxForm, reset } from 'redux-form';
import { Modal } from 'react-bootstrap';
import _ from 'lodash';
import Input from '../../../common/components/Input';
import ReactSelect from '../../../common/components/Input/ReactSelect';
import CenteredModal from '../../../common/components/CenteredModal/index';
import LoadingSpinner from '../../components/LoadingSpinner';
import { selectCurrentUser } from '../../containers/App/selectors';
import { selectSyncErrorBool, selectSyncErrors, selectValues } from '../../common/selectors/form.selector';
import validator, { fields } from './validator';
const formName = 'addCalendarEvent';
function numberSequenceCreator(start, end) {
return _.range(start, end).map(n => {
if (n < 10) {
return {
label: `0${n}`,
value: n.toString(),
};
}
return {
label: n.toString(),
value: n.toString(),
};
});
}
const hourOptions = numberSequenceCreator(1, 13);
const minuteOptions = numberSequenceCreator(0, 60);
const periodOptions = [
{ label: 'AM', value: 'AM' },
{ label: 'PM', value: 'PM' },
];
const mapDispatchToProps = (dispatch) => ({
touchFields: () => dispatch(touch(formName, ...fields)),
resetForm: () => dispatch(reset(formName)),
});
const mapStateToProps = createStructuredSelector({
currentUser: selectCurrentUser(),
formError: selectSyncErrorBool(formName),
formErrors: selectSyncErrors(formName),
formValues: selectValues(formName),
});
#reduxForm({
form: formName,
validate: validator,
enableReinitialize: true,
keepDirtyOnReinitialize: false,
})
#connect(mapStateToProps, mapDispatchToProps)
export default class AddCalendarEventForm extends Component { // eslint-disable-line react/prefer-stateless-function
static propTypes = {
resetForm: PropTypes.func,
currentUser: PropTypes.object,
formError: PropTypes.bool,
formErrors: PropTypes.object,
formValues: PropTypes.object,
show: PropTypes.bool,
onHide: PropTypes.func,
onSubmit: PropTypes.func,
touchFields: React.PropTypes.func.isRequired,
calendarEvent: PropTypes.object,
isSubmitting: PropTypes.bool,
};
constructor(props) {
super(props);
this.handleCloseModal = this.handleCloseModal.bind(this);
this.handleFormSubmit = this.handleFormSubmit.bind(this);
}
handleCloseModal() {
this.props.resetForm();
this.props.onHide(false);
}
handleFormSubmit(event) {
event.preventDefault();
const { formError, formValues, onSubmit, calendarEvent, touchFields } = this.props;
if (!formValues.title || !formValues.period || !formValues.hour || !formValues.minute) {
touchFields();
} else if (!formError) {
onSubmit({ event: calendarEvent, formValues });
}
}
render() {
const { show, isSubmitting } = this.props;
return (
<div>
<Modal
className="edit-study-modal"
id="edit-study"
dialogComponentClass={CenteredModal}
show={show}
onHide={this.handleCloseModal}
backdrop
keyboard
>
<Modal.Header>
<Modal.Title>Add Calendar Event</Modal.Title>
<a className="lightbox-close close" onClick={this.handleCloseModal}>
<i className="icomoon-icon_close" />
</a>
</Modal.Header>
<Modal.Body>
<div className="form">
<div className="inner">
<form className="" onSubmit={this.handleFormSubmit}>
<div className="form-lightbox">
<div className="clearfix">
<div className="field-row">
<strong className="required label">
<label>Title</label>
</strong>
<div className="field">
<Field
name="title"
component={Input}
type="text"
/>
</div>
</div>
<div className="field-row time-field-row">
<strong className="label required">
<label>Time</label>
</strong>
<div className="field time-field">
<div className="row">
<div className="col-small pull-left hours">
<Field
name="hour"
placeholder="Hours"
options={hourOptions}
component={ReactSelect}
/>
</div>
<div className="col-small pull-left minutes">
<Field
name="minute"
placeholder="Minutes"
options={minuteOptions}
component={ReactSelect}
/>
</div>
<div className="col-small pull-left time-mode">
<Field
name="period"
placeholder="AM/PM"
options={periodOptions}
component={ReactSelect}
/>
</div>
</div>
</div>
</div>
<div className="field-row">
<strong className="label">
<label>Description</label>
</strong>
<Field
name="description"
component={Input}
className="field"
bsClass="form-control input-lg"
componentClass="textarea"
/>
</div>
<button
type="submit"
className="btn btn-default btn-submit pull-right"
>
{isSubmitting
? <span><LoadingSpinner showOnlyIcon size={20} /></span>
: <span>Submit</span>
}
</button>
</div>
</div>
</form>
</div>
</div>
</Modal.Body>
</Modal>
</div>
);
}
}

I have the following Higher Order Component to create a loading on my components:
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import Spinner from 'components/spinner';
const WithSpinner = (WrappedComponent) => {
return class SpinnerWrapper extends Component {
componentWillReceiveProps(nextProps) {
console.log('Current props: ', this.props);
console.log('Next props: ', nextProps);
}
render (){
const { loading } = this.props;
return (
<div>
{loading ?
<Spinner />
:
<WrappedComponent {...this.props}>{this.props.children}</WrappedComponent>}
</div>)
}
}
SpinnerWrapper.propTypes = {
loading: PropTypes.bool,
};
SpinnerWrapper.defaultProps = {
loading: true,
};
return SpinnerWrapper;
};
export default WithSpinner;
and I have the following component who is wrapping in WithSpinner
const updateChartSeries = answersSummary => ({
chartSeries: TasksTransforms.fromAnswerSummaryToClickEffectivenessChart(answersSummary),
transposed: false,
viewOptions: { type: 'pie', stacked: false, column: false },
});
class ClickEffectivenessChart extends Component {
constructor(props) {
super(props);
this.state = {
chartSeries: [],
viewOptions: {
type: 'pie',
stacked: false,
column: false,
},
title: 'Click Effectiveness',
};
}
componentWillReceiveProps({ answersSummary }) {
this.setState(updateChartSeries(answersSummary));
}
handleChartType = (type = 'pie') => {
switch (type) {
case 'pie':
this.setState({ viewOptions: { type: 'pie', stacked: false, column: false } });
break;
case 'bar':
this.setState({ viewOptions: { type: 'bar', stacked: false, column: false } });
break;
case 'column':
this.setState({ viewOptions: { type: 'bar', stacked: false, column: true } });
break;
default:
break;
}
}
optionsDropdown = () => {
const options = [
{ onClick: () => this.handleChartType('pie'), text: 'Pie' },
{ onClick: () => this.handleChartType('bar'), text: 'Bar' },
{ onClick: () => this.handleChartType('column'), text: 'Column' },
];
return options;
}
render() {
const { chartSeries, viewOptions, title } = this.state;
return (
chartSeries.length > 0 &&
<div className="content" >
<h4>{title}</h4>
<div className="box">
<EffectivenessChart type={viewOptions.type} series={chartSeries} title={title} optionMenu={this.optionsDropdown()} stacked={viewOptions.stacked} column={viewOptions.column} transposed />
</div>
</div>
);
}
}
ClickEffectivenessChart.propTypes = {
answersSummary: PropTypes.object, //eslint-disable-line
};
ClickEffectivenessChart.defaultProps = {
answersSummary: {},
};
export default WithSpinner(ClickEffectivenessChart);
And sometimes the componentWillReceiveProps it no trigger and I can see why. I'm assuming that my WithSpinner controller have a problem but I can see what is the problem. The same behavior happen in all components wrapped with the WithSpinner controller
Any help please?
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Heatmap from 'components/heatmap';
import ClickEffectivenessChart from './click_effectiveness_chart';
import ClickEffectivenessTable from './click_effectiveness_table';
import AreaChart from './area_chart';
import SctHeatmap from './sct_heatmap';
class SctAnswersSummary extends Component {
componentDidMount() {
if (this.props.questionId) { this.fetchData(); }
}
componentDidUpdate(prevProps) {
if (prevProps.questionId !== this.props.questionId) { this.fetchData(); }
}
fetchData = () => {
const {
datacenterId, accountId, projectId, questionId,
} = this.props;
this.props.actions.questionFetchRequest(datacenterId, accountId, projectId, questionId);
this.props.actions.answersSummaryFetchRequest(datacenterId, accountId, projectId, questionId);
this.props.actions.answersSctClicksFetchRequest(datacenterId, accountId, projectId, questionId);
}
render() {
const { imageUrl, clicks, questionId, imageWidth, imageHeight } = this.props.answerSctClicks;
const { answersSummaryLoading, answersSctLoading, answersSummary } = this.props;
return (
<div className="content">
<div className="content" >
<SctHeatmap imageUrl={imageUrl} clicks={clicks} questionId={questionId} imageWidth={imageWidth} imageHeight={imageHeight} loading={answersSctLoading} />
<br />
<ClickEffectivenessChart answersSummary={answersSummary} loading={answersSummaryLoading} />
<br />
<AreaChart answersSummary={answersSummary} loading={answersSummaryLoading} />
<br />
<ClickEffectivenessTable answersSummary={answersSummary} loading={answersSummaryLoading} />
</div>
</div>
);
}
}
SctAnswersSummary.propTypes = {
datacenterId: PropTypes.string,
accountId: PropTypes.string,
projectId: PropTypes.string,
questionId: PropTypes.string,
questionSct: PropTypes.object, // eslint-disable-line react/forbid-prop-types
actions: PropTypes.shape({
questionSctFetchRequest: PropTypes.func,
}).isRequired,
answersSummaryLoading: PropTypes.bool,
answersSctLoading: PropTypes.bool,
};
SctAnswersSummary.defaultProps = {
datacenterId: null,
accountId: null,
projectId: null,
questionId: null,
questionSct: {},
answersSummaryLoading: true,
answersSctLoading: true,
};
export default SctAnswersSummary;

It's because your HOC is a function stateless component, meaning that it doesn't have any lifecycle events. You need to convert WithSpinner to a class component and then the lifecycle events should flow through to your wrapped component:
const WithSpinner = (WrappedComponent) => {
return class extends React.Component {
componentWillReceiveProps(nextProps) {
console.log('Current props: ', this.props);
console.log('Next props: ', nextProps);
}
render() {
return <div>
{this.props.loading ?
<Spinner />
:
<WrappedComponent {...this.props}>
{this.props.children}
</WrappedComponent>}
</div>
}
}
}