Where to set up notifications/status updates for app? - node.js

Question

I am implementing status updates/notifications, but I do not know where to make the calls from. Right now I am making them in my container app AsyncApp.js that holds all the navigation bars and my components(except login/logout etc...) the issue is that when ever I go to a new component my notifications start from fresh, which is wrong because I want it stay continuous throughout all pages.
AsyncApp.js
class AsyncApp extends Component {
constructor(props){
super(props)
this.startTimer = this.startTimer.bind(this)
this.handleEvent = this.handleEvent.bind(this)
this.handleClose = this.handleClose.bind(this)
this.state = {
redirect: false,
maxSessionInactivity: null,
showAlert: false,
sinceLastCheck: ''
}
}
async componentDidMount() {
this.show = null
let self = this
let messages;
const { dispatch } = this.props
await document.body.addEventListener("keypress", this.handleEvent);
await document.body.addEventListener("click", this.handleEvent);
await fetch('/api/getStatus').then(res => res.json()).then(function(res){
// if(!res.data.is_active){
// self.setState({redirect: true})
// }
console.log("IN GET STATUS ", res)
})
.catch(err => self.setState({redirect: true}))
await fetch('/api/getFirstNotification')
.then(res => res.json())
.then(function(res){
// if(res.status.errorOccured){
// self.setState({redirect: true})
// }
messages = res.data.messages
dispatch(updateMessages(res.data.messages))
self.setState({sinceLastCheck: res.data.since_last_check})
})
.catch(err => self.setState({redirect: true}))
//await fetch('/api/getStatus').then(res => res.json()).then(res => this.setState({maxSessionInactivity: res.data.session_inactivity_minutes - 1 * 1000}));
await this.startTimer()
await console.log("STATE J", this.state)
await this.interval(messages)
await this.notifications()
}
startTimer() {
this.firstTimer = setTimeout(function() {
this.setState({showAlert: true})
}.bind(this), 100000);
this.lastTimer = setTimeout(function() {
this.setState({redirect: true})
}.bind(this), 600000)
}
handleEvent(e){
console.log("event", e)
clearTimeout(this.firstTimer)
clearTimeout(this.lastTimer)
this.startTimer()
}
async interval(messages){
this.intervalStatus = await setInterval(async () => {
await this.notify(messages)
}, 15000)
};
async notifications(){
const { dispatch } = this.props
this.newNotifications = await setInterval( async () => {
let data = { since_last_checked : this.state.sinceLastCheck }
let res1 = await fetch('/api/getNotifications', {
method:'POST',
headers: {
'Content-type': 'application/json',
'accept': 'application/json'
},
body:JSON.stringify(data)
})
.then(res => res.json())
.catch(err => console.log(err))
console.log("NOTIFICATIONS NEXTTT", res1)
if(res1 === undefined || res1.data === undefined || res1.data === null){
this.setState({redirect: true})
}
if(res1 != undefined && res1.data != null) dispatch(updateMessages(res1.data.messages))
let res2 = await fetch('/api/getStatus')
.then(res => res.json())
.catch(err => console.log(err))
console.log("STATUSS", res2)
if(res2 === undefined || res2.data === undefined || res2.data === null || res2.data.is_active === 'N' || res2.data.status === 'closed'){
this.setState({redirect: true})
}
}, 5000)
}
handleClose(event){
this.setState({showAlert: false})
}
componentWillUnmount(){
console.log("componentWillUnmount!!!!")
clearInterval(this.newNotifications)
clearInterval(this.intervalStatus)
clearTimeout(this.firstTimer)
clearTimeout(this.lastTimer)
document.body.removeEventListener("keypress", this.handleEvent);
document.body.removeEventListener("click", this.handleEvent);
}
notify(arr){
if(arr === undefined) return null
if(typeof arr === 'string'){
return toast.success(`${arr}`)
}
if(arr.length < 4){
let messages = arr.map(message => toast.success(`${message.message_text}`))
return messages
} else {
return toast.success(`You have ${arr.length} new Notifications!`)
}
};
render() {
const { classes } = this.props
if (this.state.redirect) return <Redirect to="/logout" />
return (
<div>
<ToastContainer />
<Snackbar
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
open={this.state.showAlert}
autoHideDuration={6000}
onClose={this.handleClose}
>
<MySnackbarContentWrapper
onClose={this.handleClose}
variant="warning"
message="Your session will expire in one minute!"
/>
</Snackbar>
<ThemeProvider theme={theme}>
<div className={classes.root}>
<CssBaseline />
<nav className={classes.drawer}>
<Hidden xsDown implementation="css">
<Navigator PaperProps={{ style: { width: drawerWidth } }} />
</Hidden>
</nav>
<div className={classes.appContent}>
<Header onDrawerToggle={this.handleDrawerToggle} />
<main className={classes.mainContent}>
<div>
<Switch>
<Route exact path="/EditContracts/:contractId/sections/:section" component={EditSection} />
<Route exact path="/EditContracts/:contractId" component={EditContract} />
<Route exact path="/EditUsers/:userId" component={EditUser} />
<Route exact path="/EditEndpoints/:epId" component={EditEndpoint} />
<Route exact path="/EditContracts/:contractId/addSection" component={CreateSection} />
<Route exact path="/Contracts/List" component={Contracts} />
<Route exact path="/Contracts/Create" component={CreateContract} />
<Route exact path="/Contracts/Import" component={ImportContract} />
<Route exact path="/Users/List" component={Users} />
<Route exact path="/Users/Create" component={CreateUser} />
<Route exact path="/Endpoints/Create" component={CreateEndpoint} />
<Route exact path="/Endpoints/List" component={Endpoints} />
<Route exact path="/Pug_Community" component={PugCommunity} />
<Redirect exact from="/Users" to="/Users/List" />
<Redirect exact from="/Endpoints" to="/Endpoints/List" />
<Redirect exact from="/Contracts" to="/Contracts/List" />
</Switch>
</div>
</main>
</div>
</div>
</ThemeProvider>
</div>
)
}
}
App.js
export default class App extends Component {
render() {
return (
<Switch>
<Route exact path="/signin" component={SignIn} />
<Route exact path="/changePassword" component={ChangePassword} />
<Route exact path="/logout" component={Logout} />
<Redirect exact from="/" to="/signin" />
<Route path="/" component={AsyncApp} />
</Switch>
)
}
}
Root.js
const store = configureStore()
export default class Root extends Component {
render() {
return (
<Provider store={store}>
<Router>
<App />
</Router>
</Provider>
)
}
}

Answer 1

At a first glance, it looks like you are doing more work than you need to in your AsyncApp using timers. I can think of two possible solutions that could simplify your workflow:
Since you are already using redux, I would take your fetch() calls out of the AsyncApp component entirely and store them in async redux action creators using redux-thunk.
Set only one timer on AsyncApp, call your async action methods like updateNotifications() and updateStatus() every interval, and then check whether the returned data is new in a redux reducer.
Your reducer can then also be the place that determines whether notifications have been "read". If you have control over the server and database, you will want a server side attribute to also store whether notifications have been read so that a total cache refresh would not redisplay old notifications as new.
While the first suggestion will likely be more intuitive with your current app design, I would argue a more elegant solution would use some kind of websocket implementation. Subscribing to a socket channel using socket.io or PusherJS. Implementing this kind of change requires server changes too, so it may not be feasible for you, but it would remove the need for timers. Pusher, for example, can be configured to subscribe to a notification channel and kick off a redux action with the new data anytime a new notification is received. See: pusher-redux.
Here are some ideas for how to organize the code for the first suggestion:
AsyncApp.js
import { updateNotifications, updateStatus } from './actionCreators.js'
class AsyncApp extends Component {
// ... other necessary code
public interval: any;
public getData = () => {
const { dispatch } = this.props
dispatch(updateNotifications())
dispatch(updateStatus())
}
public componentWillMount(){
//Grab data when the component loads the first time
this.getData()
// Then set a single interval timer to handle both data updates.
this.interval = setInterval(()=>{
this.getData()
},30000)
}
public componentWillUnMount(){
// clear the interval when the component unmounts.
clearInterval(this.interval)
}
}
actionCreators.js
// action type constants
export const RECEIVE_NOTIFICATIONS = 'RECEIVE_NOTIFICATIONS'
function receiveNotifications(notifications){
return({
type: RECEIVE_NOTIFICATIONS,
notifications,
})
}
// Here's the part that uses thunk:
export function updateNotifications() {
return function(dispatch) {
return fetch(`api/getNotifications`)
.then(
response => response.json(),
error => console.log('An error occurred.', error)
)
.then(json =>
dispatch(receiveNotifications(json))
)
}
}
// ... use the same pattern for updateStatus()
reducers.js
import { RECEIVE_NOTIFICATIONS } from './actionCreators.js'
const notifications = (state=[], action) => {
switch(action.type){
case RECEIVE_NOTIFICATIONS:
/* Depending on the structure of your notifications object, you can filter
or loop through the list to determine whether or not any items in the
list are new. This is also where you can toast if there are N number of
new notifications. */
return action.notifications
default:
return state
}
}