Skip to content

Commit 6be8196

Browse files
chenkiechenkie
committed
begin update to react app
1 parent ce9b592 commit 6be8196

File tree

9 files changed

+14511
-393
lines changed

9 files changed

+14511
-393
lines changed

‎package-lock.json

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

‎package.json

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,31 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6-
"apollo-boost": "0.1.4",
7-
"apollo-link-context": "1.0.7",
8-
"apollo-link-ws": "1.0.7",
9-
"graphql": "0.13.1",
10-
"react": "16.2.0",
11-
"react-apollo": "2.1.0",
12-
"react-dom": "16.2.0",
13-
"react-router": "4.2.0",
14-
"react-router-dom": "4.2.2",
15-
"react-scripts": "1.1.1",
16-
"subscriptions-transport-ws": "0.9.7"
6+
"@apollo/client": "^3.2.2",
7+
"graphql": "^15.3.0",
8+
"react": "16.13.1",
9+
"react-dom": "16.13.1",
10+
"react-router": "5.2.0",
11+
"react-router-dom": "5.2.0",
12+
"react-scripts": "3.4.3",
13+
"subscriptions-transport-ws": "0.9.18"
1714
},
1815
"scripts": {
1916
"start": "react-scripts start",
2017
"build": "react-scripts build",
2118
"test": "react-scripts test --env=jsdom",
2219
"eject": "react-scripts eject"
20+
},
21+
"browserslist": {
22+
"production": [
23+
">0.2%",
24+
"not dead",
25+
"not op_mini all"
26+
],
27+
"development": [
28+
"last 1 chrome version",
29+
"last 1 firefox version",
30+
"last 1 safari version"
31+
]
2332
}
2433
}

‎server/prisma/dev.db

0 Bytes
Binary file not shown.

‎src/components/App.js

Lines changed: 21 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import React, { Component } from 'react'
2-
import LinkList from './LinkList'
3-
import CreateLink from './CreateLink'
4-
import Header from './Header'
5-
import { Switch, Route, Redirect } from 'react-router-dom'
6-
import Login from './Login'
7-
import Search from './Search'
1+
import React, { Component } from 'react';
2+
import LinkList from './LinkList';
3+
// import CreateLink from './CreateLink';
4+
import Header from './Header';
5+
import { Switch, Route, Redirect } from 'react-router-dom';
6+
import Login from './Login';
7+
import Search from './Search';
88

99
class App extends Component {
1010
render() {
@@ -13,17 +13,26 @@ class App extends Component {
1313
<Header />
1414
<div className="ph3 pv1 background-gray">
1515
<Switch>
16-
<Route exact path="/" render={() => <Redirect to="/new/1" />} />
16+
{/* <Route exact path="/" render={() => <Redirect to="/new/1" />} />
1717
<Route exact path="/create" component={CreateLink} />
18+
*/}
19+
<Route
20+
exact
21+
path="/search"
22+
component={Search}
23+
/>
1824
<Route exact path="/login" component={Login} />
19-
<Route exact path="/search" component={Search} />
2025
<Route exact path="/top" component={LinkList} />
21-
<Route exact path="/new/:page" component={LinkList} />
26+
<Route
27+
exact
28+
path="/new/:page"
29+
component={LinkList}
30+
/>
2231
</Switch>
2332
</div>
2433
</div>
25-
)
34+
);
2635
}
2736
}
2837

29-
export default App
38+
export default App;

‎src/components/Link.js

Lines changed: 58 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import React, { Component } from 'react'
2-
import { AUTH_TOKEN } from '../constants'
3-
import { timeDifferenceForDate } from '../utils'
4-
import { Mutation } from 'react-apollo'
5-
import gql from 'graphql-tag'
1+
import React from 'react';
2+
import { AUTH_TOKEN } from '../constants';
3+
import { timeDifferenceForDate } from '../utils';
4+
5+
import { useMutation, gql } from '@apollo/client';
66

77
const VOTE_MUTATION = gql`
88
mutation VoteMutation($linkId: ID!) {
@@ -21,47 +21,61 @@ const VOTE_MUTATION = gql`
2121
}
2222
}
2323
}
24-
`
25-
26-
class Link extends Component {
27-
render() {
28-
const authToken = localStorage.getItem(AUTH_TOKEN)
24+
`;
2925

30-
return (
31-
<div className="flex mt2 items-start">
32-
<div className="flex items-center">
33-
<span className="gray">{this.props.index + 1}.</span>
34-
{authToken && (
35-
<Mutation
36-
mutation={VOTE_MUTATION}
37-
variables={{ linkId: this.props.link.id }}
38-
update={(store, { data: { vote } }) =>
39-
this.props.updateStoreAfterVote(store, vote, this.props.link.id)
40-
}
41-
>
42-
{voteMutation => (
43-
<div className="ml1 gray f11" onClick={voteMutation}>
44-
▲
45-
</div>
46-
)}
47-
</Mutation>
48-
)}
26+
const Link = (props) => {
27+
const { link } = props;
28+
const [vote] = useMutation(VOTE_MUTATION, {
29+
variables: {
30+
linkId: link.id
31+
}
32+
});
33+
return (
34+
<div className="flex mt2 items-start">
35+
<div className="flex items-center">
36+
<span className="gray">{props.index + 1}.</span>
37+
<div
38+
className="ml1 gray f11"
39+
style={{ cursor: 'pointer' }}
40+
onClick={vote}
41+
>
42+
▲
4943
</div>
50-
<div className="ml1">
51-
<div>
52-
{this.props.link.description} ({this.props.link.url})
53-
</div>
54-
<div className="f6 lh-copy gray">
55-
{this.props.link.votes.length} votes | by{' '}
56-
{this.props.link.postedBy
57-
? this.props.link.postedBy.name
58-
: 'Unknown'}{' '}
59-
{timeDifferenceForDate(this.props.link.createdAt)}
60-
</div>
44+
{/* {authToken && (
45+
<Mutation
46+
mutation={VOTE_MUTATION}
47+
variables={{ linkId: this.props.link.id }}
48+
update={(store, { data: { vote } }) =>
49+
this.props.updateStoreAfterVote(
50+
store,
51+
vote,
52+
this.props.link.id
53+
)
54+
}
55+
>
56+
{(voteMutation) => (
57+
<div
58+
className="ml1 gray f11"
59+
onClick={voteMutation}
60+
>
61+
▲
62+
</div>
63+
)}
64+
</Mutation>
65+
)} */}
66+
</div>
67+
<div className="ml1">
68+
<div>
69+
{link.description} ({link.url})
70+
</div>
71+
<div className="f6 lh-copy gray">
72+
{link.votes.length} votes | by{' '}
73+
{link.postedBy ? link.postedBy.name : 'Unknown'}{' '}
74+
{timeDifferenceForDate(link.createdAt)}
6175
</div>
6276
</div>
63-
)
64-
}
65-
}
77+
</div>
78+
);
79+
};
6680

67-
export default Link
81+
export default Link;

0 commit comments

Comments
 (0)