-
Notifications
You must be signed in to change notification settings - Fork 2
/
GlobalContext.js
59 lines (54 loc) · 1.74 KB
/
GlobalContext.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
import React from "react";
// Step 1. create the context
export const GlobalContext = new React.createContext();
// Step 2. create the context provider
// This is the React class that provides global state
export default class GlobalProvider extends React.Component {
constructor(props) {
super(props);
// Initialize the state
this.state = {
showFlash: false, // whether or not to return html or null
message: "", // The message within the notification
status: "", // Success or error notification type
setMessage: this.setMessage // The function to update the state
};
}
// Fat arrow function to automatically bind this
// function to this class
setMessage = (message, status) => {
// Update the state
this.setState({
...this.state,
showFlash: true,
message,
status
});
// After 3 seconds change the state to
// not show the notification
setTimeout(() => {
this.setState({
...this.state,
showFlash: false
});
}, 3000); // 3000 milliseconds = 3 seconds
};
render() {
// Now that we have created a class that
// Contains the state and functions we want
// To be global
// We turn it into a context provider by
// Creating the Provider from the context
// we created earlier
// Then we pass the state as the value
// and render the children so that
// any components created within the ContextProvider
// has access to the value (this.state)
// Check out App.js to see how we wrap the app in this provider
return (
<GlobalContext.Provider value={this.state}>
{this.props.children}
</GlobalContext.Provider>
);
}
}