/
article.js
89 lines (83 loc) · 2.27 KB
/
article.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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
import React from "react"
import Layout from "../components/layout"
import { navigateTo } from "gatsby"
import fetch from "node-fetch"
import { guess } from "guess-webpack/api"
import "./article.css"
const promiseCache = {}
const htmlCache = {}
const fetchArticle = name => {
if (typeof window === "undefined") {
return Promise.resolve()
}
if (!promiseCache[name]) {
promiseCache[name] = fetch(
`https://us-central1-guess-gatsby-wikipedia.cloudfunctions.net/fetchPage/${name}`,
{
method: "GET",
mode: "cors",
}
).then(res => {
return res.text().then(html => {
htmlCache[name] = html
return htmlCache[name]
})
})
}
return promiseCache[name]
}
export default class ArticleTemplate extends React.Component {
render() {
// eslint-disable-next-line
const matches = guess({ path: this.props.location.pathname })
Object.keys(matches).forEach(match => fetchArticle(match.slice(6)))
let toRender = ``
const articleName = this.props.location.pathname.slice(6)
if (this.props.location.pathname === `/_/`) {
return <div>hi</div>
}
if (this.props.data.wikipediaArticle) {
toRender = this.props.data.wikipediaArticle.rendered
} else if (htmlCache[articleName]) {
toRender = htmlCache[articleName]
} else if (
!this.props.data.wikipediaArticle &&
!promiseCache[articleName]
) {
// eslint-disable-next-line
fetchArticle(articleName).then(text => {
this.setState({ articleHTML: text })
})
}
return (
<Layout>
<div
onClick={e => {
e.preventDefault()
const pathname = e.target.pathname
if (pathname) {
fetchArticle(pathname.slice(6)).then(text => {
navigateTo(pathname)
})
}
}}
onMouseMove={e => {
const pathname = e.target.pathname
if (pathname) {
fetchArticle(pathname.slice(6))
}
}}
dangerouslySetInnerHTML={{ __html: toRender }}
/>
</Layout>
)
}
}
export const query = graphql`
query ArticleQuery($path: String) {
wikipediaArticle(fields: { slug: { eq: $path } }) {
title
rendered
}
}
`