diff --git a/CHANGELOG.md b/CHANGELOG.md index d49c2084..9d90721a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,6 +18,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), #### Changed +* [#150](https://github.com/shlinkio/shlink-web-client/issues/150) The list of short URLs is now ordered by the creation date, showing newest results first. * [#40](https://github.com/shlinkio/shlink-web-client/issues/40) Migrated project to TypeScript. #### Deprecated diff --git a/src/short-urls/ShortUrlsList.tsx b/src/short-urls/ShortUrlsList.tsx index 6cb2c947..f6f68153 100644 --- a/src/short-urls/ShortUrlsList.tsx +++ b/src/short-urls/ShortUrlsList.tsx @@ -1,7 +1,7 @@ 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 React, { FC, useEffect, useState } from 'react'; import qs from 'qs'; import { RouteComponentProps } from 'react-router'; import SortingDropdown from '../utils/SortingDropdown'; @@ -11,17 +11,9 @@ import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub'; import { ShortUrlsList as ShortUrlsListState } from './reducers/shortUrlsList'; import { ShortUrlsRowProps } from './helpers/ShortUrlsRow'; import { ShortUrl } from './data'; -import { ShortUrlsListParams } from './reducers/shortUrlsListParams'; +import { OrderableFields, ShortUrlsListParams, SORTABLE_FIELDS } 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; diff --git a/src/short-urls/reducers/shortUrlsListParams.ts b/src/short-urls/reducers/shortUrlsListParams.ts index db9ba232..1aa69804 100644 --- a/src/short-urls/reducers/shortUrlsListParams.ts +++ b/src/short-urls/reducers/shortUrlsListParams.ts @@ -4,16 +4,28 @@ import { LIST_SHORT_URLS, ListShortUrlsAction } from './shortUrlsList'; export const RESET_SHORT_URL_PARAMS = 'shlink/shortUrlsListParams/RESET_SHORT_URL_PARAMS'; +export const SORTABLE_FIELDS = { + dateCreated: 'Created at', + shortCode: 'Short URL', + longUrl: 'Long URL', + visits: 'Visits', +}; + +export type OrderableFields = keyof typeof SORTABLE_FIELDS; + export interface ShortUrlsListParams { page?: string; tags?: string[]; searchTerm?: string; startDate?: string; endDate?: string; - orderBy?: Record; + orderBy?: Partial>; } -const initialState: ShortUrlsListParams = { page: '1' }; +const initialState: ShortUrlsListParams = { + page: '1', + orderBy: { dateCreated: 'DESC' }, +}; export default buildReducer({ [LIST_SHORT_URLS]: (state, { params }) => ({ ...state, ...params }), diff --git a/test/short-urls/ShortUrlsList.test.tsx b/test/short-urls/ShortUrlsList.test.tsx index 9895d058..0bc50150 100644 --- a/test/short-urls/ShortUrlsList.test.tsx +++ b/test/short-urls/ShortUrlsList.test.tsx @@ -3,9 +3,10 @@ import { shallow, ShallowWrapper } from 'enzyme'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faCaretDown as caretDownIcon, faCaretUp as caretUpIcon } from '@fortawesome/free-solid-svg-icons'; import { Mock } from 'ts-mockery'; -import shortUrlsListCreator, { ShortUrlsListProps, SORTABLE_FIELDS } from '../../src/short-urls/ShortUrlsList'; +import shortUrlsListCreator, { ShortUrlsListProps } from '../../src/short-urls/ShortUrlsList'; import { ShortUrl } from '../../src/short-urls/data'; import { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub'; +import { SORTABLE_FIELDS } from '../../src/short-urls/reducers/shortUrlsListParams'; describe('', () => { let wrapper: ShallowWrapper; diff --git a/test/short-urls/reducers/shortUrlsListParams.test.ts b/test/short-urls/reducers/shortUrlsListParams.test.ts index 08778deb..871ac7ff 100644 --- a/test/short-urls/reducers/shortUrlsListParams.test.ts +++ b/test/short-urls/reducers/shortUrlsListParams.test.ts @@ -1,22 +1,23 @@ import reducer, { RESET_SHORT_URL_PARAMS, resetShortUrlParams, - ShortUrlsListParams, } from '../../../src/short-urls/reducers/shortUrlsListParams'; import { LIST_SHORT_URLS } from '../../../src/short-urls/reducers/shortUrlsList'; describe('shortUrlsListParamsReducer', () => { describe('reducer', () => { - const defaultState: ShortUrlsListParams = { page: '1' }; - it('returns params when action is LIST_SHORT_URLS', () => - expect(reducer(undefined, { type: LIST_SHORT_URLS, params: { searchTerm: 'foo', page: '2' } })).toEqual({ + expect(reducer(undefined, { type: LIST_SHORT_URLS, params: { searchTerm: 'foo', page: '2' } } as any)).toEqual({ page: '2', searchTerm: 'foo', + orderBy: { dateCreated: 'DESC' }, })); it('returns default value when action is RESET_SHORT_URL_PARAMS', () => - expect(reducer(undefined, { type: RESET_SHORT_URL_PARAMS, params: defaultState })).toEqual(defaultState)); + expect(reducer(undefined, { type: RESET_SHORT_URL_PARAMS } as any)).toEqual({ + page: '1', + orderBy: { dateCreated: 'DESC' }, + })); }); describe('resetShortUrlParams', () => {