Skip to content

Commit be6c79c

Browse files
lorensrlorensr
committed
Update CRA and packages
1 parent 6d547ea commit be6c79c

27 files changed

+15252
-17190
lines changed

‎package-lock.json

Lines changed: 14329 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: 52 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,65 @@
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+
"auth0-helpers": "0.4.3",
27+
"auth0-js": "9.13.4",
28+
"classnames": "2.2.6",
29+
"cloudinary-core": "2.11.1",
30+
"cloudinary-react": "1.6.6",
31+
"date-fns": "^2.15.0",
32+
"eslint-plugin-graphql": "4.0.0",
33+
"graphql": "15.3.0",
34+
"graphql-anywhere": "4.2.7",
4335
"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"
36+
"lodash": "4.17.19",
37+
"react": "16.13.1",
38+
"react-dom": "16.13.1",
39+
"react-loading-skeleton": "2.1.1",
40+
"react-markdown": "4.3.1",
41+
"react-odometerjs": "2.1.1",
42+
"react-router": "5.2.0",
43+
"react-router-dom": "5.2.0",
44+
"react-scripts": "3.4.1",
45+
"react-star-rating-component": "1.4.1",
46+
"react-style-proptype": "3.2.2",
47+
"recompose": "0.30.0",
48+
"request": "^2.88.2",
49+
"revalidate": "1.2.0",
50+
"scroll-into-view-if-needed": "2.2.25",
51+
"subscriptions-transport-ws": "0.9.17"
6452
},
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-
]
53+
"browserslist": {
54+
"production": [
55+
">0.2%",
56+
"not dead",
57+
"not op_mini all"
58+
],
59+
"development": [
60+
"last 1 chrome version",
61+
"last 1 firefox version",
62+
"last 1 safari version"
63+
]
64+
}
7565
}

‎src/components/App.js

Lines changed: 19 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { Component } from 'react'
1+
import React from 'react'
22
import { Switch, Route, Redirect } from 'react-router'
33
import { Link } from 'react-router-dom'
44

@@ -21,27 +21,21 @@ const Book = ({ user }) => (
2121
</div>
2222
)
2323

24-
class App extends Component {
25-
render() {
26-
return (
27-
<div className="App">
28-
<header className="App-header">
29-
<StarCount />
30-
<Link className="App-home-link" to="/">
31-
<img src={logo} className="App-logo" alt="logo" />
32-
<h1 className="App-title">The GraphQL Guide</h1>
33-
</Link>
34-
<CurrentUser />
35-
<CurrentTemperature />
36-
</header>
37-
<Switch>
38-
<Route exact path="/" render={() => <Redirect to="/Preface" />} />
39-
<Route exact path="/me" component={Profile} />
40-
<Route component={Book} />
41-
</Switch>
42-
</div>
43-
)
44-
}
45-
}
46-
47-
export default App
24+
export default () => (
25+
<div className="App">
26+
<header className="App-header">
27+
<StarCount />
28+
<Link className="App-home-link" to="/">
29+
<img src={logo} className="App-logo" alt="logo" />
30+
<h1 className="App-title">The GraphQL Guide</h1>
31+
</Link>
32+
<CurrentUser />
33+
<CurrentTemperature />
34+
</header>
35+
<Switch>
36+
<Route exact path="/" render={() => <Redirect to="/Preface" />} />
37+
<Route exact path="/me" component={Profile} />
38+
<Route component={Book} />
39+
</Switch>
40+
</div>
41+
)

‎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+
)

‎src/components/CurrentUser.js

Lines changed: 9 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,26 @@
11
import React from 'react'
2-
import PropTypes from 'prop-types'
32
import { Link } from 'react-router-dom'
43

5-
import { withUser } from '../lib/withUser'
4+
import { useUser } from '../lib/useUser'
65
import { login } from '../lib/auth'
76

8-
const CurrentUser = ({ user, loggingIn }) => {
7+
export default () => {
8+
const { user, loggingIn } = useUser()
9+
910
let content
1011

11-
if (user) {
12+
if (loggingIn) {
13+
content = <div className="Spinner" />
14+
} else if (!user) {
15+
content = <button onClick={login}>Sign in</button>
16+
} else {
1217
content = (
1318
<Link to="/me" className="User">
1419
<img src={user.photo} alt={user.firstName} />
1520
{user.firstName}
1621
</Link>
1722
)
18-
} else if (loggingIn) {
19-
content = <div className="Spinner" />
20-
} else {
21-
content = <button onClick={login}>Sign in</button>
2223
}
2324

2425
return <div className="CurrentUser">{content}</div>
2526
}
26-
27-
CurrentUser.propTypes = {
28-
user: PropTypes.shape({
29-
firstName: PropTypes.string.isRequired,
30-
photo: PropTypes.string.isRequired
31-
}),
32-
loggingIn: PropTypes.bool.isRequired
33-
}
34-
35-
export default withUser(CurrentUser)

0 commit comments

Comments
 (0)