Move settings from store to another context

src/shlink-web-component/visits/DomainVisits.tsx

@@ -6,12 +6,11 @@ import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub';
 import { Topics } from '../mercure/helpers/Topics';
 import type { DomainVisits as DomainVisitsState, LoadDomainVisits } from './reducers/domainVisits';
 import type { NormalizedVisit } from './types';
-import type { CommonVisitsProps } from './types/CommonVisitsProps';
 import { toApiParams } from './types/helpers';
 import { VisitsHeader } from './VisitsHeader';
 import { VisitsStats } from './VisitsStats';
 
-export interface DomainVisitsProps extends CommonVisitsProps {
+export interface DomainVisitsProps {
   getDomainVisits: (params: LoadDomainVisits) => void;
   domainVisits: DomainVisitsState;
   cancelGetDomainVisits: () => void;
@@ -21,7 +20,6 @@ export const DomainVisits = ({ exportVisits }: ReportExporter) => boundToMercure
   getDomainVisits,
   domainVisits,
   cancelGetDomainVisits,
-  settings,
 }: DomainVisitsProps) => {
   const goBack = useGoBack();
   const { domain = '' } = useParams();
@@ -35,7 +33,6 @@ export const DomainVisits = ({ exportVisits }: ReportExporter) => boundToMercure
       getVisits={loadVisits}
       cancelGetVisits={cancelGetDomainVisits}
       visitsInfo={domainVisits}
-      settings={settings}
       exportCsv={exportCsv}
     >
       <VisitsHeader goBack={goBack} visits={domainVisits.visits} title={`"${authority}" visits`} />

src/shlink-web-component/visits/NonOrphanVisits.tsx

@@ -4,12 +4,11 @@ import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub';
 import { Topics } from '../mercure/helpers/Topics';
 import type { LoadVisits, VisitsInfo } from './reducers/types';
 import type { NormalizedVisit, VisitsParams } from './types';
-import type { CommonVisitsProps } from './types/CommonVisitsProps';
 import { toApiParams } from './types/helpers';
 import { VisitsHeader } from './VisitsHeader';
 import { VisitsStats } from './VisitsStats';
 
-export interface NonOrphanVisitsProps extends CommonVisitsProps {
+export interface NonOrphanVisitsProps {
   getNonOrphanVisits: (params: LoadVisits) => void;
   nonOrphanVisits: VisitsInfo;
   cancelGetNonOrphanVisits: () => void;
@@ -19,7 +18,6 @@ export const NonOrphanVisits = ({ exportVisits }: ReportExporter) => boundToMerc
   getNonOrphanVisits,
   nonOrphanVisits,
   cancelGetNonOrphanVisits,
-  settings,
 }: NonOrphanVisitsProps) => {
   const goBack = useGoBack();
   const exportCsv = (visits: NormalizedVisit[]) => exportVisits('non_orphan_visits.csv', visits);
@@ -31,7 +29,6 @@ export const NonOrphanVisits = ({ exportVisits }: ReportExporter) => boundToMerc
       getVisits={loadVisits}
       cancelGetVisits={cancelGetNonOrphanVisits}
       visitsInfo={nonOrphanVisits}
-      settings={settings}
       exportCsv={exportCsv}
     >
       <VisitsHeader title="Non-orphan visits" goBack={goBack} visits={nonOrphanVisits.visits} />

src/shlink-web-component/visits/OrphanVisits.tsx

@@ -5,12 +5,11 @@ import { Topics } from '../mercure/helpers/Topics';
 import type { LoadOrphanVisits } from './reducers/orphanVisits';
 import type { VisitsInfo } from './reducers/types';
 import type { NormalizedVisit, VisitsParams } from './types';
-import type { CommonVisitsProps } from './types/CommonVisitsProps';
 import { toApiParams } from './types/helpers';
 import { VisitsHeader } from './VisitsHeader';
 import { VisitsStats } from './VisitsStats';
 
-export interface OrphanVisitsProps extends CommonVisitsProps {
+export interface OrphanVisitsProps {
   getOrphanVisits: (params: LoadOrphanVisits) => void;
   orphanVisits: VisitsInfo;
   cancelGetOrphanVisits: () => void;
@@ -20,7 +19,6 @@ export const OrphanVisits = ({ exportVisits }: ReportExporter) => boundToMercure
   getOrphanVisits,
   orphanVisits,
   cancelGetOrphanVisits,
-  settings,
 }: OrphanVisitsProps) => {
   const goBack = useGoBack();
   const exportCsv = (visits: NormalizedVisit[]) => exportVisits('orphan_visits.csv', visits);
@@ -33,7 +31,6 @@ export const OrphanVisits = ({ exportVisits }: ReportExporter) => boundToMercure
       getVisits={loadVisits}
       cancelGetVisits={cancelGetOrphanVisits}
       visitsInfo={orphanVisits}
-      settings={settings}
       exportCsv={exportCsv}
       isOrphanVisits
     >

src/shlink-web-component/visits/ShortUrlVisits.tsx

@@ -11,11 +11,10 @@ import type { ShortUrlDetail } from '../short-urls/reducers/shortUrlDetail';
 import type { LoadShortUrlVisits, ShortUrlVisits as ShortUrlVisitsState } from './reducers/shortUrlVisits';
 import { ShortUrlVisitsHeader } from './ShortUrlVisitsHeader';
 import type { NormalizedVisit, VisitsParams } from './types';
-import type { CommonVisitsProps } from './types/CommonVisitsProps';
 import { toApiParams } from './types/helpers';
 import { VisitsStats } from './VisitsStats';
 
-export interface ShortUrlVisitsProps extends CommonVisitsProps {
+export interface ShortUrlVisitsProps {
   getShortUrlVisits: (params: LoadShortUrlVisits) => void;
   shortUrlVisits: ShortUrlVisitsState;
   getShortUrlDetail: (shortUrl: ShortUrlIdentifier) => void;
@@ -29,7 +28,6 @@ export const ShortUrlVisits = ({ exportVisits }: ReportExporter) => boundToMercu
   getShortUrlVisits,
   getShortUrlDetail,
   cancelGetShortUrlVisits,
-  settings,
 }: ShortUrlVisitsProps) => {
   const { shortCode = '' } = useParams<{ shortCode: string }>();
   const { search } = useLocation();
@@ -54,7 +52,6 @@ export const ShortUrlVisits = ({ exportVisits }: ReportExporter) => boundToMercu
       getVisits={loadVisits}
       cancelGetVisits={cancelGetShortUrlVisits}
       visitsInfo={shortUrlVisits}
-      settings={settings}
       exportCsv={exportCsv}
     >
       <ShortUrlVisitsHeader shortUrlDetail={shortUrlDetail} shortUrlVisits={shortUrlVisits} goBack={goBack} />

src/shlink-web-component/visits/TagVisits.tsx

@@ -8,11 +8,10 @@ import { Topics } from '../mercure/helpers/Topics';
 import type { LoadTagVisits, TagVisits as TagVisitsState } from './reducers/tagVisits';
 import { TagVisitsHeader } from './TagVisitsHeader';
 import type { NormalizedVisit } from './types';
-import type { CommonVisitsProps } from './types/CommonVisitsProps';
 import { toApiParams } from './types/helpers';
 import { VisitsStats } from './VisitsStats';
 
-export interface TagVisitsProps extends CommonVisitsProps {
+export interface TagVisitsProps {
   getTagVisits: (params: LoadTagVisits) => void;
   tagVisits: TagVisitsState;
   cancelGetTagVisits: () => void;
@@ -22,7 +21,6 @@ export const TagVisits = (colorGenerator: ColorGenerator, { exportVisits }: Repo
   getTagVisits,
   tagVisits,
   cancelGetTagVisits,
-  settings,
 }: TagVisitsProps) => {
   const goBack = useGoBack();
   const { tag = '' } = useParams();
@@ -35,7 +33,6 @@ export const TagVisits = (colorGenerator: ColorGenerator, { exportVisits }: Repo
       getVisits={loadVisits}
       cancelGetVisits={cancelGetTagVisits}
       visitsInfo={tagVisits}
-      settings={settings}
       exportCsv={exportCsv}
     >
       <TagVisitsHeader tagVisits={tagVisits} goBack={goBack} colorGenerator={colorGenerator} />

src/shlink-web-component/visits/VisitsStats.tsx

@@ -8,7 +8,6 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
 import { Button, Progress, Row } from 'reactstrap';
 import { ShlinkApiError } from '../../api/ShlinkApiError';
-import type { Settings } from '../../settings/reducers/settings';
 import { DateRangeSelector } from '../../utils/dates/DateRangeSelector';
 import { ExportBtn } from '../../utils/ExportBtn';
 import type { DateInterval, DateRange } from '../../utils/helpers/dateIntervals';
@@ -17,6 +16,7 @@ import { prettify } from '../../utils/helpers/numbers';
 import { Message } from '../../utils/Message';
 import { NavPillItem, NavPills } from '../../utils/NavPills';
 import { Result } from '../../utils/Result';
+import { useSetting } from '../utils/settings';
 import { DoughnutChartCard } from './charts/DoughnutChartCard';
 import { LineChartCard } from './charts/LineChartCard';
 import { SortableBarChartCard } from './charts/SortableBarChartCard';
@@ -33,7 +33,6 @@ import { VisitsTable } from './VisitsTable';
 export type VisitsStatsProps = PropsWithChildren<{
   getVisits: (params: VisitsParams, doIntervalFallback?: boolean) => void;
   visitsInfo: VisitsInfo;
-  settings: Settings;
   cancelGetVisits: () => void;
   exportCsv: (visits: NormalizedVisit[]) => void;
   isOrphanVisits?: boolean;
@@ -61,12 +60,12 @@ export const VisitsStats: FC<VisitsStatsProps> = ({
   visitsInfo,
   getVisits,
   cancelGetVisits,
-  settings,
   exportCsv,
   isOrphanVisits = false,
 }) => {
   const { visits, loading, loadingLarge, error, errorData, progress, fallbackInterval } = visitsInfo;
   const [{ dateRange, visitsFilter }, updateFiltering] = useVisitsQuery();
+  const visitsSettings = useSetting('visits');
   const setDates = pipe(
     ({ startDate: theStartDate, endDate: theEndDate }: DateRange) => ({
       dateRange: {
@@ -77,7 +76,7 @@ export const VisitsStats: FC<VisitsStatsProps> = ({
     updateFiltering,
   );
   const initialInterval = useRef<DateRange | DateInterval>(
-    dateRange ?? fallbackInterval ?? settings.visits?.defaultInterval ?? 'last30Days',
+    dateRange ?? fallbackInterval ?? visitsSettings?.defaultInterval ?? 'last30Days',
   );
   const [highlightedVisits, setHighlightedVisits] = useState<NormalizedVisit[]>([]);
   const [highlightedLabel, setHighlightedLabel] = useState<string | undefined>();
@@ -92,7 +91,7 @@ export const VisitsStats: FC<VisitsStatsProps> = ({
   );
   const resolvedFilter = useMemo(() => ({
     ...visitsFilter,
-    excludeBots: visitsFilter.excludeBots ?? settings.visits?.excludeBots,
+    excludeBots: visitsFilter.excludeBots ?? visitsSettings?.excludeBots,
   }), [visitsFilter]);
   const mapLocations = values(citiesForMap);
 
@@ -122,7 +121,7 @@ export const VisitsStats: FC<VisitsStatsProps> = ({
   }, [dateRange, visitsFilter]);
   useEffect(() => {
     // As soon as the fallback is loaded, if the initial interval used the settings one, we do fall back
-    if (fallbackInterval && initialInterval.current === (settings.visits?.defaultInterval ?? 'last30Days')) {
+    if (fallbackInterval && initialInterval.current === (visitsSettings?.defaultInterval ?? 'last30Days')) {
       initialInterval.current = fallbackInterval;
     }
   }, [fallbackInterval]);

src/shlink-web-component/visits/services/provideServices.ts

@@ -1,6 +1,6 @@
 import type Bottle from 'bottlejs';
 import { prop } from 'ramda';
-import type { ConnectDecorator } from '../../../container/types';
+import type { ConnectDecorator } from '../../container';
 import { DomainVisits } from '../DomainVisits';
 import { MapModal } from '../helpers/MapModal';
 import { NonOrphanVisits } from '../NonOrphanVisits';
@@ -22,31 +22,31 @@ export const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
 
   bottle.serviceFactory('ShortUrlVisits', ShortUrlVisits, 'ReportExporter');
   bottle.decorator('ShortUrlVisits', connect(
-    ['shortUrlVisits', 'shortUrlDetail', 'mercureInfo', 'settings'],
+    ['shortUrlVisits', 'shortUrlDetail', 'mercureInfo'],
     ['getShortUrlVisits', 'getShortUrlDetail', 'cancelGetShortUrlVisits', 'createNewVisits', 'loadMercureInfo'],
   ));
 
   bottle.serviceFactory('TagVisits', TagVisits, 'ColorGenerator', 'ReportExporter');
   bottle.decorator('TagVisits', connect(
-    ['tagVisits', 'mercureInfo', 'settings'],
+    ['tagVisits', 'mercureInfo'],
     ['getTagVisits', 'cancelGetTagVisits', 'createNewVisits', 'loadMercureInfo'],
   ));
 
   bottle.serviceFactory('DomainVisits', DomainVisits, 'ReportExporter');
   bottle.decorator('DomainVisits', connect(
-    ['domainVisits', 'mercureInfo', 'settings'],
+    ['domainVisits', 'mercureInfo'],
     ['getDomainVisits', 'cancelGetDomainVisits', 'createNewVisits', 'loadMercureInfo'],
   ));
 
   bottle.serviceFactory('OrphanVisits', OrphanVisits, 'ReportExporter');
   bottle.decorator('OrphanVisits', connect(
-    ['orphanVisits', 'mercureInfo', 'settings'],
+    ['orphanVisits', 'mercureInfo'],
     ['getOrphanVisits', 'cancelGetOrphanVisits', 'createNewVisits', 'loadMercureInfo'],
   ));
 
   bottle.serviceFactory('NonOrphanVisits', NonOrphanVisits, 'ReportExporter');
   bottle.decorator('NonOrphanVisits', connect(
-    ['nonOrphanVisits', 'mercureInfo', 'settings'],
+    ['nonOrphanVisits', 'mercureInfo'],
     ['getNonOrphanVisits', 'cancelGetNonOrphanVisits', 'createNewVisits', 'loadMercureInfo'],
   ));
 

src/shlink-web-component/visits/types/CommonVisitsProps.ts

@@ -1,5 +0,0 @@
-import type { Settings } from '../../../settings/reducers/settings';
-
-export interface CommonVisitsProps {
-  settings: Settings;
-}