From a733733e69c11dc5948eda9c119ca74f24c0c60c Mon Sep 17 00:00:00 2001 From: Pavel Mineev Date: Sun, 8 Aug 2021 16:50:03 +0300 Subject: [PATCH] update sort-picker --- frontend/app/components/sort-picker/index.ts | 1 - .../sort-picker/sort-picker.module.css | 0 .../sort-picker/sort-picker.spec.tsx | 53 ----------- .../components/sort-picker/sort-picker.tsx | 91 ------------------- 4 files changed, 145 deletions(-) delete mode 100644 frontend/app/components/sort-picker/index.ts delete mode 100644 frontend/app/components/sort-picker/sort-picker.module.css delete mode 100644 frontend/app/components/sort-picker/sort-picker.spec.tsx delete mode 100644 frontend/app/components/sort-picker/sort-picker.tsx diff --git a/frontend/app/components/sort-picker/index.ts b/frontend/app/components/sort-picker/index.ts deleted file mode 100644 index 0908c1b3..00000000 --- a/frontend/app/components/sort-picker/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './sort-picker'; diff --git a/frontend/app/components/sort-picker/sort-picker.module.css b/frontend/app/components/sort-picker/sort-picker.module.css deleted file mode 100644 index e69de29b..00000000 diff --git a/frontend/app/components/sort-picker/sort-picker.spec.tsx b/frontend/app/components/sort-picker/sort-picker.spec.tsx deleted file mode 100644 index 8253fcd0..00000000 --- a/frontend/app/components/sort-picker/sort-picker.spec.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import '@testing-library/jest-dom'; -import { fireEvent, waitFor } from '@testing-library/preact'; -import { h } from 'preact'; - -import { render } from 'tests/utils'; -import * as commentsActions from 'store/comments/actions'; -import * as localStorage from 'common/local-storage'; -import { LS_SORT_KEY } from 'common/constants'; -import type { Tree } from 'common/types'; -import type { StoreState } from 'store'; - -import { SortPicker } from './sort-picker'; - -const defaultState = { comments: {} as StoreState['comments'], hiddenUsers: {} }; -const stateWithSort = { comments: { sort: '-active' } as StoreState['comments'] }; - -describe('', () => { - it('should render sort picker with options', () => { - const { container, queryAllByText, queryByText } = render(, defaultState); - - expect(container.querySelectorAll('option')).toHaveLength(8); - expect(queryAllByText('Best')).toHaveLength(2); - expect(queryByText('Sort by')).toBeInTheDocument(); - }); - - it('should has static class names', () => { - const { container } = render(, defaultState); - - expect(container.querySelector('.sort-picker')).toBeInTheDocument(); - }); - - it('should render selected element', () => { - const { container, queryAllByText } = render(, stateWithSort); - - expect(queryAllByText('Recently updated')).toHaveLength(2); - expect(container.querySelector('[value="-active"]')?.selected).toBeTruthy(); - }); - - it('should change selected store', async () => { - const nextOption = '-controversy'; - const updateSorting = jest.spyOn(commentsActions, 'updateSorting'); - const { container } = render(, defaultState); - const select = container.querySelector('select') as HTMLSelectElement; - - expect(select).toBeInTheDocument(); - - fireEvent.change(select, { target: { value: nextOption } }); - - await waitFor(() => expect(updateSorting).toHaveBeenCalledWith(nextOption)); - - expect(container.querySelector(`[value="${nextOption}"]`)?.selected).toBeTruthy(); - }); -}); diff --git a/frontend/app/components/sort-picker/sort-picker.tsx b/frontend/app/components/sort-picker/sort-picker.tsx deleted file mode 100644 index 1e84c682..00000000 --- a/frontend/app/components/sort-picker/sort-picker.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import { h } from 'preact'; -import { FormattedMessage, defineMessages, useIntl } from 'react-intl'; -import { useMemo } from 'preact/hooks'; -import { useSelector, useDispatch } from 'react-redux'; -import clsx from 'clsx'; - -import { StoreState } from 'store'; -import { Select } from 'components/select'; -import { updateSorting } from 'store/comments/actions'; -import type { Sorting } from 'common/types'; - -import styles from './sort-picker.module.css'; - -export function SortPicker() { - const dispatch = useDispatch(); - const intl = useIntl(); - const [items, itemsById] = useMemo(() => { - const sortOptions = { - '-score': intl.formatMessage(messages.best), - '+score': intl.formatMessage(messages.worst), - '-time': intl.formatMessage(messages.newest), - '+time': intl.formatMessage(messages.oldest), - '-active': intl.formatMessage(messages.recentlyUpdated), - '+active': intl.formatMessage(messages.leastRecentlyUpdated), - '-controversy': intl.formatMessage(messages.mostControversial), - '+controversy': intl.formatMessage(messages.leastControversial), - }; - type SortItem = { value: string; label: string }; - const sortItems: SortItem[] = Object.entries(sortOptions).map(([k, v]) => ({ value: k, label: v })); - const sortById = sortItems.reduce( - (accum, s) => ({ ...accum, [s.value]: s }), - {} as Record - ); - - return [sortItems, sortById]; - }, []); - const sort = useSelector((s: StoreState) => s.comments.sort) || items[0].value; - const selected = itemsById[sort]; - - function handleSortChange(evt: Event) { - const { value } = evt.target as HTMLOptionElement; - - if (!(value in itemsById)) { - return; - } - - dispatch(updateSorting(value as Sorting)); - } - - return ( - - {' '} -