Merge pull request #279 from acelaya-forks/feature/shlink-js-sdk-1

Update to shlink-js-sdk 1.0.0

Author: acelaya

CHANGELOG.md

@@ -11,12 +11,13 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Changed
 * [#249](https://github.com/shlinkio/shlink-web-component/issues/249) Replace `react-datepicker` with native `input[type="date"]` and `input[type="datetime-local"]` elements.
 * [#257](https://github.com/shlinkio/shlink-web-component/issues/257) Remove dependency on `react-copy-to-clipboard`.
+* [#278](https://github.com/shlinkio/shlink-web-component/issues/278) Update to `@shlinkio/shlink-js-sdk` v1.0.0.
 
 ### Deprecated
 * *Nothing*
 
 ### Removed
-* *Nothing*
+* [#276](https://github.com/shlinkio/shlink-web-component/issues/276) Drop support for Shlink older than 3.3.0.
 
 ### Fixed
 * *Nothing*

docker-compose.yml

@@ -4,7 +4,7 @@ services:
     shlink_web_component:
         container_name: shlink_web_component
         image: node:20.5-alpine
-        command: /bin/sh -c "cd /shlink-web-component && npm run dev"
+        command: /bin/sh -c "cd /shlink-web-component && npm i && npm run dev"
         volumes:
             - ./:/shlink-web-component
         ports:

package-lock.json

@@ -46,7 +46,7 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@reduxjs/toolkit": "^2.0.1",
     "@shlinkio/shlink-frontend-kit": "^0.4.2",
-    "@shlinkio/shlink-js-sdk": "^0.2.2",
+    "@shlinkio/shlink-js-sdk": "^1.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^9.0.1",

package.json

@@ -8,7 +8,6 @@ import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
 import { AsideMenu } from './common/AsideMenu';
 import type { FCWithDeps } from './container/utils';
 import { componentFactory, useDependencies } from './container/utils';
-import { useFeature } from './utils/features';
 import { useSwipeable } from './utils/helpers/hooks';
 import { useRoutesPrefix } from './utils/routesPrefix';
 import './Main.scss';
@@ -59,7 +58,6 @@ const Main: FCWithDeps<MainProps, MainDeps> = ({ createNotFound }) => {
   // Hide sidebar every time the route changes
   useEffect(() => hideSidebar(), [location, hideSidebar]);
 
-  const addDomainVisitsRoute = useFeature('domainVisits');
   const burgerClasses = clsx('shlink-layout__burger-icon', { 'shlink-layout__burger-icon--active': sidebarVisible });
   const swipeableProps = useSwipeable(showSidebar, hideSidebar);
 
@@ -82,7 +80,7 @@ const Main: FCWithDeps<MainProps, MainDeps> = ({ createNotFound }) => {
                 <Route path="/short-urls/compare-visits" element={<ShortUrlVisitsComparison />} />
                 <Route path="/tag/:tag/visits/*" element={<TagVisits />} />
                 <Route path="/tags/compare-visits" element={<TagVisitsComparison />} />
-                {addDomainVisitsRoute && <Route path="/domain/:domain/visits/*" element={<DomainVisits />} />}
+                <Route path="/domain/:domain/visits/*" element={<DomainVisits />} />
                 <Route path="/orphan-visits/*" element={<OrphanVisits />} />
                 <Route path="/non-orphan-visits/*" element={<NonOrphanVisits />} />
                 <Route path="/manage-tags" element={<TagsList />} />

src/Main.tsx

@@ -1,14 +1,14 @@
-import type { ErrorTypeV2, ErrorTypeV3, ProblemDetailsError } from '@shlinkio/shlink-js-sdk/api-contract';
+import type { ErrorType, ProblemDetailsError } from '@shlinkio/shlink-js-sdk/api-contract';
 
 // Re-export every type from the SDK
 export * from '@shlinkio/shlink-js-sdk/api-contract';
 
 export interface InvalidArgumentError extends ProblemDetailsError {
-  type: ErrorTypeV2.INVALID_ARGUMENT | ErrorTypeV3.INVALID_ARGUMENT;
+  type: ErrorType.INVALID_ARGUMENT;
   invalidElements: string[];
 }
 
 export interface InvalidShortUrlDeletion extends ProblemDetailsError {
-  type: 'INVALID_SHORTCODE_DELETION' | ErrorTypeV2.INVALID_SHORT_URL_DELETION | ErrorTypeV3.INVALID_SHORT_URL_DELETION;
+  type: ErrorType.INVALID_SHORT_URL_DELETION;
   threshold: number;
 }

src/api-contract/index.ts

@@ -1,20 +1,11 @@
-import type {
-  InvalidArgumentError,
-  InvalidShortUrlDeletion,
-  ProblemDetailsError,
-} from '.';
-import {
-  ErrorTypeV2,
-  ErrorTypeV3,
-} from '.';
+import type { InvalidArgumentError, InvalidShortUrlDeletion, ProblemDetailsError } from '.';
+import { ErrorType } from '.';
 
 export const isInvalidArgumentError = (error?: ProblemDetailsError): error is InvalidArgumentError =>
-  error?.type === ErrorTypeV2.INVALID_ARGUMENT || error?.type === ErrorTypeV3.INVALID_ARGUMENT;
+  error?.type === ErrorType.INVALID_ARGUMENT;
 
 export const isInvalidDeletionError = (error?: ProblemDetailsError): error is InvalidShortUrlDeletion =>
-  error?.type === 'INVALID_SHORTCODE_DELETION'
-  || error?.type === ErrorTypeV2.INVALID_SHORT_URL_DELETION
-  || error?.type === ErrorTypeV3.INVALID_SHORT_URL_DELETION;
+  error?.type === ErrorType.INVALID_SHORT_URL_DELETION;
 
 const isProblemDetails = (e: unknown): e is ProblemDetailsError =>
   !!e && typeof e === 'object' && ['type', 'detail', 'title', 'status'].every((prop) => prop in e);

src/api-contract/utils.ts

@@ -8,7 +8,6 @@ import { RowDropdownBtn, useToggle } from '@shlinkio/shlink-frontend-kit';
 import type { FC } from 'react';
 import { Link } from 'react-router-dom';
 import { DropdownItem } from 'reactstrap';
-import { useFeature } from '../../utils/features';
 import { useRoutesPrefix } from '../../utils/routesPrefix';
 import { DEFAULT_DOMAIN } from '../../visits/reducers/domainVisits';
 import { useVisitsComparisonContext } from '../../visits/visits-comparison/VisitsComparisonContext';
@@ -23,33 +22,29 @@ interface DomainDropdownProps {
 
 export const DomainDropdown: FC<DomainDropdownProps> = ({ domain, editDomainRedirects }) => {
   const [isModalOpen, toggleModal] = useToggle();
-  const withVisits = useFeature('domainVisits');
   const routesPrefix = useRoutesPrefix();
   const visitsComparison = useVisitsComparisonContext();
 
   return (
     <RowDropdownBtn>
-      {withVisits && (
-        <>
-          <DropdownItem
-            tag={Link}
-            to={`${routesPrefix}/domain/${domain.domain}${domain.isDefault ? `_${DEFAULT_DOMAIN}` : ''}/visits`}
-          >
-            <FontAwesomeIcon icon={pieChartIcon} fixedWidth /> Visit stats
-          </DropdownItem>
-          <DropdownItem
-            disabled={!visitsComparison || !visitsComparison.canAddItemWithName(domain.domain)}
-            onClick={() => visitsComparison?.addItemToCompare({
-              name: domain.domain,
-              query: domain.domain,
-            })}
-          >
-            <FontAwesomeIcon icon={lineChartIcon} fixedWidth /> Compare visits
-          </DropdownItem>
+      <DropdownItem
+        tag={Link}
+        to={`${routesPrefix}/domain/${domain.domain}${domain.isDefault ? `_${DEFAULT_DOMAIN}` : ''}/visits`}
+      >
+        <FontAwesomeIcon icon={pieChartIcon} fixedWidth /> Visit stats
+      </DropdownItem>
+      <DropdownItem
+        disabled={!visitsComparison || !visitsComparison.canAddItemWithName(domain.domain)}
+        onClick={() => visitsComparison?.addItemToCompare({
+          name: domain.domain,
+          query: domain.domain,
+        })}
+      >
+        <FontAwesomeIcon icon={lineChartIcon} fixedWidth /> Compare visits
+      </DropdownItem>
+
+      <DropdownItem divider tag="hr" />
 
-          <DropdownItem divider tag="hr" />
-        </>
-      )}
       <DropdownItem onClick={toggleModal}>
         <FontAwesomeIcon fixedWidth icon={editIcon} /> Edit redirects
       </DropdownItem>

src/domains/helpers/DomainDropdown.tsx

@@ -52,7 +52,7 @@ const ExportShortUrlsBtn: FCWithDeps<ExportShortUrlsBtnProps, ExportShortUrlsBtn
         longUrl: shortUrl.longUrl,
         title: shortUrl.title ?? '',
         tags: shortUrl.tags.join('|'),
-        visits: shortUrl?.visitsSummary?.total ?? shortUrl.visitsCount,
+        visits: shortUrl?.visitsSummary?.total ?? shortUrl.visitsCount ?? 0,
       };
     }));
     stopLoading();

src/short-urls/helpers/ExportShortUrlsBtn.tsx

@@ -21,7 +21,7 @@ interface StatusResult {
 const resolveShortUrlStatus = (shortUrl: ShlinkShortUrl): StatusResult => {
   const { meta, visitsCount, visitsSummary } = shortUrl;
   const { maxVisits, validSince, validUntil } = meta;
-  const totalVisits = visitsSummary?.total ?? visitsCount;
+  const totalVisits = visitsSummary?.total ?? visitsCount ?? 0;
 
   if (maxVisits && totalVisits >= maxVisits) {
     return {

src/short-urls/helpers/ShortUrlStatus.tsx

@@ -80,7 +80,7 @@ const ShortUrlsRow: FCWithDeps<ShortUrlsRowProps, ShortUrlsRowDeps> = ({ shortUr
         <ShortUrlVisitsCount
           visitsCount={(
             doExcludeBots ? shortUrl.visitsSummary?.nonBots : shortUrl.visitsSummary?.total
-          ) ?? shortUrl.visitsCount}
+          ) ?? shortUrl.visitsCount ?? 0}
           shortUrl={shortUrl}
           active={active}
           asLink

src/short-urls/helpers/ShortUrlsRow.tsx

@@ -1,5 +1,5 @@
 import { createSlice } from '@reduxjs/toolkit';
-import type { ShlinkApiClient, ShlinkShortUrlsListParams, ShlinkShortUrlsResponse } from '../../api-contract';
+import type { ShlinkApiClient, ShlinkShortUrlsList, ShlinkShortUrlsListParams } from '../../api-contract';
 import { createAsyncThunk } from '../../utils/redux';
 import { createNewVisits } from '../../visits/reducers/visitCreation';
 import { shortUrlMatches } from '../helpers';
@@ -11,7 +11,7 @@ const REDUCER_PREFIX = 'shlink/shortUrlsList';
 export const ITEMS_IN_OVERVIEW_PAGE = 5;
 
 export interface ShortUrlsList {
-  shortUrls?: ShlinkShortUrlsResponse;
+  shortUrls?: ShlinkShortUrlsList;
   loading: boolean;
   error: boolean;
 }
@@ -23,7 +23,7 @@ const initialState: ShortUrlsList = {
 
 export const listShortUrls = (apiClientFactory: () => ShlinkApiClient) => createAsyncThunk(
   `${REDUCER_PREFIX}/listShortUrls`,
-  (params: ShlinkShortUrlsListParams | void): Promise<ShlinkShortUrlsResponse> => apiClientFactory().listShortUrls(
+  (params: ShlinkShortUrlsListParams | void): Promise<ShlinkShortUrlsList> => apiClientFactory().listShortUrls(
     params ?? {},
   ),
 );

src/short-urls/reducers/shortUrlsList.ts

@@ -1,5 +1,5 @@
 import { createAction, createSlice } from '@reduxjs/toolkit';
-import type { ProblemDetailsError, ShlinkApiClient, ShlinkTags } from '../../api-contract';
+import type { ProblemDetailsError, ShlinkApiClient } from '../../api-contract';
 import { parseApiError } from '../../api-contract/utils';
 import type { createShortUrl } from '../../short-urls/reducers/shortUrlCreation';
 import { createAsyncThunk } from '../../utils/redux';
@@ -57,7 +57,7 @@ const increaseVisitsForTags = (tags: TagIncrease[], stats: TagsStatsMap) => tags
         bots: tagStats.visitsSummary.bots + bots,
         nonBots: tagStats.visitsSummary.nonBots + nonBots,
       },
-      visitsCount: tagStats.visitsCount + bots + nonBots,
+      visitsCount: (tagStats.visitsCount ?? 0) + bots + nonBots,
     },
   };
 }, { ...stats });
@@ -82,11 +82,12 @@ const calculateVisitsPerTag = (createdVisits: CreateVisit[]): TagIncrease[] => O
 export const listTags = (apiClientFactory: () => ShlinkApiClient) => createAsyncThunk(
   `${REDUCER_PREFIX}/listTags`,
   async (): Promise<ListTags> => {
-    const { tags, stats }: ShlinkTags = await apiClientFactory().tagsStats();
+    const { data: stats } = await apiClientFactory().tagsStats();
     const processedStats = stats.reduce<TagsStatsMap>((acc, { tag, ...rest }) => {
       acc[tag] = rest;
       return acc;
     }, {});
+    const tags = Object.keys(processedStats);
 
     return { tags, stats: processedStats };
   },

src/tags/reducers/tagsList.ts

@@ -3,7 +3,6 @@ import type { SemVer, SemVerOrLatest } from './helpers/version';
 import { versionMatch } from './helpers/version';
 
 const supportedFeatures = {
-  domainVisits: '3.1.0',
   excludeBotsOnShortUrls: '3.4.0',
   filterDisabledUrls: '3.4.0',
   deviceLongUrls: '3.5.0',
@@ -19,7 +18,6 @@ const isFeatureEnabledForVersion = (feature: Feature, serverVersion: SemVerOrLat
   serverVersion === 'latest' || versionMatch(serverVersion, { minVersion: supportedFeatures[feature] });
 
 const getFeaturesForVersion = (serverVersion: SemVerOrLatest): Record<Feature, boolean> => ({
-  domainVisits: isFeatureEnabledForVersion('domainVisits', serverVersion),
   excludeBotsOnShortUrls: isFeatureEnabledForVersion('excludeBotsOnShortUrls', serverVersion),
   filterDisabledUrls: isFeatureEnabledForVersion('filterDisabledUrls', serverVersion),
   deviceLongUrls: isFeatureEnabledForVersion('deviceLongUrls', serverVersion),

src/utils/features.ts

@@ -1,6 +1,6 @@
 import { range, splitEvery } from '@shlinkio/data-manipulation';
 import type { ShlinkVisitsParams } from '@shlinkio/shlink-js-sdk/api-contract';
-import type { ShlinkPaginator, ShlinkVisit, ShlinkVisits } from '../../../api-contract';
+import type { ShlinkPaginator, ShlinkVisit, ShlinkVisitsList } from '../../../api-contract';
 
 const ITEMS_PER_PAGE = 5000;
 const PARALLEL_STARTING_PAGE = 2;
@@ -10,7 +10,7 @@ export const DEFAULT_BATCH_SIZE = 4;
 const isLastPage = ({ currentPage, pagesCount }: ShlinkPaginator): boolean => currentPage >= pagesCount;
 const calcProgress = (total: number, current: number): number => (current * 100) / total;
 
-export type VisitsLoader = (query: ShlinkVisitsParams) => Promise<ShlinkVisits>;
+export type VisitsLoader = (query: ShlinkVisitsParams) => Promise<ShlinkVisitsList>;
 
 export type LastVisitLoader = (excludeBots?: boolean) => Promise<ShlinkVisit | undefined>;
 
@@ -93,7 +93,7 @@ export const createLoadVisits = ({
 
 export const lastVisitLoaderForLoader = (
   doIntervalFallback: boolean,
-  loader: (params: ShlinkVisitsParams) => Promise<ShlinkVisits>,
+  loader: (params: ShlinkVisitsParams) => Promise<ShlinkVisitsList>,
 ): LastVisitLoader => async (excludeBots?: boolean) => (
   !doIntervalFallback
     ? Promise.resolve(undefined)

src/visits/reducers/common/createLoadVisits.ts

@@ -1,4 +1,4 @@
-import type { ShlinkVisits, ShlinkVisitsParams } from '@shlinkio/shlink-js-sdk/api-contract';
+import type { ShlinkVisitsList, ShlinkVisitsParams } from '@shlinkio/shlink-js-sdk/api-contract';
 import type { ShlinkApiClient, ShlinkOrphanVisit, ShlinkOrphanVisitType } from '../../api-contract';
 import { isBetween } from '../../utils/dates/helpers/date';
 import { isOrphanVisit } from '../helpers';
@@ -23,7 +23,7 @@ const initialState: VisitsInfo = {
 const matchesType = (visit: ShlinkOrphanVisit, orphanVisitsType?: ShlinkOrphanVisitType) =>
   !orphanVisitsType || orphanVisitsType === visit.type;
 
-const filterOrphanVisitsByType = ({ data, ...rest }: ShlinkVisits, type?: ShlinkOrphanVisitType) => {
+const filterOrphanVisitsByType = ({ data, ...rest }: ShlinkVisitsList, type?: ShlinkOrphanVisitType) => {
   const visits = data.filter((visit) => isOrphanVisit(visit) && matchesType(visit, type));
   return { ...rest, data: visits };
 };

src/visits/reducers/orphanVisits.ts

@@ -1,12 +1,12 @@
 import { createSlice } from '@reduxjs/toolkit';
-import type { ShlinkApiClient, ShlinkDeleteVisitsResponse } from '../../api-contract';
+import type { ShlinkApiClient, ShlinkDeleteVisitsResult } from '../../api-contract';
 import { parseApiError } from '../../api-contract/utils';
 import { createAsyncThunk } from '../../utils/redux';
 import type { VisitsDeletion } from './types';
 
 const REDUCER_PREFIX = 'shlink/orphanVisitsDeletion';
 
-export type OrphanVisitsDeletion = VisitsDeletion & ShlinkDeleteVisitsResponse;
+export type OrphanVisitsDeletion = VisitsDeletion & ShlinkDeleteVisitsResult;
 
 const initialState: OrphanVisitsDeletion = {
   deletedVisits: 0,
@@ -16,7 +16,7 @@ const initialState: OrphanVisitsDeletion = {
 
 export const deleteOrphanVisits = (apiClientFactory: () => ShlinkApiClient) => createAsyncThunk(
   `${REDUCER_PREFIX}/deleteOrphanVisits`,
-  (): Promise<ShlinkDeleteVisitsResponse> => apiClientFactory().deleteOrphanVisits(),
+  (): Promise<ShlinkDeleteVisitsResult> => apiClientFactory().deleteOrphanVisits(),
 );
 
 export const orphanVisitsDeletionReducerCreator = (

src/visits/reducers/orphanVisitsDeletion.ts

@@ -1,13 +1,13 @@
 import { createSlice } from '@reduxjs/toolkit';
-import type { ShlinkApiClient, ShlinkDeleteVisitsResponse } from '../../api-contract';
+import type { ShlinkApiClient, ShlinkDeleteVisitsResult } from '../../api-contract';
 import { parseApiError } from '../../api-contract/utils';
 import type { ShortUrlIdentifier } from '../../short-urls/data';
 import { createAsyncThunk } from '../../utils/redux';
 import type { VisitsDeletion } from './types';
 
 const REDUCER_PREFIX = 'shlink/shortUrlVisitsDeletion';
 
-type DeleteVisitsResult = ShlinkDeleteVisitsResponse & ShortUrlIdentifier;
+type DeleteVisitsResult = ShlinkDeleteVisitsResult & ShortUrlIdentifier;
 
 export type ShortUrlVisitsDeletion = VisitsDeletion & DeleteVisitsResult;
 

src/visits/reducers/shortUrlVisitsDeletion.ts

@@ -39,7 +39,7 @@ const countBots = (visits: CreateVisit[]) => visits.filter(({ visit }) => visit.
 export const loadVisitsOverview = (apiClientFactory: () => ShlinkApiClient) => createAsyncThunk(
   `${REDUCER_PREFIX}/loadVisitsOverview`,
   (): Promise<ParsedVisitsOverview> => apiClientFactory().getVisitsOverview().then(
-    ({ nonOrphanVisits, visitsCount, orphanVisits, orphanVisitsCount }) => ({
+    ({ nonOrphanVisits, visitsCount = 0, orphanVisits, orphanVisitsCount = 0 }) => ({
       nonOrphanVisits: {
         total: nonOrphanVisits?.total ?? visitsCount,
         nonBots: nonOrphanVisits?.nonBots,