From 994f31b7e5cbddae3edff520c4be96c98175d0da Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sat, 25 Dec 2021 10:31:48 +0100 Subject: [PATCH] Renamed SortingDropdown to OrderingDropdown, for consistency --- src/settings/ShortUrlsList.tsx | 4 +-- src/settings/Tags.tsx | 4 +-- src/short-urls/ShortUrlsList.tsx | 4 +-- src/tags/TagsList.tsx | 4 +-- src/utils/OrderingDropdown.scss | 8 +++++ ...rtingDropdown.tsx => OrderingDropdown.tsx} | 12 +++---- src/utils/SortingDropdown.scss | 8 ----- src/visits/charts/SortableBarChartCard.tsx | 4 +-- test/settings/ShortUrlsList.test.tsx | 6 ++-- test/settings/Tags.test.tsx | 6 ++-- test/short-urls/ShortUrlsList.test.tsx | 32 +++++++++---------- test/tags/TagsList.test.tsx | 12 +++---- test/utils/SortingDropdown.test.tsx | 6 ++-- .../charts/SortableBarChartCard.test.tsx | 4 +-- 14 files changed, 57 insertions(+), 57 deletions(-) create mode 100644 src/utils/OrderingDropdown.scss rename src/utils/{SortingDropdown.tsx => OrderingDropdown.tsx} (82%) delete mode 100644 src/utils/SortingDropdown.scss diff --git a/src/settings/ShortUrlsList.tsx b/src/settings/ShortUrlsList.tsx index 06ca899b..11dcb687 100644 --- a/src/settings/ShortUrlsList.tsx +++ b/src/settings/ShortUrlsList.tsx @@ -1,6 +1,6 @@ import { FC } from 'react'; import { FormGroup } from 'reactstrap'; -import { SortingDropdown } from '../utils/SortingDropdown'; +import { OrderingDropdown } from '../utils/OrderingDropdown'; import { SHORT_URLS_ORDERABLE_FIELDS } from '../short-urls/data'; import { SimpleCard } from '../utils/SimpleCard'; import { DEFAULT_SHORT_URLS_ORDERING, Settings, ShortUrlsListSettings } from './reducers/settings'; @@ -14,7 +14,7 @@ export const ShortUrlsList: FC = ({ settings: { shortUrlsLis - setShortUrlsListSettings({ defaultOrdering: { field, dir } })} diff --git a/src/settings/Tags.tsx b/src/settings/Tags.tsx index 02289561..85103215 100644 --- a/src/settings/Tags.tsx +++ b/src/settings/Tags.tsx @@ -3,7 +3,7 @@ import { FormGroup } from 'reactstrap'; import { SimpleCard } from '../utils/SimpleCard'; import { TagsModeDropdown } from '../tags/TagsModeDropdown'; import { capitalize } from '../utils/utils'; -import { SortingDropdown } from '../utils/SortingDropdown'; +import { OrderingDropdown } from '../utils/OrderingDropdown'; import { TAGS_ORDERABLE_FIELDS } from '../tags/data/TagsListChildrenProps'; import { Settings, TagsSettings } from './reducers/settings'; @@ -25,7 +25,7 @@ export const Tags: FC = ({ settings: { tags }, setTagsSettings }) => - setTagsSettings({ ...tags, defaultOrdering: { field, dir } })} diff --git a/src/short-urls/ShortUrlsList.tsx b/src/short-urls/ShortUrlsList.tsx index b5887cb6..c0f12f6a 100644 --- a/src/short-urls/ShortUrlsList.tsx +++ b/src/short-urls/ShortUrlsList.tsx @@ -2,7 +2,7 @@ import { pipe } from 'ramda'; import { FC, useEffect, useMemo, useState } from 'react'; import { RouteComponentProps } from 'react-router'; import { Card } from 'reactstrap'; -import { SortingDropdown } from '../utils/SortingDropdown'; +import { OrderingDropdown } from '../utils/OrderingDropdown'; import { determineOrderDir, OrderDir } from '../utils/helpers/ordering'; import { getServerId, SelectedServer } from '../servers/data'; import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub'; @@ -64,7 +64,7 @@ const ShortUrlsList = (ShortUrlsTable: FC, SearchBar: FC) = <>
- +
, TagsTable: FC
- setOrder({ field, dir })} diff --git a/src/utils/OrderingDropdown.scss b/src/utils/OrderingDropdown.scss new file mode 100644 index 00000000..253824b9 --- /dev/null +++ b/src/utils/OrderingDropdown.scss @@ -0,0 +1,8 @@ +.ordering-dropdown__menu--link.ordering-dropdown__menu--link { + min-width: 11rem; +} + +.ordering-dropdown__sort-icon { + margin: 3.5px 0 0; + float: right; +} diff --git a/src/utils/SortingDropdown.tsx b/src/utils/OrderingDropdown.tsx similarity index 82% rename from src/utils/SortingDropdown.tsx rename to src/utils/OrderingDropdown.tsx index bb41fdd3..8d112843 100644 --- a/src/utils/SortingDropdown.tsx +++ b/src/utils/OrderingDropdown.tsx @@ -4,9 +4,9 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faSortAmountUp as sortAscIcon, faSortAmountDown as sortDescIcon } from '@fortawesome/free-solid-svg-icons'; import classNames from 'classnames'; import { determineOrderDir, Order, OrderDir } from './helpers/ordering'; -import './SortingDropdown.scss'; +import './OrderingDropdown.scss'; -export interface SortingDropdownProps { +export interface OrderingDropdownProps { items: Record; order: Order; onChange: (orderField?: T, orderDir?: OrderDir) => void; @@ -14,8 +14,8 @@ export interface SortingDropdownProps { right?: boolean; } -export function SortingDropdown( - { items, order, onChange, isButton = true, right = false }: SortingDropdownProps, +export function OrderingDropdown( + { items, order, onChange, isButton = true, right = false }: OrderingDropdownProps, ) { const handleItemClick = (fieldKey: T) => () => { const newOrderDir = determineOrderDir(fieldKey, order.field, order.dir); @@ -36,7 +36,7 @@ export function SortingDropdown( {toPairs(items).map(([ fieldKey, fieldValue ]) => ( @@ -44,7 +44,7 @@ export function SortingDropdown( {order.field === fieldKey && ( )} diff --git a/src/utils/SortingDropdown.scss b/src/utils/SortingDropdown.scss deleted file mode 100644 index cbb9bcbc..00000000 --- a/src/utils/SortingDropdown.scss +++ /dev/null @@ -1,8 +0,0 @@ -.sorting-dropdown__menu--link.sorting-dropdown__menu--link { - min-width: 11rem; -} - -.sorting-dropdown__sort-icon { - margin: 3.5px 0 0; - float: right; -} diff --git a/src/visits/charts/SortableBarChartCard.tsx b/src/visits/charts/SortableBarChartCard.tsx index da979a5f..b4788e7b 100644 --- a/src/visits/charts/SortableBarChartCard.tsx +++ b/src/visits/charts/SortableBarChartCard.tsx @@ -4,7 +4,7 @@ import { rangeOf } from '../../utils/utils'; import { Order } from '../../utils/helpers/ordering'; import SimplePaginator from '../../common/SimplePaginator'; import { roundTen } from '../../utils/helpers/numbers'; -import { SortingDropdown } from '../../utils/SortingDropdown'; +import { OrderingDropdown } from '../../utils/OrderingDropdown'; import PaginationDropdown from '../../utils/PaginationDropdown'; import { Stats, StatsRow } from '../types'; import { HorizontalBarChart, HorizontalBarChartProps } from './HorizontalBarChart'; @@ -96,7 +96,7 @@ export const SortableBarChartCard: FC = ({ <> {title}
- ', () => { @@ -27,7 +27,7 @@ describe('', () => { [{ defaultOrdering: { field: 'visits', dir: 'ASC' } as ShortUrlsOrder }, { field: 'visits', dir: 'ASC' }], ])('shows expected ordering', (shortUrlsList, expectedOrder) => { const wrapper = createWrapper(shortUrlsList); - const dropdown = wrapper.find(SortingDropdown); + const dropdown = wrapper.find(OrderingDropdown); expect(dropdown.prop('order')).toEqual(expectedOrder); }); @@ -39,7 +39,7 @@ describe('', () => { [ 'title', 'DESC' ], ])('invokes setSettings when ordering changes', (field, dir) => { const wrapper = createWrapper(); - const dropdown = wrapper.find(SortingDropdown); + const dropdown = wrapper.find(OrderingDropdown); expect(setSettings).not.toHaveBeenCalled(); dropdown.simulate('change', field, dir); diff --git a/test/settings/Tags.test.tsx b/test/settings/Tags.test.tsx index b745cd99..a99bd1a4 100644 --- a/test/settings/Tags.test.tsx +++ b/test/settings/Tags.test.tsx @@ -4,7 +4,7 @@ import { FormGroup } from 'reactstrap'; import { Settings, TagsMode, TagsSettings } from '../../src/settings/reducers/settings'; import { TagsModeDropdown } from '../../src/tags/TagsModeDropdown'; import { Tags } from '../../src/settings/Tags'; -import { SortingDropdown } from '../../src/utils/SortingDropdown'; +import { OrderingDropdown } from '../../src/utils/OrderingDropdown'; import { TagsOrder } from '../../src/tags/data/TagsListChildrenProps'; describe('', () => { @@ -60,7 +60,7 @@ describe('', () => { [{ defaultOrdering: { field: 'visits', dir: 'ASC' } as TagsOrder }, { field: 'visits', dir: 'ASC' }], ])('shows expected ordering', (tags, expectedOrder) => { const wrapper = createWrapper(tags); - const dropdown = wrapper.find(SortingDropdown); + const dropdown = wrapper.find(OrderingDropdown); expect(dropdown.prop('order')).toEqual(expectedOrder); }); @@ -72,7 +72,7 @@ describe('', () => { [ 'shortUrls', 'DESC' ], ])('invokes setTagsSettings when ordering changes', (field, dir) => { const wrapper = createWrapper(); - const dropdown = wrapper.find(SortingDropdown); + const dropdown = wrapper.find(OrderingDropdown); expect(setTagsSettings).not.toHaveBeenCalled(); dropdown.simulate('change', field, dir); diff --git a/test/short-urls/ShortUrlsList.test.tsx b/test/short-urls/ShortUrlsList.test.tsx index c87f15c9..1df03e6a 100644 --- a/test/short-urls/ShortUrlsList.test.tsx +++ b/test/short-urls/ShortUrlsList.test.tsx @@ -7,7 +7,7 @@ import shortUrlsListCreator from '../../src/short-urls/ShortUrlsList'; import { ShortUrlsOrderableFields, ShortUrl, ShortUrlsOrder } from '../../src/short-urls/data'; import { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub'; import { ShortUrlsList as ShortUrlsListModel } from '../../src/short-urls/reducers/shortUrlsList'; -import { SortingDropdown } from '../../src/utils/SortingDropdown'; +import { OrderingDropdown } from '../../src/utils/OrderingDropdown'; import Paginator from '../../src/short-urls/Paginator'; import { ReachableServer } from '../../src/servers/data'; import { ShortUrlListRouteParams } from '../../src/short-urls/helpers/hooks'; @@ -54,7 +54,7 @@ describe('', () => { it('wraps expected components', () => { expect(wrapper.find(ShortUrlsTable)).toHaveLength(1); - expect(wrapper.find(SortingDropdown)).toHaveLength(1); + expect(wrapper.find(OrderingDropdown)).toHaveLength(1); expect(wrapper.find(Paginator)).toHaveLength(1); expect(wrapper.find(SearchBar)).toHaveLength(1); }); @@ -80,39 +80,39 @@ describe('', () => { expect(renderIcon('visits').props.currentOrder).toEqual({}); - wrapper.find(SortingDropdown).simulate('change', 'visits'); + wrapper.find(OrderingDropdown).simulate('change', 'visits'); expect(renderIcon('visits').props.currentOrder).toEqual({ field: 'visits' }); - wrapper.find(SortingDropdown).simulate('change', 'visits', 'ASC'); + wrapper.find(OrderingDropdown).simulate('change', 'visits', 'ASC'); expect(renderIcon('visits').props.currentOrder).toEqual({ field: 'visits', dir: 'ASC' }); }); it('handles order through table', () => { const orderByColumn: (field: ShortUrlsOrderableFields) => Function = wrapper.find(ShortUrlsTable).prop('orderByColumn'); - expect(wrapper.find(SortingDropdown).prop('order')).toEqual({}); + expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({}); orderByColumn('visits')(); - expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'visits', dir: 'ASC' }); + expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'visits', dir: 'ASC' }); orderByColumn('title')(); - expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'title', dir: 'ASC' }); + expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'title', dir: 'ASC' }); orderByColumn('shortCode')(); - expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'shortCode', dir: 'ASC' }); + expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'shortCode', dir: 'ASC' }); }); it('handles order through dropdown', () => { - expect(wrapper.find(SortingDropdown).prop('order')).toEqual({}); + expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({}); - wrapper.find(SortingDropdown).simulate('change', 'visits', 'ASC'); - expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'visits', dir: 'ASC' }); + wrapper.find(OrderingDropdown).simulate('change', 'visits', 'ASC'); + expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'visits', dir: 'ASC' }); - wrapper.find(SortingDropdown).simulate('change', 'shortCode', 'DESC'); - expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'shortCode', dir: 'DESC' }); + wrapper.find(OrderingDropdown).simulate('change', 'shortCode', 'DESC'); + expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'shortCode', dir: 'DESC' }); - wrapper.find(SortingDropdown).simulate('change', undefined, undefined); - expect(wrapper.find(SortingDropdown).prop('order')).toEqual({}); + wrapper.find(OrderingDropdown).simulate('change', undefined, undefined); + expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({}); }); it.each([ @@ -122,6 +122,6 @@ describe('', () => { ])('has expected initial ordering', (initialOrderBy, field, dir) => { const wrapper = createWrapper(initialOrderBy); - expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field, dir }); + expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field, dir }); }); }); diff --git a/test/tags/TagsList.test.tsx b/test/tags/TagsList.test.tsx index e374cf3d..1d6de35b 100644 --- a/test/tags/TagsList.test.tsx +++ b/test/tags/TagsList.test.tsx @@ -10,7 +10,7 @@ import { TagsModeDropdown } from '../../src/tags/TagsModeDropdown'; import SearchField from '../../src/utils/SearchField'; import { Settings } from '../../src/settings/reducers/settings'; import { TagsOrderableFields } from '../../src/tags/data/TagsListChildrenProps'; -import { SortingDropdown } from '../../src/utils/SortingDropdown'; +import { OrderingDropdown } from '../../src/utils/OrderingDropdown'; describe('', () => { let wrapper: ShallowWrapper; @@ -89,11 +89,11 @@ describe('', () => { it('triggers ordering when sorting dropdown changes', () => { const wrapper = createWrapper({ filteredTags: [] }); - expect(wrapper.find(SortingDropdown).prop('order')).toEqual({}); - wrapper.find(SortingDropdown).simulate('change', 'tag', 'DESC'); - expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'tag', dir: 'DESC' }); - wrapper.find(SortingDropdown).simulate('change', 'visits', 'ASC'); - expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'visits', dir: 'ASC' }); + expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({}); + wrapper.find(OrderingDropdown).simulate('change', 'tag', 'DESC'); + expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'tag', dir: 'DESC' }); + wrapper.find(OrderingDropdown).simulate('change', 'visits', 'ASC'); + expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'visits', dir: 'ASC' }); }); it('can update current order via orderByColumn from table component', () => { diff --git a/test/utils/SortingDropdown.test.tsx b/test/utils/SortingDropdown.test.tsx index fdd4a3dd..a2c874ce 100644 --- a/test/utils/SortingDropdown.test.tsx +++ b/test/utils/SortingDropdown.test.tsx @@ -3,7 +3,7 @@ import { DropdownItem, DropdownToggle } from 'reactstrap'; import { identity, values } from 'ramda'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faSortAmountDown as caretDownIcon } from '@fortawesome/free-solid-svg-icons'; -import { SortingDropdown , SortingDropdownProps } from '../../src/utils/SortingDropdown'; +import { OrderingDropdown, OrderingDropdownProps } from '../../src/utils/OrderingDropdown'; import { OrderDir } from '../../src/utils/helpers/ordering'; describe('', () => { @@ -13,8 +13,8 @@ describe('', () => { bar: 'Bar', baz: 'Hello World', }; - const createWrapper = (props: Partial = {}) => { - wrapper = shallow(); + const createWrapper = (props: Partial = {}) => { + wrapper = shallow(); return wrapper; }; diff --git a/test/visits/charts/SortableBarChartCard.test.tsx b/test/visits/charts/SortableBarChartCard.test.tsx index d8f7867d..91d088c5 100644 --- a/test/visits/charts/SortableBarChartCard.test.tsx +++ b/test/visits/charts/SortableBarChartCard.test.tsx @@ -1,6 +1,6 @@ import { shallow, ShallowWrapper } from 'enzyme'; import { range } from 'ramda'; -import { SortingDropdown } from '../../../src/utils/SortingDropdown'; +import { OrderingDropdown } from '../../../src/utils/OrderingDropdown'; import PaginationDropdown from '../../../src/utils/PaginationDropdown'; import { rangeOf } from '../../../src/utils/utils'; import { OrderDir } from '../../../src/utils/helpers/ordering'; @@ -45,7 +45,7 @@ describe('', () => { beforeEach(() => { const wrapper = createWrapper(); - const dropdown = wrapper.renderProp('title' as never)().find(SortingDropdown); + const dropdown = wrapper.renderProp('title' as never)().find(OrderingDropdown); assert = (sortName: string, sortDir: OrderDir, keys: string[], values: number[]) => { dropdown.prop('onChange')(sortName, sortDir);