diff --git a/src/short-urls/ShortUrlsList.js b/src/short-urls/ShortUrlsList.js
index b603b8ac..ef997589 100644
--- a/src/short-urls/ShortUrlsList.js
+++ b/src/short-urls/ShortUrlsList.js
@@ -1,12 +1,20 @@
-import caretDownIcon from '@fortawesome/fontawesome-free-solid/faCaretDown';
-import caretUpIcon from '@fortawesome/fontawesome-free-solid/faCaretUp';
-import FontAwesomeIcon from '@fortawesome/react-fontawesome';
-import { head, isEmpty, pick } from 'ramda';
-import React from 'react';
-import { connect } from 'react-redux';
-import { ShortUrlsRow } from './helpers/ShortUrlsRow';
-import { listShortUrls } from './reducers/shortUrlsList';
-import './ShortUrlsList.scss';
+import caretDownIcon from '@fortawesome/fontawesome-free-solid/faCaretDown'
+import caretUpIcon from '@fortawesome/fontawesome-free-solid/faCaretUp'
+import FontAwesomeIcon from '@fortawesome/react-fontawesome'
+import { head, isEmpty, pick, toPairs } from 'ramda'
+import React from 'react'
+import { connect } from 'react-redux'
+import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap'
+import { ShortUrlsRow } from './helpers/ShortUrlsRow'
+import { listShortUrls } from './reducers/shortUrlsList'
+import './ShortUrlsList.scss'
+
+const SORTABLE_FIELDS = {
+ dateCreated: 'Created at',
+ shortCode: 'Short URL',
+ originalUrl: 'Long URL',
+ visits: 'Visits',
+};
export class ShortUrlsList extends React.Component {
refreshList = extraParams => {
@@ -16,6 +24,34 @@ export class ShortUrlsList extends React.Component {
...extraParams
});
};
+ determineOrderDir = field => {
+ if (this.state.orderField !== field) {
+ return 'ASC';
+ }
+
+ const newOrderMap = {
+ 'ASC': 'DESC',
+ 'DESC': undefined,
+ };
+ return this.state.orderDir ? newOrderMap[this.state.orderDir] : 'ASC';
+ }
+ orderBy = field => {
+ const newOrderDir = this.determineOrderDir(field);
+ this.setState({ orderField: newOrderDir !== undefined ? field : undefined, orderDir: newOrderDir });
+ this.refreshList({ orderBy: { [field]: newOrderDir } })
+ };
+ renderOrderIcon = (field, className = 'short-urls-list__header-icon') => {
+ if (this.state.orderField !== field) {
+ return null;
+ }
+
+ return (
+
+ );
+ };
constructor(props) {
super(props);
@@ -32,78 +68,6 @@ export class ShortUrlsList extends React.Component {
this.refreshList({ page: params.page });
}
- render() {
- const determineOrderDir = field => {
- if (this.state.orderField !== field) {
- return 'ASC';
- }
-
- const newOrderMap = {
- 'ASC': 'DESC',
- 'DESC': undefined,
- };
- return this.state.orderDir ? newOrderMap[this.state.orderDir] : 'ASC';
- }
- const orderBy = field => {
- const newOrderDir = determineOrderDir(field);
- this.setState({ orderField: field, orderDir: newOrderDir });
- this.refreshList({ orderBy: { [field]: newOrderDir } })
- };
- const renderOrderIcon = field => {
- if (this.state.orderField !== field || this.state.orderDir === undefined) {
- return null;
- }
-
- return (
-
- );
- };
-
- return (
-
-
-
- orderBy('dateCreated')}
- >
- {renderOrderIcon('dateCreated')}
- Created at
- |
- orderBy('shortCode')}
- >
- {renderOrderIcon('shortCode')}
- Short URL
- |
- orderBy('originalUrl')}
- >
- {renderOrderIcon('originalUrl')}
- Long URL
- |
- Tags |
- orderBy('visits')}
- >
- {renderOrderIcon('visits')} Visits
- |
- |
-
-
-
- {this.renderShortUrls()}
-
-
- );
- }
-
renderShortUrls() {
const { shortUrlsList, selectedServer, loading, error, shortUrlsListParams } = this.props;
if (error) {
@@ -128,6 +92,71 @@ export class ShortUrlsList extends React.Component {
/>
));
}
+
+ renderMobileOrderingControls() {
+ return (
+
+
+
+ Order by
+
+
+ {toPairs(SORTABLE_FIELDS).map(([key, value]) =>
+ this.orderBy(key)}>
+ {value}
+ {this.renderOrderIcon(key, 'short-urls-list__header-icon--mobile')}
+ )}
+
+
+
+ );
+ }
+
+ render() {
+ return (
+
+ {this.renderMobileOrderingControls()}
+
+
+
+ this.orderBy('dateCreated')}
+ >
+ {this.renderOrderIcon('dateCreated')}
+ Created at
+ |
+ this.orderBy('shortCode')}
+ >
+ {this.renderOrderIcon('shortCode')}
+ Short URL
+ |
+ this.orderBy('originalUrl')}
+ >
+ {this.renderOrderIcon('originalUrl')}
+ Long URL
+ |
+ Tags |
+ this.orderBy('visits')}
+ >
+ {this.renderOrderIcon('visits')} Visits
+ |
+ |
+
+
+
+ {this.renderShortUrls()}
+
+
+
+ );
+ }
}
export default connect(pick(['selectedServer', 'shortUrlsListParams']), { listShortUrls })(ShortUrlsList);
diff --git a/src/short-urls/ShortUrlsList.scss b/src/short-urls/ShortUrlsList.scss
index 171705de..020081dd 100644
--- a/src/short-urls/ShortUrlsList.scss
+++ b/src/short-urls/ShortUrlsList.scss
@@ -14,6 +14,15 @@
margin-right: 5px;
}
+.short-urls-list__header-icon--mobile {
+ margin: 3.5px 0 0;
+ float: right;
+}
+
.short-urls-list__header-cell--with-action {
cursor: pointer;
}
+
+.short-urls-list__order-dropdown {
+ width: 100%;
+}