feat: folder structure based on components

learnwithparam · Apr 25, 2019 · e085706 · e085706
1 parent e4defbf
commit e085706
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 54 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,6 +1,10 @@
 import React, { useState } from 'react';
 import axios from 'axios';
+
+import BookSearchForm from './components/bookSearchForm';
+import Loader from './components/loader';
 import './App.css';
+import BooksList from './components/booksList';
 
 const App = () => {
   const [searchTerm, setSearchTerm] = useState('');
@@ -32,61 +36,20 @@ const App = () => {
     fetchBooks();
   }
 
-  const bookAuthors = (authors) => {
-    if (!authors) return '';
-    if (authors.length <= 2) {
-      authors = authors.join(' and ')
-    }
-    else if (authors.length > 2) {
-      let lastAuthor = ' and ' + authors.slice(-1);
-      authors.pop();
-      authors = authors.join(', ');
-      authors += lastAuthor;
-    };
-    return authors;
-  }
-
   return (
-    <section>
-      <form onSubmit={onSubmitHandler}>
-        <label>
-          <span>Search for books</span>
-          <input 
-            type="search" 
-            placeholder="microservice, restful design, etc.," 
-            value={searchTerm}
-            onChange={onInputChange}
-            required
-          />
-          <button type="submit">Search</button>
-        </label>
-        {
-          error && <div style={{color: `red`}}>some error occurred, while fetching api</div>
-        }
-      </form>
-      {
-        loading && <div style={{color: `green`}}>fetching books for "<strong>{searchTerm}</strong>"</div>
-      }
-      <ul>
-        {
-          books.items.map((book, index) => {
-            return (
-              <li key={index}>
-                <div>
-                  <img alt={`${book.volumeInfo.title} book`} src={`http://books.google.com/books/content?id=${book.id}&printsec=frontcover&img=1&zoom=1&source=gbs_api`} />
-                  <div>
-                    <h3>{ book.volumeInfo.title }</h3>
-                    <p>{ bookAuthors(book.volumeInfo.authors) }</p>
-                    <p>{book.volumeInfo.publishedDate}</p>
-                  </div>
-                </div>
-                <hr />
-              </li>
-            );
-          })
-        }
-      </ul>
-    </section>
+    <>
+      <BookSearchForm 
+        onSubmitHandler={onSubmitHandler}
+        onInputChange={onInputChange}
+        searchTerm={searchTerm}
+        error={error}
+      />
+      <Loader 
+        searchTerm={searchTerm}
+        loading={loading}
+      />
+      <BooksList books={books} />
+    </>
   );
 }
 

diff --git a/src/components/bookSearchForm.js b/src/components/bookSearchForm.js
@@ -0,0 +1,24 @@
+import React from 'react';
+
+const BookSearchForm = ({ onSubmitHandler, searchTerm, onInputChange, error }) => {
+    return (
+        <form onSubmit={onSubmitHandler}>
+            <label>
+                <span>Search for books</span>
+                <input 
+                type="search" 
+                placeholder="microservice, restful design, etc.," 
+                value={searchTerm}
+                onChange={onInputChange}
+                required
+                />
+                <button type="submit">Search</button>
+            </label>
+            {
+                error && <div style={{color: `red`}}>some error occurred, while fetching api</div>
+            }
+        </form>
+    );
+};
+
+export default BookSearchForm;
diff --git a/src/components/booksList.js b/src/components/booksList.js
@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { bookAuthors } from '../utils';
+
+const Book = ({ book }) => {
+    return (
+        <li>
+            <div>
+            <img alt={`${book.volumeInfo.title} book`} src={`http://books.google.com/books/content?id=${book.id}&printsec=frontcover&img=1&zoom=1&source=gbs_api`} />
+            <div>
+                <h3>{ book.volumeInfo.title }</h3>
+                <p>{ bookAuthors(book.volumeInfo.authors) }</p>
+                <p>{book.volumeInfo.publishedDate}</p>
+            </div>
+            </div>
+            <hr />
+        </li>
+    )
+};
+
+const BooksList = ({ books }) => {
+    return (
+        <ul>
+        {
+          books.items.map((book, index) => {
+            return (
+                <Book book={book} key={index} />
+            );
+          })
+        }
+      </ul>
+    );
+};
+
+export default BooksList;
diff --git a/src/components/loader.js b/src/components/loader.js
@@ -0,0 +1,13 @@
+import React from 'react';
+
+const Loader = ({ loading, searchTerm }) => {
+    return (
+        <>
+            {
+                loading && <div style={{color: `green`}}>fetching books for "<strong>{searchTerm}</strong>"</div>
+            }
+        </>
+    );
+};
+
+export default Loader;
diff --git a/src/utils/index.js b/src/utils/index.js
@@ -0,0 +1,13 @@
+export const bookAuthors = (authors) => {
+    if (!authors) return '';
+    if (authors.length <= 2) {
+        authors = authors.join(' and ')
+    }
+    else if (authors.length > 2) {
+        let lastAuthor = ' and ' + authors.slice(-1);
+        authors.pop();
+        authors = authors.join(', ');
+        authors += lastAuthor;
+    };
+    return authors;
+}