[WebsiteList] add preloader, move to components

components/common/Pagination.js

@@ -0,0 +1,61 @@
+import React from 'react';
+
+export default function Pagination({
+  gotoPage,
+  canPreviousPage,
+  previousPage,
+  canNextPage,
+  nextPage,
+  pageCount,
+  pageIndex,
+  pageOptions,
+  pageSize,
+  setPageSize,
+}) {
+  return (
+    <div>
+      <button onClick={() => gotoPage(0)} disabled={!canPreviousPage}>
+        {'<<'}
+      </button>{' '}
+      <button onClick={() => previousPage()} disabled={!canPreviousPage}>
+        {'<'}
+      </button>{' '}
+      <button onClick={() => nextPage()} disabled={!canNextPage}>
+        {'>'}
+      </button>{' '}
+      <button onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage}>
+        {'>>'}
+      </button>{' '}
+      <span>
+        Page{' '}
+        <strong>
+          {pageIndex + 1} of {pageOptions.length}
+        </strong>{' '}
+      </span>
+      <span>
+        | Go to page:{' '}
+        <input
+          type="number"
+          defaultValue={pageIndex + 1}
+          onChange={e => {
+            const page = e.target.value ? Number(e.target.value) - 1 : 0;
+            gotoPage(page);
+          }}
+          style={{ width: '100px' }}
+        />
+      </span>{' '}
+      <select
+        value={pageSize}
+        onChange={e => {
+          setPageSize(Number(e.target.value));
+        }}
+      >
+        {[25, 50, 100].map(pageSize => (
+          <option key={pageSize} value={pageSize}>
+            Show {pageSize}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}

components/common/TableNew.js

@@ -0,0 +1,41 @@
+import React from 'react';
+
+export default function TableNew({
+  getTableProps,
+  getTableBodyProps,
+  headerGroups,
+  prepareRow,
+  page,
+}) {
+  return (
+    <table {...getTableProps()}>
+      <thead>
+        {headerGroups.map(headerGroup => (
+          <tr key={headerGroup} {...headerGroup.getHeaderGroupProps()}>
+            {headerGroup.headers.map(column => (
+              <th key={column} {...column.getHeaderProps()}>
+                {column.render('Header')}
+              </th>
+            ))}
+          </tr>
+        ))}
+      </thead>
+      <tbody {...getTableBodyProps()}>
+        {page.map(row => {
+          prepareRow(row);
+          return (
+            <tr key={row} {...row.getRowProps()}>
+              {row.cells.map(cell => {
+                return (
+                  <td key={cell} {...cell.getCellProps()}>
+                    {cell.render('Cell', { ...row.original })}
+                  </td>
+                );
+              })}
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+}