Skip to content

Commit 077e4f0

Browse files
chenkiechenkie
committed
updates
1 parent dbf9895 commit 077e4f0

File tree

16 files changed

+6741
-4462
lines changed

16 files changed

+6741
-4462
lines changed

‎package-lock.json

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

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,13 @@
55
"dependencies": {
66
"@apollo/client": "^3.2.2",
77
"graphql": "^15.3.0",
8+
"optimism": "^0.13.0",
89
"react": "16.13.1",
910
"react-dom": "16.13.1",
1011
"react-router": "5.2.0",
1112
"react-router-dom": "5.2.0",
1213
"react-scripts": "3.4.3",
13-
"subscriptions-transport-ws": "0.9.18"
14+
"subscriptions-transport-ws": "^0.9.18"
1415
},
1516
"scripts": {
1617
"start": "react-scripts start",

‎server/prisma/dev.db

0 Bytes
Binary file not shown.

‎server/prisma/schema.prisma

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ model Link {
1616
url String
1717
createdAt DateTime @default(now())
1818
votes Vote[]
19-
postedBy User? @relation(fields: [userId], references: [id])
19+
postedBy User? @relation(fields: [userId], references: [id])
2020
userId String?
2121
}
2222

‎server/src/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const { ApolloServer, gql } = require('apollo-server');
1+
const { ApolloServer } = require('apollo-server');
22
const { PrismaClient } = require('@prisma/client');
33
const resolvers = require('./resolvers');
44
const typeDefs = require('./schema');

‎server/src/resolvers/Subscription.js

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,34 @@
1+
const { PubSub } = require('apollo-server');
2+
3+
const pubsub = new PubSub();
4+
15
function newLinkSubscribe(parent, args, context, info) {
2-
return context.prisma.$subscribe.link({ mutation_in: ['CREATED'] }).node()
6+
return context.prisma.$subscribe
7+
.link({ mutation_in: ['CREATED'] })
8+
.node();
39
}
410

511
const newLink = {
6-
subscribe: newLinkSubscribe,
7-
resolve: payload => {
8-
return payload
9-
},
10-
}
12+
subscribe: () => pubsub.asyncIterator(['CREATED']),
13+
resolve: (payload) => {
14+
return payload;
15+
}
16+
};
1117

1218
function newVoteSubscribe(parent, args, context, info) {
13-
return context.prisma.$subscribe.vote({ mutation_in: ['CREATED'] }).node()
19+
return context.prisma.$subscribe
20+
.vote({ mutation_in: ['CREATED'] })
21+
.node();
1422
}
1523

1624
const newVote = {
1725
subscribe: newVoteSubscribe,
18-
resolve: payload => {
19-
return payload
20-
},
21-
}
26+
resolve: (payload) => {
27+
return payload;
28+
}
29+
};
2230

2331
module.exports = {
2432
newLink,
25-
newVote,
26-
}
33+
newVote
34+
};

‎src/components/App.js

Lines changed: 31 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,38 @@
1-
import React, { Component } from 'react';
2-
import LinkList from './LinkList';
1+
import React from 'react';
2+
import { Redirect, Route, Switch } from 'react-router-dom';
33
import CreateLink from './CreateLink';
44
import Header from './Header';
5-
import { Switch, Route, Redirect } from 'react-router-dom';
5+
import LinkList from './LinkList';
66
import Login from './Login';
77
import Search from './Search';
88

9-
class App extends Component {
10-
render() {
11-
return (
12-
<div className="center w85">
13-
<Header />
14-
<div className="ph3 pv1 background-gray">
15-
<Switch>
16-
<Route exact path="/" render={() => <Redirect to="/new/1" />} />
17-
18-
<Route
19-
exact
20-
path="/create"
21-
component={CreateLink}
22-
/>
23-
<Route
24-
exact
25-
path="/search"
26-
component={Search}
27-
/>
28-
<Route exact path="/login" component={Login} />
29-
<Route exact path="/top" component={LinkList} />
30-
<Route
31-
exact
32-
path="/new/:page"
33-
component={LinkList}
34-
/>
35-
</Switch>
36-
</div>
37-
</div>
38-
);
39-
}
40-
}
9+
const App = () => (
10+
<div className="center w85">
11+
<Header />
12+
<div className="ph3 pv1 background-gray">
13+
<Switch>
14+
<Route
15+
exact
16+
path="/"
17+
render={() => <Redirect to="/new/1" />}
18+
/>
19+
20+
<Route
21+
exact
22+
path="/create"
23+
component={CreateLink}
24+
/>
25+
<Route exact path="/login" component={Login} />
26+
<Route exact path="/search" component={Search} />
27+
<Route exact path="/top" component={LinkList} />
28+
<Route
29+
exact
30+
path="/new/:page"
31+
component={LinkList}
32+
/>
33+
</Switch>
34+
</div>
35+
</div>
36+
);
4137

4238
export default App;

‎src/components/CreateLink.js

Lines changed: 31 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import React, { Component, useState } from 'react';
2-
import gql from 'graphql-tag';
32
import { FEED_QUERY } from './LinkList';
43
import { LINKS_PER_PAGE } from '../constants';
5-
import { useMutation } from '@apollo/client';
4+
import { useMutation, gql } from '@apollo/client';
65
import { useHistory } from 'react-router';
76

8-
const POST_MUTATION = gql`
7+
const CREATE_LINK_MUTATION = gql`
98
mutation PostMutation(
109
$description: String!
1110
$url: String!
@@ -25,11 +24,39 @@ const CreateLink = () => {
2524
description: '',
2625
url: ''
2726
});
28-
const [createLink] = useMutation(POST_MUTATION, {
27+
const [createLink] = useMutation(CREATE_LINK_MUTATION, {
2928
variables: {
3029
description: formState.description,
3130
url: formState.url
3231
},
32+
update: (cache, { data: { createPost } }) => {
33+
const take = LINKS_PER_PAGE;
34+
const skip = 0;
35+
const orderBy = 'createdAt_DESC';
36+
37+
const data = cache.readQuery({
38+
query: FEED_QUERY,
39+
variables: {
40+
take,
41+
skip,
42+
orderBy
43+
}
44+
});
45+
46+
cache.writeQuery({
47+
query: FEED_QUERY,
48+
data: {
49+
feed: {
50+
links: [createPost, ...data.feed.links]
51+
}
52+
},
53+
variables: {
54+
take,
55+
skip,
56+
orderBy
57+
}
58+
});
59+
},
3360
onCompleted: () => history.push('/new/1')
3461
});
3562
return (

‎src/components/Header.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import React from 'react';
2-
import { withRouter } from 'react-router';
2+
import { useHistory } from 'react-router';
33
import { Link } from 'react-router-dom';
44
import { AUTH_TOKEN } from '../constants';
55

66
const Header = () => {
7+
const history = useHistory();
78
const authToken = localStorage.getItem(AUTH_TOKEN);
89
return (
910
<div className="flex pa1 justify-between nowrap orange">
@@ -41,7 +42,7 @@ const Header = () => {
4142
className="ml1 pointer black"
4243
onClick={() => {
4344
localStorage.removeItem(AUTH_TOKEN);
44-
this.props.history.push(`/`);
45+
history.push(`/`);
4546
}}
4647
>
4748
logout
@@ -59,4 +60,4 @@ const Header = () => {
5960
);
6061
};
6162

62-
export default withRouter(Header);
63+
export default Header;

‎src/components/Link.js

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ const VOTE_MUTATION = gql`
2626

2727
const Link = (props) => {
2828
const { link } = props;
29+
const authToken = localStorage.getItem(AUTH_TOKEN);
2930
const [vote, { loading, error, data }] = useMutation(
3031
VOTE_MUTATION,
3132
{
@@ -60,7 +61,6 @@ const Link = (props) => {
6061
);
6162
return (
6263
<div className="flex mt2 items-start">
63-
{error && <p>{JSON.stringify(error, null, 2)}</p>}
6464
<div className="flex items-center">
6565
<span className="gray">{props.index + 1}.</span>
6666
<div
@@ -75,11 +75,13 @@ const Link = (props) => {
7575
<div>
7676
{link.description} ({link.url})
7777
</div>
78-
<div className="f6 lh-copy gray">
79-
{link.votes.length} votes | by{' '}
80-
{link.postedBy ? link.postedBy.name : 'Unknown'}{' '}
81-
{timeDifferenceForDate(link.createdAt)}
82-
</div>
78+
{authToken && (
79+
<div className="f6 lh-copy gray">
80+
{link.votes.length} votes | by{' '}
81+
{link.postedBy ? link.postedBy.name : 'Unknown'}{' '}
82+
{timeDifferenceForDate(link.createdAt)}
83+
</div>
84+
)}
8385
</div>
8486
</div>
8587
);

0 commit comments

Comments
 (0)