forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-04-19 21:16:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added some tests for new tags components

Browse Source
This commit is contained in:
Alejandro Celaya
2021-09-24 19:55:26 +02:00
parent 304a7431ad
commit 2f76c5381f
6 changed files with 115 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/tags/TagsCards.tsx Normal file
View File

@@ -0,0 +1,33 @@
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<TagCardProps>): FC<TagsListChildrenProps> => ({ tagsList, selectedServer }) => {
const [ displayedTag, setDisplayedTag ] = useState<string | undefined>();
const tagsCount = tagsList.filteredTags.length;
const tagsGroups = splitEvery(ceil(tagsCount / TAGS_GROUPS_AMOUNT), tagsList.filteredTags);
return (
<Row>
{tagsGroups.map((group, index) => (
<div key={index} className="col-md-6 col-xl-3">
{group.map((tag) => (
<TagCard
key={tag}
tag={tag}
tagStats={tagsList.stats[tag]}
selectedServer={selectedServer}
displayed={displayedTag === tag}
toggle={() => setDisplayedTag(displayedTag !== tag ? tag : undefined)}
/>
))}
</div>
))}
</Row>
);
};

43
src/tags/TagsList.tsx
View File

@@ -1,5 +1,4 @@
import { FC, useEffect, useState } from 'react';
import { splitEvery } from 'ramda';
import { Row } from 'reactstrap';
import Message from '../utils/Message';
import SearchField from '../utils/SearchField';
@@ -9,10 +8,8 @@ import { Result } from '../utils/Result';
import { ShlinkApiError } from '../api/ShlinkApiError';
import { Topics } from '../mercure/helpers/Topics';
import { TagsList as TagsListState } from './reducers/tagsList';
import { TagCardProps } from './TagCard';
const { ceil } = Math;
const TAGS_GROUPS_AMOUNT = 4;
import { TagsListChildrenProps } from './data/TagsListChildrenProps';
import { TagsMode, TagsModeDropdown } from './TagsModeDropdown';
export interface TagsListProps {
filterTags: (searchTerm: string) => void;
@@ -21,10 +18,10 @@ export interface TagsListProps {
selectedServer: SelectedServer;
}
const TagsList = (TagCard: FC<TagCardProps>) => boundToMercureHub((
const TagsList = (TagsCards: FC<TagsListChildrenProps>, TagsTable: FC<TagsListChildrenProps>) => boundToMercureHub((
{ filterTags, forceListTags, tagsList, selectedServer }: TagsListProps,
) => {
const [ displayedTag, setDisplayedTag ] = useState<string | undefined>();
const [ mode, setMode ] = useState<TagsMode>('cards');
useEffect(() => {
forceListTags();
@@ -43,37 +40,23 @@ const TagsList = (TagCard: FC<TagCardProps>) => boundToMercureHub((
);
}
const tagsCount = tagsList.filteredTags.length;
if (tagsCount < 1) {
if (tagsList.filteredTags.length < 1) {
return <Message>No tags found</Message>;
}
const tagsGroups = splitEvery(ceil(tagsCount / TAGS_GROUPS_AMOUNT), tagsList.filteredTags);
return (
<Row>
{tagsGroups.map((group, index) => (
<div key={index} className="col-md-6 col-xl-3">
{group.map((tag) => (
<TagCard
key={tag}
tag={tag}
tagStats={tagsList.stats[tag]}
selectedServer={selectedServer}
displayed={displayedTag === tag}
toggle={() => setDisplayedTag(displayedTag !== tag ? tag : undefined)}
/>
))}
</div>
))}
</Row>
);
return mode === 'cards'
? <TagsCards tagsList={tagsList} selectedServer={selectedServer} />
: <TagsTable tagsList={tagsList} selectedServer={selectedServer} />;
};
return (
<>
<SearchField className="mb-3" onChange={filterTags} />
<Row className="mb-3">
<div className="col-lg-6 offset-lg-6">
<TagsModeDropdown mode={mode} onChange={setMode} />
</div>
</Row>
{renderContent()}
</>
);

7
src/tags/data/TagsListChildrenProps.ts Normal file
View File

@@ -0,0 +1,7 @@
import { TagsList as TagsListState } from '../reducers/tagsList';
import { SelectedServer } from '../../servers/data';
export interface TagsListChildrenProps {
tagsList: TagsListState;
selectedServer: SelectedServer;
}

9
src/tags/services/provideServices.ts
View File

@@ -8,6 +8,9 @@ import { filterTags, listTags } from '../reducers/tagsList';
import { deleteTag, tagDeleted } from '../reducers/tagDelete';
import { editTag, tagEdited } from '../reducers/tagEdit';
import { ConnectDecorator } from '../../container/types';
import { TagsCards } from '../TagsCards';
import { TagsTable } from '../TagsTable';
import { TagsTableRow } from '../TagsTableRow';
const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
// Components
@@ -29,7 +32,11 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
bottle.serviceFactory('EditTagModal', EditTagModal, 'ColorGenerator');
bottle.decorator('EditTagModal', connect([ 'tagEdit' ], [ 'editTag', 'tagEdited' ]));
bottle.serviceFactory('TagsList', TagsList, 'TagCard');
bottle.serviceFactory('TagsCards', TagsCards, 'TagCard');
bottle.serviceFactory('TagsTableRow', TagsTableRow, 'DeleteTagConfirmModal', 'EditTagModal');
bottle.serviceFactory('TagsTable', TagsTable, 'ColorGenerator', 'TagsTableRow');
bottle.serviceFactory('TagsList', TagsList, 'TagsCards', 'TagsTable');
bottle.decorator('TagsList', connect(
[ 'tagsList', 'selectedServer', 'mercureInfo' ],
[ 'forceListTags', 'filterTags', 'createNewVisits', 'loadMercureInfo' ],