Migrated all remaining short-url elements to TS

src/short-urls/ShortUrlsList.tsx

@@ -0,0 +1,177 @@
+import { faCaretDown as caretDownIcon, faCaretUp as caretUpIcon } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { head, isEmpty, keys, values } from 'ramda';
+import React, { useState, useEffect, FC } from 'react';
+import qs from 'qs';
+import { RouteChildrenProps } from 'react-router';
+import SortingDropdown from '../utils/SortingDropdown';
+import { determineOrderDir, OrderDir } from '../utils/utils';
+import { MercureInfo } from '../mercure/reducers/mercureInfo';
+import { useMercureTopicBinding } from '../mercure/helpers';
+import { SelectedServer } from '../servers/data';
+import { ShortUrlsList as ShortUrlsListState } from './reducers/shortUrlsList';
+import { ShortUrlsRowProps } from './helpers/ShortUrlsRow';
+import { ShortUrl } from './data';
+import { ShortUrlsListParams } from './reducers/shortUrlsListParams';
+import './ShortUrlsList.scss';
+
+export const SORTABLE_FIELDS = {
+  dateCreated: 'Created at',
+  shortCode: 'Short URL',
+  longUrl: 'Long URL',
+  visits: 'Visits',
+};
+type OrderableFields = keyof typeof SORTABLE_FIELDS;
+
+interface RouteParams {
+  page: string;
+  serverId: string;
+}
+
+export interface WithList {
+  shortUrlsList: ShortUrl[];
+}
+
+export interface ShortUrlsListProps extends ShortUrlsListState, RouteChildrenProps<RouteParams> {
+  selectedServer: SelectedServer;
+  listShortUrls: (params: ShortUrlsListParams) => void;
+  shortUrlsListParams: ShortUrlsListParams;
+  resetShortUrlParams: () => void;
+  createNewVisit: (message: any) => void;
+  loadMercureInfo: Function;
+  mercureInfo: MercureInfo;
+}
+
+const ShortUrlsList = (ShortUrlsRow: FC<ShortUrlsRowProps>) => ({
+  listShortUrls,
+  resetShortUrlParams,
+  shortUrlsListParams,
+  match,
+  location,
+  loading,
+  error,
+  shortUrlsList,
+  selectedServer,
+  createNewVisit,
+  loadMercureInfo,
+  mercureInfo,
+}: ShortUrlsListProps & WithList) => {
+  const { orderBy } = shortUrlsListParams;
+  const [ order, setOrder ] = useState<{ orderField?: OrderableFields; orderDir?: OrderDir }>({
+    orderField: orderBy && (head(keys(orderBy)) as OrderableFields),
+    orderDir: orderBy && head(values(orderBy)),
+  });
+  const refreshList = (extraParams: ShortUrlsListParams) => listShortUrls({ ...shortUrlsListParams, ...extraParams });
+  const handleOrderBy = (orderField: OrderableFields, orderDir: OrderDir) => {
+    setOrder({ orderField, orderDir });
+    refreshList({ orderBy: { [orderField]: orderDir } });
+  };
+  const orderByColumn = (field: OrderableFields) => () =>
+    handleOrderBy(field, determineOrderDir(field, order.orderField, order.orderDir));
+  const renderOrderIcon = (field: OrderableFields) => {
+    if (order.orderField !== field) {
+      return null;
+    }
+
+    if (!order.orderDir) {
+      return null;
+    }
+
+    return (
+      <FontAwesomeIcon
+        icon={order.orderDir === 'ASC' ? caretUpIcon : caretDownIcon}
+        className="short-urls-list__header-icon"
+      />
+    );
+  };
+  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 shortUrlsList.map((shortUrl) => (
+      <ShortUrlsRow
+        key={shortUrl.shortUrl}
+        shortUrl={shortUrl}
+        selectedServer={selectedServer}
+        refreshList={refreshList}
+        shortUrlsListParams={shortUrlsListParams}
+      />
+    ));
+  };
+
+  useEffect(() => {
+    const query = qs.parse(location.search, { ignoreQueryPrefix: true });
+    const tags = query.tag ? [ query.tag as string ] : shortUrlsListParams.tags;
+
+    refreshList({ page: match?.params.page, tags });
+
+    return resetShortUrlParams;
+  }, []);
+  useMercureTopicBinding(mercureInfo, 'https://shlink.io/new-visit', createNewVisit, loadMercureInfo);
+
+  return (
+    <React.Fragment>
+      <div className="d-block d-md-none mb-3">
+        <SortingDropdown
+          items={SORTABLE_FIELDS}
+          orderField={order.orderField}
+          orderDir={order.orderDir}
+          onChange={handleOrderBy}
+        />
+      </div>
+      <table className="table table-striped table-hover">
+        <thead className="short-urls-list__header">
+          <tr>
+            <th
+              className="short-urls-list__header-cell short-urls-list__header-cell--with-action"
+              onClick={orderByColumn('dateCreated')}
+            >
+              {renderOrderIcon('dateCreated')}
+              Created at
+            </th>
+            <th
+              className="short-urls-list__header-cell short-urls-list__header-cell--with-action"
+              onClick={orderByColumn('shortCode')}
+            >
+              {renderOrderIcon('shortCode')}
+              Short URL
+            </th>
+            <th
+              className="short-urls-list__header-cell short-urls-list__header-cell--with-action"
+              onClick={orderByColumn('longUrl')}
+            >
+              {renderOrderIcon('longUrl')}
+              Long URL
+            </th>
+            <th className="short-urls-list__header-cell">Tags</th>
+            <th
+              className="short-urls-list__header-cell short-urls-list__header-cell--with-action"
+              onClick={orderByColumn('visits')}
+            >
+              <span className="indivisible">{renderOrderIcon('visits')} Visits</span>
+            </th>
+            <th className="short-urls-list__header-cell">&nbsp;</th>
+          </tr>
+        </thead>
+        <tbody>
+          {renderShortUrls()}
+        </tbody>
+      </table>
+    </React.Fragment>
+  );
+};
+
+export default ShortUrlsList;