mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2026-10-18 19:54:09 +00:00
Migrate from ESLint to Oxlint and Oxfmt
This commit is contained in:
Alejandro Celaya
@@ -1,6 +1,6 @@
|
||||
import { faSyncAlt as reloadIcon } from '@fortawesome/free-solid-svg-icons';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { Button, Card, CloseButton,useToggle } from '@shlinkio/shlink-frontend-kit';
|
||||
import { Button, Card, CloseButton, useToggle } from '@shlinkio/shlink-frontend-kit';
|
||||
import { clsx } from 'clsx';
|
||||
import type { FC } from 'react';
|
||||
import { useCallback } from 'react';
|
||||
@@ -25,10 +25,7 @@ export const AppUpdateBanner: FC<AppUpdateBannerProps> = ({ isOpen, onClose, for
|
||||
return (
|
||||
<Card
|
||||
role="alert"
|
||||
className={clsx(
|
||||
'w-[700px] max-w-[calc(100%-30px)]',
|
||||
'fixed top-[35px] left-[50%] translate-x-[-50%] z-[1040]',
|
||||
)}
|
||||
className={clsx('w-[700px] max-w-[calc(100%-30px)]', 'fixed top-[35px] left-[50%] translate-x-[-50%] z-[1040]')}
|
||||
>
|
||||
<Card.Header className="flex items-center justify-between">
|
||||
<h5>This app has just been updated!</h5>
|
||||
@@ -37,7 +34,11 @@ export const AppUpdateBanner: FC<AppUpdateBannerProps> = ({ isOpen, onClose, for
|
||||
<Card.Body className="flex gap-4 items-center justify-between max-md:flex-col">
|
||||
Restart it to enjoy the new features.
|
||||
<Button disabled={isUpdating} variant="secondary" solid onClick={update}>
|
||||
{!isUpdating && <>Restart now <FontAwesomeIcon icon={reloadIcon} /></>}
|
||||
{!isUpdating && (
|
||||
<>
|
||||
Restart now <FontAwesomeIcon icon={reloadIcon} />
|
||||
</>
|
||||
)}
|
||||
{isUpdating && <>Restarting...</>}
|
||||
</Button>
|
||||
</Card.Body>
|
||||
|
||||
@@ -36,7 +36,9 @@ export class ErrorHandler extends Component<ErrorHandlerProps, ErrorHandlerState
|
||||
<ErrorLayout title="Oops! This is awkward :S">
|
||||
<p>It seems that something went wrong. Try refreshing the page or just click this button.</p>
|
||||
<br />
|
||||
<Button size="lg" onClick={() => location.reload()}>Take me back</Button>
|
||||
<Button size="lg" onClick={() => location.reload()}>
|
||||
Take me back
|
||||
</Button>
|
||||
</ErrorLayout>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -36,15 +36,12 @@ export const Home: FC = withoutSelectedServer(() => {
|
||||
</div>
|
||||
|
||||
<div className="md:border-l border-lm-border dark:border-dm-border flex-grow">
|
||||
<h1
|
||||
className={clsx(
|
||||
'p-4 text-center border-lm-border dark:border-dm-border',
|
||||
{ 'border-b': !hasServers },
|
||||
)}
|
||||
>
|
||||
<h1 className={clsx('p-4 text-center border-lm-border dark:border-dm-border', { 'border-b': !hasServers })}>
|
||||
Welcome!
|
||||
</h1>
|
||||
{hasServers ? <ServersListGroup servers={serversList} /> : (
|
||||
{hasServers ? (
|
||||
<ServersListGroup servers={serversList} />
|
||||
) : (
|
||||
<div className="p-6 text-center flex flex-col gap-12 text-xl">
|
||||
<p>This application will help you manage your Shlink servers.</p>
|
||||
<p>
|
||||
|
||||
@@ -14,11 +14,11 @@ export const MainHeader: FC = () => {
|
||||
return (
|
||||
<NavBar
|
||||
className="[&]:fixed top-0 z-900"
|
||||
brand={(
|
||||
brand={
|
||||
<Link to="/" className="[&]:text-white no-underline flex items-center gap-2">
|
||||
<ShlinkLogo className="w-7" color="white" /> <small className="font-normal">Shlink</small>
|
||||
</Link>
|
||||
)}
|
||||
}
|
||||
>
|
||||
<NavBar.MenuItem
|
||||
to={settingsPath}
|
||||
|
||||
@@ -6,7 +6,5 @@ export type NoMenuLayoutProps = PropsWithChildren & {
|
||||
};
|
||||
|
||||
export const NoMenuLayout: FC<NoMenuLayoutProps> = ({ children, className }) => (
|
||||
<div className={clsx('container mx-auto p-5 pt-8 max-md:p-3 max-md:py-4', className)}>
|
||||
{children}
|
||||
</div>
|
||||
<div className={clsx('container mx-auto p-5 pt-8 max-md:p-3 max-md:py-4', className)}>{children}</div>
|
||||
);
|
||||
|
||||
@@ -11,6 +11,8 @@ export const NotFound: FC<NotFoundProps> = ({ to = '/', children = 'Home' }) =>
|
||||
button.
|
||||
</p>
|
||||
<br />
|
||||
<Button inline to={to} size="lg">{children}</Button>
|
||||
<Button inline to={to} size="lg">
|
||||
{children}
|
||||
</Button>
|
||||
</ErrorLayout>
|
||||
);
|
||||
|
||||
@@ -23,7 +23,9 @@ export const ShlinkVersions = ({ selectedServer, clientVersion = SHLINK_WEB_CLIE
|
||||
return (
|
||||
<small className="text-gray-500">
|
||||
{isReachableServer(selectedServer) && (
|
||||
<>Server: <VersionLink project="shlink" version={selectedServer.printableVersion} /> - </>
|
||||
<>
|
||||
Server: <VersionLink project="shlink" version={selectedServer.printableVersion} /> -{' '}
|
||||
</>
|
||||
)}
|
||||
Client: <VersionLink project="shlink-web-client" version={normalizedClientVersion} />
|
||||
</small>
|
||||
|
||||
@@ -6,9 +6,7 @@ import { ShlinkVersions } from './ShlinkVersions';
|
||||
export const ShlinkVersionsContainer = () => {
|
||||
const { selectedServer } = useSelectedServer();
|
||||
return (
|
||||
<div
|
||||
className={clsx('text-center', { 'md:ml-(--aside-menu-width)': isReachableServer(selectedServer) })}
|
||||
>
|
||||
<div className={clsx('text-center', { 'md:ml-(--aside-menu-width)': isReachableServer(selectedServer) })}>
|
||||
<ShlinkVersions selectedServer={selectedServer} />
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -20,41 +20,39 @@ export type ShlinkWebComponentContainerProps = {
|
||||
buildShlinkApiClient: ShlinkApiClientBuilder;
|
||||
};
|
||||
|
||||
const ShlinkWebComponentContainerBase: FC<
|
||||
ShlinkWebComponentContainerProps
|
||||
// FIXME Using `memo` here to solve a flickering effect in charts.
|
||||
// memo is probably not the right solution. The root cause is the withSelectedServer HOC, but I couldn't fix the
|
||||
// extra rendering there.
|
||||
// This should be revisited at some point.
|
||||
> = withSelectedServer(memo(({
|
||||
buildShlinkApiClient,
|
||||
TagColorsStorage: tagColorsStorage,
|
||||
}) => {
|
||||
const { selectedServer } = useSelectedServer();
|
||||
const { settings } = useSettings();
|
||||
const ShlinkWebComponentContainerBase: FC<ShlinkWebComponentContainerProps> =
|
||||
// FIXME Using `memo` here to solve a flickering effect in charts.
|
||||
// memo is probably not the right solution. The root cause is the withSelectedServer HOC, but I couldn't fix the
|
||||
// extra rendering there.
|
||||
// This should be revisited at some point.
|
||||
withSelectedServer(
|
||||
memo(({ buildShlinkApiClient, TagColorsStorage: tagColorsStorage }) => {
|
||||
const { selectedServer } = useSelectedServer();
|
||||
const { settings } = useSettings();
|
||||
|
||||
if (!isReachableServer(selectedServer)) {
|
||||
return <ServerError />;
|
||||
}
|
||||
if (!isReachableServer(selectedServer)) {
|
||||
return <ServerError />;
|
||||
}
|
||||
|
||||
const routesPrefix = `/server/${selectedServer.id}`;
|
||||
return (
|
||||
<ShlinkSidebarVisibilityProvider>
|
||||
<ShlinkSidebarToggleButton className="fixed top-3.5 left-3 z-901" />
|
||||
<ShlinkWebComponent
|
||||
serverVersion={selectedServer.version}
|
||||
apiClient={buildShlinkApiClient(selectedServer)}
|
||||
settings={settings}
|
||||
routesPrefix={routesPrefix}
|
||||
tagColorsStorage={tagColorsStorage}
|
||||
createNotFound={(nonPrefixedHomePath: string) => (
|
||||
<NotFound to={`${routesPrefix}${nonPrefixedHomePath}`}>List short URLs</NotFound>
|
||||
)}
|
||||
autoSidebarToggle={false}
|
||||
/>
|
||||
</ShlinkSidebarVisibilityProvider>
|
||||
const routesPrefix = `/server/${selectedServer.id}`;
|
||||
return (
|
||||
<ShlinkSidebarVisibilityProvider>
|
||||
<ShlinkSidebarToggleButton className="fixed top-3.5 left-3 z-901" />
|
||||
<ShlinkWebComponent
|
||||
serverVersion={selectedServer.version}
|
||||
apiClient={buildShlinkApiClient(selectedServer)}
|
||||
settings={settings}
|
||||
routesPrefix={routesPrefix}
|
||||
tagColorsStorage={tagColorsStorage}
|
||||
createNotFound={(nonPrefixedHomePath: string) => (
|
||||
<NotFound to={`${routesPrefix}${nonPrefixedHomePath}`}>List short URLs</NotFound>
|
||||
)}
|
||||
autoSidebarToggle={false}
|
||||
/>
|
||||
</ShlinkSidebarVisibilityProvider>
|
||||
);
|
||||
}),
|
||||
);
|
||||
}));
|
||||
|
||||
export const ShlinkWebComponentContainer = withDependencies(ShlinkWebComponentContainerBase, [
|
||||
'buildShlinkApiClient',
|
||||
|
||||
@@ -8,18 +8,10 @@ export interface ShlinkLogoProps {
|
||||
export const ShlinkLogo = ({ color = brandColor(), className }: ShlinkLogoProps) => (
|
||||
<svg className={className} viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill={color}>
|
||||
<path
|
||||
d=" M 23.71 85.08 C 17.22 49.81 49.44 14.86 85.08 18.12 C 118.83 19.21 145.72 53.33 139.45 86.37 C 155.64 102.30 171.32 118.83 187.87 134.36 C 198.32 111.73 208.84 89.12 219.57 66.62 C 226.05 53.84 243.47 48.74 255.73 56.27 C 263.76 62.10 270.34 69.69 277.25 76.75 C 286.28 86.61 285.72 102.89 276.31 112.31 C 223.38 165.37 170.38 218.37 117.35 271.34 C 107.72 280.99 91.01 281.25 81.11 271.86 C 74.39 264.94 66.82 258.69 61.24 250.77 C 53.72 238.52 58.85 221.07 71.64 214.62 C 94.11 203.87 116.72 193.38 139.33 182.91 C 123.81 166.36 107.30 150.68 91.37 134.49 C 60.20 140.28 27.37 116.78 23.71 85.08 Z"
|
||||
/>
|
||||
<path
|
||||
d=" M 205.21 201.23 C 225.32 181.36 260.88 181.11 281.14 200.86 C 299.25 218.75 317.37 236.65 335.10 254.93 C 356.73 278.01 352.01 318.70 326.03 336.56 C 320.07 330.47 313.73 324.65 308.12 318.28 C 323.86 309.39 328.76 286.18 316.63 272.39 C 301.73 256.95 286.30 242.03 271.24 226.75 C 264.49 219.65 256.80 212.00 246.37 211.52 C 224.65 208.64 205.52 233.36 214.49 253.58 C 221.09 266.81 234.22 275.12 243.62 286.24 C 240.43 295.96 238.09 306.13 238.29 316.46 C 225.55 304.29 213.16 291.73 200.89 279.09 C 180.97 257.57 183.10 220.45 205.21 201.23 Z"
|
||||
/>
|
||||
<path
|
||||
d=" M 273.90 352.07 C 252.28 328.99 256.98 288.31 282.96 270.46 C 288.93 276.54 295.26 282.36 300.88 288.72 C 285.14 297.62 280.23 320.82 292.38 334.61 C 307.27 350.05 322.70 364.96 337.75 380.25 C 344.51 387.35 352.20 395.00 362.64 395.48 C 384.35 398.37 403.49 373.64 394.51 353.42 C 387.92 340.18 374.78 331.88 365.38 320.76 C 368.56 311.04 370.91 300.86 370.71 290.54 C 383.45 302.70 395.84 315.27 408.11 327.91 C 428.03 349.43 425.90 386.55 403.78 405.77 C 383.68 425.64 348.13 425.89 327.86 406.14 C 309.75 388.25 291.60 370.37 273.90 352.07 Z"
|
||||
/>
|
||||
<path
|
||||
d=" M 422.11 403.83 C 431.96 394.07 441.60 384.06 451.66 374.51 C 460.90 383.74 471.89 392.70 474.89 406.11 C 480.16 429.97 484.08 454.13 488.76 478.12 C 490.00 483.41 484.47 488.29 479.35 486.63 C 454.66 481.52 429.55 478.12 405.14 471.84 C 393.17 467.97 385.20 457.75 376.55 449.27 C 386.39 439.49 396.13 429.60 406.06 419.91 C 416.37 433.45 435.74 414.00 422.11 403.83 Z"
|
||||
/>
|
||||
<path d=" M 23.71 85.08 C 17.22 49.81 49.44 14.86 85.08 18.12 C 118.83 19.21 145.72 53.33 139.45 86.37 C 155.64 102.30 171.32 118.83 187.87 134.36 C 198.32 111.73 208.84 89.12 219.57 66.62 C 226.05 53.84 243.47 48.74 255.73 56.27 C 263.76 62.10 270.34 69.69 277.25 76.75 C 286.28 86.61 285.72 102.89 276.31 112.31 C 223.38 165.37 170.38 218.37 117.35 271.34 C 107.72 280.99 91.01 281.25 81.11 271.86 C 74.39 264.94 66.82 258.69 61.24 250.77 C 53.72 238.52 58.85 221.07 71.64 214.62 C 94.11 203.87 116.72 193.38 139.33 182.91 C 123.81 166.36 107.30 150.68 91.37 134.49 C 60.20 140.28 27.37 116.78 23.71 85.08 Z" />
|
||||
<path d=" M 205.21 201.23 C 225.32 181.36 260.88 181.11 281.14 200.86 C 299.25 218.75 317.37 236.65 335.10 254.93 C 356.73 278.01 352.01 318.70 326.03 336.56 C 320.07 330.47 313.73 324.65 308.12 318.28 C 323.86 309.39 328.76 286.18 316.63 272.39 C 301.73 256.95 286.30 242.03 271.24 226.75 C 264.49 219.65 256.80 212.00 246.37 211.52 C 224.65 208.64 205.52 233.36 214.49 253.58 C 221.09 266.81 234.22 275.12 243.62 286.24 C 240.43 295.96 238.09 306.13 238.29 316.46 C 225.55 304.29 213.16 291.73 200.89 279.09 C 180.97 257.57 183.10 220.45 205.21 201.23 Z" />
|
||||
<path d=" M 273.90 352.07 C 252.28 328.99 256.98 288.31 282.96 270.46 C 288.93 276.54 295.26 282.36 300.88 288.72 C 285.14 297.62 280.23 320.82 292.38 334.61 C 307.27 350.05 322.70 364.96 337.75 380.25 C 344.51 387.35 352.20 395.00 362.64 395.48 C 384.35 398.37 403.49 373.64 394.51 353.42 C 387.92 340.18 374.78 331.88 365.38 320.76 C 368.56 311.04 370.91 300.86 370.71 290.54 C 383.45 302.70 395.84 315.27 408.11 327.91 C 428.03 349.43 425.90 386.55 403.78 405.77 C 383.68 425.64 348.13 425.89 327.86 406.14 C 309.75 388.25 291.60 370.37 273.90 352.07 Z" />
|
||||
<path d=" M 422.11 403.83 C 431.96 394.07 441.60 384.06 451.66 374.51 C 460.90 383.74 471.89 392.70 474.89 406.11 C 480.16 429.97 484.08 454.13 488.76 478.12 C 490.00 483.41 484.47 488.29 479.35 486.63 C 454.66 481.52 429.55 478.12 405.14 471.84 C 393.17 467.97 385.20 457.75 376.55 449.27 C 386.39 439.49 396.13 429.60 406.06 419.91 C 416.37 433.45 435.74 414.00 422.11 403.83 Z" />
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user