Skip to content

Commit d16a2e9

Browse files
dhatGuydhatGuy
committed
part8b
1 parent 53d918a commit d16a2e9

File tree

9 files changed

+10759
-14650
lines changed

9 files changed

+10759
-14650
lines changed

‎part8/client/package-lock.json‎

Lines changed: 0 additions & 14588 deletions
This file was deleted.

‎part8/client/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,11 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"@apollo/client": "^3.5.6",
67
"@testing-library/jest-dom": "^4.2.4",
78
"@testing-library/react": "^9.4.1",
89
"@testing-library/user-event": "^7.2.1",
10+
"graphql": "^16.2.0",
911
"react": "^16.12.0",
1012
"react-dom": "^16.12.0",
1113
"react-scripts": "3.4.0"

‎part8/client/src/components/Authors.js‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
1-
2-
import React from 'react'
1+
import { useQuery } from "@apollo/client";
2+
import React from "react";
3+
import { ALL_AUTHORS } from "../queries";
4+
import BirthForm from "./BirthForm";
35

46
const Authors = (props) => {
7+
const { data, loading } = useQuery(ALL_AUTHORS);
58
if (!props.show) {
6-
return null
9+
return null;
710
}
8-
const authors = []
11+
12+
if (loading) return <div>loading...</div>;
13+
// const authors = []
914

1015
return (
1116
<div>
@@ -14,25 +19,21 @@ const Authors = (props) => {
1419
<tbody>
1520
<tr>
1621
<th></th>
17-
<th>
18-
born
19-
</th>
20-
<th>
21-
books
22-
</th>
22+
<th>born</th>
23+
<th>books</th>
2324
</tr>
24-
{authors.map(a =>
25+
{data.allAuthors.map((a) => (
2526
<tr key={a.name}>
2627
<td>{a.name}</td>
2728
<td>{a.born}</td>
2829
<td>{a.bookCount}</td>
2930
</tr>
30-
)}
31+
))}
3132
</tbody>
3233
</table>
33-
34+
<BirthForm />
3435
</div>
35-
)
36-
}
36+
);
37+
};
3738

38-
export default Authors
39+
export default Authors;

‎part8/client/src/components/BirthForm.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { useMutation, useQuery } from "@apollo/client";
2+
import React, { useState } from "react";
3+
import { ALL_AUTHORS, EDIT_AUTHOR } from "../queries";
4+
5+
export default function BirthForm() {
6+
const [editAuthor] = useMutation(EDIT_AUTHOR);
7+
const { data } = useQuery(ALL_AUTHORS);
8+
const [name, setName] = useState("" || data?.allAuthors[0].name);
9+
const [year, setYear] = useState(0);
10+
11+
const submit = (e) => {
12+
e.preventDefault();
13+
editAuthor({ variables: { input: { setBornTo: Number(year), name } } });
14+
15+
setName("");
16+
setYear(0);
17+
};
18+
return (
19+
<div>
20+
<h2>Set birthyear</h2>
21+
<form onSubmit={submit}>
22+
<div>
23+
<select onChange={({ target }) => setName(target.value)}>
24+
<option disabled>choose an author</option>
25+
{data?.allAuthors.map(({ name, id }) => (
26+
<option key={id} value={name}>
27+
{name}
28+
</option>
29+
))}
30+
</select>
31+
</div>
32+
<div>
33+
born
34+
<input
35+
value={year}
36+
type="number"
37+
onChange={({ target }) => setYear(target.value)}
38+
/>
39+
</div>
40+
41+
<button type="submit">update author</button>
42+
</form>
43+
</div>
44+
);
45+
}

‎part8/client/src/components/Books.js‎

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
1-
import React from 'react'
1+
import { useQuery } from "@apollo/client";
2+
import React from "react";
3+
import { ALL_BOOKS } from "../queries";
24

35
const Books = (props) => {
6+
const { data, loading } = useQuery(ALL_BOOKS);
47
if (!props.show) {
5-
return null
8+
return null;
69
}
710

8-
const books = []
11+
if (loading) return <div>loading...</div>;
912

1013
return (
1114
<div>
@@ -15,24 +18,20 @@ const Books = (props) => {
1518
<tbody>
1619
<tr>
1720
<th></th>
18-
<th>
19-
author
20-
</th>
21-
<th>
22-
published
23-
</th>
21+
<th>author</th>
22+
<th>published</th>
2423
</tr>
25-
{books.map(a =>
24+
{data.allBooks.map((a) => (
2625
<tr key={a.title}>
2726
<td>{a.title}</td>
2827
<td>{a.author}</td>
2928
<td>{a.published}</td>
3029
</tr>
31-
)}
30+
))}
3231
</tbody>
3332
</table>
3433
</div>
35-
)
36-
}
34+
);
35+
};
3736

38-
export default Books
37+
export default Books;

‎part8/client/src/components/NewBook.js‎

Lines changed: 36 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,40 @@
1-
import React, { useState } from 'react'
1+
import { useMutation } from "@apollo/client";
2+
import React, { useState } from "react";
3+
import { ADD_BOOK, ALL_AUTHORS, ALL_BOOKS } from "../queries";
24

35
const NewBook = (props) => {
4-
const [title, setTitle] = useState('')
5-
const [author, setAuthor] = useState('')
6-
const [published, setPublished] = useState('')
7-
const [genre, setGenre] = useState('')
8-
const [genres, setGenres] = useState([])
6+
const [title, setTitle] = useState("");
7+
const [author, setAuthor] = useState("");
8+
const [published, setPublished] = useState("");
9+
const [genre, setGenre] = useState("");
10+
const [genres, setGenres] = useState([]);
11+
const [addBook] = useMutation(ADD_BOOK);
912

1013
if (!props.show) {
11-
return null
14+
return null;
1215
}
1316

1417
const submit = async (event) => {
15-
event.preventDefault()
16-
17-
console.log('add book...')
18+
event.preventDefault();
19+
addBook({
20+
variables: {
21+
input: { title, author, published: Number(published), genres },
22+
},
23+
refetchQueries: [ALL_BOOKS, ALL_AUTHORS],
24+
});
25+
console.log("add book...");
1826

19-
setTitle('')
20-
setPublished('')
21-
setAuthor('')
22-
setGenres([])
23-
setGenre('')
24-
}
27+
setTitle("");
28+
setPublished("");
29+
setAuthor("");
30+
setGenres([]);
31+
setGenre("");
32+
};
2533

2634
const addGenre = () => {
27-
setGenres(genres.concat(genre))
28-
setGenre('')
29-
}
35+
setGenres(genres.concat(genre));
36+
setGenre("");
37+
};
3038

3139
return (
3240
<div>
@@ -48,7 +56,7 @@ const NewBook = (props) => {
4856
<div>
4957
published
5058
<input
51-
type='number'
59+
type="number"
5260
value={published}
5361
onChange={({ target }) => setPublished(target.value)}
5462
/>
@@ -58,15 +66,15 @@ const NewBook = (props) => {
5866
value={genre}
5967
onChange={({ target }) => setGenre(target.value)}
6068
/>
61-
<button onClick={addGenre} type="button">add genre</button>
62-
</div>
63-
<div>
64-
genres: {genres.join(' ')}
69+
<button onClick={addGenre} type="button">
70+
add genre
71+
</button>
6572
</div>
66-
<button type='submit'>create book</button>
73+
<div>genres: {genres.join(" ")}</div>
74+
<button type="submit">create book</button>
6775
</form>
6876
</div>
69-
)
70-
}
77+
);
78+
};
7179

72-
export default NewBook
80+
export default NewBook;

‎part8/client/src/index.js‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,23 @@
1-
import React from 'react'
2-
import ReactDOM from 'react-dom'
3-
import App from './App'
1+
import {
2+
ApolloClient,
3+
ApolloProvider,
4+
HttpLink,
5+
InMemoryCache,
6+
} from "@apollo/client";
7+
import React from "react";
8+
import ReactDOM from "react-dom";
9+
import App from "./App";
410

5-
ReactDOM.render(<App />, document.getElementById('root'))
11+
const client = new ApolloClient({
12+
cache: new InMemoryCache(),
13+
link: new HttpLink({
14+
uri: "http://localhost:4000",
15+
}),
16+
});
17+
18+
ReactDOM.render(
19+
<ApolloProvider client={client}>
20+
<App />
21+
</ApolloProvider>,
22+
document.getElementById("root")
23+
);

‎part8/client/src/queries.js‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { gql } from "@apollo/client";
2+
3+
export const ALL_AUTHORS = gql`
4+
query {
5+
allAuthors {
6+
id
7+
born
8+
name
9+
bookCount
10+
}
11+
}
12+
`;
13+
14+
export const ALL_BOOKS = gql`
15+
query {
16+
allBooks {
17+
id
18+
title
19+
author
20+
published
21+
genres
22+
}
23+
}
24+
`;
25+
26+
export const ADD_BOOK = gql`
27+
mutation addBook($input: addBookInput) {
28+
addBook(input: $input) {
29+
id
30+
title
31+
author
32+
published
33+
genres
34+
}
35+
}
36+
`;
37+
38+
export const EDIT_AUTHOR = gql`
39+
mutation editAuthor($input: editAuthorInput) {
40+
editAuthor(input: $input) {
41+
id
42+
born
43+
name
44+
bookCount
45+
}
46+
}
47+
`;

0 commit comments

Comments
 (0)