Updated dependencies and fixed coding styles

src/servers/ServersListGroup.tsx

@@ -7,7 +7,7 @@ import { faChevronRight as chevronIcon } from '@fortawesome/free-solid-svg-icons
 import { ServerWithId } from './data';
 import './ServersListGroup.scss';
 
-interface ServersListGroup {
+interface ServersListGroupProps {
   servers: ServerWithId[];
   embedded?: boolean;
 }
@@ -19,7 +19,7 @@ const ServerListItem = ({ id, name }: { id: string; name: string }) => (
   </ListGroupItem>
 );
 
-const ServersListGroup: FC<ServersListGroup> = ({ servers, children, embedded = false }) => (
+const ServersListGroup: FC<ServersListGroupProps> = ({ servers, children, embedded = false }) => (
   <>
     {children && <h5 className="mb-md-3">{children}</h5>}
     {servers.length > 0 && (

src/short-urls/helpers/ShortUrlVisitsCount.tsx

@@ -7,12 +7,13 @@ import { prettify } from '../../utils/helpers/numbers';
 import VisitStatsLink, { VisitStatsLinkProps } from './VisitStatsLink';
 import './ShortUrlVisitsCount.scss';
 
+// TODO This interface should be called ShortUrlVisitsCountProps, and the component should not have the Comp suffix
 export interface ShortUrlVisitsCount extends VisitStatsLinkProps {
   visitsCount: number;
   active?: boolean;
 }
 
-const ShortUrlVisitsCount = ({ visitsCount, shortUrl, selectedServer, active = false }: ShortUrlVisitsCount) => {
+const ShortUrlVisitsCountComp = ({ visitsCount, shortUrl, selectedServer, active = false }: ShortUrlVisitsCount) => {
   const maxVisits = shortUrl?.meta?.maxVisits;
   const visitsLink = (
     <VisitStatsLink selectedServer={selectedServer} shortUrl={shortUrl}>
@@ -54,4 +55,4 @@ const ShortUrlVisitsCount = ({ visitsCount, shortUrl, selectedServer, active = f
   );
 };
 
-export default ShortUrlVisitsCount;
+export default ShortUrlVisitsCountComp;

src/tags/reducers/tagsList.ts

@@ -5,11 +5,11 @@ import { buildReducer } from '../../utils/helpers/redux';
 import { ProblemDetailsError, ShlinkTags } from '../../api/types';
 import { GetState } from '../../container/types';
 import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
-import { TagStats } from '../data';
 import { CreateVisit, Stats } from '../../visits/types';
+import { parseApiError } from '../../api/utils';
+import { TagStats } from '../data';
 import { DeleteTagAction, TAG_DELETED } from './tagDelete';
 import { EditTagAction, TAG_EDITED } from './tagEdit';
-import { parseApiError } from '../../api/utils';
 
 /* eslint-disable padding-line-between-statements */
 export const LIST_TAGS_START = 'shlink/tagsList/LIST_TAGS_START';
@@ -34,7 +34,6 @@ interface ListTagsAction extends Action<string> {
   stats: TagsStatsMap;
 }
 
-
 interface ListTagsFailedAction extends Action<string> {
   errorData?: ProblemDetailsError;
 }
@@ -44,11 +43,11 @@ interface FilterTagsAction extends Action<string> {
 }
 
 type ListTagsCombinedAction = ListTagsAction
-  & DeleteTagAction
-  & CreateVisitsAction
-  & EditTagAction
-  & FilterTagsAction
-  & ListTagsFailedAction;
+& DeleteTagAction
+& CreateVisitsAction
+& EditTagAction
+& FilterTagsAction
+& ListTagsFailedAction;
 
 const initialState = {
   tags: [],
@@ -75,13 +74,13 @@ const increaseVisitsForTags = (tags: TagIncrease[], stats: TagsStatsMap) => tags
   return stats;
 }, { ...stats });
 const calculateVisitsPerTag = (createdVisits: CreateVisit[]): TagIncrease[] => Object.entries(
-  createdVisits.reduce((acc, { shortUrl }) => {
+  createdVisits.reduce<Stats>((acc, { shortUrl }) => {
     shortUrl?.tags.forEach((tag) => {
       acc[tag] = (acc[tag] || 0) + 1;
     });
 
     return acc;
-  }, {} as Stats),
+  }, {}),
 );
 
 export default buildReducer<TagsList, ListTagsCombinedAction>({

src/utils/DateInput.tsx

@@ -39,7 +39,7 @@ const DateInput = (props: DateInputProps) => {
         {...transformProps(props)}
         dateFormat="yyyy-MM-dd"
         className={classNames('date-input-container__input form-control', className)}
-        // @ts-expect-error
+        // @ts-expect-error The DatePicker type definition is wrong. It has a ref prop
         ref={ref}
       />
       {showCalendarIcon && (

src/utils/FormGroupContainer.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react';
 import { v4 as uuid } from 'uuid';
 import { InputType } from 'reactstrap/lib/Input';
 
-interface FormGroupContainer {
+interface FormGroupContainerProps {
   value: string;
   onChange: (newValue: string) => void;
   id?: string;
@@ -10,7 +10,7 @@ interface FormGroupContainer {
   required?: boolean;
 }
 
-export const FormGroupContainer: FC<FormGroupContainer> = (
+export const FormGroupContainer: FC<FormGroupContainerProps> = (
   { children, value, onChange, id = uuid(), type = 'text', required = true },
 ) => (
   <div className="form-group">

src/utils/SearchField.tsx

@@ -7,7 +7,7 @@ import './SearchField.scss';
 const DEFAULT_SEARCH_INTERVAL = 500;
 let timer: NodeJS.Timeout | null;
 
-interface SearchField {
+interface SearchFieldProps {
   onChange: (value: string) => void;
   className?: string;
   placeholder?: string;
@@ -16,7 +16,7 @@ interface SearchField {
 }
 
 const SearchField = (
-  { onChange, className, placeholder = 'Search...', large = true, noBorder = false }: SearchField,
+  { onChange, className, placeholder = 'Search...', large = true, noBorder = false }: SearchFieldProps,
 ) => {
   const [ searchTerm, setSearchTerm ] = useState('');
 

src/utils/dates/types/index.ts

@@ -61,7 +61,7 @@ export const intervalToDateRange = (dateInterval?: DateInterval): DateRange => {
     case 'today':
       return { startDate: moment().startOf('day'), endDate: moment() };
     case 'yesterday':
-      const yesterday = moment().subtract(1, 'day');
+      const yesterday = moment().subtract(1, 'day'); // eslint-disable-line no-case-declarations
 
       return { startDate: yesterday.startOf('day'), endDate: yesterday.endOf('day') };
     case 'last7Days':

src/utils/helpers/hooks.ts

@@ -34,7 +34,7 @@ export const useToggle = (initialValue = false): ToggleResult => {
 
 export const useSwipeable = (showSidebar: () => void, hideSidebar: () => void) => {
   const swipeMenuIfNoModalExists = (callback: () => void) => (e: any) => {
-    const swippedOnVisitsTable = (e.event.composedPath() as HTMLElement[]).some(
+    const swippedOnVisitsTable = (e.event.composedPath() as HTMLElement[]).some( // eslint-disable-lin @typescript-eslint/no-unsafe-call
       ({ classList }) => classList?.contains('visits-table'),
     );
 

src/visits/OrphanVisitsHeader.tsx

@@ -1,13 +1,13 @@
 import VisitsHeader from './VisitsHeader';
-import './ShortUrlVisitsHeader.scss';
 import { VisitsInfo } from './types';
+import './ShortUrlVisitsHeader.scss';
 
-interface OrphanVisitsHeader {
+interface OrphanVisitsHeaderProps {
   orphanVisits: VisitsInfo;
   goBack: () => void;
 }
 
-export const OrphanVisitsHeader = ({ orphanVisits, goBack }: OrphanVisitsHeader) => {
+export const OrphanVisitsHeader = ({ orphanVisits, goBack }: OrphanVisitsHeaderProps) => {
   const { visits } = orphanVisits;
 
   return <VisitsHeader title="Orphan visits" goBack={goBack} visits={visits} />;

src/visits/TagVisitsHeader.tsx

@@ -4,13 +4,13 @@ import VisitsHeader from './VisitsHeader';
 import { TagVisits } from './reducers/tagVisits';
 import './ShortUrlVisitsHeader.scss';
 
-interface TagVisitsHeader {
+interface TagVisitsHeaderProps {
   tagVisits: TagVisits;
   goBack: () => void;
   colorGenerator: ColorGenerator;
 }
 
-const TagVisitsHeader = ({ tagVisits, goBack, colorGenerator }: TagVisitsHeader) => {
+const TagVisitsHeader = ({ tagVisits, goBack, colorGenerator }: TagVisitsHeaderProps) => {
   const { visits, tag } = tagVisits;
 
   const visitsStatsTitle = (

src/visits/helpers/DefaultChart.tsx

@@ -55,7 +55,7 @@ const generateGraphData = (
         '#DCDCDC',
         '#463730',
       ],
-      borderColor: isBarChart ? MAIN_COLOR : (isDarkThemeEnabled() ? PRIMARY_DARK_COLOR : PRIMARY_LIGHT_COLOR),
+      borderColor: isBarChart ? MAIN_COLOR : isDarkThemeEnabled() ? PRIMARY_DARK_COLOR : PRIMARY_LIGHT_COLOR,
       borderWidth: 2,
     },
     highlightedData && {
@@ -127,7 +127,7 @@ const DefaultChart = (
     }, { ...stats }),
   );
   const highlightedData = statsAreDefined(highlightedStats) ? fillTheGaps(highlightedStats, labels) : undefined;
-  const [ chartRef, setChartRef ] = useState<HorizontalBar | Doughnut | undefined>()
+  const [ chartRef, setChartRef ] = useState<HorizontalBar | Doughnut | undefined>();
 
   const options: ChartOptions = {
     legend: { display: false },
@@ -137,7 +137,6 @@ const DefaultChart = (
         {
           ticks: {
             beginAtZero: true,
-            // @ts-expect-error
             precision: 0,
             callback: prettify,
             max,

src/visits/helpers/LineChartCard.tsx

@@ -81,17 +81,18 @@ const groupVisitsByStep = (step: Step, visits: NormalizedVisit[]): Stats => visi
   {},
 );
 
-const visitsToDatasetGroups = (step: Step, visits: NormalizedVisit[]) => visits.reduce(
-  (acc, visit) => {
-    const key = STEP_TO_DATE_FORMAT[step](visit.date);
+const visitsToDatasetGroups = (step: Step, visits: NormalizedVisit[]) =>
+  visits.reduce<Record<string, NormalizedVisit[]>>(
+    (acc, visit) => {
+      const key = STEP_TO_DATE_FORMAT[step](visit.date);
 
-    acc[key] = acc[key] ?? [];
-    acc[key].push(visit);
+      acc[key] = acc[key] ?? [];
+      acc[key].push(visit);
 
-    return acc;
-  },
-  {} as Record<string, NormalizedVisit[]>,
-);
+      return acc;
+    },
+    {},
+  );
 
 const generateLabels = (step: Step, visits: NormalizedVisit[]): string[] => {
   const unit = STEP_TO_DATE_UNIT_MAP[step];
@@ -186,7 +187,6 @@ const LineChartCard = (
         {
           ticks: {
             beginAtZero: true,
-            // @ts-expect-error
             precision: 0,
             callback: prettify,
           },

src/visits/helpers/SortableBarGraph.tsx

@@ -9,7 +9,7 @@ import { Stats, StatsRow } from '../types';
 import GraphCard from './GraphCard';
 import { DefaultChartProps } from './DefaultChart';
 
-const toLowerIfString = (value: any) => type(value) === 'String' ? toLower(value) : value;
+const toLowerIfString = (value: any) => type(value) === 'String' ? toLower(value) : value; // eslint-disable-line @typescript-eslint/no-unsafe-return
 const pickKeyFromPair = ([ key ]: StatsRow) => key;
 const pickValueFromPair = ([ , value ]: StatsRow) => value;