From 37caa1ad19f90d20e6b59dd7db163f2894d6c80f Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sat, 17 Dec 2022 19:56:58 +0100 Subject: [PATCH] Removed references to tags cards --- src/settings/TagsSettings.tsx | 11 ---- src/tags/TagCard.scss | 38 ------------ src/tags/TagCard.tsx | 89 ---------------------------- src/tags/TagsCards.tsx | 32 ---------- src/tags/TagsList.tsx | 36 ++++------- src/tags/TagsModeDropdown.tsx | 23 ------- src/tags/services/provideServices.ts | 7 +-- test/settings/TagsSettings.test.tsx | 28 +-------- test/tags/TagCard.test.tsx | 57 ------------------ test/tags/TagsCards.test.tsx | 26 -------- test/tags/TagsList.test.tsx | 15 +---- test/tags/TagsModeDropdown.test.tsx | 34 ----------- 12 files changed, 15 insertions(+), 381 deletions(-) delete mode 100644 src/tags/TagCard.scss delete mode 100644 src/tags/TagCard.tsx delete mode 100644 src/tags/TagsCards.tsx delete mode 100644 src/tags/TagsModeDropdown.tsx delete mode 100644 test/tags/TagCard.test.tsx delete mode 100644 test/tags/TagsCards.test.tsx delete mode 100644 test/tags/TagsModeDropdown.test.tsx diff --git a/src/settings/TagsSettings.tsx b/src/settings/TagsSettings.tsx index db37e167..8cb5631d 100644 --- a/src/settings/TagsSettings.tsx +++ b/src/settings/TagsSettings.tsx @@ -1,10 +1,7 @@ import { FC } from 'react'; import { SimpleCard } from '../utils/SimpleCard'; -import { TagsModeDropdown } from '../tags/TagsModeDropdown'; -import { capitalize } from '../utils/utils'; import { OrderingDropdown } from '../utils/OrderingDropdown'; import { TAGS_ORDERABLE_FIELDS } from '../tags/data/TagsListChildrenProps'; -import { FormText } from '../utils/forms/FormText'; import { LabeledFormGroup } from '../utils/forms/LabeledFormGroup'; import { Settings, TagsSettings as TagsSettingsOptions } from './reducers/settings'; @@ -15,14 +12,6 @@ interface TagsProps { export const TagsSettings: FC = ({ settings: { tags }, setTagsSettings }) => ( - - capitalize(tagsMode)} - onChange={(defaultMode) => setTagsSettings({ ...tags, defaultMode })} - /> - Tags will be displayed as {tags?.defaultMode ?? 'cards'}. - void; -} - -const isTruncated = (el: HTMLElement | undefined): boolean => !!el && el.scrollWidth > el.clientWidth; - -export const TagCard = ( - DeleteTagConfirmModal: FC, - EditTagModal: FC, - colorGenerator: ColorGenerator, -) => ({ tag, selectedServer, displayed, toggle }: TagCardProps) => { - const [isDeleteModalOpen, toggleDelete] = useToggle(); - const [isEditModalOpen, toggleEdit] = useToggle(); - const [hasTitle,, displayTitle] = useToggle(); - const titleRef = useRef(); - const serverId = getServerId(selectedServer); - - useEffect(() => { - if (isTruncated(titleRef.current)) { - displayTitle(); - } - }, [titleRef.current]); - - return ( - - - - -
- - {tag.tag} -
- - - - - - Short URLs - {prettify(tag.shortUrls)} - - - Visits - {prettify(tag.visits)} - - - - - - - - ); -}; diff --git a/src/tags/TagsCards.tsx b/src/tags/TagsCards.tsx deleted file mode 100644 index 95917540..00000000 --- a/src/tags/TagsCards.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { FC, useState } from 'react'; -import { splitEvery } from 'ramda'; -import { Row } from 'reactstrap'; -import { TagCardProps } from './TagCard'; -import { TagsListChildrenProps } from './data/TagsListChildrenProps'; - -const { ceil } = Math; -const TAGS_GROUPS_AMOUNT = 4; - -export const TagsCards = (TagCard: FC): FC => ({ sortedTags, selectedServer }) => { - const [displayedTag, setDisplayedTag] = useState(); - const tagsCount = sortedTags.length; - const tagsGroups = splitEvery(ceil(tagsCount / TAGS_GROUPS_AMOUNT), sortedTags); - - return ( - - {tagsGroups.map((group, index) => ( -
- {group.map((tag) => ( - setDisplayedTag(displayedTag !== tag.tag ? tag.tag : undefined)} - /> - ))} -
- ))} - - ); -}; diff --git a/src/tags/TagsList.tsx b/src/tags/TagsList.tsx index 2c825931..be35f153 100644 --- a/src/tags/TagsList.tsx +++ b/src/tags/TagsList.tsx @@ -8,17 +8,11 @@ import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub'; import { Result } from '../utils/Result'; import { ShlinkApiError } from '../api/ShlinkApiError'; import { Topics } from '../mercure/helpers/Topics'; -import { Settings, TagsMode } from '../settings/reducers/settings'; +import { Settings } from '../settings/reducers/settings'; import { determineOrderDir, sortList } from '../utils/helpers/ordering'; import { OrderingDropdown } from '../utils/OrderingDropdown'; import { TagsList as TagsListState } from './reducers/tagsList'; -import { - TagsOrderableFields, - TAGS_ORDERABLE_FIELDS, - TagsListChildrenProps, - TagsOrder, -} from './data/TagsListChildrenProps'; -import { TagsModeDropdown } from './TagsModeDropdown'; +import { TagsOrderableFields, TAGS_ORDERABLE_FIELDS, TagsOrder } from './data/TagsListChildrenProps'; import { NormalizedTag } from './data'; import { TagsTableProps } from './TagsTable'; @@ -30,10 +24,9 @@ export interface TagsListProps { settings: Settings; } -export const TagsList = (TagsCards: FC, TagsTable: FC) => boundToMercureHub(( +export const TagsList = (TagsTable: FC) => boundToMercureHub(( { filterTags, forceListTags, tagsList, selectedServer, settings }: TagsListProps, ) => { - const [mode, setMode] = useState(settings.tags?.defaultMode ?? 'cards'); const [order, setOrder] = useState(settings.tags?.defaultOrdering ?? {}); const resolveSortedTags = pipe( () => tagsList.filteredTags.map((tag): NormalizedTag => ({ @@ -73,26 +66,21 @@ export const TagsList = (TagsCards: FC, TagsTable: FC - : ( - - ); + return ( + + ); }; return ( <> -
- -
-
+
void; - renderTitle?: (mode: TagsMode) => string; -} - -export const TagsModeDropdown: FC = ({ mode, onChange, renderTitle }) => ( - - onChange('cards')}> - Cards - - onChange('list')}> - List - - -); diff --git a/src/tags/services/provideServices.ts b/src/tags/services/provideServices.ts index 2d81afb7..0fbda139 100644 --- a/src/tags/services/provideServices.ts +++ b/src/tags/services/provideServices.ts @@ -1,7 +1,6 @@ import { prop } from 'ramda'; import Bottle, { IContainer } from 'bottlejs'; import { TagsSelector } from '../helpers/TagsSelector'; -import { TagCard } from '../TagCard'; import { DeleteTagConfirmModal } from '../helpers/DeleteTagConfirmModal'; import { EditTagModal } from '../helpers/EditTagModal'; import { TagsList } from '../TagsList'; @@ -9,7 +8,6 @@ import { filterTags, listTags, tagsListReducerCreator } from '../reducers/tagsLi import { tagDeleted, tagDeleteReducerCreator } from '../reducers/tagDelete'; import { editTag, tagEdited, tagEditReducerCreator } from '../reducers/tagEdit'; import { ConnectDecorator } from '../../container/types'; -import { TagsCards } from '../TagsCards'; import { TagsTable } from '../TagsTable'; import { TagsTableRow } from '../TagsTableRow'; @@ -18,20 +16,17 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => { bottle.serviceFactory('TagsSelector', TagsSelector, 'ColorGenerator'); bottle.decorator('TagsSelector', connect(['tagsList', 'settings'], ['listTags'])); - bottle.serviceFactory('TagCard', TagCard, 'DeleteTagConfirmModal', 'EditTagModal', 'ColorGenerator'); - bottle.serviceFactory('DeleteTagConfirmModal', () => DeleteTagConfirmModal); bottle.decorator('DeleteTagConfirmModal', connect(['tagDelete'], ['deleteTag', 'tagDeleted'])); bottle.serviceFactory('EditTagModal', EditTagModal, 'ColorGenerator'); bottle.decorator('EditTagModal', connect(['tagEdit'], ['editTag', 'tagEdited'])); - bottle.serviceFactory('TagsCards', TagsCards, 'TagCard'); bottle.serviceFactory('TagsTableRow', TagsTableRow, 'DeleteTagConfirmModal', 'EditTagModal', 'ColorGenerator'); bottle.serviceFactory('TagsTable', TagsTable, 'TagsTableRow'); - bottle.serviceFactory('TagsList', TagsList, 'TagsCards', 'TagsTable'); + bottle.serviceFactory('TagsList', TagsList, 'TagsTable'); bottle.decorator('TagsList', connect( ['tagsList', 'selectedServer', 'mercureInfo', 'settings'], ['forceListTags', 'filterTags', 'createNewVisits', 'loadMercureInfo'], diff --git a/test/settings/TagsSettings.test.tsx b/test/settings/TagsSettings.test.tsx index 854ebf9f..d1b56f05 100644 --- a/test/settings/TagsSettings.test.tsx +++ b/test/settings/TagsSettings.test.tsx @@ -1,9 +1,8 @@ import { screen } from '@testing-library/react'; import { Mock } from 'ts-mockery'; -import { Settings, TagsMode, TagsSettings as TagsSettingsOptions } from '../../src/settings/reducers/settings'; +import { Settings, TagsSettings as TagsSettingsOptions } from '../../src/settings/reducers/settings'; import { TagsSettings } from '../../src/settings/TagsSettings'; import { TagsOrder } from '../../src/tags/data/TagsListChildrenProps'; -import { capitalize } from '../../src/utils/utils'; import { renderWithEvents } from '../__helpers__/setUpTest'; describe('', () => { @@ -17,35 +16,10 @@ describe('', () => { it('renders expected amount of groups', () => { setUp(); - expect(screen.getByText('Default display mode when managing tags:')).toBeInTheDocument(); expect(screen.getByText('Default ordering for tags list:')).toBeInTheDocument(); expect(screen.getByRole('button', { name: 'Order by...' })).toBeInTheDocument(); }); - it.each([ - [undefined, 'cards'], - [{}, 'cards'], - [{ defaultMode: 'cards' as TagsMode }, 'cards'], - [{ defaultMode: 'list' as TagsMode }, 'list'], - ])('shows expected tags displaying mode', (tags, expectedMode) => { - const { container } = setUp(tags); - - expect(screen.getByRole('button', { name: capitalize(expectedMode) })).toBeInTheDocument(); - expect(container.querySelector('.form-text')).toHaveTextContent(`Tags will be displayed as ${expectedMode}.`); - }); - - it.each([ - ['cards' as TagsMode], - ['list' as TagsMode], - ])('invokes setTagsSettings when tags mode changes', async (defaultMode) => { - const { user } = setUp(); - - expect(setTagsSettings).not.toHaveBeenCalled(); - await user.click(screen.getByText('List')); - await user.click(screen.getByRole('menuitem', { name: capitalize(defaultMode) })); - expect(setTagsSettings).toHaveBeenCalledWith({ defaultMode }); - }); - it.each([ [undefined, 'Order by...'], [{}, 'Order by...'], diff --git a/test/tags/TagCard.test.tsx b/test/tags/TagCard.test.tsx deleted file mode 100644 index 18dcb66c..00000000 --- a/test/tags/TagCard.test.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import { screen } from '@testing-library/react'; -import { MemoryRouter } from 'react-router-dom'; -import { Mock } from 'ts-mockery'; -import { TagCard as createTagCard } from '../../src/tags/TagCard'; -import { ReachableServer } from '../../src/servers/data'; -import { renderWithEvents } from '../__helpers__/setUpTest'; -import { colorGeneratorMock } from '../utils/services/__mocks__/ColorGenerator.mock'; - -describe('', () => { - const TagCard = createTagCard( - ({ isOpen }) => DeleteTagConfirmModal {isOpen ? '[Open]' : '[Closed]'}, - ({ isOpen }) => EditTagModal {isOpen ? '[Open]' : '[Closed]'}, - colorGeneratorMock, - ); - const setUp = (tag = 'ssr') => renderWithEvents( - - ({ id: '1' })} - displayed - toggle={() => {}} - /> - , - ); - - afterEach(jest.resetAllMocks); - - it.each([ - ['ssr', '/server/1/list-short-urls/1?tags=ssr', '/server/1/tag/ssr/visits'], - ['ssr-&-foo', '/server/1/list-short-urls/1?tags=ssr-%26-foo', '/server/1/tag/ssr-&-foo/visits'], - ])('shows expected links for provided tags', (tag, shortUrlsLink, visitsLink) => { - setUp(tag); - - expect(screen.getByText('48').parentNode).toHaveAttribute('href', shortUrlsLink); - expect(screen.getByText('23,257').parentNode).toHaveAttribute('href', visitsLink); - }); - - it('displays delete modal when delete btn is clicked', async () => { - const { user } = setUp(); - - expect(screen.getByText(/^DeleteTagConfirmModal/)).not.toHaveTextContent('[Open]'); - expect(screen.getByText(/^DeleteTagConfirmModal/)).toHaveTextContent('[Closed]'); - await user.click(screen.getByLabelText('Delete tag')); - expect(screen.getByText(/^DeleteTagConfirmModal/)).toHaveTextContent('[Open]'); - expect(screen.getByText(/^DeleteTagConfirmModal/)).not.toHaveTextContent('[Closed]'); - }); - - it('displays edit modal when edit btn is clicked', async () => { - const { user } = setUp(); - - expect(screen.getByText(/^EditTagModal/)).not.toHaveTextContent('[Open]'); - expect(screen.getByText(/^EditTagModal/)).toHaveTextContent('[Closed]'); - await user.click(screen.getByLabelText('Edit tag')); - expect(screen.getByText(/^EditTagModal/)).toHaveTextContent('[Open]'); - expect(screen.getByText(/^EditTagModal/)).not.toHaveTextContent('[Closed]'); - }); -}); diff --git a/test/tags/TagsCards.test.tsx b/test/tags/TagsCards.test.tsx deleted file mode 100644 index 36d6f286..00000000 --- a/test/tags/TagsCards.test.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { screen } from '@testing-library/react'; -import { Mock } from 'ts-mockery'; -import { TagsCards as createTagsCards } from '../../src/tags/TagsCards'; -import { SelectedServer } from '../../src/servers/data'; -import { rangeOf } from '../../src/utils/utils'; -import { NormalizedTag } from '../../src/tags/data'; -import { renderWithEvents } from '../__helpers__/setUpTest'; - -describe('', () => { - const amountOfTags = 10; - const sortedTags = rangeOf(amountOfTags, (i) => Mock.of({ tag: `tag_${i}` })); - const TagsCards = createTagsCards(() => TagCard); - const setUp = () => renderWithEvents( - ()} />, - ); - - it('renders the proper amount of groups and cards based on the amount of tags', () => { - const { container } = setUp(); - const amountOfGroups = 4; - const cards = screen.getAllByText('TagCard'); - const groups = container.querySelectorAll('.col-md-6'); - - expect(cards).toHaveLength(amountOfTags); - expect(groups).toHaveLength(amountOfGroups); - }); -}); diff --git a/test/tags/TagsList.test.tsx b/test/tags/TagsList.test.tsx index 03caedcd..9e47ffcb 100644 --- a/test/tags/TagsList.test.tsx +++ b/test/tags/TagsList.test.tsx @@ -9,7 +9,7 @@ import { renderWithEvents } from '../__helpers__/setUpTest'; describe('', () => { const filterTags = jest.fn(); - const TagsListComp = createTagsList(() => <>TagsCards, () => <>TagsTable); + const TagsListComp = createTagsList(() => <>TagsTable); const setUp = (tagsList: Partial) => renderWithEvents( ()} @@ -45,19 +45,6 @@ describe('', () => { expect(screen.queryByText('Loading')).not.toBeInTheDocument(); }); - it('renders proper component based on the display mode', async () => { - const { user } = setUp({ filteredTags: ['foo', 'bar'], stats: {} }); - - expect(screen.getByText('TagsCards')).toBeInTheDocument(); - expect(screen.queryByText('TagsTable')).not.toBeInTheDocument(); - - await user.click(screen.getByRole('button', { name: /^Display mode/ })); - await user.click(screen.getByRole('menuitem', { name: /List/ })); - - expect(screen.queryByText('TagsCards')).not.toBeInTheDocument(); - expect(screen.getByText('TagsTable')).toBeInTheDocument(); - }); - it('triggers tags filtering when search field changes', async () => { const { user } = setUp({ filteredTags: [] }); diff --git a/test/tags/TagsModeDropdown.test.tsx b/test/tags/TagsModeDropdown.test.tsx deleted file mode 100644 index 9550a04b..00000000 --- a/test/tags/TagsModeDropdown.test.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { screen } from '@testing-library/react'; -import { TagsModeDropdown } from '../../src/tags/TagsModeDropdown'; -import { TagsMode } from '../../src/settings/reducers/settings'; -import { renderWithEvents } from '../__helpers__/setUpTest'; - -describe('', () => { - const onChange = jest.fn(); - const setUp = (mode: TagsMode) => renderWithEvents(); - - afterEach(jest.clearAllMocks); - - it.each([ - ['cards' as TagsMode], - ['list' as TagsMode], - ])('renders expected initial value', (mode) => { - setUp(mode); - expect(screen.getByRole('button')).toHaveTextContent(`Display mode: ${mode}`); - }); - - it('changes active element on click', async () => { - const { user } = setUp('list'); - const clickItem = async (index: 0 | 1) => { - await user.click(screen.getByRole('button')); - await user.click(screen.getAllByRole('menuitem')[index]); - }; - - expect(onChange).not.toHaveBeenCalled(); - await clickItem(0); - expect(onChange).toHaveBeenCalledWith('cards'); - - await clickItem(1); - expect(onChange).toHaveBeenCalledWith('list'); - }); -});