From 2ac5ab78bb950c4bc0af238dc01eb405e86cc2d4 Mon Sep 17 00:00:00 2001 From: Savy Date: Wed, 17 May 2023 16:31:29 +0530 Subject: [PATCH] Finished 8.10 --- Part_8/library-frontend/package-lock.json | 61 +++++++++++++++++++ Part_8/library-frontend/package.json | 1 + Part_8/library-frontend/src/App.js | 24 +++++--- .../src/components/Authors.js | 6 +- .../library-frontend/src/components/Books.js | 6 +- .../src/components/NewBook.js | 21 ++++--- Part_8/library-frontend/src/index.js | 5 +- Part_8/library-frontend/src/queries.js | 16 +++++ 8 files changed, 111 insertions(+), 29 deletions(-) diff --git a/Part_8/library-frontend/package-lock.json b/Part_8/library-frontend/package-lock.json index 4eeaeba..bbc9fed 100644 --- a/Part_8/library-frontend/package-lock.json +++ b/Part_8/library-frontend/package-lock.json @@ -17,6 +17,7 @@ "npm": "^9.6.6", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.11.1", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" } @@ -3130,6 +3131,14 @@ } } }, + "node_modules/@remix-run/router": { + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.6.1.tgz", + "integrity": "sha512-YUkWj+xs0oOzBe74OgErsuR3wVn+efrFhXBWrit50kOiED+pvQe2r6MWY0iJMQU/mSVKxvNzL4ZaYvjdX+G7ZA==", + "engines": { + "node": ">=14" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -17400,6 +17409,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.11.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.11.1.tgz", + "integrity": "sha512-OZINSdjJ2WgvAi7hgNLazrEV8SGn6xrKA+MkJe9wVDMZ3zQ6fdJocUjpCUCI0cNrelWjcvon0S/QK/j0NzL3KA==", + "dependencies": { + "@remix-run/router": "1.6.1" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.11.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.11.1.tgz", + "integrity": "sha512-dPC2MhoPeTQ1YUOt5uIK376SMNWbwUxYRWk2ZmTT4fZfwlOvabF8uduRKKJIyfkCZvMgiF0GSCQckmkGGijIrg==", + "dependencies": { + "@remix-run/router": "1.6.1", + "react-router": "6.11.1" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", @@ -22390,6 +22429,11 @@ "source-map": "^0.7.3" } }, + "@remix-run/router": { + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.6.1.tgz", + "integrity": "sha512-YUkWj+xs0oOzBe74OgErsuR3wVn+efrFhXBWrit50kOiED+pvQe2r6MWY0iJMQU/mSVKxvNzL4ZaYvjdX+G7ZA==" + }, "@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -32359,6 +32403,23 @@ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==" }, + "react-router": { + "version": "6.11.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.11.1.tgz", + "integrity": "sha512-OZINSdjJ2WgvAi7hgNLazrEV8SGn6xrKA+MkJe9wVDMZ3zQ6fdJocUjpCUCI0cNrelWjcvon0S/QK/j0NzL3KA==", + "requires": { + "@remix-run/router": "1.6.1" + } + }, + "react-router-dom": { + "version": "6.11.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.11.1.tgz", + "integrity": "sha512-dPC2MhoPeTQ1YUOt5uIK376SMNWbwUxYRWk2ZmTT4fZfwlOvabF8uduRKKJIyfkCZvMgiF0GSCQckmkGGijIrg==", + "requires": { + "@remix-run/router": "1.6.1", + "react-router": "6.11.1" + } + }, "react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", diff --git a/Part_8/library-frontend/package.json b/Part_8/library-frontend/package.json index 642d60d..0dc5d67 100644 --- a/Part_8/library-frontend/package.json +++ b/Part_8/library-frontend/package.json @@ -12,6 +12,7 @@ "npm": "^9.6.6", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.11.1", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, diff --git a/Part_8/library-frontend/src/App.js b/Part_8/library-frontend/src/App.js index 03d40e0..cedcb28 100644 --- a/Part_8/library-frontend/src/App.js +++ b/Part_8/library-frontend/src/App.js @@ -1,24 +1,28 @@ -import { useState } from 'react' +import { Routes, Route, Link, Navigate } from 'react-router-dom' import Authors from './components/Authors' import Books from './components/Books' import NewBook from './components/NewBook' const App = () => { - const [page, setPage] = useState('authors') + + const padding = { + paddingRight: 5 + } return (
- - - + Authors + Books + Add Book
- - - - - + + }/> + } /> + }/> + }/> +
) } diff --git a/Part_8/library-frontend/src/components/Authors.js b/Part_8/library-frontend/src/components/Authors.js index d0ac13e..2467ccf 100644 --- a/Part_8/library-frontend/src/components/Authors.js +++ b/Part_8/library-frontend/src/components/Authors.js @@ -1,13 +1,9 @@ import { useQuery } from '@apollo/client' import { ALL_AUTHORS } from '../queries' -const Authors = ({ show }) => { +const Authors = () => { const result = useQuery(ALL_AUTHORS) - if (!show) { - return null - } - if (result.loading) { return
Loading Data...
} diff --git a/Part_8/library-frontend/src/components/Books.js b/Part_8/library-frontend/src/components/Books.js index fb6ec9b..0eb7fa2 100644 --- a/Part_8/library-frontend/src/components/Books.js +++ b/Part_8/library-frontend/src/components/Books.js @@ -1,13 +1,9 @@ import { useQuery } from '@apollo/client' import { ALL_BOOKS } from '../queries' -const Books = ({ show }) => { +const Books = () => { const result = useQuery(ALL_BOOKS) - if (!show) { - return null - } - if (result.loading) { return
Loading Data...
} diff --git a/Part_8/library-frontend/src/components/NewBook.js b/Part_8/library-frontend/src/components/NewBook.js index 98ab465..4f2bce0 100644 --- a/Part_8/library-frontend/src/components/NewBook.js +++ b/Part_8/library-frontend/src/components/NewBook.js @@ -1,21 +1,26 @@ +import { useMutation } from '@apollo/client' import { useState } from 'react' +import { ADD_BOOK, ALL_AUTHORS, ALL_BOOKS } from '../queries' +import { useNavigate } from 'react-router-dom' -const NewBook = (props) => { +const NewBook = () => { + const navigate = useNavigate() const [title, setTitle] = useState('') const [author, setAuthor] = useState('') const [published, setPublished] = useState('') const [genre, setGenre] = useState('') const [genres, setGenres] = useState([]) - if (!props.show) { - return null - } + const [ addBook ] = useMutation(ADD_BOOK, { + refetchQueries: [ { query: ALL_BOOKS }, { query: ALL_AUTHORS } ] + }) const submit = async (event) => { event.preventDefault() - console.log('add book...') + await addBook({ variables: { title, author, published: parseInt(published), genres } }) + navigate('/books') setTitle('') setPublished('') setAuthor('') @@ -51,7 +56,7 @@ const NewBook = (props) => {

- published + Published:  { />  

genres: {genres.join(', ')}

- + ) diff --git a/Part_8/library-frontend/src/index.js b/Part_8/library-frontend/src/index.js index 41ce149..d1977a1 100644 --- a/Part_8/library-frontend/src/index.js +++ b/Part_8/library-frontend/src/index.js @@ -1,5 +1,6 @@ import React from 'react' import ReactDOM from 'react-dom/client' +import { BrowserRouter as Router } from 'react-router-dom' import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client' import App from './App' @@ -11,6 +12,8 @@ const client = new ApolloClient({ ReactDOM.createRoot(document.getElementById('root')).render( - + + + ) \ No newline at end of file diff --git a/Part_8/library-frontend/src/queries.js b/Part_8/library-frontend/src/queries.js index 65d1113..b2c4e49 100644 --- a/Part_8/library-frontend/src/queries.js +++ b/Part_8/library-frontend/src/queries.js @@ -19,4 +19,20 @@ query { genres } } +` + +export const ADD_BOOK = gql` +mutation addBook($title: String!, $published: Int!, $author: String!, $genres: [String!]!) { + addBook( + title: $title, + published: $published, + author: $author, + genres: $genres + ) { + title + published + author + genres + } +} ` \ No newline at end of file -- 2.51.2