Library Book Application - Draft working version

ontrack/README.md

@@ -1,4 +1,8 @@
-# Getting Started with Create React App
+# OnTrack Technical Test
+
+## Overview
+
+This is a paginated library query application.
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 

ontrack/package.json

@@ -10,7 +10,11 @@
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "axios": "^0.21.1",
+    "bootstrap": "^4.6.0",
+    "node-sass": "^5.0.0",
     "react": "^17.0.1",
+    "react-bootstrap": "^1.5.0",
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.3",
     "typescript": "^4.1.2",

ontrack/src/api/bookListRequest.ts

@@ -0,0 +1,29 @@
+import axios from "axios";
+import {Book} from ".././types";
+
+const apiURL = "http://nyx.vima.ekt.gr:3000";
+
+export interface BookListFilter {
+    type: string;
+    values: Array<string>;
+}
+
+export interface BookListResponse {
+    books: Array<Book>;
+    count: number;
+}
+
+export interface BookListRequest {
+    page?: number;
+    itemsPerPage?: number;
+    filters?: Array<BookListFilter>
+}
+
+
+export const bookListRequest =  ( data: BookListRequest) => {
+    const api = '/api/books';
+    return axios.post(
+        `${apiURL}${api}`,
+        data
+    );
+}

ontrack/src/components/App/App.scss

@@ -0,0 +1,7 @@
+/* make the customizations */
+$theme-colors: (
+"primary": #1D7874
+);
+
+/* import bootstrap to set changes */
+@import "~bootstrap/scss/bootstrap";

ontrack/src/App.test.tsx → ontrack/src/components/App/App.test.tsx

@@ -1,9 +1,12 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import App from './App';
+import {act} from "react-dom/test-utils";
+import {App} from './App';
 
 test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
+  act(() => {
+    render(<App />);
+  });
+  const linkElement = screen.getByText(/Book List/i);
   expect(linkElement).toBeInTheDocument();
 });

ontrack/src/components/App/App.tsx

@@ -0,0 +1,41 @@
+import React, {useState} from 'react';
+import './App.scss';
+
+import {BookPage} from "../BookPage/BookPage";
+
+import {
+    Container,
+    Form, FormControl,
+    Navbar, Nav,
+} from "react-bootstrap";
+
+export function App() {
+
+    const [filter, setFilter] = useState('');
+
+    const changeFilter = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
+        setFilter(value);
+    }
+
+
+
+    return (
+        <Container fluid={true}>
+            <Navbar bg={"primary"} variant={"dark"} expand="lg">
+                <Navbar.Brand href="#home">The Library</Navbar.Brand>
+                <Navbar.Toggle aria-controls="basic-navbar-nav"/>
+                <Navbar.Collapse id="basic-navbar-nav">
+                    <Nav className="mr-auto">
+                        <Nav.Link href="#home">Home</Nav.Link>
+                    </Nav>
+                    <Form inline>
+                        <FormControl type="text" placeholder="Search" className="mr-sm-2" onChange={changeFilter}/>
+                    </Form>
+                </Navbar.Collapse>
+            </Navbar>
+            <BookPage filter={filter}/>
+        </Container>
+    );
+}
+

ontrack/src/components/App/index.tsx

@@ -0,0 +1 @@
+export * from "./App"

ontrack/src/components/BookItem/BookItem.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Book } from "../../types";
+import { BookItem } from "./BookItem";
+
+test('renders BookView', () => {
+    const book: Book = {
+        book_author: [ "Ian Flaming" ],
+        book_publication_country: "England",
+        book_publication_year: 1954,
+        book_publication_city: "London",
+        book_pages: 234,
+        book_title: "Live and Let Die",
+        id: 12
+    }
+    render(<BookItem book={book} />);
+    const linkElement = screen.getByText(/London/i);
+    expect(linkElement).toBeInTheDocument();
+});

ontrack/src/components/BookItem/BookItem.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import {Book} from "../../types";
+import {Card, ListGroup, ListGroupItem} from "react-bootstrap";
+
+export const BookItem: React.FC<{book: Book}> = ({book}) => (
+    <Card>
+        <Card.Body>
+            <Card.Title>{book.book_title}</Card.Title>
+            <ListGroup>
+                <ListGroupItem>
+                    <b>Author(s):</b>
+                    {book.book_author.join(",")}
+                </ListGroupItem>
+                <ListGroupItem>
+                    <b>Published:</b>
+                    {book.book_publication_year} -
+                    {book.book_publication_city},
+                    {book.book_publication_country}
+                </ListGroupItem>
+                <ListGroupItem>
+                    <b>Pages:</b>
+                    {book.book_pages}
+                </ListGroupItem>
+            </ListGroup>
+        </Card.Body>
+    </Card>
+)

ontrack/src/components/BookItem/index.tsx

@@ -0,0 +1 @@
+export * from "./BookItem";

ontrack/src/components/BookList/BookList.test.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Book } from "../../types";
+import { BookList } from "../BookList";
+
+test('renders BookList', () => {
+    const book1: Book = {
+        book_author: [ "Ian Fleming" ],
+        book_publication_country: "England",
+        book_publication_year: 1954,
+        book_publication_city: "London",
+        book_pages: 234,
+        book_title: "Live and Let Die",
+        id: 12
+    }
+
+    const books = [
+        book1
+    ]
+
+    render(<BookList books={books} />);
+    const linkElement = screen.getByText(/London/i);
+    expect(linkElement).toBeInTheDocument();
+});

ontrack/src/components/BookList/BookList.tsx

@@ -0,0 +1,20 @@
+import {Book} from "../../types";
+import {Col} from "react-bootstrap";
+import {BookItem} from "../BookItem";
+import React from "react";
+
+type Props = {
+    books: Array<Book>
+}
+
+export const BookList: React.FC<Props> = ({books}) => {
+    return <>
+        {books.map((book: Book, k: number) => (
+            <Col key={k} lg={3} sm={6} xs={12}>
+                <BookItem key={k} book={book}/>
+            </Col>
+        )
+        )}
+    </>
+}
+

ontrack/src/components/BookList/index.tsx

@@ -0,0 +1 @@
+export * from "./BookList";

ontrack/src/components/BookPage/BookPage.tsx

@@ -0,0 +1,84 @@
+import {Col, Pagination, Row} from "react-bootstrap";
+import {BookList} from "../BookList";
+import React, {useEffect, useState} from "react";
+import {bookListRequest, BookListRequest} from "../../api/bookListRequest";
+
+type Props = {
+    filter: string;
+}
+
+const ItemsPerPage = 20;
+
+export const BookPage:React.FC<Props> = ({filter}) => {
+
+    const [data, setData] = useState({books: [], count: 0});
+
+    const [active, setActive] = useState( 1);
+    const firstPage = (active > 3) ? (active -2 ) : 1;
+
+    const pageCount = (data.count > ItemsPerPage) ? Math.floor(data.count / ItemsPerPage) : 1;
+
+    const pages = [ ...Array((pageCount > 5) ? 5 : pageCount).fill(0)]
+        .map((item, index) => (firstPage+index));
+
+    async function request() {
+        let request: BookListRequest = {
+            page: active,
+            itemsPerPage: ItemsPerPage,
+        };
+
+        if (filter.length) {
+            request.filters = [{type: "all", values: [filter]}]
+        }
+
+        await bookListRequest(request).then((result) => {
+            const newData = {...data};
+            newData.books = result.data.books;
+            newData.count = result.data.count;
+            setData(newData);
+        })
+    }
+
+    useEffect(() => {
+        request();
+    }, []);
+
+    useEffect(() => {
+        request();
+    }, [filter, active])
+
+    const pageSelect = (p: number) => {
+        if (p > 0) {
+            setActive(p);
+        }
+    }
+
+    return <>
+        <Row>
+            <Col>
+                <Pagination>
+                    <Pagination.First
+                        onClick={() => pageSelect(1)}
+                    />
+                    <Pagination.Prev
+                        onClick={() => pageSelect(active-1)}
+                    />
+                    {pages.map((p, key) => (
+                        <Pagination.Item key={key}
+                                         active={p === active}
+                                         onClick={() => pageSelect(p)}>{p}</Pagination.Item>
+                    ))}
+                    <Pagination.Next
+                        onClick={() => pageSelect(active+1)}
+                    />
+                    <Pagination.Last
+                        onClick={() => pageSelect(pageCount)}
+                    />
+                </Pagination>
+            </Col>
+        </Row>
+        <Row>
+            <BookList books={data.books} />
+        </Row>
+    </>
+}

ontrack/src/components/BookPage/index..tsx

@@ -0,0 +1 @@
+export * from "./BookPage";

ontrack/src/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
+import { App } from './components/App';
 import reportWebVitals from './reportWebVitals';
 
 ReactDOM.render(

ontrack/src/types/index.ts

@@ -0,0 +1,9 @@
+export interface Book {
+    book_author: Array<string>;
+    book_publication_country: string;
+    book_publication_year: number;
+    book_publication_city: string;
+    book_pages: number;
+    book_title: string;
+    id: number;
+}