forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-05-31 01:26:16 +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;