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

Migrated more common components to TS

Browse Source
This commit is contained in:
Alejandro Celaya
2020-08-28 20:05:01 +02:00
parent dcf72e6818
commit a96539129d
10 changed files with 105 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/common/ShlinkVersions.js → src/common/ShlinkVersions.tsx
View File

@@ -1,45 +1,43 @@
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { pipe } from 'ramda';
import { ExternalLink } from 'react-external-link';
import { serverType } from '../servers/prop-types';
import { versionToPrintable, versionToSemVer } from '../utils/helpers/version';
import { isReachableServer, SelectedServer } from '../servers/data';
const SHLINK_WEB_CLIENT_VERSION = '%_VERSION_%';
const normalizeVersion = pipe(versionToSemVer(), versionToPrintable);
const propTypes = {
selectedServer: serverType,
className: PropTypes.string,
clientVersion: PropTypes.string,
};
export interface ShlinkVersionsProps {
selectedServer: SelectedServer;
clientVersion?: string;
className?: string;
}
const versionLinkPropTypes = {
project: PropTypes.oneOf([ 'shlink', 'shlink-web-client' ]).isRequired,
version: PropTypes.string.isRequired,
};
interface VersionLinkProps {
project: 'shlink' | 'shlink-web-client';
version: string;
}
const VersionLink = ({ project, version }) => (
const VersionLink = ({ project, version }: VersionLinkProps) => (
<ExternalLink href={`https://github.com/shlinkio/${project}/releases/${version}`} className="text-muted">
<b>{version}</b>
</ExternalLink>
);
VersionLink.propTypes = versionLinkPropTypes;
const ShlinkVersions = ({ selectedServer, className, clientVersion = SHLINK_WEB_CLIENT_VERSION }) => {
const { printableVersion: serverVersion } = selectedServer;
const ShlinkVersions = (
{ selectedServer, className, clientVersion = SHLINK_WEB_CLIENT_VERSION }: ShlinkVersionsProps,
) => {
const normalizedClientVersion = normalizeVersion(clientVersion);
return (
<small className={classNames('text-muted', className)}>
Client: <VersionLink project="shlink-web-client" version={normalizedClientVersion} /> -
Server: <VersionLink project="shlink" version={serverVersion} />
{isReachableServer(selectedServer) &&
<React.Fragment>Server: <VersionLink project="shlink" version={selectedServer.printableVersion} /> - </React.Fragment>
}
Client: <VersionLink project="shlink-web-client" version={normalizedClientVersion} />
</small>
);
};
ShlinkVersions.propTypes = propTypes;
export default ShlinkVersions;

25
src/common/SimplePaginator.js → src/common/SimplePaginator.tsx
View File

@@ -1,23 +1,22 @@
import React from 'react';
import PropTypes from 'prop-types';
import React, { FC } from 'react';
import classNames from 'classnames';
import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
import { isPageDisabled, keyForPage, progressivePagination } from '../utils/helpers/pagination';
import { pageIsEllipsis, keyForPage, NumberOrEllipsis, progressivePagination } from '../utils/helpers/pagination';
import './SimplePaginator.scss';
const propTypes = {
pagesCount: PropTypes.number.isRequired,
currentPage: PropTypes.number.isRequired,
setCurrentPage: PropTypes.func.isRequired,
centered: PropTypes.bool,
};
interface SimplePaginatorProps {
pagesCount: number;
currentPage: number;
setCurrentPage: (currentPage: number) => void;
centered?: boolean;
}
const SimplePaginator = ({ pagesCount, currentPage, setCurrentPage, centered = true }) => {
const SimplePaginator: FC<SimplePaginatorProps> = ({ pagesCount, currentPage, setCurrentPage, centered = true }) => {
if (pagesCount < 2) {
return null;
}
const onClick = (page) => () => setCurrentPage(page);
const onClick = (page: NumberOrEllipsis) => () => !pageIsEllipsis(page) && setCurrentPage(page);
return (
<Pagination listClassName={classNames('flex-wrap mb-0 simple-paginator', { 'justify-content-center': centered })}>
@@ -27,7 +26,7 @@ const SimplePaginator = ({ pagesCount, currentPage, setCurrentPage, centered = t
{progressivePagination(currentPage, pagesCount).map((pageNumber, index) => (
<PaginationItem
key={keyForPage(pageNumber, index)}
disabled={isPageDisabled(pageNumber)}
disabled={pageIsEllipsis(pageNumber)}
active={currentPage === pageNumber}
>
<PaginationLink tag="span" onClick={onClick(pageNumber)}>{pageNumber}</PaginationLink>
@@ -40,6 +39,4 @@ const SimplePaginator = ({ pagesCount, currentPage, setCurrentPage, centered = t
);
};
SimplePaginator.propTypes = propTypes;
export default SimplePaginator;

3
src/servers/data/index.ts
View File

@@ -27,3 +27,6 @@ export type SelectedServer = RegularServer | NotFoundServer | null;
export const hasServerData = (server: ServerData | NotFoundServer | null): server is ServerData =>
!!(server as ServerData)?.url && !!(server as ServerData)?.apiKey;
export const isReachableServer = (server: SelectedServer): server is ReachableServer =>
!!server?.hasOwnProperty('printableVersion');

4
src/short-urls/Paginator.js
View File

@@ -2,7 +2,7 @@ import React from 'react';
import { Link } from 'react-router-dom';
import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
import PropTypes from 'prop-types';
import { isPageDisabled, keyForPage, progressivePagination } from '../utils/helpers/pagination';
import { pageIsEllipsis, keyForPage, progressivePagination } from '../utils/helpers/pagination';
import './Paginator.scss';
const propTypes = {
@@ -24,7 +24,7 @@ const Paginator = ({ paginator = {}, serverId }) => {
progressivePagination(currentPage, pagesCount).map((pageNumber, index) => (
<PaginationItem
key={keyForPage(pageNumber, index)}
disabled={isPageDisabled(pageNumber)}
disabled={pageIsEllipsis(pageNumber)}
active={currentPage === pageNumber}
>
<PaginationLink

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

@@ -1,20 +1,23 @@
import { max, min, range } from 'ramda';
const DELTA = 2;
export const ELLIPSIS = '...';
type NumberOrEllipsis = number | '...';
type Ellipsis = typeof ELLIPSIS;
export type NumberOrEllipsis = number | Ellipsis;
export const progressivePagination = (currentPage: number, pageCount: number): NumberOrEllipsis[] => {
const delta = 2;
const pages: NumberOrEllipsis[] = range(
max(delta, currentPage - delta),
min(pageCount - 1, currentPage + delta) + 1,
max(DELTA, currentPage - DELTA),
min(pageCount - 1, currentPage + DELTA) + 1,
);
if (currentPage - delta > delta) {
if (currentPage - DELTA > DELTA) {
pages.unshift(ELLIPSIS);
}
if (currentPage + delta < pageCount - 1) {
if (currentPage + DELTA < pageCount - 1) {
pages.push(ELLIPSIS);
}
@@ -24,6 +27,6 @@ export const progressivePagination = (currentPage: number, pageCount: number): N
return pages;
};
export const keyForPage = (pageNumber: NumberOrEllipsis, index: number) => pageNumber !== ELLIPSIS ? pageNumber : `${pageNumber}_${index}`;
export const pageIsEllipsis = (pageNumber: NumberOrEllipsis): pageNumber is Ellipsis => pageNumber === ELLIPSIS;
export const isPageDisabled = (pageNumber: NumberOrEllipsis) => pageNumber === ELLIPSIS;
export const keyForPage = (pageNumber: NumberOrEllipsis, index: number) => !pageIsEllipsis(pageNumber) ? `${pageNumber}` : `${pageNumber}_${index}`;