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 ( - - - - - - - - - - - - - {this.renderShortUrls()} - -
orderBy('dateCreated')} - > - {renderOrderIcon('dateCreated')} - Created at - orderBy('shortCode')} - > - {renderOrderIcon('shortCode')} - Short URL - orderBy('originalUrl')} - > - {renderOrderIcon('originalUrl')} - Long URL - Tags orderBy('visits')} - > - {renderOrderIcon('visits')} Visits -  
- ); - } - 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.renderShortUrls()} + +
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 +  
+
+ ); + } } 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%; +}