forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-04-19 21:16:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move more components to shlink-web-component when applicable

Browse Source
This commit is contained in:
Alejandro Celaya
2023-07-29 10:43:15 +02:00
parent 275745fd3a
commit 8d24116859
94 changed files with 224 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/api/ShlinkApiError.tsx
View File

@@ -1,18 +0,0 @@
import type { ProblemDetailsError } from '../../shlink-web-component/api-contract';
import { isInvalidArgumentError } from '../../shlink-web-component/api-contract/utils';
export interface ShlinkApiErrorProps {
errorData?: ProblemDetailsError;
fallbackMessage?: string;
}
export const ShlinkApiError = ({ errorData, fallbackMessage }: ShlinkApiErrorProps) => (
<>
{errorData?.detail ?? fallbackMessage}
{isInvalidArgumentError(errorData) && (
<p className="mb-0">
Invalid elements: [{errorData.invalidElements.join(', ')}]
</p>
)}
</>
);

3
src/common/SimplePaginator.scss
View File

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

51
src/common/SimplePaginator.tsx
View File

@@ -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>
);
};

4
src/common/services/HttpClient.ts
View File

@@ -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());
}

13
src/common/services/ImageDownloader.ts
View File

@@ -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);
}
}

3
src/common/services/provideServices.ts
View File

@@ -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);

4
src/utils/CopyToClipboardIcon.scss
View File

@@ -1,4 +0,0 @@
.copy-to-clipboard-icon {
cursor: pointer;
font-size: 1.2rem;
}

16
src/utils/CopyToClipboardIcon.tsx
View File

@@ -1,16 +0,0 @@
import { faClone as copyIcon } from '@fortawesome/free-regular-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import type { FC } from 'react';
import CopyToClipboard from 'react-copy-to-clipboard';
import './CopyToClipboardIcon.scss';
interface CopyToClipboardIconProps {
text: string;
onCopy?: (text: string, result: boolean) => void;
}
export const CopyToClipboardIcon: FC<CopyToClipboardIconProps> = ({ text, onCopy }) => (
<CopyToClipboard text={text} onCopy={onCopy}>
<FontAwesomeIcon icon={copyIcon} className="ms-2 copy-to-clipboard-icon" />
</CopyToClipboard>
);

17
src/utils/ExportBtn.tsx
View File

@@ -1,17 +0,0 @@
import { faFileCsv } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import type { FC } from 'react';
import type { ButtonProps } from 'reactstrap';
import { Button } from 'reactstrap';
import { prettify } from './helpers/numbers';
type ExportBtnProps = Omit<ButtonProps, 'outline' | 'color' | 'disabled'> & {
amount?: number;
loading?: boolean;
};
export const ExportBtn: FC<ExportBtnProps> = ({ amount = 0, loading = false, ...rest }) => (
<Button {...rest} outline color="primary" disabled={loading}>
<FontAwesomeIcon icon={faFileCsv} /> {loading ? 'Exporting...' : <>Export ({prettify(amount)})</>}
</Button>
);

24
src/utils/InfoTooltip.tsx
View File

@@ -1,24 +0,0 @@
import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import type { Placement } from '@popperjs/core';
import type { FC, PropsWithChildren } from 'react';
import { UncontrolledTooltip } from 'reactstrap';
import { useElementRef } from './helpers/hooks';
export type InfoTooltipProps = PropsWithChildren<{
className?: string;
placement: Placement;
}>;
export const InfoTooltip: FC<InfoTooltipProps> = ({ className = '', placement, children }) => {
const ref = useElementRef<HTMLSpanElement>();
return (
<>
<span className={className} ref={ref}>
<FontAwesomeIcon icon={infoIcon} />
</span>
<UncontrolledTooltip target={ref} placement={placement}>{children}</UncontrolledTooltip>
</>
);
};

25
src/utils/PaginationDropdown.tsx
View File

@@ -1,25 +0,0 @@
import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap';
interface PaginationDropdownProps {
ranges: number[];
value: number;
setValue: (newValue: number) => void;
toggleClassName?: string;
}
export const PaginationDropdown = ({ toggleClassName, ranges, value, setValue }: PaginationDropdownProps) => (
<UncontrolledDropdown>
<DropdownToggle caret color="link" className={toggleClassName}>Paginate</DropdownToggle>
<DropdownMenu end>
{ranges.map((itemsPerPage) => (
<DropdownItem key={itemsPerPage} active={itemsPerPage === value} onClick={() => setValue(itemsPerPage)}>
<b>{itemsPerPage}</b> items per page
</DropdownItem>
))}
<DropdownItem divider />
<DropdownItem disabled={value === Infinity} onClick={() => setValue(Infinity)}>
<i>Clear pagination</i>
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
);

16
src/utils/helpers/charts.ts
View File

@@ -1,16 +0,0 @@
import type { ActiveElement, ChartEvent, ChartType, TooltipItem } from 'chart.js';
import { prettify } from './numbers';
export const pointerOnHover = ({ native }: ChartEvent, [firstElement]: ActiveElement[]) => {
if (!native?.target) {
return;
}
const canvas = native.target as HTMLCanvasElement;
canvas.style.cursor = firstElement ? 'pointer' : 'default';
};
export const renderChartLabel = ({ dataset, raw }: TooltipItem<ChartType>) => `${dataset.label}: ${prettify(`${raw}`)}`;
export const renderPieChartLabel = ({ label, raw }: TooltipItem<ChartType>) => `${label}: ${prettify(`${raw}`)}`;

2
src/utils/helpers/dateIntervals.ts
View File

@@ -1,6 +1,5 @@
import { endOfDay, startOfDay, subDays } from 'date-fns';
import { cond, filter, isEmpty, T } from 'ramda';
import { equals } from '../utils';
import type { DateOrString } from './date';
import { dateOrNull, formatInternational, isBeforeOrEqual, now, parseISO } from './date';
@@ -68,6 +67,7 @@ export const rangeOrIntervalToString = (range?: DateRange | DateInterval): strin
const startOfDaysAgo = (daysAgo: number) => startOfDay(subDays(now(), daysAgo));
const endingToday = (startDate: Date): DateRange => ({ startDate, endDate: endOfDay(now()) });
const equals = (value: any) => (otherValue: any) => value === otherValue;
export const intervalToDateRange = cond<[DateInterval | undefined], DateRange>([
[equals('today'), () => endingToday(startOfDay(now()))],

7
src/utils/helpers/numbers.ts
View File

@@ -1,7 +0,0 @@
const TEN_ROUNDING_NUMBER = 10;
const { ceil } = Math;
const formatter = new Intl.NumberFormat('en-US');
export const prettify = (number: number | string) => formatter.format(Number(number));
export const roundTen = (number: number) => ceil(number / TEN_ROUNDING_NUMBER) * TEN_ROUNDING_NUMBER;

39
src/utils/helpers/pagination.ts
View File

@@ -1,39 +0,0 @@
import { max, min, range } from 'ramda';
import { prettify } from './numbers';
const DELTA = 2;
export const ELLIPSIS = '...';
type Ellipsis = typeof ELLIPSIS;
export type NumberOrEllipsis = number | Ellipsis;
export const progressivePagination = (currentPage: number, pageCount: number): NumberOrEllipsis[] => {
const pages: NumberOrEllipsis[] = range(
max(DELTA, currentPage - DELTA),
min(pageCount - 1, currentPage + DELTA) + 1,
);
if (currentPage - DELTA > DELTA) {
pages.unshift(ELLIPSIS);
}
if (currentPage + DELTA < pageCount - 1) {
pages.push(ELLIPSIS);
}
pages.unshift(1);
pages.push(pageCount);
return pages;
};
export const pageIsEllipsis = (pageNumber: NumberOrEllipsis): pageNumber is Ellipsis => pageNumber === ELLIPSIS;
export const prettifyPageNumber = (pageNumber: NumberOrEllipsis): string => (
pageIsEllipsis(pageNumber) ? pageNumber : prettify(pageNumber)
);
export const keyForPage = (pageNumber: NumberOrEllipsis, index: number) => (
!pageIsEllipsis(pageNumber) ? `${pageNumber}` : `${pageNumber}_${index}`
);

23
src/utils/helpers/qrCodes.ts
View File

@@ -1,23 +0,0 @@
import { isEmpty } from 'ramda';
import { stringifyQuery } from '../../../shlink-web-component/utils/helpers/query';
export type QrCodeFormat = 'svg' | 'png';
export type QrErrorCorrection = 'L' | 'M' | 'Q' | 'H';
export interface QrCodeOptions {
size: number;
format: QrCodeFormat;
margin: number;
errorCorrection: QrErrorCorrection;
}
export const buildQrCodeUrl = (shortUrl: string, { margin, ...options }: QrCodeOptions): string => {
const baseUrl = `${shortUrl}/qr-code`;
const query = stringifyQuery({
...options,
margin: margin > 0 ? margin : undefined,
});
return `${baseUrl}${isEmpty(query) ? '' : `?${query}`}`;
};

14
src/utils/helpers/version.ts
View File

@@ -1,18 +1,20 @@
import { compare } from 'compare-versions';
import { identity, memoizeWith } from 'ramda';
import type { Empty } from '../utils';
import { hasValue } from '../utils';
import { identity, isEmpty, isNil, memoizeWith } from 'ramda';
type Empty = null | undefined | '' | never[];
const hasValue = <T>(value: T | Empty): value is T => !isNil(value) && !isEmpty(value);
type SemVerPatternFragment = `${bigint | '*'}`;
export type SemVerPattern = SemVerPatternFragment
type SemVerPattern = SemVerPatternFragment
| `${SemVerPatternFragment}.${SemVerPatternFragment}`
| `${SemVerPatternFragment}.${SemVerPatternFragment}.${SemVerPatternFragment}`;
export interface Versions {
type Versions = {
maxVersion?: SemVerPattern;
minVersion?: SemVerPattern;
}
};
export type SemVer = `${bigint}.${bigint}.${bigint}` | 'latest';

2
src/utils/services/provideServices.ts
View File

@@ -1,5 +1,4 @@
import type Bottle from 'bottlejs';
import { ColorGenerator } from '../../../shlink-web-component/utils/services/ColorGenerator';
import { csvToJson, jsonToCsv } from '../helpers/csvjson';
import { useTimeoutToggle } from '../helpers/hooks';
import { LocalStorage } from './LocalStorage';
@@ -7,7 +6,6 @@ import { LocalStorage } from './LocalStorage';
export const provideServices = (bottle: Bottle) => {
bottle.constant('localStorage', window.localStorage);
bottle.service('Storage', LocalStorage, 'localStorage');
bottle.service('ColorGenerator', ColorGenerator, 'Storage');
bottle.constant('csvToJson', csvToJson);
bottle.constant('jsonToCsv', jsonToCsv);

19
src/utils/table/TableOrderIcon.tsx
View File

@@ -1,19 +0,0 @@
import { faCaretDown as caretDownIcon, faCaretUp as caretUpIcon } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import type { Order } from '../helpers/ordering';
interface TableOrderIconProps<T> {
currentOrder: Order<T>;
field: T;
className?: string;
}
export function TableOrderIcon<T extends string = string>(
{ currentOrder, field, className = 'ms-1' }: TableOrderIconProps<T>,
) {
if (!currentOrder.dir || currentOrder.field !== field) {
return null;
}
return <FontAwesomeIcon icon={currentOrder.dir === 'ASC' ? caretUpIcon : caretDownIcon} className={className} />;
}

3
src/utils/types.ts
View File

@@ -1,3 +0,0 @@
export type MediaMatcher = (query: string) => MediaQueryList;
export type Fetch = typeof window.fetch;

33
src/utils/utils.ts
View File

@@ -1,36 +1,11 @@
import { isEmpty, isNil, pipe, range } from 'ramda';
import { pipe } from 'ramda';
import type { SyntheticEvent } from 'react';
export const rangeOf = <T>(size: number, mappingFn: (value: number) => T, startAt = 1): T[] =>
range(startAt, size + 1).map(mappingFn);
export type Empty = null | undefined | '' | never[];
export const hasValue = <T>(value: T | Empty): value is T => !isNil(value) && !isEmpty(value);
export const handleEventPreventingDefault = <T>(handler: () => T) => pipe(
(e: SyntheticEvent) => e.preventDefault(),
handler,
);
export type Nullable<T> = {
[P in keyof T]: T[P] | null
};
type Optional<T> = T | null | undefined;
export type OptionalString = Optional<string>;
export const nonEmptyValueOrNull = <T>(value: T): T | null => (isEmpty(value) ? null : value);
export const capitalize = <T extends string>(value: T): string => `${value.charAt(0).toUpperCase()}${value.slice(1)}`;
export const equals = (value: any) => (otherValue: any) => value === otherValue;
export type BooleanString = 'true' | 'false';
export const parseBooleanToString = (value: boolean): BooleanString => (value ? 'true' : 'false');
export const parseOptionalBooleanToString = (value?: boolean): BooleanString | undefined => (
value === undefined ? undefined : parseBooleanToString(value)
export const handleEventPreventingDefault = <T>(handler: () => T) => pipe(
(e: SyntheticEvent) => e.preventDefault(),
handler,
);