1 | import React from "react"
|
2 | import { StaticQueryContext } from "gatsby"
|
3 | import {
|
4 | getPageQueryData,
|
5 | registerPath as socketRegisterPath,
|
6 | unregisterPath as socketUnregisterPath,
|
7 | getStaticQueryData,
|
8 | } from "./socketIo"
|
9 | import PageRenderer from "./page-renderer"
|
10 | import normalizePagePath from "./normalize-page-path"
|
11 |
|
12 | if (process.env.NODE_ENV === `production`) {
|
13 | throw new Error(
|
14 | `It appears like Gatsby is misconfigured. JSONStore is Gatsby internal ` +
|
15 | `development-only component and should never be used in production.\n\n` +
|
16 | `Unless your site has a complex or custom webpack/Gatsby ` +
|
17 | `configuration this is likely a bug in Gatsby. ` +
|
18 | `Please report this at https://github.com/gatsbyjs/gatsby/issues ` +
|
19 | `with steps to reproduce this error.`
|
20 | )
|
21 | }
|
22 |
|
23 | const getPathFromProps = props =>
|
24 | props.pageResources && props.pageResources.page
|
25 | ? normalizePagePath(props.pageResources.page.path)
|
26 | : undefined
|
27 |
|
28 | export class PageQueryStore extends React.Component {
|
29 | constructor(props) {
|
30 | super(props)
|
31 | this.state = {
|
32 | pageQueryData: getPageQueryData(),
|
33 | path: null,
|
34 | }
|
35 | }
|
36 |
|
37 | handleMittEvent = () => {
|
38 | this.setState({
|
39 | pageQueryData: getPageQueryData(),
|
40 | })
|
41 | }
|
42 |
|
43 | componentDidMount() {
|
44 | socketRegisterPath(getPathFromProps(this.props))
|
45 | ___emitter.on(`*`, this.handleMittEvent)
|
46 | }
|
47 |
|
48 | componentWillUnmount() {
|
49 | socketUnregisterPath(this.state.path)
|
50 | ___emitter.off(`*`, this.handleMittEvent)
|
51 | }
|
52 |
|
53 | static getDerivedStateFromProps(props, state) {
|
54 | const newPath = getPathFromProps(props)
|
55 | if (newPath !== state.path) {
|
56 | socketUnregisterPath(state.path)
|
57 | socketRegisterPath(newPath)
|
58 | return {
|
59 | path: newPath,
|
60 | }
|
61 | }
|
62 |
|
63 | return null
|
64 | }
|
65 |
|
66 | shouldComponentUpdate(nextProps, nextState) {
|
67 |
|
68 |
|
69 |
|
70 |
|
71 | return (
|
72 | this.props.location !== nextProps.location ||
|
73 | this.state.path !== nextState.path ||
|
74 | this.state.pageQueryData[normalizePagePath(nextState.path)] !==
|
75 | nextState.pageQueryData[normalizePagePath(nextState.path)]
|
76 | )
|
77 | }
|
78 |
|
79 | render() {
|
80 | const data = this.state.pageQueryData[getPathFromProps(this.props)]
|
81 |
|
82 | if (!data) {
|
83 | return <div />
|
84 | }
|
85 |
|
86 | return <PageRenderer {...this.props} {...data} />
|
87 | }
|
88 | }
|
89 |
|
90 | export class StaticQueryStore extends React.Component {
|
91 | constructor(props) {
|
92 | super(props)
|
93 | this.state = {
|
94 | staticQueryData: getStaticQueryData(),
|
95 | }
|
96 | }
|
97 |
|
98 | handleMittEvent = () => {
|
99 | this.setState({
|
100 | staticQueryData: getStaticQueryData(),
|
101 | })
|
102 | }
|
103 |
|
104 | componentDidMount() {
|
105 | ___emitter.on(`*`, this.handleMittEvent)
|
106 | }
|
107 |
|
108 | componentWillUnmount() {
|
109 | ___emitter.off(`*`, this.handleMittEvent)
|
110 | }
|
111 |
|
112 | shouldComponentUpdate(nextProps, nextState) {
|
113 | // We want to update this component when:
|
114 | // - static query results changed
|
115 |
|
116 | return this.state.staticQueryData !== nextState.staticQueryData
|
117 | }
|
118 |
|
119 | render() {
|
120 | return (
|
121 | <StaticQueryContext.Provider value={this.state.staticQueryData}>
|
122 | {this.props.children}
|
123 | </StaticQueryContext.Provider>
|
124 | )
|
125 | }
|
126 | }
|