diff --git a/src/tags/TagsTable.tsx b/src/tags/TagsTable.tsx new file mode 100644 index 00000000..e6601274 --- /dev/null +++ b/src/tags/TagsTable.tsx @@ -0,0 +1,34 @@ +import { FC } from 'react'; +import { SimpleCard } from '../utils/SimpleCard'; +import ColorGenerator from '../utils/services/ColorGenerator'; +import { TagsListChildrenProps } from './data/TagsListChildrenProps'; +import { TagsTableRowProps } from './TagsTableRow'; + +export const TagsTable = (colorGenerator: ColorGenerator, TagsTableRow: FC) => ( + { tagsList, selectedServer }: TagsListChildrenProps, +) => ( + + + + + + + + + + + {tagsList.filteredTags.length === 0 && } + {tagsList.filteredTags.map((tag) => ( + + ))} + +
TagShort URLsVisits +
No results found
+
+); diff --git a/src/tags/TagsTableRow.tsx b/src/tags/TagsTableRow.tsx new file mode 100644 index 00000000..04fb29f1 --- /dev/null +++ b/src/tags/TagsTableRow.tsx @@ -0,0 +1,59 @@ +import { FC } from 'react'; +import { Link } from 'react-router-dom'; +import { DropdownItem } from 'reactstrap'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faTrash as deleteIcon, faPencilAlt as editIcon } from '@fortawesome/free-solid-svg-icons'; +import { getServerId, SelectedServer } from '../servers/data'; +import ColorGenerator from '../utils/services/ColorGenerator'; +import { prettify } from '../utils/helpers/numbers'; +import { useToggle } from '../utils/helpers/hooks'; +import { DropdownBtnMenu } from '../utils/DropdownBtnMenu'; +import TagBullet from './helpers/TagBullet'; +import { TagModalProps, TagStats } from './data'; + +export interface TagsTableRowProps { + tag: string; + tagStats?: TagStats; + selectedServer: SelectedServer; + colorGenerator: ColorGenerator; +} + +export const TagsTableRow = (DeleteTagConfirmModal: FC, EditTagModal: FC) => ( + { tag, tagStats, colorGenerator, selectedServer }: TagsTableRowProps, +) => { + const [ isDeleteModalOpen, toggleDelete ] = useToggle(); + const [ isEditModalOpen, toggleEdit ] = useToggle(); + const [ isDropdownOpen, toggleDropdown ] = useToggle(); + const serverId = getServerId(selectedServer); + + return ( + + + {tag} + + + + {prettify(tagStats?.shortUrlsCount ?? 0)} + + + + + {prettify(tagStats?.visitsCount ?? 0)} + + + + + + Edit + + + Delete + + + + + + + + ); +};