Implemented first elements of short codes list

src/short-urls/ShortUrlsList.js

@@ -1,34 +1,70 @@
 import React from 'react';
+import Moment from 'react-moment';
 import { connect } from 'react-redux';
+import Tag from '../utils/Tag';
 import { listShortUrls } from './reducers/shortUrlsList';
 import { isEmpty } from 'ramda';
 
 export class ShortUrlsList extends React.Component {
   componentDidMount() {
     const { match } = this.props;
-    this.props.listShortUrls(match.params.serverId);
+    this.props.listShortUrls(match.params.serverId, { page: match.params.page });
   }
 
   render() {
     return (
-      <ul>
-        {this.renderShortUrls()}
-      </ul>
+      <table className="table">
+        <thead>
+          <tr>
+            <th>Created at</th>
+            <th>Short URL</th>
+            <th>Original URL</th>
+            <th>Tags</th>
+            <th>Visits</th>
+            <th> - </th>
+          </tr>
+        </thead>
+        <tbody>
+          {this.renderShortUrls()}
+        </tbody>
+      </table>
     );
   }
 
   renderShortUrls() {
-    const { shortUrlsList } = this.props;
+    const { shortUrlsList, selectedServer } = this.props;
     if (isEmpty(shortUrlsList)) {
       return <li><i>Loading...</i></li>;
     }
 
     return shortUrlsList.map(shortUrl => (
-      <li key={shortUrl.shortCode}>{`${shortUrl.shortCode}`}</li>
+      <tr key={shortUrl.shortCode}>
+        <td className="nowrap"><Moment format="YYYY-MM-DD HH:mm" interval={0}>{shortUrl.dateCreated}</Moment></td>
+        <td>
+          <a href={`${selectedServer.url}/${shortUrl.shortCode}`} target="_blank">
+            {`${selectedServer.url}/${shortUrl.shortCode}`}
+          </a>
+        </td>
+        <td>
+          <a href={shortUrl.originalUrl} target="_blank">{shortUrl.originalUrl}</a>
+        </td>
+        <td>{ShortUrlsList.renderTags(shortUrl.tags)}</td>
+        <td>{shortUrl.visitsCount}</td>
+        <td></td>
+      </tr>
     ));
   }
+
+  static renderTags(tags) {
+    if (isEmpty(tags)) {
+      return <i className="nowrap"><small>No tags</small></i>;
+    }
+
+    return tags.map(tag => <Tag text={tag} />);
+  }
 }
 
 export default connect(state => ({
-  shortUrlsList: state.shortUrlsList
+  shortUrlsList: state.shortUrlsList,
+  selectedServer: state.selectedServer,
 }), { listShortUrls })(ShortUrlsList);

src/short-urls/reducers/shortUrlsList.js

@@ -11,12 +11,12 @@ export default function shortUrlsListReducer(state = [], action) {
   }
 }
 
-export const listShortUrls = (serverId) => {
+export const listShortUrls = (serverId, params = {}) => {
   return async dispatch => {
     const selectedServer = ServersService.findServerById(serverId);
 
     ShlinkApiClient.setConfig(selectedServer);
-    const shortUrls = await ShlinkApiClient.listShortUrls();
-    dispatch({ type: LIST_SHORT_URLS, shortUrls });
+    const shortUrls = await ShlinkApiClient.listShortUrls(params);
+    dispatch({ type: LIST_SHORT_URLS, shortUrls, selectedServer });
   };
 };