Skip to content

Commit 858e7f9

Browse files
lorensrlorensr
committed
Update CRA and packages
1 parent 3bdd05e commit 858e7f9

22 files changed

+14853
-16573
lines changed

‎package-lock.json

Lines changed: 14238 additions & 15644 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.1.3",
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/AddReview.js

Lines changed: 86 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -1,148 +1,110 @@
1-
import React, { Component } from 'react'
2-
import PropTypes from 'prop-types'
1+
import React, { useState } from 'react'
32
import StarInput from 'react-star-rating-component'
43
import { Button, TextField } from '@material-ui/core'
54
import { Star, StarBorder } from '@material-ui/icons'
6-
import gql from 'graphql-tag'
7-
import { graphql } from 'react-apollo'
5+
import { gql, useMutation } from '@apollo/client'
86
import pick from 'lodash/pick'
97

8+
import { useUser } from '../lib/useUser'
109
import { validateReview } from '../lib/validators'
1110
import { REVIEWS_QUERY, REVIEW_ENTRY } from '../graphql/Review'
1211

1312
const GREY = '#0000008a'
1413

15-
class AddReview extends Component {
16-
state = {
17-
text: '',
18-
stars: null,
19-
errorText: null
14+
const ADD_REVIEW_MUTATION = gql`
15+
mutation AddReview($input: CreateReviewInput!) {
16+
createReview(input: $input) {
17+
...ReviewEntry
18+
}
2019
}
20+
${REVIEW_ENTRY}
21+
`
2122

22-
updateText = event => {
23-
this.setState({ text: event.target.value })
24-
}
23+
export default ({ done }) => {
24+
const [text, setText] = useState(),
25+
[stars, setStars] = useState(),
26+
[errorText, setErrorText] = useState()
2527

26-
updateStars = stars => {
27-
this.setState({ stars })
28-
}
28+
const { user } = useUser()
29+
30+
const [addReview] = useMutation(ADD_REVIEW_MUTATION, {
31+
update: (store, { data: { createReview: newReview } }) => {
32+
const { reviews } = store.readQuery({
33+
query: REVIEWS_QUERY,
34+
})
35+
store.writeQuery({
36+
query: REVIEWS_QUERY,
37+
data: { reviews: [newReview, ...reviews] },
38+
})
39+
},
40+
})
2941

30-
handleSubmit = event => {
42+
function handleSubmit(event) {
3143
event.preventDefault()
32-
const { text, stars } = this.state
3344

3445
const errors = validateReview({ text, stars })
3546
if (errors.text) {
36-
this.setState({ errorText: errors.text })
47+
setErrorText(errors.text)
3748
return
3849
}
3950

40-
this.props.addReview(text, stars)
41-
42-
this.props.done()
43-
}
44-
45-
render() {
46-
return (
47-
<form
48-
className="AddReview"
49-
autoComplete="off"
50-
onSubmit={this.handleSubmit}
51-
>
52-
<TextField
53-
className="AddReview-text"
54-
label="Review text"
55-
value={this.state.text}
56-
onChange={this.updateText}
57-
helperText={this.state.errorText}
58-
error={!!this.state.errorText}
59-
multiline
60-
rowsMax="10"
61-
margin="normal"
62-
autoFocus={true}
63-
/>
64-
65-
<StarInput
66-
className="AddReview-stars"
67-
starCount={5}
68-
editing={true}
69-
value={this.state.stars}
70-
onStarClick={this.updateStars}
71-
renderStarIcon={(currentStar, rating) =>
72-
currentStar > rating ? <StarBorder /> : <Star />
73-
}
74-
starColor={GREY}
75-
emptyStarColor={GREY}
76-
name="stars"
77-
/>
78-
79-
<div className="AddReview-actions">
80-
<Button className="AddReview-cancel" onClick={this.props.done}>
81-
Cancel
82-
</Button>
83-
84-
<Button type="submit" color="primary" className="AddReview-submit">
85-
Add review
86-
</Button>
87-
</div>
88-
</form>
89-
)
90-
}
91-
}
92-
93-
AddReview.propTypes = {
94-
done: PropTypes.func.isRequired,
95-
user: PropTypes.shape({
96-
name: PropTypes.string.isRequired,
97-
photo: PropTypes.string.isRequired,
98-
username: PropTypes.string.isRequired
99-
}).isRequired,
100-
addReview: PropTypes.func.isRequired
101-
}
102-
103-
const ADD_REVIEW_MUTATION = gql`
104-
mutation AddReview($input: CreateReviewInput!) {
105-
createReview(input: $input) {
106-
...ReviewEntry
107-
}
51+
addReview({
52+
variables: {
53+
input: { text, stars },
54+
},
55+
optimisticResponse: {
56+
createReview: {
57+
__typename: 'Review',
58+
id: null,
59+
text,
60+
stars,
61+
createdAt: new Date(),
62+
favorited: false,
63+
author: pick(user, ['__typename', 'id', 'name', 'photo', 'username']),
64+
},
65+
},
66+
})
67+
done()
10868
}
109-
${REVIEW_ENTRY}
110-
`
11169

112-
const withMutation = graphql(ADD_REVIEW_MUTATION, {
113-
props: ({ ownProps: { user }, mutate }) => ({
114-
addReview: (text, stars) => {
115-
mutate({
116-
variables: {
117-
input: { text, stars }
118-
},
119-
optimisticResponse: {
120-
createReview: {
121-
__typename: 'Review',
122-
id: null,
123-
text,
124-
stars,
125-
createdAt: new Date(),
126-
favorited: false,
127-
author: pick(user, [
128-
'__typename',
129-
'id',
130-
'name',
131-
'photo',
132-
'username'
133-
])
134-
}
135-
},
136-
update: (store, { data: { createReview: newReview } }) => {
137-
const data = store.readQuery({
138-
query: REVIEWS_QUERY
139-
})
140-
data.reviews.unshift(newReview)
141-
store.writeQuery({ query: REVIEWS_QUERY, data })
70+
return (
71+
<form className="AddReview" autoComplete="off" onSubmit={handleSubmit}>
72+
<TextField
73+
className="AddReview-text"
74+
label="Review text"
75+
value={text}
76+
onChange={(e) => setText(e.target.value)}
77+
helperText={errorText}
78+
error={!!errorText}
79+
multiline
80+
rowsMax="10"
81+
margin="normal"
82+
autoFocus={true}
83+
/>
84+
85+
<StarInput
86+
className="AddReview-stars"
87+
starCount={5}
88+
editing={true}
89+
value={stars}
90+
onStarClick={(newStars) => setStars(newStars)}
91+
renderStarIcon={(currentStar, rating) =>
92+
currentStar > rating ? <StarBorder /> : <Star />
14293
}
143-
})
144-
}
145-
})
146-
})
147-
148-
export default withMutation(AddReview)
94+
starColor={GREY}
95+
emptyStarColor={GREY}
96+
name="stars"
97+
/>
98+
99+
<div className="AddReview-actions">
100+
<Button className="AddReview-cancel" onClick={done}>
101+
Cancel
102+
</Button>
103+
104+
<Button type="submit" color="primary" className="AddReview-submit">
105+
Add review
106+
</Button>
107+
</div>
108+
</form>
109+
)
110+
}

0 commit comments

Comments
 (0)