From 2dba622d7f92eebf34b69ad35a035a8fa3493ff8 Mon Sep 17 00:00:00 2001
From: Savy <savy.novachez011@gmail.com>
Date: Wed, 17 May 2023 13:33:54 +0530
Subject: [PATCH] Finished Ex 8.9

---
 Part_8/library-frontend/src/App.js            |  9 +-------
 .../src/components/Authors.js                 | 13 +++++++++++-
 .../library-frontend/src/components/Books.js  | 21 +++++++++++++++----
 Part_8/library-frontend/src/queries.js        | 11 ++++++++++
 4 files changed, 41 insertions(+), 13 deletions(-)

diff --git a/Part_8/library-frontend/src/App.js b/Part_8/library-frontend/src/App.js
index e8967f5..03d40e0 100644
--- a/Part_8/library-frontend/src/App.js
+++ b/Part_8/library-frontend/src/App.js
@@ -2,16 +2,9 @@ import { useState } from 'react'
 import Authors from './components/Authors'
 import Books from './components/Books'
 import NewBook from './components/NewBook'
-import { useQuery } from '@apollo/client'
-import { ALL_AUTHORS } from './queries'
 
 const App = () => {
     const [page, setPage] = useState('authors')
-    const result = useQuery(ALL_AUTHORS)
-
-    if (result.loading) {
-        return <div>Loading Data...</div>
-    }
 
     return (
         <div>
@@ -21,7 +14,7 @@ const App = () => {
                 <button onClick={() => setPage('add')}>Add Book</button>
             </div>
 
-            <Authors show={page === 'authors'} authors={result.data.allAuthors} />
+            <Authors show={page === 'authors'} />
 
             <Books show={page === 'books'} />
 
diff --git a/Part_8/library-frontend/src/components/Authors.js b/Part_8/library-frontend/src/components/Authors.js
index 48429e9..d0ac13e 100644
--- a/Part_8/library-frontend/src/components/Authors.js
+++ b/Part_8/library-frontend/src/components/Authors.js
@@ -1,8 +1,19 @@
-const Authors = ({ authors, show }) => {
+import { useQuery } from '@apollo/client'
+import { ALL_AUTHORS } from '../queries'
+
+const Authors = ({ show }) => {
+    const result = useQuery(ALL_AUTHORS)
+    
     if (!show) {
         return null
     }
 
+    if (result.loading) {
+        return <div>Loading Data...</div>
+    }
+
+    const authors = result.data.allAuthors
+    
     if (!authors) {
         return <div>Data Not Available...</div>
     }
diff --git a/Part_8/library-frontend/src/components/Books.js b/Part_8/library-frontend/src/components/Books.js
index 32747ed..fb6ec9b 100644
--- a/Part_8/library-frontend/src/components/Books.js
+++ b/Part_8/library-frontend/src/components/Books.js
@@ -1,13 +1,26 @@
-const Books = (props) => {
-    if (!props.show) {
+import { useQuery } from '@apollo/client'
+import { ALL_BOOKS } from '../queries'
+
+const Books = ({ show }) => {
+    const result = useQuery(ALL_BOOKS)
+
+    if (!show) {
         return null
     }
+    
+    if (result.loading) {
+        return <div>Loading Data...</div>
+    }
 
-    const books = []
+    const books = result.data.allBooks
+    
+    if (!books) {
+        return <div>Data Not Available...</div>
+    }
 
     return (
         <div>
-        <h2>books</h2>
+        <h2>Books</h2>
 
         <table>
             <tbody>
diff --git a/Part_8/library-frontend/src/queries.js b/Part_8/library-frontend/src/queries.js
index 9264eb2..65d1113 100644
--- a/Part_8/library-frontend/src/queries.js
+++ b/Part_8/library-frontend/src/queries.js
@@ -8,4 +8,15 @@ query {
         bookCount
     }
 }
+`
+
+export const ALL_BOOKS = gql`
+query {
+    allBooks {
+        title
+        published
+        author
+        genres
+    }
+}
 `
\ No newline at end of file
-- 
2.51.2