diff --git a/src/servers/helpers/ServerError.tsx b/src/servers/helpers/ServerError.tsx index 17d14be6..504bb610 100644 --- a/src/servers/helpers/ServerError.tsx +++ b/src/servers/helpers/ServerError.tsx @@ -17,17 +17,15 @@ export const ServerError = (DeleteServerButton: FC): FC ) => (
-
- - {!isServerWithId(selectedServer) && 'Could not find this Shlink server.'} - {isServerWithId(selectedServer) && ( - <> -

Oops! Could not connect to this Shlink server.

- Make sure you have internet connection, and the server is properly configured and on-line. - - )} -
-
+ + {!isServerWithId(selectedServer) && 'Could not find this Shlink server.'} + {isServerWithId(selectedServer) && ( + <> +

Oops! Could not connect to this Shlink server.

+ Make sure you have internet connection, and the server is properly configured and on-line. + + )} +
These are the Shlink servers currently configured. Choose one of diff --git a/src/servers/helpers/withSelectedServer.tsx b/src/servers/helpers/withSelectedServer.tsx index 742bf160..2c91d344 100644 --- a/src/servers/helpers/withSelectedServer.tsx +++ b/src/servers/helpers/withSelectedServer.tsx @@ -20,7 +20,7 @@ export function withSelectedServer(WrappedComponent: FC - + ); } diff --git a/src/tags/TagsList.tsx b/src/tags/TagsList.tsx index 03b4d221..9d1cb38a 100644 --- a/src/tags/TagsList.tsx +++ b/src/tags/TagsList.tsx @@ -28,15 +28,11 @@ const TagsList = (TagCard: FC) => boundToMercureHub(( const renderContent = () => { if (tagsList.loading) { - return ; + return ; } if (tagsList.error) { - return ( -
-
Error loading tags :(
-
- ); + return
Error loading tags :(
; } const tagsCount = tagsList.filteredTags.length; @@ -48,7 +44,7 @@ const TagsList = (TagCard: FC) => boundToMercureHub(( const tagsGroups = splitEvery(ceil(tagsCount / TAGS_GROUPS_AMOUNT), tagsList.filteredTags); return ( - <> +
{tagsGroups.map((group, index) => (
{group.map((tag) => ( @@ -63,16 +59,14 @@ const TagsList = (TagCard: FC) => boundToMercureHub(( ))}
))} - +
); }; return ( <> {!tagsList.loading && } -
- {renderContent()} -
+ {renderContent()} ); }, () => 'https://shlink.io/new-visit'); diff --git a/src/utils/Message.tsx b/src/utils/Message.tsx index 70363983..1eb9c36d 100644 --- a/src/utils/Message.tsx +++ b/src/utils/Message.tsx @@ -1,5 +1,5 @@ import { FC } from 'react'; -import { Card } from 'reactstrap'; +import { Card, Row } from 'reactstrap'; import classNames from 'classnames'; import { faCircleNotch as preloader } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; @@ -24,31 +24,30 @@ const getTextClassForType = (type: MessageType) => { }; interface MessageProps { - noMargin?: boolean; + className?: string; loading?: boolean; fullWidth?: boolean; type?: MessageType; } -const Message: FC = ( - { children, loading = false, noMargin = false, type = 'default', fullWidth = false }, -) => { - const cardClasses = classNames(getClassForType(type), { 'mt-4': !noMargin }); +const Message: FC = ({ className, children, loading = false, type = 'default', fullWidth = false }) => { const classes = classNames({ 'col-md-12': fullWidth, 'col-md-10 offset-md-1': !fullWidth, }); return ( -
- -

- {loading && } - {loading && {children ?? 'Loading...'}} - {!loading && children} -

-
-
+ +
+ +

+ {loading && } + {loading && {children ?? 'Loading...'}} + {!loading && children} +

+
+
+
); }; diff --git a/src/visits/VisitsStats.tsx b/src/visits/VisitsStats.tsx index f1b9936a..55dc9ed4 100644 --- a/src/visits/VisitsStats.tsx +++ b/src/visits/VisitsStats.tsx @@ -28,10 +28,16 @@ export interface VisitsStatsProps { domain?: string; } +interface VisitsNavLinkProps { + title: string; + subPath: string; + icon: IconDefinition; +} + type HighlightableProps = 'referer' | 'country' | 'city'; type Section = 'byTime' | 'byContext' | 'byLocation' | 'list'; -const sections: Record = { +const sections: Record = { byTime: { title: 'By time', subPath: '', icon: faCalendarAlt }, byContext: { title: 'By context', subPath: '/by-context', icon: faChartPie }, byLocation: { title: 'By location', subPath: '/by-location', icon: faMapMarkedAlt }, @@ -53,6 +59,19 @@ const highlightedVisitsToStats = ( let selectedBar: string | undefined; const initialInterval: DateInterval = 'last30Days'; +const VisitsNavLink: FC = ({ subPath, title, icon, children }) => ( + pathname.endsWith(`/visits${subPath}`)} + replace + > + + {title} + +); + const VisitsStats: FC = ({ children, visitsInfo, getVisits, cancelGetVisits, baseUrl, domain }) => { const [ dateRange, setDateRange ] = useState(intervalToDateRange(initialInterval)); const [ highlightedVisits, setHighlightedVisits ] = useState([]); @@ -112,7 +131,7 @@ const VisitsStats: FC = ({ children, visitsInfo, getVisits, ca if (error) { return ( - + An error occurred while loading visits :( ); @@ -124,23 +143,10 @@ const VisitsStats: FC = ({ children, visitsInfo, getVisits, ca return ( <> - +
@@ -259,7 +265,7 @@ const VisitsStats: FC = ({ children, visitsInfo, getVisits, ca
-
+
{renderVisitsContent()}
diff --git a/test/visits/VisitsStats.test.tsx b/test/visits/VisitsStats.test.tsx index f5f00952..ba79f7bf 100644 --- a/test/visits/VisitsStats.test.tsx +++ b/test/visits/VisitsStats.test.tsx @@ -1,5 +1,5 @@ import { shallow, ShallowWrapper } from 'enzyme'; -import { Card, NavLink, Progress } from 'reactstrap'; +import { Card, Progress } from 'reactstrap'; import { Mock } from 'ts-mockery'; import VisitStats from '../../src/visits/VisitsStats'; import Message from '../../src/utils/Message'; @@ -80,10 +80,6 @@ describe('', () => { it('holds the map button content generator on cities graph extraHeaderContent', () => { const wrapper = createComponent({ loading: false, error: false, visits }); - const locationNav = wrapper.find(NavLink).at(2); - - locationNav.simulate('click'); - const citiesGraph = wrapper.find(SortableBarGraph).find('[title="Cities"]'); const extraHeaderContent = citiesGraph.prop('extraHeaderContent');