Skip to content

Commit 24a42bd

Browse files
lorensrlorensr
committed
Update CRA and packages
1 parent dfa9ed0 commit 24a42bd

28 files changed

+15382
-17339
lines changed

‎package-lock.json

Lines changed: 14334 additions & 15729 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 53 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,66 @@
11
{
22
"name": "guide",
3-
"version": "0.1.0",
3+
"version": "1.0.0",
44
"private": true,
55
"scripts": {
66
"start": "react-scripts start",
77
"build": "react-scripts build",
8-
"test": "react-scripts test --env=jsdom",
8+
"test": "react-scripts test",
99
"eject": "react-scripts eject",
10-
"now-start": "serve --single ./build",
11-
"deploy": "now",
12-
"alias": "pbpaste | xargs -I % now alias % staging.graphql.guide",
1310
"lint": "eslint src/",
14-
"update-schema": "graphql get-schema -e https://api.graphql.guide/graphql -o schema.json",
15-
"update-schema-spacex": "graphql get-schema -e https://api.spacex.land/graphql -o spacex.json",
16-
"update-schema-local": "graphql get-schema -e http://localhost:4000/graphql -o schema.json"
11+
"update-schema": "apollo schema:download --endpoint https://api.graphql.guide/graphql schema.json",
12+
"update-schema-spacex": "apollo schema:download --endpoint https://api.spacex.land/graphql spacex.json",
13+
"update-schema-local": "apollo schema:download --endpoint http://localhost:4000/graphql schema.json"
1714
},
1815
"dependencies": {
19-
"@material-ui/core": "^3.9.2",
20-
"@material-ui/icons": "^3.0.2",
21-
"ajv": "^6.10.0",
22-
"apollo-cache-inmemory": "^1.5.1",
23-
"apollo-cache-persist": "^0.1.1",
24-
"apollo-client": "^2.5.1",
25-
"apollo-link": "^1.2.11",
26-
"apollo-link-context": "^1.0.17",
27-
"apollo-link-error": "^1.1.10",
28-
"apollo-link-http": "^1.5.14",
29-
"apollo-link-rest": "^0.7.0",
30-
"apollo-link-state": "^0.4.2",
31-
"apollo-link-ws": "^1.0.17",
32-
"apollo-utilities": "^1.2.1",
33-
"auth0-helpers": "^0.4.3",
34-
"auth0-js": "^9.10.1",
35-
"classnames": "^2.2.6",
36-
"cloudinary-core": "^2.6.2",
37-
"cloudinary-react": "^1.1.0",
38-
"date-fns": "^1.30.1",
39-
"formik": "^1.5.1",
40-
"graphql": "^14.1.1",
41-
"graphql-anywhere": "^4.2.1",
42-
"graphql-tag": "^2.10.1",
16+
"@apollo/client": "^3.2.5",
17+
"@material-ui/core": "3.9.3",
18+
"@material-ui/icons": "3.0.2",
19+
"@testing-library/jest-dom": "^4.2.4",
20+
"@testing-library/react": "^9.3.2",
21+
"@testing-library/user-event": "^7.1.2",
22+
"ajv": "6.12.3",
23+
"apollo": "^2.30.2",
24+
"apollo-cache-persist": "0.1.1",
25+
"apollo-link-rest": "0.8.0-beta.0",
26+
"apollo3-cache-persist": "^0.8.0",
27+
"auth0-helpers": "0.4.3",
28+
"auth0-js": "9.13.4",
29+
"classnames": "2.2.6",
30+
"cloudinary-core": "2.11.1",
31+
"cloudinary-react": "1.6.6",
32+
"date-fns": "^2.15.0",
33+
"eslint-plugin-graphql": "4.0.0",
34+
"graphql": "15.3.0",
35+
"graphql-anywhere": "4.2.7",
4336
"jss": "^9.8.7",
44-
"lodash": "^4.17.11",
45-
"react": "^16.8.5",
46-
"react-apollo": "^2.5.2",
47-
"react-dom": "^16.8.5",
48-
"react-loading-skeleton": "^1.1.1",
49-
"react-markdown": "^4.0.6",
50-
"react-odometerjs": "^2.1.1",
51-
"react-router": "^5.0.0",
52-
"react-router-dom": "^5.0.0",
53-
"react-scripts": "^2.1.8",
54-
"react-star-rating-component": "^1.4.1",
55-
"react-style-proptype": "^3.2.2",
56-
"react-transition-group": "^2.7.0",
57-
"recompose": "^0.30.0",
58-
"revalidate": "^1.2.0",
59-
"scroll-into-view-if-needed": "^2.2.20",
60-
"serve": "^10.1.2",
61-
"subscriptions-transport-ws": "^0.9.16",
62-
"typed.js": "^2.0.10",
63-
"typescript": "^3.3.4000"
37+
"lodash": "4.17.19",
38+
"react": "16.13.1",
39+
"react-dom": "16.13.1",
40+
"react-loading-skeleton": "2.1.1",
41+
"react-markdown": "4.3.1",
42+
"react-odometerjs": "2.1.1",
43+
"react-router": "5.2.0",
44+
"react-router-dom": "5.2.0",
45+
"react-scripts": "3.4.1",
46+
"react-star-rating-component": "1.4.1",
47+
"react-style-proptype": "3.2.2",
48+
"recompose": "0.30.0",
49+
"request": "^2.88.2",
50+
"revalidate": "1.2.0",
51+
"scroll-into-view-if-needed": "2.2.25",
52+
"subscriptions-transport-ws": "0.9.17"
6453
},
65-
"devDependencies": {
66-
"eslint-plugin-graphql": "^3.0.3",
67-
"graphql-cli": "^3.0.11"
68-
},
69-
"browserslist": [
70-
">0.2%",
71-
"not dead",
72-
"not ie <= 11",
73-
"not op_mini all"
74-
]
54+
"browserslist": {
55+
"production": [
56+
">0.2%",
57+
"not dead",
58+
"not op_mini all"
59+
],
60+
"development": [
61+
"last 1 chrome version",
62+
"last 1 firefox version",
63+
"last 1 safari version"
64+
]
65+
}
7566
}

‎src/components/App.js

Lines changed: 42 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import React, { Component } from 'react'
1+
import React, { useState, useEffect } from 'react'
22
import { Switch, Route, Redirect } from 'react-router'
33
import { Link } from 'react-router-dom'
4-
import { CachePersistor } from 'apollo-cache-persist'
4+
import { CachePersistor } from 'apollo3-cache-persist'
55

66
import logo from '../logo.svg'
77
import StarCount from './StarCount'
@@ -13,64 +13,59 @@ import Reviews from './Reviews'
1313
import CurrentTemperature from './CurrentTemperature'
1414
import { cache, apollo } from '../lib/apollo'
1515

16-
const Book = ({ user }) => (
17-
<div>
18-
<TableOfContents />
19-
<Switch>
20-
<Route exact path="/reviews" render={() => <Reviews user={user} />} />
21-
<Route component={Section} />
22-
</Switch>
23-
</div>
24-
)
25-
2616
const persistor = new CachePersistor({
2717
cache,
2818
storage: window.localStorage,
2919
maxSize: 4500000, // little less than 5 MB
30-
debug: true
20+
debug: true,
3121
})
3222

3323
apollo.onResetStore(() => persistor.purge())
3424

3525
const cacheHasBeenSaved = !!localStorage.getItem('apollo-cache-persist')
3626

37-
class App extends Component {
38-
state = {
39-
loading: cacheHasBeenSaved
40-
}
41-
42-
async componentDidMount() {
43-
await persistor.restore()
27+
const Book = ({ user }) => (
28+
<div>
29+
<TableOfContents />
30+
<Switch>
31+
<Route exact path="/reviews" render={() => <Reviews user={user} />} />
32+
<Route component={Section} />
33+
</Switch>
34+
</div>
35+
)
4436

45-
this.setState({
46-
loading: false
47-
})
48-
}
37+
export default () => {
38+
const [loadingFromCache, setLoadingFromCache] = useState(cacheHasBeenSaved)
4939

50-
render() {
51-
if (this.state.loading) {
52-
return null
40+
useEffect(() => {
41+
async function persist() {
42+
await persistor.restore()
43+
setLoadingFromCache(false)
5344
}
5445

55-
return (
56-
<div className="App">
57-
<header className="App-header">
58-
<StarCount />
59-
<Link className="App-home-link" to="/">
60-
<img src={logo} className="App-logo" alt="logo" />
61-
<h1 className="App-title">The GraphQL Guide</h1>
62-
</Link>
63-
<CurrentUser />
64-
<CurrentTemperature />
65-
</header>
66-
<Switch>
67-
<Route exact path="/" render={() => <Redirect to="/Preface" />} />
68-
<Route exact path="/me" component={Profile} />
69-
<Route component={Book} />
70-
</Switch>
71-
</div>
72-
)
46+
persist()
47+
}, [])
48+
49+
if (loadingFromCache) {
50+
return null
7351
}
74-
}
7552

76-
export default App
53+
return (
54+
<div className="App">
55+
<header className="App-header">
56+
<StarCount />
57+
<Link className="App-home-link" to="/">
58+
<img src={logo} className="App-logo" alt="logo" />
59+
<h1 className="App-title">The GraphQL Guide</h1>
60+
</Link>
61+
<CurrentUser />
62+
<CurrentTemperature />
63+
</header>
64+
<Switch>
65+
<Route exact path="/" render={() => <Redirect to="/Preface" />} />
66+
<Route exact path="/me" component={Profile} />
67+
<Route component={Book} />
68+
</Switch>
69+
</div>
70+
)
71+
}

‎src/App.test.js renamed to ‎src/components/App.test.js

File renamed without changes.

‎src/components/CurrentTemperature.js

Lines changed: 61 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,79 @@
1-
import React, { Component } from 'react'
2-
import { Query } from 'react-apollo'
3-
import gql from 'graphql-tag'
4-
import IconButton from '@material-ui/core/IconButton'
5-
import MyLocation from '@material-ui/icons/MyLocation'
1+
import React, { useState } from 'react'
2+
import { useQuery, gql } from '@apollo/client'
3+
import { IconButton } from '@material-ui/core'
4+
import { MyLocation } from '@material-ui/icons'
65

7-
const kelvinToCelsius = kelvin => Math.round(kelvin - 273.15)
8-
const kelvinToFahrenheit = kelvin =>
6+
const TEMPERATURE_QUERY = gql`
7+
query TemperatureQuery {
8+
weather(lat: $lat, lon: $lon)
9+
@rest(
10+
type: "WeatherReport"
11+
path: "weather?appid=4fb00091f111862bed77432aead33d04&{args}"
12+
) {
13+
main
14+
}
15+
}
16+
`
17+
18+
const kelvinToCelsius = (kelvin) => Math.round(kelvin - 273.15)
19+
const kelvinToFahrenheit = (kelvin) =>
920
Math.round((kelvin - 273.15) * (9 / 5) + 32)
1021

11-
class CurrentTemperature extends Component {
12-
state = {
13-
lat: null,
14-
lon: null,
15-
gettingPosition: false,
16-
displayInCelsius: true
17-
}
22+
function Content() {
23+
const [position, setPosition] = useState(null)
24+
const [gettingPosition, setGettingPosition] = useState(false)
25+
const [displayInCelsius, setDisplayInCelsius] = useState(true)
1826

19-
requestLocation = () => {
20-
this.setState({ gettingPosition: true })
27+
function requestLocation() {
28+
setGettingPosition(true)
2129
window.navigator.geolocation.getCurrentPosition(
2230
({ coords: { latitude, longitude } }) => {
23-
this.setState({ lat: latitude, lon: longitude, gettingPosition: false })
31+
setGettingPosition(false)
32+
setPosition({
33+
lat: latitude,
34+
lon: longitude,
35+
})
2436
}
2537
)
2638
}
2739

28-
toggleDisplayFormat = () => {
29-
this.setState({
30-
displayInCelsius: !this.state.displayInCelsius
31-
})
32-
}
40+
const haveLocation = !!position
3341

34-
render() {
35-
const dontHaveLocationYet = !this.state.lat
42+
const { data, loading } = useQuery(TEMPERATURE_QUERY, {
43+
skip: !haveLocation,
44+
variables: position,
45+
})
3646

47+
if (!haveLocation) {
3748
return (
38-
<div className="Weather">
39-
<Query
40-
query={TEMPERATURE_QUERY}
41-
skip={dontHaveLocationYet}
42-
variables={{ lat: this.state.lat, lon: this.state.lon }}
43-
>
44-
{({ data, loading }) => {
45-
if (loading || this.state.gettingPosition) {
46-
return <div className="Spinner" />
47-
}
48-
49-
if (dontHaveLocationYet) {
50-
return (
51-
<IconButton
52-
className="Weather-get-location"
53-
onClick={this.requestLocation}
54-
color="inherit"
55-
>
56-
<MyLocation />
57-
</IconButton>
58-
)
59-
}
60-
61-
const kelvin = data.weather.main.temp
62-
const formattedTemp = this.state.displayInCelsius
63-
? `${kelvinToCelsius(kelvin)} °C`
64-
: `${kelvinToFahrenheit(kelvin)} °F`
65-
66-
return (
67-
<IconButton onClick={this.toggleDisplayFormat}>
68-
{formattedTemp}
69-
</IconButton>
70-
)
71-
}}
72-
</Query>
73-
</div>
49+
<IconButton
50+
className="Weather-get-location"
51+
onClick={requestLocation}
52+
color="inherit"
53+
>
54+
<MyLocation />
55+
</IconButton>
7456
)
7557
}
76-
}
7758

78-
const TEMPERATURE_QUERY = gql`
79-
query TemperatureQuery {
80-
weather(lat: $lat, lon: $lon)
81-
@rest(
82-
type: "WeatherReport"
83-
path: "weather?appid=4fb00091f111862bed77432aead33d04&{args}"
84-
) {
85-
main
86-
}
59+
if (loading || gettingPosition) {
60+
return <div className="Spinner" />
8761
}
88-
`
8962

90-
export default CurrentTemperature
63+
const kelvin = data.weather.main.temp
64+
const formattedTemp = displayInCelsius
65+
? `${kelvinToCelsius(kelvin)} °C`
66+
: `${kelvinToFahrenheit(kelvin)} °F`
67+
68+
return (
69+
<IconButton onClick={() => setDisplayInCelsius(!displayInCelsius)}>
70+
{formattedTemp}
71+
</IconButton>
72+
)
73+
}
74+
75+
export default () => (
76+
<div className="Weather">
77+
<Content />
78+
</div>
79+
)

0 commit comments

Comments
 (0)