diff --git a/src/servers/CreateServer.tsx b/src/servers/CreateServer.tsx index 7181344b..a04ccba8 100644 --- a/src/servers/CreateServer.tsx +++ b/src/servers/CreateServer.tsx @@ -1,7 +1,7 @@ import { FC } from 'react'; import { v4 as uuid } from 'uuid'; import { RouterProps } from 'react-router'; -import classNames from 'classnames'; +import { Result } from '../utils/Result'; import NoMenuLayout from '../common/NoMenuLayout'; import { StateFlagTimeout } from '../utils/helpers/hooks'; import { ServerForm } from './helpers/ServerForm'; @@ -15,19 +15,11 @@ interface CreateServerProps extends RouterProps { createServer: (server: ServerWithId) => void; } -const Result: FC<{ type: 'success' | 'error' }> = ({ children, type }) => ( -
-
-
- {children} -
-
-
+const ImportResult = ({ type }: { type: 'error' | 'success' }) => ( + + {type === 'success' && 'Servers properly imported. You can now select one from the list :)'} + {type === 'error' && 'The servers could not be imported. Make sure the format is correct.'} + ); const CreateServer = (ImportServersBtn: FC, useStateFlagTimeout: StateFlagTimeout) => ( @@ -49,8 +41,12 @@ const CreateServer = (ImportServersBtn: FC, useStateFlagT - {serversImported && Servers properly imported. You can now select one from the list :)} - {errorImporting && The servers could not be imported. Make sure the format is correct.} + {(serversImported || errorImporting) && ( +
+ {serversImported && } + {errorImporting && } +
+ )} ); }; diff --git a/src/short-urls/helpers/CreateShortUrlResult.tsx b/src/short-urls/helpers/CreateShortUrlResult.tsx index a9134e7c..ffe3d3e9 100644 --- a/src/short-urls/helpers/CreateShortUrlResult.tsx +++ b/src/short-urls/helpers/CreateShortUrlResult.tsx @@ -4,10 +4,11 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { isNil } from 'ramda'; import { useEffect } from 'react'; import CopyToClipboard from 'react-copy-to-clipboard'; -import { Card, CardBody, Tooltip } from 'reactstrap'; +import { Tooltip } from 'reactstrap'; import { ShortUrlCreation } from '../reducers/shortUrlCreation'; import { StateFlagTimeout } from '../../utils/helpers/hooks'; import './CreateShortUrlResult.scss'; +import { Result } from '../../utils/Result'; export interface CreateShortUrlResultProps extends ShortUrlCreation { resetCreateShortUrl: () => void; @@ -25,9 +26,10 @@ const CreateShortUrlResult = (useStateFlagTimeout: StateFlagTimeout) => ( if (error) { return ( - + + {canBeClosed && } An error occurred while creating the URL :( - + ); } @@ -38,26 +40,24 @@ const CreateShortUrlResult = (useStateFlagTimeout: StateFlagTimeout) => ( const { shortUrl } = result; return ( - - - {canBeClosed && } - Great! The short URL is {shortUrl} + + {canBeClosed && } + Great! The short URL is {shortUrl} - - - + + + - - Copied! - - - + + Copied! + + ); }; diff --git a/src/short-urls/helpers/DeleteShortUrlModal.tsx b/src/short-urls/helpers/DeleteShortUrlModal.tsx index 20b16709..8e4c9f21 100644 --- a/src/short-urls/helpers/DeleteShortUrlModal.tsx +++ b/src/short-urls/helpers/DeleteShortUrlModal.tsx @@ -4,6 +4,7 @@ import { identity, pipe } from 'ramda'; import { ShortUrlDeletion } from '../reducers/shortUrlDeletion'; import { ShortUrlModalProps } from '../data'; import { handleEventPreventingDefault, OptionalString } from '../../utils/utils'; +import { Result } from '../../utils/Result'; const THRESHOLD_REACHED = 'INVALID_SHORTCODE_DELETION'; @@ -42,25 +43,26 @@ const DeleteShortUrlModal = (

Caution! You are about to delete a short URL.

This action cannot be undone. Once you have deleted it, all the visits stats will be lost.

+

Write {shortUrl.shortCode} to confirm deletion.

setInputValue(e.target.value)} /> {hasThresholdError && ( -
+ {errorData?.threshold && `This short URL has received more than ${errorData.threshold} visits, and therefore, it cannot be deleted.`} {!errorData?.threshold && 'This short URL has received too many visits, and therefore, it cannot be deleted.'} -
+ )} {hasErrorOtherThanThreshold && ( -
+ Something went wrong while deleting the URL :( -
+ )}
diff --git a/src/short-urls/helpers/EditMetaModal.tsx b/src/short-urls/helpers/EditMetaModal.tsx index 109925bb..8f1ac31c 100644 --- a/src/short-urls/helpers/EditMetaModal.tsx +++ b/src/short-urls/helpers/EditMetaModal.tsx @@ -10,6 +10,7 @@ import DateInput from '../../utils/DateInput'; import { formatIsoDate } from '../../utils/helpers/date'; import { ShortUrl, ShortUrlMeta, ShortUrlModalProps } from '../data'; import { handleEventPreventingDefault, Nullable, OptionalString } from '../../utils/utils'; +import { Result } from '../../utils/Result'; interface EditMetaModalConnectProps extends ShortUrlModalProps { shortUrlMeta: ShortUrlMetaEdition; @@ -78,9 +79,9 @@ const EditMetaModal = ( /> {error && ( -
+ Something went wrong while saving the metadata :( -
+ )} diff --git a/src/short-urls/helpers/EditShortUrlModal.tsx b/src/short-urls/helpers/EditShortUrlModal.tsx index 019ad5bc..92428f4c 100644 --- a/src/short-urls/helpers/EditShortUrlModal.tsx +++ b/src/short-urls/helpers/EditShortUrlModal.tsx @@ -4,6 +4,7 @@ import { ExternalLink } from 'react-external-link'; import { ShortUrlEdition } from '../reducers/shortUrlEdition'; import { handleEventPreventingDefault, hasValue, OptionalString } from '../../utils/utils'; import { ShortUrlModalProps } from '../data'; +import { Result } from '../../utils/Result'; interface EditShortUrlModalProps extends ShortUrlModalProps { shortUrlEdition: ShortUrlEdition; @@ -34,9 +35,9 @@ const EditShortUrlModal = ({ isOpen, toggle, shortUrl, shortUrlEdition, editShor /> {error && ( -
+ Something went wrong while saving the long URL :( -
+ )} diff --git a/src/short-urls/helpers/EditTagsModal.tsx b/src/short-urls/helpers/EditTagsModal.tsx index 03bbff81..af1909d6 100644 --- a/src/short-urls/helpers/EditTagsModal.tsx +++ b/src/short-urls/helpers/EditTagsModal.tsx @@ -5,6 +5,7 @@ import { ShortUrlTags } from '../reducers/shortUrlTags'; import { ShortUrlModalProps } from '../data'; import { OptionalString } from '../../utils/utils'; import { TagsSelectorProps } from '../../tags/helpers/TagsSelector'; +import { Result } from '../../utils/Result'; interface EditTagsModalProps extends ShortUrlModalProps { shortUrlTags: ShortUrlTags; @@ -32,9 +33,9 @@ const EditTagsModal = (TagsSelector: FC) => ( {shortUrlTags.error && ( -
+ Something went wrong while saving the tags :( -
+ )}
diff --git a/src/tags/TagsList.tsx b/src/tags/TagsList.tsx index 9d1cb38a..b72a74f6 100644 --- a/src/tags/TagsList.tsx +++ b/src/tags/TagsList.tsx @@ -4,6 +4,7 @@ import Message from '../utils/Message'; import SearchField from '../utils/SearchField'; import { SelectedServer } from '../servers/data'; import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub'; +import { Result } from '../utils/Result'; import { TagsList as TagsListState } from './reducers/tagsList'; import { TagCardProps } from './TagCard'; @@ -32,7 +33,7 @@ const TagsList = (TagCard: FC) => boundToMercureHub(( } if (tagsList.error) { - return
Error loading tags :(
; + return Error loading tags :(; } const tagsCount = tagsList.filteredTags.length; diff --git a/src/tags/helpers/DeleteTagConfirmModal.tsx b/src/tags/helpers/DeleteTagConfirmModal.tsx index 5429d704..0afc9fb7 100644 --- a/src/tags/helpers/DeleteTagConfirmModal.tsx +++ b/src/tags/helpers/DeleteTagConfirmModal.tsx @@ -1,6 +1,7 @@ import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap'; import { TagDeletion } from '../reducers/tagDelete'; import { TagModalProps } from '../data'; +import { Result } from '../../utils/Result'; interface DeleteTagConfirmModalProps extends TagModalProps { deleteTag: (tag: string) => Promise; @@ -25,9 +26,9 @@ const DeleteTagConfirmModal = ( Are you sure you want to delete tag {tag}? {tagDelete.error && ( -
+ Something went wrong while deleting the tag :( -
+ )}
diff --git a/src/tags/helpers/EditTagModal.tsx b/src/tags/helpers/EditTagModal.tsx index b1ae9c0d..26acc0c7 100644 --- a/src/tags/helpers/EditTagModal.tsx +++ b/src/tags/helpers/EditTagModal.tsx @@ -9,6 +9,7 @@ import ColorGenerator from '../../utils/services/ColorGenerator'; import { TagModalProps } from '../data'; import { TagEdition } from '../reducers/tagEdit'; import './EditTagModal.scss'; +import { Result } from '../../utils/Result'; interface EditTagModalProps extends TagModalProps { tagEdit: TagEdition; @@ -55,9 +56,9 @@ const EditTagModal = ({ getColorForKey }: ColorGenerator) => ( {tagEdit.error && ( -
+ Something went wrong while editing the tag :( -
+ )} diff --git a/src/utils/Result.tsx b/src/utils/Result.tsx new file mode 100644 index 00000000..da3da6b4 --- /dev/null +++ b/src/utils/Result.tsx @@ -0,0 +1,30 @@ +import { FC } from 'react'; +import { Row } from 'reactstrap'; +import classNames from 'classnames'; +import { SimpleCard } from './SimpleCard'; + +interface ResultProps { + type: 'success' | 'error' | 'warning'; + className?: string; + textCentered?: boolean; + small?: boolean; +} + +export const Result: FC = ({ children, type, className, textCentered = false, small = false }) => ( + +
+ + {children} + +
+
+); diff --git a/src/utils/SimpleCard.tsx b/src/utils/SimpleCard.tsx index e50213e7..5ecbdc4f 100644 --- a/src/utils/SimpleCard.tsx +++ b/src/utils/SimpleCard.tsx @@ -4,11 +4,12 @@ import { ReactNode } from 'react'; interface SimpleCardProps extends Omit { title?: ReactNode; + bodyClassName?: string; } -export const SimpleCard = ({ title, children, ...rest }: SimpleCardProps) => ( +export const SimpleCard = ({ title, children, bodyClassName, ...rest }: SimpleCardProps) => ( {title && {title}} - {children} + {children} ); diff --git a/src/visits/VisitsStats.tsx b/src/visits/VisitsStats.tsx index 55dc9ed4..83e267e0 100644 --- a/src/visits/VisitsStats.tsx +++ b/src/visits/VisitsStats.tsx @@ -11,6 +11,7 @@ import Message from '../utils/Message'; import { formatIsoDate } from '../utils/helpers/date'; import { ShlinkVisitsParams } from '../utils/services/types'; import { DateInterval, DateRange, intervalToDateRange } from '../utils/dates/types'; +import { Result } from '../utils/Result'; import SortableBarGraph from './helpers/SortableBarGraph'; import GraphCard from './helpers/GraphCard'; import LineChartCard from './helpers/LineChartCard'; @@ -130,11 +131,7 @@ const VisitsStats: FC = ({ children, visitsInfo, getVisits, ca } if (error) { - return ( - - An error occurred while loading visits :( - - ); + return An error occurred while loading visits :(; } if (isEmpty(visits)) { diff --git a/test/servers/CreateServer.test.tsx b/test/servers/CreateServer.test.tsx index 1e45ca17..dcc90006 100644 --- a/test/servers/CreateServer.test.tsx +++ b/test/servers/CreateServer.test.tsx @@ -30,12 +30,12 @@ describe('', () => { const wrapper = createWrapper(); expect(wrapper.find(ServerForm)).toHaveLength(1); - expect(wrapper.find('Result')).toHaveLength(0); + expect(wrapper.find('ImportResult')).toHaveLength(0); }); it('shows success message when imported is true', () => { const wrapper = createWrapper(true); - const result = wrapper.find('Result'); + const result = wrapper.find('ImportResult'); expect(result).toHaveLength(1); expect(result.prop('type')).toEqual('success'); @@ -43,7 +43,7 @@ describe('', () => { it('shows error message when import failed', () => { const wrapper = createWrapper(false, true); - const result = wrapper.find('Result'); + const result = wrapper.find('ImportResult'); expect(result).toHaveLength(1); expect(result.prop('type')).toEqual('error'); diff --git a/test/short-urls/helpers/CreateShortUrlResult.test.tsx b/test/short-urls/helpers/CreateShortUrlResult.test.tsx index ba280df5..4430987b 100644 --- a/test/short-urls/helpers/CreateShortUrlResult.test.tsx +++ b/test/short-urls/helpers/CreateShortUrlResult.test.tsx @@ -5,6 +5,7 @@ import { Mock } from 'ts-mockery'; import createCreateShortUrlResult from '../../../src/short-urls/helpers/CreateShortUrlResult'; import { ShortUrl } from '../../../src/short-urls/data'; import { StateFlagTimeout } from '../../../src/utils/helpers/hooks'; +import { Result } from '../../../src/utils/Result'; describe('', () => { let wrapper: ShallowWrapper; @@ -24,7 +25,7 @@ describe('', () => { it('renders an error when error is true', () => { const wrapper = createWrapper(Mock.all(), true); - const errorCard = wrapper.find('.bg-danger'); + const errorCard = wrapper.find(Result).filterWhere((result) => result.prop('type') === 'error'); expect(errorCard).toHaveLength(1); expect(errorCard.html()).toContain('An error occurred while creating the URL :('); diff --git a/test/short-urls/helpers/DeleteShortUrlModal.test.tsx b/test/short-urls/helpers/DeleteShortUrlModal.test.tsx index 11498d80..06ce4864 100644 --- a/test/short-urls/helpers/DeleteShortUrlModal.test.tsx +++ b/test/short-urls/helpers/DeleteShortUrlModal.test.tsx @@ -5,6 +5,7 @@ import DeleteShortUrlModal from '../../../src/short-urls/helpers/DeleteShortUrlM import { ShortUrl } from '../../../src/short-urls/data'; import { ShortUrlDeletion } from '../../../src/short-urls/reducers/shortUrlDeletion'; import { ProblemDetailsError } from '../../../src/utils/services/types'; +import { Result } from '../../../src/utils/Result'; describe('', () => { let wrapper: ShallowWrapper; @@ -48,7 +49,7 @@ describe('', () => { shortCode: 'abc123', errorData: Mock.of(errorData), }); - const warning = wrapper.find('.bg-warning'); + const warning = wrapper.find(Result).filterWhere((result) => result.prop('type') === 'warning'); expect(warning).toHaveLength(1); expect(warning.html()).toContain(expectedMessage); @@ -61,7 +62,7 @@ describe('', () => { shortCode: 'abc123', errorData: Mock.of({ type: 'OTHER_ERROR' }), }); - const error = wrapper.find('.bg-danger'); + const error = wrapper.find(Result).filterWhere((result) => result.prop('type') === 'error'); expect(error).toHaveLength(1); expect(error.html()).toContain('Something went wrong while deleting the URL :('); diff --git a/test/short-urls/helpers/EditMetaModal.test.tsx b/test/short-urls/helpers/EditMetaModal.test.tsx index 730ceaa5..b5553125 100644 --- a/test/short-urls/helpers/EditMetaModal.test.tsx +++ b/test/short-urls/helpers/EditMetaModal.test.tsx @@ -4,6 +4,7 @@ import { Mock } from 'ts-mockery'; import EditMetaModal from '../../../src/short-urls/helpers/EditMetaModal'; import { ShortUrl } from '../../../src/short-urls/data'; import { ShortUrlMetaEdition } from '../../../src/short-urls/reducers/shortUrlMeta'; +import { Result } from '../../../src/utils/Result'; describe('', () => { let wrapper: ShallowWrapper; @@ -30,7 +31,7 @@ describe('', () => { it('properly renders form with components', () => { const wrapper = createWrapper({ saving: false, error: false }); - const error = wrapper.find('.bg-danger'); + const error = wrapper.find(Result).filterWhere((result) => result.prop('type') === 'error'); const form = wrapper.find('form'); const formGroup = form.find(FormGroup); @@ -52,7 +53,7 @@ describe('', () => { it('renders error message on error', () => { const wrapper = createWrapper({ saving: false, error: true }); - const error = wrapper.find('.bg-danger'); + const error = wrapper.find(Result).filterWhere((result) => result.prop('type') === 'error'); expect(error).toHaveLength(1); }); diff --git a/test/short-urls/helpers/EditShortUrlModal.test.tsx b/test/short-urls/helpers/EditShortUrlModal.test.tsx index 95e2f494..2ab14c4b 100644 --- a/test/short-urls/helpers/EditShortUrlModal.test.tsx +++ b/test/short-urls/helpers/EditShortUrlModal.test.tsx @@ -4,6 +4,7 @@ import { Mock } from 'ts-mockery'; import EditShortUrlModal from '../../../src/short-urls/helpers/EditShortUrlModal'; import { ShortUrl } from '../../../src/short-urls/data'; import { ShortUrlEdition } from '../../../src/short-urls/reducers/shortUrlEdition'; +import { Result } from '../../../src/utils/Result'; describe('', () => { let wrapper: ShallowWrapper; @@ -31,7 +32,7 @@ describe('', () => { [ true, 1 ], ])('properly renders form with expected components', (error, expectedErrorLength) => { const wrapper = createWrapper({}, { saving: false, error }); - const errorElement = wrapper.find('.bg-danger'); + const errorElement = wrapper.find(Result).filterWhere((result) => result.prop('type') === 'error'); const form = wrapper.find('form'); const formGroup = form.find(FormGroup); diff --git a/test/tags/TagsList.test.tsx b/test/tags/TagsList.test.tsx index 4369cc94..072f3b6f 100644 --- a/test/tags/TagsList.test.tsx +++ b/test/tags/TagsList.test.tsx @@ -7,6 +7,7 @@ import SearchField from '../../src/utils/SearchField'; import { rangeOf } from '../../src/utils/utils'; import { TagsList } from '../../src/tags/reducers/tagsList'; import { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub'; +import { Result } from '../../src/utils/Result'; describe('', () => { let wrapper: ShallowWrapper; @@ -41,7 +42,7 @@ describe('', () => { it('shows an error when tags failed to be loaded', () => { const wrapper = createWrapper({ error: true }); - const errorMsg = wrapper.find('.bg-danger'); + const errorMsg = wrapper.find(Result).filterWhere((result) => result.prop('type') === 'error'); expect(errorMsg).toHaveLength(1); expect(errorMsg.html()).toContain('Error loading tags :('); diff --git a/test/visits/VisitsStats.test.tsx b/test/visits/VisitsStats.test.tsx index ba79f7bf..d878d2e8 100644 --- a/test/visits/VisitsStats.test.tsx +++ b/test/visits/VisitsStats.test.tsx @@ -1,5 +1,5 @@ import { shallow, ShallowWrapper } from 'enzyme'; -import { Card, Progress } from 'reactstrap'; +import { Progress } from 'reactstrap'; import { Mock } from 'ts-mockery'; import VisitStats from '../../src/visits/VisitsStats'; import Message from '../../src/utils/Message'; @@ -8,6 +8,7 @@ import SortableBarGraph from '../../src/visits/helpers/SortableBarGraph'; import { Visit, VisitsInfo } from '../../src/visits/types'; import LineChartCard from '../../src/visits/helpers/LineChartCard'; import VisitsTable from '../../src/visits/VisitsTable'; +import { Result } from '../../src/utils/Result'; describe('', () => { const visits = [ Mock.all(), Mock.all(), Mock.all() ]; @@ -53,7 +54,7 @@ describe('', () => { it('renders an error message when visits could not be loaded', () => { const wrapper = createComponent({ loading: false, error: true, visits: [] }); - const errorMessage = wrapper.find(Card); + const errorMessage = wrapper.find(Result).filterWhere((result) => result.prop('type') === 'error'); expect(errorMessage).toHaveLength(1); expect(errorMessage.html()).toContain('An error occurred while loading visits :(');