Extract shlink-web-component outside of src folder

shlink-web-component/overview/Overview.tsx

@@ -0,0 +1,112 @@
+import type { FC } from 'react';
+import { useEffect } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { Card, CardBody, CardHeader, Row } from 'reactstrap';
+import { prettify } from '../../src/utils/helpers/numbers';
+import type { ShlinkShortUrlsListParams } from '../api-contract';
+import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub';
+import { Topics } from '../mercure/helpers/Topics';
+import type { CreateShortUrlProps } from '../short-urls/CreateShortUrl';
+import type { ShortUrlsList as ShortUrlsListState } from '../short-urls/reducers/shortUrlsList';
+import { ITEMS_IN_OVERVIEW_PAGE } from '../short-urls/reducers/shortUrlsList';
+import type { ShortUrlsTableType } from '../short-urls/ShortUrlsTable';
+import type { TagsList } from '../tags/reducers/tagsList';
+import { useRoutesPrefix } from '../utils/routesPrefix';
+import { useSetting } from '../utils/settings';
+import type { VisitsOverview } from '../visits/reducers/visitsOverview';
+import { HighlightCard } from './helpers/HighlightCard';
+import { VisitsHighlightCard } from './helpers/VisitsHighlightCard';
+
+interface OverviewConnectProps {
+  shortUrlsList: ShortUrlsListState;
+  listShortUrls: (params: ShlinkShortUrlsListParams) => void;
+  listTags: Function;
+  tagsList: TagsList;
+  visitsOverview: VisitsOverview;
+  loadVisitsOverview: Function;
+}
+
+export const Overview = (
+  ShortUrlsTable: ShortUrlsTableType,
+  CreateShortUrl: FC<CreateShortUrlProps>,
+) => boundToMercureHub(({
+  shortUrlsList,
+  listShortUrls,
+  listTags,
+  tagsList,
+  loadVisitsOverview,
+  visitsOverview,
+}: OverviewConnectProps) => {
+  const { loading, shortUrls } = shortUrlsList;
+  const { loading: loadingTags } = tagsList;
+  const { loading: loadingVisits, nonOrphanVisits, orphanVisits } = visitsOverview;
+  const routesPrefix = useRoutesPrefix();
+  const navigate = useNavigate();
+  const visits = useSetting('visits');
+
+  useEffect(() => {
+    listShortUrls({ itemsPerPage: ITEMS_IN_OVERVIEW_PAGE, orderBy: { field: 'dateCreated', dir: 'DESC' } });
+    listTags();
+    loadVisitsOverview();
+  }, []);
+
+  return (
+    <>
+      <Row>
+        <div className="col-lg-6 col-xl-3 mb-3">
+          <VisitsHighlightCard
+            title="Visits"
+            link={`${routesPrefix}/non-orphan-visits`}
+            excludeBots={visits?.excludeBots ?? false}
+            loading={loadingVisits}
+            visitsSummary={nonOrphanVisits}
+          />
+        </div>
+        <div className="col-lg-6 col-xl-3 mb-3">
+          <VisitsHighlightCard
+            title="Orphan visits"
+            link={`${routesPrefix}/orphan-visits`}
+            excludeBots={visits?.excludeBots ?? false}
+            loading={loadingVisits}
+            visitsSummary={orphanVisits}
+          />
+        </div>
+        <div className="col-lg-6 col-xl-3 mb-3">
+          <HighlightCard title="Short URLs" link={`${routesPrefix}/list-short-urls/1`}>
+            {loading ? 'Loading...' : prettify(shortUrls?.pagination.totalItems ?? 0)}
+          </HighlightCard>
+        </div>
+        <div className="col-lg-6 col-xl-3 mb-3">
+          <HighlightCard title="Tags" link={`${routesPrefix}/manage-tags`}>
+            {loadingTags ? 'Loading...' : prettify(tagsList.tags.length)}
+          </HighlightCard>
+        </div>
+      </Row>
+
+      <Card className="mb-3">
+        <CardHeader>
+          <span className="d-sm-none">Create a short URL</span>
+          <h5 className="d-none d-sm-inline">Create a short URL</h5>
+          <Link className="float-end" to={`${routesPrefix}/create-short-url`}>Advanced options &raquo;</Link>
+        </CardHeader>
+        <CardBody>
+          <CreateShortUrl basicMode />
+        </CardBody>
+      </Card>
+      <Card>
+        <CardHeader>
+          <span className="d-sm-none">Recently created URLs</span>
+          <h5 className="d-none d-sm-inline">Recently created URLs</h5>
+          <Link className="float-end" to={`${routesPrefix}/list-short-urls/1`}>See all &raquo;</Link>
+        </CardHeader>
+        <CardBody>
+          <ShortUrlsTable
+            shortUrlsList={shortUrlsList}
+            className="mb-0"
+            onTagClick={(tag) => navigate(`${routesPrefix}/list-short-urls/1?tags=${encodeURIComponent(tag)}`)}
+          />
+        </CardBody>
+      </Card>
+    </>
+  );
+}, () => [Topics.visits, Topics.orphanVisits]);

shlink-web-component/overview/helpers/HighlightCard.scss

@@ -0,0 +1,21 @@
+@import '../../../src/utils/base';
+
+.highlight-card.highlight-card {
+  text-align: center;
+  border-top: 3px solid var(--brand-color);
+  color: inherit;
+  text-decoration: none;
+}
+
+.highlight-card__link-icon {
+  position: absolute;
+  right: 5px;
+  bottom: 5px;
+  opacity: 0.1;
+  transform: rotate(-45deg);
+}
+
+.highlight-card__title {
+  text-transform: uppercase;
+  color: $textPlaceholder;
+}

shlink-web-component/overview/helpers/HighlightCard.tsx

@@ -0,0 +1,30 @@
+import { faArrowAltCircleRight as linkIcon } from '@fortawesome/free-regular-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import type { FC, PropsWithChildren, ReactNode } from 'react';
+import { Link } from 'react-router-dom';
+import { Card, CardText, CardTitle, UncontrolledTooltip } from 'reactstrap';
+import { useElementRef } from '../../../src/utils/helpers/hooks';
+import './HighlightCard.scss';
+
+export type HighlightCardProps = PropsWithChildren<{
+  title: string;
+  link: string;
+  tooltip?: ReactNode;
+}>;
+
+const buildExtraProps = (link: string) => ({ tag: Link, to: link });
+
+export const HighlightCard: FC<HighlightCardProps> = ({ children, title, link, tooltip }) => {
+  const ref = useElementRef<HTMLElement>();
+
+  return (
+    <>
+      <Card innerRef={ref} className="highlight-card" body {...buildExtraProps(link)}>
+        <FontAwesomeIcon size="3x" className="highlight-card__link-icon" icon={linkIcon} />
+        <CardTitle tag="h5" className="highlight-card__title">{title}</CardTitle>
+        <CardText tag="h2">{children}</CardText>
+      </Card>
+      {tooltip && <UncontrolledTooltip target={ref} placement="bottom">{tooltip}</UncontrolledTooltip>}
+    </>
+  );
+};

shlink-web-component/overview/helpers/VisitsHighlightCard.tsx

@@ -0,0 +1,26 @@
+import type { FC } from 'react';
+import { prettify } from '../../../src/utils/helpers/numbers';
+import type { PartialVisitsSummary } from '../../visits/reducers/visitsOverview';
+import type { HighlightCardProps } from './HighlightCard';
+import { HighlightCard } from './HighlightCard';
+
+export type VisitsHighlightCardProps = Omit<HighlightCardProps, 'tooltip' | 'children'> & {
+  loading: boolean;
+  excludeBots: boolean;
+  visitsSummary: PartialVisitsSummary;
+};
+
+export const VisitsHighlightCard: FC<VisitsHighlightCardProps> = ({ loading, excludeBots, visitsSummary, ...rest }) => (
+  <HighlightCard
+    tooltip={
+      visitsSummary.bots !== undefined
+        ? <>{excludeBots ? 'Plus' : 'Including'} <b>{prettify(visitsSummary.bots)}</b> potential bot visits</>
+        : undefined
+    }
+    {...rest}
+  >
+    {loading ? 'Loading...' : prettify(
+      excludeBots && visitsSummary.nonBots ? visitsSummary.nonBots : visitsSummary.total,
+    )}
+  </HighlightCard>
+);

shlink-web-component/overview/services/provideServices.ts

@@ -0,0 +1,11 @@
+import type Bottle from 'bottlejs';
+import type { ConnectDecorator } from '../../container';
+import { Overview } from '../Overview';
+
+export function provideServices(bottle: Bottle, connect: ConnectDecorator) {
+  bottle.serviceFactory('Overview', Overview, 'ShortUrlsTable', 'CreateShortUrl');
+  bottle.decorator('Overview', connect(
+    ['shortUrlsList', 'tagsList', 'mercureInfo', 'visitsOverview'],
+    ['listShortUrls', 'listTags', 'createNewVisits', 'loadMercureInfo', 'loadVisitsOverview'],
+  ));
+}