Extracted short URLs table into reusable component to use both on list section and overview section

src/short-urls/ShortUrlsTable.tsx

@@ -0,0 +1,91 @@
+import { FC, ReactNode } from 'react';
+import { isEmpty } from 'ramda';
+import classNames from 'classnames';
+import { SelectedServer } from '../servers/data';
+import { ShortUrlsList as ShortUrlsListState } from './reducers/shortUrlsList';
+import { ShortUrlsRowProps } from './helpers/ShortUrlsRow';
+import { OrderableFields, ShortUrlsListParams } from './reducers/shortUrlsListParams';
+import './ShortUrlsTable.scss';
+
+export interface ShortUrlsTableProps {
+  orderByColumn?: (column: OrderableFields) => () => void;
+  renderOrderIcon?: (column: OrderableFields) => ReactNode;
+  shortUrlsList: ShortUrlsListState;
+  selectedServer: SelectedServer;
+  refreshList?: Function;
+  shortUrlsListParams?: ShortUrlsListParams;
+  className?: string;
+}
+
+export const ShortUrlsTable = (ShortUrlsRow: FC<ShortUrlsRowProps>) => ({
+  orderByColumn,
+  renderOrderIcon,
+  shortUrlsList,
+  refreshList,
+  shortUrlsListParams,
+  selectedServer,
+  className,
+}: ShortUrlsTableProps) => {
+  const { error, loading, shortUrls } = shortUrlsList;
+  const orderableColumnsClasses = classNames('short-urls-table__header-cell', {
+    'short-urls-table__header-cell--with-action': !!orderByColumn,
+  });
+  const tableClasses = classNames('table table-striped table-hover', className);
+
+  const renderShortUrls = () => {
+    if (error) {
+      return (
+        <tr>
+          <td colSpan={6} className="text-center table-danger">Something went wrong while loading short URLs :(</td>
+        </tr>
+      );
+    }
+
+    if (loading) {
+      return <tr><td colSpan={6} className="text-center">Loading...</td></tr>;
+    }
+
+    if (!loading && isEmpty(shortUrlsList)) {
+      return <tr><td colSpan={6} className="text-center">No results found</td></tr>;
+    }
+
+    return shortUrls?.data.map((shortUrl) => (
+      <ShortUrlsRow
+        key={shortUrl.shortUrl}
+        shortUrl={shortUrl}
+        selectedServer={selectedServer}
+        refreshList={refreshList}
+        shortUrlsListParams={shortUrlsListParams}
+      />
+    ));
+  };
+
+  return (
+    <table className={tableClasses}>
+      <thead className="short-urls-table__header">
+        <tr>
+          <th className={orderableColumnsClasses} onClick={orderByColumn?.('dateCreated')}>
+            {renderOrderIcon?.('dateCreated')}
+            Created at
+          </th>
+          <th className={orderableColumnsClasses} onClick={orderByColumn?.('shortCode')}>
+            {renderOrderIcon?.('shortCode')}
+            Short URL
+          </th>
+          <th className={orderableColumnsClasses} onClick={orderByColumn?.('longUrl')}>
+            {renderOrderIcon?.('longUrl')}
+            Long URL
+          </th>
+          <th className="short-urls-table__header-cell">Tags</th>
+          <th className={orderableColumnsClasses} onClick={orderByColumn?.('visits')}>
+            <span className="indivisible">{renderOrderIcon?.('visits')} Visits</span>
+          </th>
+          <th className="short-urls-table__header-cell">&nbsp;</th>
+        </tr>
+      </thead>
+      <tbody>
+        {renderShortUrls()}
+      </tbody>
+    </table>
+  );
+};