How can I initiate react to reload after a data change on the node js side?

Question

So I added a calendar to react which changes the workout data to a specific date. When I change the date the data does change correctly. If I refresh the react web pages I get the updated data. I'm just a little confused on how to have node js initiate the data update in react. After changing the data I have node emitting to this socket...

import { format } from 'date-fns'
import ScrapeExperienceLevel from './ScrapeExperienceLevel'

export default (websockets, queue, timer, workouts, scrapeExperienceLevel) => {
websockets.on('connection', socket => {
socket.on('joinRoom', roomName => {
  socket.join(roomName)
})
socket.on('leaveRoom', roomName => {
  socket.leave(roomName)
})
setInterval(function(){
  socket.emit('GetCheckedInMemebers', queue.dump()); 
}, 3000);
socket.on('initScreen', screen => {
  const screenWorkouts = workouts.current.filter(workout => workout.station == screen)

  socket.emit('screenInfo', screenWorkouts)
  socket.emit('queueInfo', queue.screen(screen - 1))
  socket.emit('timer', { time: timer.formatTime().formattedTime })
})

//  code in question
socket.on('GetWorkoutDate', async function (date) {
  await workouts.getNewWorkouts(date.date)
  const screenWorkouts = workouts.current.filter(workout => workout.station == 1)
  socket.emit('UpdateWorkouts', screenWorkouts)
})
socket.on('initAdmin', () => {
  socket.emit('queue', queue.dump())
  socket.emit('timer', { time: timer.formatTime().formattedTime })
})
socket.on('initOverview', () => {
  socket.emit('workouts', workouts.current)
  socket.emit('queue', queue.dump())
  socket.emit('timer', { time: timer.formatTime().formattedTime })
})
socket.on('addUser', async (person) => {
  if(typeof person.member_id == 'undefined')
    person.member_id = ''
  else{
    person.experiencelevel = await scrapeExperienceLevel.getExperienceLevel(person.member_id)
    person.firstname = person.firstname + ' '
  }
  queue.add(person, timer)
  websockets.emit('queue', queue.dump())
})
socket.on('removeUser', ({ group, person, list }) => {
  queue.remove(group, person, list)
  websockets.emit('queue', queue.dump())
})
socket.on('reorder', waiting => {
  queue.reorder(waiting)
  websockets.emit('queue', queue.dump())
})
socket.on('toggleTimer', () => {
  if (timer.isRunning()) {
    timer.pause()
  } else {
    timer.start()
  }
})
})
}

Here's my Screen page's react...

import React, { Component } from 'react'
import { defaultTo } from 'ramda'

import './styles.css'

class Screen extends Component {
  state = {
    time: '',
    rest: false,
    workout: [],
    queue: [],
  }

  UpdateTimer = ({ time, rest }) => {
    this.setState({ time, rest })
  }

  UpdateScreenInfo = ({ data }) => {
    this.setState({ workout: defaultTo({}, data[0]) })
  }

  UpdateQueueInfo = ({ data }) => {
    this.setState({ queue: defaultTo({}, data) })
  }

  UpdateQueue = ({ queue, screenNumber }) => {
    this.setState({ queue: defaultTo({}, queue[screenNumber - 1]) })
  }

  componentDidMount() {
    const screenNumber = this.props.match.params.id
    const { socket } = this.props

    socket.on('connect', () => {
      socket.emit('joinRoom', 'screens')
      socket.emit('initScreen', screenNumber)
    })
    socket.on('timer', ({ time, rest }) => this.UpdateTimer({ time, rest }))
    socket.on('screenInfo', data => this.UpdateScreenInfo({ data }))
    socket.on('queueInfo', data => this.UpdateQueueInfo({ data }))
    socket.on('queue', ({ queue }) => this.UpdateQueue({ queue, screenNumber }))
    //socket.on('UpdateWorkouts', (updatedData) => this.UpdateWorkoutsData(updatedData))
  }

  componentWillUnmount() {
    const { socket } = this.props

    socket.off('timer', this.UpdateTimer)
    socket.off('screenInfo', this.UpdateScreenInfo)
    socket.off('queueInfo', this.UpdateQueueInfo)
    socket.off('queue', this.UpdateQueue)
  }

  renderMovement = (movement, equipment) => {
    if (!movement) return <noscript />

    return (
      <div className="screenMove">
        {equipment && `${equipment.title} `}
        {movement.title}
      </div>
    )
  }

  render() {
    const { time, rest, queue } = this.state
    const { workout } = this.props
    const variation = defaultTo({}, workout.variation)
    const person1 = defaultTo({}, queue[0])
    const person2 = defaultTo({}, queue[1])

    return (      
      <main className="screenWrapper">
        <div className="screenHeader">
          <span className="screenFirstUser">
            {(() => {
              if (person1.experiencelevel === 'novice') {
                //  light purple
                return (
                  <div style={{color:'#BF5FFF', fontWeight: 'bold', display: 'inline-block'}}>{person1.firstname}</div>
                )
              } else if (person1.experiencelevel === 'beginner') {
                //   light blue
                return (
                  <div style={{color:'#87CEFA', fontWeight: 'bold', display: 'inline-block'}}>{person1.firstname}</div>
                )
              } else if (person1.experiencelevel === 'intermediate') {
                return (
                  <div style={{color:'orange', fontWeight: 'bold', display: 'inline-block'}}>{person1.firstname}</div>
                )
              } else if (person1.experiencelevel === 'advanced') {
                //  gym green
                return (
                  <div style={{color:'#93C90E', fontWeight: 'bold', display: 'inline-block'}}>{person1.firstname}</div>
                )
              }else if (person1.experiencelevel === 'expert') {
                return (
                  <div style={{color:'red', fontWeight: 'bold', display: 'inline-block'}}>{person1.firstname}</div>
                )
              }
            })()}
          </span>
          <span className={`screenTimer alt ${rest ? 'rest' : ''}`}>{time ? time : '0:00'}</span>
          <span className="screenSecondUser">
          {(() => {
              if (person2.experiencelevel === 'novice') {
                //    light purple
                return (
                  <div style={{color:'#BF5FFF', fontWeight: 'bold', display: 'inline-block'}}>{person2.firstname}</div>
                )
              } else if (person2.experiencelevel === 'beginner') {
                //  light blue
                return (
                  <div style={{color:'#87CEFA', fontWeight: 'bold', display: 'inline-block'}}>{person2.firstname}</div>
                )
              } else if (person2.experiencelevel === 'intermediate') {
                return (
                  <div style={{color:'orange', fontWeight: 'bold', display: 'inline-block'}}>{person2.firstname}</div>
                )
              } else if (person2.experiencelevel === 'advanced') {
                //   gym green
                return (
                  <div style={{color:'#93C90E', fontWeight: 'bold', display: 'inline-block'}}>{person2.firstname}</div>
                )
              }else if (person2.experiencelevel === 'expert') {
                return (
                  <div style={{color:'red', fontWeight: 'bold', display: 'inline-block'}}>{person2.firstname}</div>
                )
              }
            })()}
          </span>
        </div>
        <p className="screenVariation">{variation.title}</p>
        <div className="screenMoves">
          {this.renderMovement(workout.movementOne, workout.equipmentOne)}
          {this.renderMovement(workout.movementTwo, workout.equipmentTwo)}
          {this.renderMovement(workout.movementThree, workout.equipmentThree)}
        </div>
      </main>
    )
  }
}

export default Screen

Also found the parent component Daniele enlightened me about. Now I'm sharing 1 socket connection throughout all the components.

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { path } from 'ramda'
import { connect, Provider } from 'react-redux'
import ReactDOM from 'react-dom'
import { BrowserRouter, Route, Redirect, Switch } from 'react-router-dom'
import openSocket from 'socket.io-client'
import { defaultTo } from 'ramda'

import './index.css'
import 'semantic-ui-css/semantic.min.css'

import store from './redux/store'
import Admin from './screens/Admin'
import Screens from './screens/Screens'
import Auth from './screens/Auth'
import BackScreen from './screens/Screens/Back'
import FrontScreen from './screens/Screens/Front'

const socket = openSocket(`http://${window.location.hostname}:${process.env.REACT_APP_WEBSOCKET_PORT}`)

function mapState(state) {
  return {
    loggedIn: path(['conf', 'loggedIn'], state),
  }
}

class App extends Component {        
  state = {
    workout: []
  }

  static propTypes = {
    loggedIn: PropTypes.bool,
  }

  componentDidMount() {          
    socket.on('UpdateWorkouts', (workout) => { console.log(workout[0]); this.setState({ workout: defaultTo({}, workout[0]) }) })
  }

  render() {
    const { loggedIn } = this.props
    const workout = this.state
    
    return (
      <BrowserRouter>
        <Switch>
          {!loggedIn && <Route path="/" component={(props) => <Auth socket={socket} {...props} /> }/> }
          <Route exact path="/admin" component={(props) => <Admin socket={socket} {...props} /> } />
          <Route path="/s/back" component={(props) => <BackScreen socket={socket} {...props} /> } />
          <Route path="/s/front" component={(props) => <FrontScreen socket={socket} {...props} /> } />
          <Route path="/s/:id" component={(props) => <Screens {...props} socket={socket} workout={workout} /> } />
          <Redirect to={'/s/1'} />
        </Switch>
      </BrowserRouter>
    )
  }
}

const ConnectedApp = connect(mapState)(App)
const rootEl = document.getElementById('root')
ReactDOM.render(
  <Provider store={store}>
    <ConnectedApp />
  </Provider>,
  rootEl,
)

Here's my Admin page.

import React, { Component, Fragment } from 'react'
import { Button, Grid, Header, Dimmer, Loader } from 'semantic-ui-react'
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { defaultTo } from 'ramda'

import './styles.css'

import WaitingList from './WaitingList'
import Stations from './Stations'
import AddUserModal from './AddUserModal'

class Admin extends Component {
  state = {
    loading: false,
    time: '',
    rest: false,
    data: {
      waiting: [],
      queue: [],
    },
    startDate: new Date(),
    showAddUserModal: false,
  }

  handleChange = date => {
    const { socket } = this.props

    this.setState({
      startDate: date
    })
    socket.emit('GetWorkoutDate', { date })
  }

  UpdateTimer = ({ time, rest }) => {
    this.setState({ time, rest })
  }

  UpdateQueue = ({ data }) => {
    this.setState({ queue: defaultTo({}, data) })
  }

  GetCheckedInMemebers = ({ data }) => {
    this.setState({ data })
  }

  componentDidMount() {
    const { socket } = this.props   

    socket.on('connect', () => {
      socket.emit('initAdmin')
    })
    socket.on('timer', ({ time, rest }) => this.UpdateTimer({ time, rest }))
    socket.on('queue', data => this.UpdateQueue({ data }))
    socket.on('GetCheckedInMemebers', data => this.GetCheckedInMemebers({ data }))
  }

  componentWillUnmount() {
    const { socket } = this.props

    socket.off('timer', this.UpdateTimer)
    socket.off('queue', this.UpdateQueue)
    socket.off('GetCheckedInMemebers', this.GetCheckedInMemebers)
  }

  addPersonToWaitingList = person => {
    const { socket } = this.props

    socket.emit('addUser', person)
  }

  removePersonFromList = (groupIndex, personIndex, list) => {
    const { socket } = this.props

    socket.emit('removeUser', { group: groupIndex, person: personIndex, list: list })
  }

  reorderWaitingList = waiting => {
    const { data } = this.state
    const { socket } = this.props

    this.setState({ data: { ...data, waiting } })
    socket.emit('reorder', waiting)
  }

  toggleTimer = () => {
    const { socket } = this.props
    
    socket.emit('toggleTimer')
  }

  render() {
    const { loading, rest, time, data, showAddUserModal } = this.state

    return (
      <Fragment>
        change workout date&nbsp;&nbsp;&nbsp;<DatePicker
        dateFormat="M/d/yy"
        selected={this.state.startDate}
        onChange={this.handleChange}
      />
        <Grid container columns={2} divided id="adminWrapper">
          <Grid.Row className="fGrow">
            <Grid.Column className="listWrapper">
              <Header size="huge" textAlign="center">
                Queue
                <Button positive floated="right" onClick={() => this.setState({ showAddUserModal: true })}>
                  Add
                </Button>
              </Header>
              <WaitingList
                className="adminList"
                waiting={data.waiting}
                reorder={this.reorderWaitingList}
                removeFromList={this.removePersonFromList}
              />
            </Grid.Column>
            <Grid.Column className="listWrapper">
              <Header size="huge" textAlign="center">
                Stations
              </Header>
              <Stations className="adminList" queue={data.queue} 
                removeFromList={this.removePersonFromList}
              />
            </Grid.Column>
          </Grid.Row>
          <Grid.Row>
            <Button fluid color={rest ? 'red' : 'blue'} onClick={this.toggleTimer}>
              <span>{time ? time : '0:00'}</span>
            </Button>
          </Grid.Row>
        </Grid>
        <AddUserModal
          show={showAddUserModal}
          handleClose={() => this.setState({ showAddUserModal: false })}
          addUser={this.addPersonToWaitingList}
          setLoading={isLoading => this.setState({ loading: isLoading })}
          loading={loading}
        />
        <Dimmer active={loading} page>
          <Loader />
        </Dimmer>
      </Fragment>
    )
  }
}

export default Admin

New to node and react. Appreciate the guidance!

Edit: The calendar (date picker) is on another react page. GetWorkoutDate is being called. However, react never gets the data from the emit socket.emit('UpdateWorkouts', screenWorkouts). I verified the everything works correctly except getting the new data to update the react state.

Final Edit: So for some reason I was not able to send the workout through props for the Screen page. Although, it is the correct way for react there just must be something going on with my environment. Here's what I did get working for me. When Screen page loads it loads the workout. Then I just added settimeout to repeat getting the workout every 5 secs.

socket.on('initScreen', async screen => {
  setInterval(async function(){
    const screenWorkouts = await workouts.current.filter(workout => workout.station == screen)

    socket.emit('screenInfo', screenWorkouts)
  }, 5000)
  socket.emit('queueInfo', queue.screen(screen - 1))
  socket.emit('timer', { time: timer.formatTime().formattedTime })
})

What's weird is after sending the workout to screens between 3 and 8 times correctly eventually it sends an empty array. So to prevent the workout from updating when it's empty I check it for length before I try and update the state.

UpdateScreenInfo = ({ data }) => {
  if(data.length !== 0)
    this.setState({ workout: defaultTo({}, data[0]) })

I'm awarding Daniele the points since they are about to expire and Daniele helped so much!

Answer 1

The problem is that each time you call openSocket you open a new connection to the server. Looking at your server code it seems that your 'GetWorkoutDate' message handler replies with 'UpdateWorkouts' message on the same socket connection; the problem is that 'UpdateWorkouts' is received by the react component sending the 'GetWorkoutDate' message and not by other react components due they open a new connection each.

The proper way to handle with WebSockets in a react app where more components needs to access the WebSocket is to open it only in the root component and passing it to child components as a property. Something like:

MainComponent extends React.Component {
  componentDidMount() {
    // Open the socket only in the main component
    this.socket = openSocket(...);
  }

  componentWillUnmount() {
    this.socket.close();
  }

  render() {
    return (
      <div>
        {/* pass the socket as property to child components;
            this can be repeated with all nested sub-component */}
        <ChildComponent socket={this.socket}>
      </div>
    )
  }
}

ChildComponent extends React.Component {
  componentDidMount() {
    const { socket } = this.props;

    // create the required handlers and store them
    this.handler = data => { /* do what you need with data */ };

    // add the handlers to the socket
    socket.on("message", this.handler);
  }

  componentWillUnmount() {
    const { socket } = this.props;

    // remove the handlers from the socket
    socket.off("message", this.handler);
  }
}

By this way you open a single connection and you share it between all components, now you can send messages to the server from a component and handle the response message on any other component.

Edit after last question update:

Two things:

1. the parent component is the root App component ok, but I can't still understand which is the component which emits the 'GetWorkoutDate' message (I was thinking it was the Screen 's parent component, but it seems I'm wrong); probably to find final solution we need to clarify this;
2. you are passing the socket (as a property) to the Route component, not to the Screen component: you need to change your routes as follows

<Route path="/s/:id" component={() => <Screens socket={socket} />} />

I checked better last version of your Screen component: you can't do this in componentDidMount method:

socket.on('timer', ({ time, rest }) => this.setState({ time, rest }))

you need to store the reference of the handler function in order to remove it later in componentWillUnmount method.

You can't do this in componentWillUnmount method:

socket.close();

now you have only one connection shared between all components of your app, if you close it once, you close it forever.

The strategy is: in componentDidMount method:

1. for each message (or more on general for each event), to create a handler function and store its reference
2. attache the referenced handler function to the desired message (or more in general, to the desired event)

then, in componentWillUnmount method:

3. to detach the handler function (throug the reference we still have) from the message (or more in general from the event),

by this way each time the component is mounted it starts listening on the desired messages/events, each time the component is unmounted it stops doing it and no actions will be performed on it while not mounted be the message/event handlers.

Edit:

1. Having circular import dependency is a bad idea: it's better to remove any var App = require('./index') (or similar) from child component files
2. But moreover, if the purpose of handleChange is only to emit something on the ws you don't need a so complicated design pattern: you can access the socket from Admin Component.

Probably what you need is

class App extends Component {
  componentDidMount() {
    // App component will never unmount: the reference for unmounting is not required
    socket.on('UpdateWorkouts', ([workout]) => this.setState({ workout }));
  }

  render() {
    const { workout } = this.state;

    return (
      ...
      <Route path="/s/:id" component={props => <Screens {...props, socket, workout} />} />
      ...
    );
  }
}

class Screen extends Component {
  render() {
    const { time, rest, queue } = this.state;
    const { workout } = this.props;
    ...
  }
}

Answer 2

I do have one solution at architect level which is, Return synchronous actions from the nodeJs sockets. So the moment client receive it, just dispatch the action received via socket and then automatically update it.

For eg: if socket returns

{
  type: 'actionName',
  data
}

then dispatching it directly would result in auto update of subscribed components.

Answer 3

1. Make sure you are emitting GetWorkoutDate properly upon the calendar onChange.

this.socket.on('GetWorkoutDate', date); //something like this

2. If getNewWorkouts function is an async, then use await

socket.on('GetWorkoutDate', async function (date) {
    await workouts.getNewWorkouts(date.date) //<----- here
    const screenWorkouts = workouts.current.filter(workout => workout.station == 1)
    console.log(screenWorkouts[0])
    socket.emit('UpdateWorkouts', screenWorkouts)
  })

Answer 4

You are calling componentDidMount function when socket emits UpdateWorkouts which is causing the loop. You should not call componentDidMount function of a react component, react handles the lifecycles methods itself. You can have another method to handle updates as following.

handleUpdateWorkouts = (updatedData) => {
   //Update your workout, queue etc. whatever you update
   this.setState({updatedData})

}

And assign this function as callback to on "UpdateWorkouts" events.

this.socket.on('UpdateWorkouts', (updatedData) => this.handleUpdateWorkouts(updatedData));