Merge pull request #63 from pshenmic/feat/list-navigation-upd

Add page size on blocks page

packages/frontend/src/components/goToHeightForm/GoToHeightForm.js

@@ -0,0 +1,19 @@
+import "./go_to_height_form.css";
+
+// import React, {useState} from 'react';
+
+export default function GoToHeightForm({goToHeightHandler, goToHeightChangeHandle, heightCorrection}) {
+
+    return (
+        <form className='go_to_height_form' onSubmit={goToHeightHandler}>
+            <div className='go_to_height_form__title'>Go to height</div>
+            <input 
+                className={heightCorrection ? 'go_to_height_form__input' : 'go_to_height_form__input  go_to_height_form__input--incorrect'}
+                onInput={goToHeightChangeHandle}
+                type='number'
+                placeholder='Height'
+            />
+            <button className='go_to_height_form__button' disabled={!heightCorrection}>go</button>
+        </form>
+    );
+}

packages/frontend/src/components/goToHeightForm/go_to_height_form.css

@@ -0,0 +1,49 @@
+.go_to_height_form {
+    width: 115px;
+}
+
+.go_to_height_form__title {
+    margin-bottom: 4px;
+}
+
+.go_to_height_form__input,
+.go_to_height_form__input:focus {
+    width: 80px;
+    padding: 0 8px;
+    margin-right: 6px;
+    height: 29px;
+    box-sizing: border-box;
+    border: 1px solid #fff;
+    border-radius: 5px;
+    -webkit-appearance: none;
+    -moz-appearance: textfield;
+}
+
+.go_to_height_form__input::-webkit-outer-spin-button,
+.go_to_height_form__input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+}
+
+.go_to_height_form__input--incorrect {
+    /* border-color: #ffa1a1;
+    background-color: #ffa1a1; */
+    color: gray;
+}
+
+.go_to_height_form__button {
+    background-color: transparent;
+    border: 1px solid #ffffff75;
+    border-radius: 5px;
+    height: 29px;
+    color: #fff;
+}
+
+.go_to_height_form__button:disabled {
+    color: gray;
+}
+
+.go_to_height_form__button:hover:not(:disabled) {
+    border: 1px solid #ffffff;
+    background-color: #ffffff15;
+    cursor: pointer;
+}

packages/frontend/src/components/pageSizeSelector/PageSizeSelector.js

@@ -0,0 +1,14 @@
+import "./page_size_selector.css";
+
+export default function PageSizeSelector({PageSizeSelectHandler, defaultValue, items}) {
+    return (
+        <div className='items_on_page_selector'>
+            <div className='items_on_page_selector__title'>Items on page</div>
+            <select onChange={PageSizeSelectHandler} defaultValue={defaultValue}>
+                {items.map(item => {
+                    return <option value={item} key={'PSS' + item}>{item}</option>;
+                })}
+            </select>
+        </div>
+    );
+}

packages/frontend/src/components/pageSizeSelector/page_size_selector.css

@@ -0,0 +1,14 @@
+.items_on_page_selector {}
+
+.items_on_page_selector__title {
+    margin-bottom: 4px;
+}
+
+.items_on_page_selector select {
+    width: 80px;
+    height: 29px;
+    box-sizing: border-box;
+    border: 1px solid #fff;
+    border-radius: 5px;
+    padding: 0 4px;
+}

packages/frontend/src/routes/blocks/blocks.css

@@ -59,6 +59,59 @@
 
 .block_list_item__txs {
     margin-left: 12px;
+    text-wrap: nowrap;
+}
+
+.list-navigation {
+    display: flex;
+    justify-content: space-between;
+    align-items: end;
+    margin-top: 10px;
+    flex-wrap: wrap;
+}
+
+.pagination {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+.items_on_page_selector {
+    text-align: right;
+    width: 115px;
+}
+
+@media screen and (max-width: 720px) {
+    .go_to_height_form {
+        margin-right: 14px;
+    }
+
+    .pagination {
+        order: 3;
+        flex-grow: 1;
+        justify-content: flex-end;
+    }
+
+    .items_on_page_selector {
+        text-align: left;
+    }
+}
+
+@media screen and (max-width: 680px) {
+    .list-navigation {
+        justify-content: center;
+        margin-top: 14px;
+    }
+
+    .items_on_page_selector {
+        width: auto;
+    }
+
+    .pagination {
+        order: -1;
+        width: 100%;
+        justify-content: center;
+        margin-bottom: 8px;
+    }
 }
 
 @media screen and (max-width: 620px) {
@@ -87,3 +140,27 @@
         margin-top: 2px;
     }
 }
+
+@media screen and (max-width: 400px) {
+    .block_list_item__timestamp {
+        text-wrap: wrap;
+    }
+}
+
+@media screen and (max-width: 310px) {
+    .go_to_height_form {
+        margin: 0;
+        width: 100%;
+    }
+
+    .items_on_page_selector {
+        width: 100%;
+        text-align: center;
+        margin: 0 auto;
+    }
+
+    .go_to_height_form {
+        text-align: center;
+        margin-bottom: 4px;
+    }
+}

packages/frontend/src/routes/blocks/blocks.route.js

@@ -1,10 +1,19 @@
-import React, {useState} from 'react';
+import React, {useState, useEffect} from 'react';
 import {Link, useLoaderData} from "react-router-dom";
 import * as Api from "../../util/Api";
-import './blocks.css'
 import ReactPaginate from "react-paginate";
+import GoToHeightForm from "./../../components/goToHeightForm/GoToHeightForm";
+import PageSizeSelector from "./../../components/pageSizeSelector/PageSizeSelector";
+import './blocks.css'
 
-const blocksPerPage = 30;
+
+const paginateConfig = { 
+    pageSize: {
+        default: 25,
+        values: [10, 25, 50, 75, 100],
+    },
+    defaultPage: 1
+}
 
 function Blocks({blocks}) {
     return blocks.map((block) =>
@@ -20,51 +29,87 @@ function Blocks({blocks}) {
 }
 
 export async function loader() {
-    const [status, paginatedBlocks] = await Promise.all([Api.getStatus(), Api.getBlocks(1, 30, 'desc')])
+    const paginatedBlocks = await Api.getBlocks(paginateConfig.defaultPage, paginateConfig.pageSize.default, 'desc')
+    const {resultSet, pagination} = paginatedBlocks
 
-    const {blocksCount} = status
-    const {resultSet} = paginatedBlocks
-
-    return {blocks: resultSet, blocksCount};
+    return {blocks: resultSet, total: pagination.total};
 }
 
 function BlocksRoute() {
-    const {blocks: defaultBlocks, blocksCount} = useLoaderData()
+    const {blocks: defaultBlocks, total} = useLoaderData()
     const [blocks, setBlocks] = useState(defaultBlocks)
-
-    const pageCount = Math.ceil(blocksCount / blocksPerPage)
+    const [pageSize, setPageSize] = useState(paginateConfig.pageSize.default)
+    const [currentPage, setCurrentPage] = useState(0)
+    const [blockHeightToSearch, setBlockHeightToSearch] = useState(0)
+    const pageCount = Math.ceil(total / pageSize)
 
     const handlePageClick = async ({selected}) => {
-        const {resultSet} = await Api.getBlocks(selected+1, 30, 'desc')
+        const {resultSet} = await Api.getBlocks(selected+1, pageSize, 'desc')
+
+        setCurrentPage(selected)
 
         setBlocks(resultSet)
     }
 
+    const goToHeight = async (e) => {
+        e.preventDefault();
+
+        const page = Math.ceil((total - blockHeightToSearch + 2) / pageSize) - 1;
+
+        setCurrentPage(page);
+
+        handlePageClick({selected: page});
+    }
+
+    useEffect(() => {
+        setCurrentPage(0);
+
+        handlePageClick({selected: 0});
+    }, [pageSize]);
+
     return (
         <div className="container">
             <div className={"block_list"}>
                 <span className="block_list__title">Last blocks</span>
 
                 <Blocks blocks={blocks}/>
-                <ReactPaginate
-                    breakLabel="..."
-                    nextLabel=">"
-                    onPageChange={handlePageClick}
-                    pageRangeDisplayed={2}
-                    marginPagesDisplayed={1}
-                    pageCount={pageCount}
-                    previousLabel="<"
-                    pageClassName="page-item"
-                    pageLinkClassName="page-link"
-                    previousClassName="page-item page-item--previous"
-                    previousLinkClassName="page-link"
-                    nextClassName="page-item page-item--next"
-                    nextLinkClassName="page-link"
-                    breakClassName="page-item  page-item--break-link"
-                    containerClassName="pagination"
-                    activeClassName="active"
-                    renderOnZeroPageCount={true}
-                />
+
+                <div className='list-navigation'>
+                    <GoToHeightForm
+                        goToHeightHandler={goToHeight}
+                        goToHeightChangeHandle={(e) => setBlockHeightToSearch(e.target.value)}
+                        heightCorrection={(blockHeightToSearch.length > 0 &&
+                                           Number(blockHeightToSearch) <= total && 
+                                           Number(blockHeightToSearch) > 0)}
+                    />
+
+                    <ReactPaginate 
+                        breakLabel="..."
+                        nextLabel=">"
+                        onPageChange={handlePageClick}
+                        pageRangeDisplayed={2}
+                        marginPagesDisplayed={1}
+                        pageCount={pageCount}
+                        previousLabel="<"
+                        pageClassName="page-item"
+                        pageLinkClassName="page-link"
+                        previousClassName="page-item page-item--previous"
+                        previousLinkClassName="page-link"
+                        nextClassName="page-item page-item--next"
+                        nextLinkClassName="page-link"
+                        breakClassName="page-item  page-item--break-link"
+                        containerClassName="pagination"
+                        activeClassName="active"
+                        renderOnZeroPageCount={true}
+                        forcePage={currentPage} 
+                    />
+
+                    <PageSizeSelector
+                        PageSizeSelectHandler={(e) => setPageSize(Number(e.target.value))}
+                        defaultValue={paginateConfig.pageSize.default}
+                        items={paginateConfig.pageSize.values}
+                    />
+                </div>
             </div>
         </div>
     );