Skip to content
Permalink
Browse files

feat: folder structure based on components

  • Loading branch information...
Param-Harrison committed Apr 25, 2019
1 parent e4defbf commit e08570665b6954f30054ca6c4b3a09b15323ff12
Showing with 102 additions and 54 deletions.
  1. +17 −54 src/App.js
  2. +24 −0 src/components/bookSearchForm.js
  3. +35 −0 src/components/booksList.js
  4. +13 −0 src/components/loader.js
  5. +13 −0 src/utils/index.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} />
</>
);
}

@@ -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;
@@ -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;
@@ -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;
@@ -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;
}

0 comments on commit e085706

Please sign in to comment.
You can’t perform that action at this time.