Skip to content

Commit c4a343a

Browse files
chenkiechenkie
committed
update create link
1 parent 6be8196 commit c4a343a

File tree

6 files changed

+128
-106
lines changed

6 files changed

+128
-106
lines changed

‎server/prisma/dev.db‎

0 Bytes
Binary file not shown.

‎server/src/resolvers/Vote.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,11 @@ const { ApolloError } = require('apollo-server');
22

33
const link = async (parent, args, context) => {
44
try {
5-
console.log(parent);
6-
return context.prisma.vote({ id: parent.id }).link();
5+
return context.prisma.link.findMany({
6+
where: {
7+
userId: parent.userId
8+
}
9+
});
710
} catch (err) {
811
throw new ApolloError(err);
912
}

‎src/components/App.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { Component } from 'react';
22
import LinkList from './LinkList';
3-
// import CreateLink from './CreateLink';
3+
import CreateLink from './CreateLink';
44
import Header from './Header';
55
import { Switch, Route, Redirect } from 'react-router-dom';
66
import Login from './Login';
@@ -14,8 +14,12 @@ class App extends Component {
1414
<div className="ph3 pv1 background-gray">
1515
<Switch>
1616
{/* <Route exact path="/" render={() => <Redirect to="/new/1" />} />
17-
<Route exact path="/create" component={CreateLink} />
1817
*/}
18+
<Route
19+
exact
20+
path="/create"
21+
component={CreateLink}
22+
/>
1923
<Route
2024
exact
2125
path="/search"

‎src/components/CreateLink.js‎

Lines changed: 52 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,75 @@
1-
import React, { Component } from 'react'
2-
import { Mutation } from 'react-apollo'
3-
import gql from 'graphql-tag'
4-
import { FEED_QUERY } from './LinkList'
5-
import { LINKS_PER_PAGE } from '../constants'
1+
import React, { Component, useState } from 'react';
2+
import gql from 'graphql-tag';
3+
import { FEED_QUERY } from './LinkList';
4+
import { LINKS_PER_PAGE } from '../constants';
5+
import { useMutation } from '@apollo/client';
6+
import { useHistory } from 'react-router';
67

78
const POST_MUTATION = gql`
8-
mutation PostMutation($description: String!, $url: String!) {
9-
post(description: $description, url: $url) {
9+
mutation PostMutation(
10+
$description: String!
11+
$url: String!
12+
) {
13+
createPost(description: $description, url: $url) {
1014
id
1115
createdAt
1216
url
1317
description
1418
}
1519
}
16-
`
20+
`;
1721

18-
class CreateLink extends Component {
19-
state = {
22+
const CreateLink = () => {
23+
const history = useHistory();
24+
const [formState, setFormState] = useState({
2025
description: '',
21-
url: '',
22-
}
23-
24-
render() {
25-
const { description, url } = this.state
26-
return (
27-
<div>
26+
url: ''
27+
});
28+
const [createLink] = useMutation(POST_MUTATION, {
29+
variables: {
30+
description: formState.description,
31+
url: formState.url
32+
},
33+
onCompleted: () => history.push('/new/1')
34+
});
35+
return (
36+
<div>
37+
<form
38+
onSubmit={(e) => {
39+
e.preventDefault();
40+
createLink();
41+
}}
42+
>
2843
<div className="flex flex-column mt3">
2944
<input
3045
className="mb2"
31-
value={description}
32-
onChange={e => this.setState({ description: e.target.value })}
46+
value={formState.description}
47+
onChange={(e) =>
48+
setFormState({
49+
...formState,
50+
description: e.target.value
51+
})
52+
}
3353
type="text"
3454
placeholder="A description for the link"
3555
/>
3656
<input
3757
className="mb2"
38-
value={url}
39-
onChange={e => this.setState({ url: e.target.value })}
58+
value={formState.url}
59+
onChange={(e) =>
60+
setFormState({
61+
...formState,
62+
url: e.target.value
63+
})
64+
}
4065
type="text"
4166
placeholder="The URL for the link"
4267
/>
4368
</div>
44-
<Mutation
45-
mutation={POST_MUTATION}
46-
variables={{ description, url }}
47-
onCompleted={() => this.props.history.push('/new/1')}
48-
update={(store, { data: { post } }) => {
49-
const first = LINKS_PER_PAGE
50-
const skip = 0
51-
const orderBy = 'createdAt_DESC'
52-
const data = store.readQuery({
53-
query: FEED_QUERY,
54-
variables: { first, skip, orderBy },
55-
})
56-
data.feed.links.unshift(post)
57-
store.writeQuery({
58-
query: FEED_QUERY,
59-
data,
60-
variables: { first, skip, orderBy },
61-
})
62-
}}
63-
>
64-
{postMutation => <button onClick={postMutation}>Submit</button>}
65-
</Mutation>
66-
</div>
67-
)
68-
}
69-
}
69+
<button type="submit">Submit</button>
70+
</form>
71+
</div>
72+
);
73+
};
7074

71-
export default CreateLink
75+
export default CreateLink;

‎src/components/Header.js‎

Lines changed: 57 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,62 @@
1-
import React, { Component } from 'react'
2-
import { Link } from 'react-router-dom'
3-
import { withRouter } from 'react-router'
4-
import { AUTH_TOKEN } from '../constants'
1+
import React from 'react';
2+
import { withRouter } from 'react-router';
3+
import { Link } from 'react-router-dom';
4+
import { AUTH_TOKEN } from '../constants';
55

6-
class Header extends Component {
7-
render() {
8-
const authToken = localStorage.getItem(AUTH_TOKEN)
9-
return (
10-
<div className="flex pa1 justify-between nowrap orange">
11-
<div className="flex flex-fixed black">
12-
<div className="fw7 mr1">Hacker News</div>
13-
<Link to="/" className="ml1 no-underline black">
14-
new
15-
</Link>
16-
<div className="ml1">|</div>
17-
<Link to="/top" className="ml1 no-underline black">
18-
top
19-
</Link>
20-
<div className="ml1">|</div>
21-
<Link to="/search" className="ml1 no-underline black">
22-
search
23-
</Link>
24-
{authToken && (
25-
<div className="flex">
26-
<div className="ml1">|</div>
27-
<Link to="/create" className="ml1 no-underline black">
28-
submit
29-
</Link>
30-
</div>
31-
)}
32-
</div>
33-
<div className="flex flex-fixed">
34-
{authToken ? (
35-
<div
36-
className="ml1 pointer black"
37-
onClick={() => {
38-
localStorage.removeItem(AUTH_TOKEN)
39-
this.props.history.push(`/`)
40-
}}
6+
const Header = () => {
7+
const authToken = localStorage.getItem(AUTH_TOKEN);
8+
return (
9+
<div className="flex pa1 justify-between nowrap orange">
10+
<div className="flex flex-fixed black">
11+
<div className="fw7 mr1">Hacker News</div>
12+
<Link to="/" className="ml1 no-underline black">
13+
new
14+
</Link>
15+
<div className="ml1">|</div>
16+
<Link to="/top" className="ml1 no-underline black">
17+
top
18+
</Link>
19+
<div className="ml1">|</div>
20+
<Link
21+
to="/search"
22+
className="ml1 no-underline black"
23+
>
24+
search
25+
</Link>
26+
{authToken && (
27+
<div className="flex">
28+
<div className="ml1">|</div>
29+
<Link
30+
to="/create"
31+
className="ml1 no-underline black"
4132
>
42-
logout
43-
</div>
44-
) : (
45-
<Link to="/login" className="ml1 no-underline black">
46-
login
33+
submit
4734
</Link>
48-
)}
49-
</div>
35+
</div>
36+
)}
37+
</div>
38+
<div className="flex flex-fixed">
39+
{authToken ? (
40+
<div
41+
className="ml1 pointer black"
42+
onClick={() => {
43+
localStorage.removeItem(AUTH_TOKEN);
44+
this.props.history.push(`/`);
45+
}}
46+
>
47+
logout
48+
</div>
49+
) : (
50+
<Link
51+
to="/login"
52+
className="ml1 no-underline black"
53+
>
54+
login
55+
</Link>
56+
)}
5057
</div>
51-
)
52-
}
53-
}
58+
</div>
59+
);
60+
};
5461

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

‎src/components/Link.js‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,17 @@ const VOTE_MUTATION = gql`
2525

2626
const Link = (props) => {
2727
const { link } = props;
28-
const [vote] = useMutation(VOTE_MUTATION, {
29-
variables: {
30-
linkId: link.id
28+
const [vote, { loading, error, data }] = useMutation(
29+
VOTE_MUTATION,
30+
{
31+
variables: {
32+
linkId: link.id
33+
}
3134
}
32-
});
35+
);
3336
return (
3437
<div className="flex mt2 items-start">
38+
{error && <p>{JSON.stringify(error, null, 2)}</p>}
3539
<div className="flex items-center">
3640
<span className="gray">{props.index + 1}.</span>
3741
<div

0 commit comments

Comments
 (0)