Created view to edit short URLs

src/short-urls/helpers/ShortUrlDetailLink.tsx

@@ -0,0 +1,30 @@
+import { FC } from 'react';
+import { Link } from 'react-router-dom';
+import { isServerWithId, SelectedServer, ServerWithId } from '../../servers/data';
+import { ShortUrl } from '../data';
+
+export type LinkSuffix = 'visits' | 'edit';
+
+export interface ShortUrlDetailLinkProps {
+  shortUrl?: ShortUrl | null;
+  selectedServer?: SelectedServer;
+  suffix: LinkSuffix;
+}
+
+const buildUrl = ({ id }: ServerWithId, { shortCode, domain }: ShortUrl, suffix: LinkSuffix) => {
+  const query = domain ? `?domain=${domain}` : '';
+
+  return `/server/${id}/short-code/${shortCode}/${suffix}${query}`;
+};
+
+const ShortUrlDetailLink: FC<ShortUrlDetailLinkProps & Record<string | number, any>> = (
+  { selectedServer, shortUrl, suffix, children, ...rest },
+) => {
+  if (!selectedServer || !isServerWithId(selectedServer) || !shortUrl) {
+    return <span {...rest}>{children}</span>;
+  }
+
+  return <Link to={buildUrl(selectedServer, shortUrl, suffix)} {...rest}>{children}</Link>;
+};
+
+export default ShortUrlDetailLink;

src/short-urls/helpers/ShortUrlVisitsCount.tsx

@@ -4,10 +4,14 @@ import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
 import { UncontrolledTooltip } from 'reactstrap';
 import classNames from 'classnames';
 import { prettify } from '../../utils/helpers/numbers';
-import VisitStatsLink, { VisitStatsLinkProps } from './VisitStatsLink';
+import { ShortUrl } from '../data';
+import { SelectedServer } from '../../servers/data';
+import ShortUrlDetailLink from './ShortUrlDetailLink';
 import './ShortUrlVisitsCount.scss';
 
-interface ShortUrlVisitsCountProps extends VisitStatsLinkProps {
+interface ShortUrlVisitsCountProps {
+  shortUrl?: ShortUrl | null;
+  selectedServer?: SelectedServer;
   visitsCount: number;
   active?: boolean;
 }
@@ -15,13 +19,13 @@ interface ShortUrlVisitsCountProps extends VisitStatsLinkProps {
 const ShortUrlVisitsCount = ({ visitsCount, shortUrl, selectedServer, active = false }: ShortUrlVisitsCountProps) => {
   const maxVisits = shortUrl?.meta?.maxVisits;
   const visitsLink = (
-    <VisitStatsLink selectedServer={selectedServer} shortUrl={shortUrl}>
+    <ShortUrlDetailLink selectedServer={selectedServer} shortUrl={shortUrl} suffix="visits">
       <strong
         className={classNames('short-url-visits-count__amount', { 'short-url-visits-count__amount--big': active })}
       >
         {prettify(visitsCount)}
       </strong>
-    </VisitStatsLink>
+    </ShortUrlDetailLink>
   );
 
   if (!maxVisits) {

src/short-urls/helpers/ShortUrlsRowMenu.tsx

@@ -14,7 +14,7 @@ import { useToggle } from '../../utils/helpers/hooks';
 import { ShortUrl, ShortUrlModalProps } from '../data';
 import { Versions } from '../../utils/helpers/version';
 import { SelectedServer } from '../../servers/data';
-import VisitStatsLink from './VisitStatsLink';
+import ShortUrlDetailLink from './ShortUrlDetailLink';
 import './ShortUrlsRowMenu.scss';
 
 export interface ShortUrlsRowMenuProps {
@@ -44,10 +44,14 @@ const ShortUrlsRowMenu = (
         &nbsp;<FontAwesomeIcon icon={menuIcon} />&nbsp;
       </DropdownToggle>
       <DropdownMenu right>
-        <DropdownItem tag={VisitStatsLink} selectedServer={selectedServer} shortUrl={shortUrl}>
+        <DropdownItem tag={ShortUrlDetailLink} selectedServer={selectedServer} shortUrl={shortUrl} suffix="visits">
           <FontAwesomeIcon icon={pieChartIcon} fixedWidth /> Visit stats
         </DropdownItem>
 
+        <DropdownItem tag={ShortUrlDetailLink} selectedServer={selectedServer} shortUrl={shortUrl} suffix="edit">
+          <FontAwesomeIcon icon={editIcon} fixedWidth /> Edit short URL
+        </DropdownItem>
+
         <DropdownItem onClick={toggleTags}>
           <FontAwesomeIcon icon={tagsIcon} fixedWidth /> Edit tags
         </DropdownItem>

src/short-urls/helpers/VisitStatsLink.tsx

@@ -1,27 +0,0 @@
-import { FC } from 'react';
-import { Link } from 'react-router-dom';
-import { isServerWithId, SelectedServer, ServerWithId } from '../../servers/data';
-import { ShortUrl } from '../data';
-
-export interface VisitStatsLinkProps {
-  shortUrl?: ShortUrl | null;
-  selectedServer?: SelectedServer;
-}
-
-const buildVisitsUrl = ({ id }: ServerWithId, { shortCode, domain }: ShortUrl) => {
-  const query = domain ? `?domain=${domain}` : '';
-
-  return `/server/${id}/short-code/${shortCode}/visits${query}`;
-};
-
-const VisitStatsLink: FC<VisitStatsLinkProps & Record<string | number, any>> = (
-  { selectedServer, shortUrl, children, ...rest },
-) => {
-  if (!selectedServer || !isServerWithId(selectedServer) || !shortUrl) {
-    return <span {...rest}>{children}</span>;
-  }
-
-  return <Link to={buildVisitsUrl(selectedServer, shortUrl)} {...rest}>{children}</Link>;
-};
-
-export default VisitStatsLink;