import caretDownIcon from '@fortawesome/fontawesome-free-solid/faCaretDown'; import caretUpIcon from '@fortawesome/fontawesome-free-solid/faCaretUp'; import FontAwesomeIcon from '@fortawesome/react-fontawesome'; import { isEmpty } from 'ramda'; import React from 'react'; import { connect } from 'react-redux'; import Tag from '../utils/Tag'; import { ShortUrlsRow } from './helpers/ShortUrlsRow'; import { listShortUrls } from './reducers/shortUrlsList'; import './ShortUrlsList.scss'; export class ShortUrlsList extends React.Component { refreshList = extraParams => { const { listShortUrls, shortUrlsListParams, match: { params } } = this.props; listShortUrls(params.serverId, { ...shortUrlsListParams, ...extraParams }); }; constructor(props) { super(props); const orderBy = props.shortUrlsListParams.orderBy; this.state = { orderField: orderBy ? Object.keys(orderBy)[0] : 'dateCreated', orderDir: orderBy ? Object.values(orderBy)[0] : 'ASC', } } componentDidMount() { const { match: { params } } = this.props; this.refreshList({ page: params.page }); } render() { const orderBy = field => { const newOrderDir = this.state.orderField !== field ? 'ASC' : (this.state.orderDir === 'DESC' ? 'ASC' : 'DESC'); this.setState({ orderField: field, orderDir: newOrderDir }); this.refreshList({ orderBy: { [field]: newOrderDir } }) }; const renderOrderIcon = field => { if (this.state.orderField !== field) { return null; } return ( ); }; return ( {this.renderShortUrls()}
orderBy('dateCreated')} > {renderOrderIcon('dateCreated')} Created at orderBy('shortCode')} > {renderOrderIcon('shortCode')} Short URL orderBy('originalUrl')} > {renderOrderIcon('originalUrl')} Original URL Tags orderBy('visits')} > {renderOrderIcon('visits')} Visits  
); } renderShortUrls() { const { shortUrlsList, selectedServer, loading, error } = this.props; if (error) { return Something went wrong while loading short URLs :(; } if (loading) { return Loading...; } if (! loading && isEmpty(shortUrlsList)) { return No results found; } return shortUrlsList.map(shortUrl => ( )); } static renderTags(tags) { if (isEmpty(tags)) { return No tags; } return tags.map(tag => ); } } export default connect(state => ({ selectedServer: state.selectedServer, shortUrlsListParams: state.shortUrlsListParams, }), { listShortUrls })(ShortUrlsList);