diff --git a/src/common/MenuLayout.tsx b/src/common/MenuLayout.tsx index 6672583e..b8205b2f 100644 --- a/src/common/MenuLayout.tsx +++ b/src/common/MenuLayout.tsx @@ -13,7 +13,7 @@ import './MenuLayout.scss'; const MenuLayout = ( TagsList: FC, - ShortUrls: FC, + ShortUrlsList: FC, AsideMenu: FC, CreateShortUrl: FC, ShortUrlVisits: FC, @@ -49,7 +49,7 @@ const MenuLayout = ( - + diff --git a/src/common/services/provideServices.ts b/src/common/services/provideServices.ts index ab4ab1cd..b714c8d5 100644 --- a/src/common/services/provideServices.ts +++ b/src/common/services/provideServices.ts @@ -35,7 +35,7 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator, withRouter: 'MenuLayout', MenuLayout, 'TagsList', - 'ShortUrls', + 'ShortUrlsList', 'AsideMenu', 'CreateShortUrl', 'ShortUrlVisits', diff --git a/src/container/index.ts b/src/container/index.ts index c7b50040..ce39f10e 100644 --- a/src/container/index.ts +++ b/src/container/index.ts @@ -36,7 +36,7 @@ const connect: ConnectDecorator = (propsFromState: string[] | null, actionServic provideAppServices(bottle, connect); provideCommonServices(bottle, connect, withRouter); provideApiServices(bottle); -provideShortUrlsServices(bottle, connect); +provideShortUrlsServices(bottle, connect, withRouter); provideServersServices(bottle, connect, withRouter); provideTagsServices(bottle, connect); provideVisitsServices(bottle, connect); diff --git a/src/servers/Overview.tsx b/src/servers/Overview.tsx index 806e218a..f85ed23f 100644 --- a/src/servers/Overview.tsx +++ b/src/servers/Overview.tsx @@ -107,7 +107,7 @@ export const Overview = ( shortUrlsList={shortUrlsList} selectedServer={selectedServer} className="mb-0" - onTagClick={(tag) => history.push(`/server/${serverId}/list-short-urls/1?tag=${tag}`)} + onTagClick={(tag) => history.push(`/server/${serverId}/list-short-urls/1?tags=${encodeURIComponent(tag)}`)} /> diff --git a/src/short-urls/ShortUrls.tsx b/src/short-urls/ShortUrls.tsx deleted file mode 100644 index 13814837..00000000 --- a/src/short-urls/ShortUrls.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { FC, useEffect, useState } from 'react'; -import { ShortUrlsListProps } from './ShortUrlsList'; - -const ShortUrls = (SearchBar: FC, ShortUrlsList: FC) => (props: ShortUrlsListProps) => { - const { match } = props; - const { page = '1', serverId = '' } = match?.params ?? {}; - const [ urlsListKey, setUrlsListKey ] = useState(`${serverId}_${page}`); - - // Using a key on a component makes react to create a new instance every time the key changes - // Without it, pagination on the URL will not make the component to be refreshed - useEffect(() => { - setUrlsListKey(`${serverId}_${page}`); - }, [ serverId, page ]); - - return ( - <> -
- - - ); -}; - -export default ShortUrls; diff --git a/src/short-urls/services/provideServices.ts b/src/short-urls/services/provideServices.ts index 48541144..197c6941 100644 --- a/src/short-urls/services/provideServices.ts +++ b/src/short-urls/services/provideServices.ts @@ -1,5 +1,4 @@ -import Bottle from 'bottlejs'; -import ShortUrls from '../ShortUrls'; +import Bottle, { Decorator } from 'bottlejs'; import SearchBar from '../SearchBar'; import ShortUrlsList from '../ShortUrlsList'; import ShortUrlsRow from '../helpers/ShortUrlsRow'; @@ -19,14 +18,11 @@ import { ShortUrlForm } from '../ShortUrlForm'; import { EditShortUrl } from '../EditShortUrl'; import { getShortUrlDetail } from '../reducers/shortUrlDetail'; -const provideServices = (bottle: Bottle, connect: ConnectDecorator) => { +const provideServices = (bottle: Bottle, connect: ConnectDecorator, withRouter: Decorator) => { // Components - bottle.serviceFactory('ShortUrls', ShortUrls, 'SearchBar', 'ShortUrlsList'); - bottle.decorator('ShortUrls', connect([ 'shortUrlsList' ])); - - bottle.serviceFactory('ShortUrlsList', ShortUrlsList, 'ShortUrlsTable'); + bottle.serviceFactory('ShortUrlsList', ShortUrlsList, 'ShortUrlsTable', 'SearchBar'); bottle.decorator('ShortUrlsList', connect( - [ 'selectedServer', 'shortUrlsListParams', 'mercureInfo' ], + [ 'selectedServer', 'shortUrlsListParams', 'mercureInfo', 'shortUrlsList' ], [ 'listShortUrls', 'resetShortUrlParams', 'createNewVisits', 'loadMercureInfo' ], )); @@ -57,6 +53,7 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => { // Services bottle.serviceFactory('SearchBar', SearchBar, 'ColorGenerator'); bottle.decorator('SearchBar', connect([ 'shortUrlsListParams' ], [ 'listShortUrls' ])); + bottle.decorator('SearchBar', withRouter); // Actions bottle.serviceFactory('listShortUrls', listShortUrls, 'buildShlinkApiClient'); diff --git a/src/tags/TagCard.tsx b/src/tags/TagCard.tsx index 482a998c..3d233a65 100644 --- a/src/tags/TagCard.tsx +++ b/src/tags/TagCard.tsx @@ -61,7 +61,7 @@ const TagCard = ( Short URLs diff --git a/src/tags/TagsTableRow.tsx b/src/tags/TagsTableRow.tsx index c030e4f8..b10ce318 100644 --- a/src/tags/TagsTableRow.tsx +++ b/src/tags/TagsTableRow.tsx @@ -32,7 +32,7 @@ export const TagsTableRow = ( {tag.tag} - + {prettify(tag.shortUrls)} diff --git a/src/utils/SearchField.tsx b/src/utils/SearchField.tsx index c373ffc4..e76fa1ee 100644 --- a/src/utils/SearchField.tsx +++ b/src/utils/SearchField.tsx @@ -12,10 +12,11 @@ interface SearchFieldProps { className?: string; large?: boolean; noBorder?: boolean; + initialValue?: string; } -const SearchField = ({ onChange, className, large = true, noBorder = false }: SearchFieldProps) => { - const [ searchTerm, setSearchTerm ] = useState(''); +const SearchField = ({ onChange, className, large = true, noBorder = false, initialValue = '' }: SearchFieldProps) => { + const [ searchTerm, setSearchTerm ] = useState(initialValue); const resetTimer = () => { timer && clearTimeout(timer); diff --git a/test/short-urls/ShortUrls.test.tsx b/test/short-urls/ShortUrls.test.tsx deleted file mode 100644 index f4caed88..00000000 --- a/test/short-urls/ShortUrls.test.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { shallow, ShallowWrapper } from 'enzyme'; -import { Mock } from 'ts-mockery'; -import shortUrlsCreator from '../../src/short-urls/ShortUrls'; -import { ShortUrlsListProps } from '../../src/short-urls/ShortUrlsList'; - -describe('', () => { - let wrapper: ShallowWrapper; - const SearchBar = () => null; - const ShortUrlsList = () => null; - - beforeEach(() => { - const ShortUrls = shortUrlsCreator(SearchBar, ShortUrlsList); - - wrapper = shallow( - ()} />, - ); - }); - afterEach(() => wrapper.unmount()); - - it('wraps a SearchBar and ShortUrlsList', () => { - expect(wrapper.find(SearchBar)).toHaveLength(1); - expect(wrapper.find(ShortUrlsList)).toHaveLength(1); - }); -}); diff --git a/test/tags/TagCard.test.tsx b/test/tags/TagCard.test.tsx index a3c96b75..87a2c021 100644 --- a/test/tags/TagCard.test.tsx +++ b/test/tags/TagCard.test.tsx @@ -30,8 +30,8 @@ describe('', () => { afterEach(jest.resetAllMocks); it.each([ - [ 'ssr', '/server/1/list-short-urls/1?tag=ssr' ], - [ 'ssr-&-foo', '/server/1/list-short-urls/1?tag=ssr-%26-foo' ], + [ 'ssr', '/server/1/list-short-urls/1?tags=ssr' ], + [ 'ssr-&-foo', '/server/1/list-short-urls/1?tags=ssr-%26-foo' ], ])('shows a TagBullet and a link to the list filtering by the tag', (tag, expectedLink) => { const wrapper = createWrapper(tag); const links = wrapper.find(Link); @@ -61,7 +61,7 @@ describe('', () => { const links = wrapper.find(Link); expect(links).toHaveLength(2); - expect(links.at(0).prop('to')).toEqual('/server/1/list-short-urls/1?tag=ssr'); + expect(links.at(0).prop('to')).toEqual('/server/1/list-short-urls/1?tags=ssr'); expect(links.at(0).text()).toContain('48'); expect(links.at(1).prop('to')).toEqual('/server/1/tag/ssr/visits'); expect(links.at(1).text()).toContain('23,257'); diff --git a/test/tags/TagsTableRow.test.tsx b/test/tags/TagsTableRow.test.tsx index d264bd32..40306224 100644 --- a/test/tags/TagsTableRow.test.tsx +++ b/test/tags/TagsTableRow.test.tsx @@ -35,7 +35,7 @@ describe('', () => { const visitsLink = links.last(); expect(shortUrlsLink.prop('children')).toEqual(expectedShortUrls); - expect(shortUrlsLink.prop('to')).toEqual(`/server/abc123/list-short-urls/1?tag=${encodeURIComponent('foo&bar')}`); + expect(shortUrlsLink.prop('to')).toEqual(`/server/abc123/list-short-urls/1?tags=${encodeURIComponent('foo&bar')}`); expect(visitsLink.prop('children')).toEqual(expectedVisits); expect(visitsLink.prop('to')).toEqual('/server/abc123/tag/foo&bar/visits'); });