Move more components to shlink-web-component when applicable

src/common/SimplePaginator.scss

@@ -1,3 +0,0 @@
-.simple-paginator {
-  user-select: none;
-}

src/common/SimplePaginator.tsx

@@ -1,51 +0,0 @@
-import classNames from 'classnames';
-import type { FC } from 'react';
-import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
-import type {
-  NumberOrEllipsis } from '../utils/helpers/pagination';
-import {
-  keyForPage,
-  pageIsEllipsis,
-  prettifyPageNumber,
-  progressivePagination,
-} from '../utils/helpers/pagination';
-import './SimplePaginator.scss';
-
-interface SimplePaginatorProps {
-  pagesCount: number;
-  currentPage: number;
-  setCurrentPage: (currentPage: number) => void;
-  centered?: boolean;
-}
-
-export const SimplePaginator: FC<SimplePaginatorProps> = (
-  { pagesCount, currentPage, setCurrentPage, centered = true },
-) => {
-  if (pagesCount < 2) {
-    return null;
-  }
-
-  const onClick = (page: NumberOrEllipsis) => () => !pageIsEllipsis(page) && setCurrentPage(page);
-
-  return (
-    <Pagination listClassName={classNames('flex-wrap mb-0 simple-paginator', { 'justify-content-center': centered })}>
-      <PaginationItem disabled={currentPage <= 1}>
-        <PaginationLink previous tag="span" onClick={onClick(currentPage - 1)} />
-      </PaginationItem>
-      {progressivePagination(currentPage, pagesCount).map((pageNumber, index) => (
-        <PaginationItem
-          key={keyForPage(pageNumber, index)}
-          disabled={pageIsEllipsis(pageNumber)}
-          active={currentPage === pageNumber}
-        >
-          <PaginationLink role="link" tag="span" onClick={onClick(pageNumber)}>
-            {prettifyPageNumber(pageNumber)}
-          </PaginationLink>
-        </PaginationItem>
-      ))}
-      <PaginationItem disabled={currentPage >= pagesCount}>
-        <PaginationLink next tag="span" onClick={onClick(currentPage + 1)} />
-      </PaginationItem>
-    </Pagination>
-  );
-};

src/common/services/HttpClient.ts

@@ -1,4 +1,4 @@
-import type { Fetch } from '../../utils/types';
+type Fetch = typeof window.fetch;
 
 const applicationJsonHeader = { 'Content-Type': 'application/json' };
 const withJsonContentType = (options?: RequestInit): RequestInit | undefined => {
@@ -37,6 +37,4 @@ export class HttpClient {
         throw await resp.json();
       }
     });
-
-  public readonly fetchBlob = (url: string): Promise<Blob> => this.fetch(url).then((resp) => resp.blob());
 }

src/common/services/ImageDownloader.ts

@@ -1,13 +0,0 @@
-import { saveUrl } from '../../utils/helpers/files';
-import type { HttpClient } from './HttpClient';
-
-export class ImageDownloader {
-  public constructor(private readonly httpClient: HttpClient, private readonly window: Window) {}
-
-  public async saveImage(imgUrl: string, filename: string): Promise<void> {
-    const data = await this.httpClient.fetchBlob(imgUrl);
-    const url = URL.createObjectURL(data);
-
-    saveUrl(this.window, url, filename);
-  }
-}

src/common/services/provideServices.ts

@@ -9,16 +9,13 @@ import { sidebarNotPresent, sidebarPresent } from '../reducers/sidebar';
 import { ScrollToTop } from '../ScrollToTop';
 import { ShlinkVersionsContainer } from '../ShlinkVersionsContainer';
 import { HttpClient } from './HttpClient';
-import { ImageDownloader } from './ImageDownloader';
 
 export const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   // Services
   bottle.constant('window', window);
   bottle.constant('console', console);
   bottle.constant('fetch', window.fetch.bind(window));
-
   bottle.service('HttpClient', HttpClient, 'fetch');
-  bottle.service('ImageDownloader', ImageDownloader, 'HttpClient', 'window');
 
   // Components
   bottle.serviceFactory('ScrollToTop', () => ScrollToTop);