feat: "Share Link" button to quickly share the current fit (#56)

src/FitButtonBar/FitButtonBar.tsx

@@ -1,9 +1,11 @@
 import clsx from "clsx";
 import React from "react";
 
+import { EsiFit, ShipSnapshotContext } from "../ShipSnapshotProvider";
 import { LocalFitContext } from "../LocalFitProvider";
 import { ModalDialog } from "../ModalDialog";
-import { EsiFit, ShipSnapshotContext } from "../ShipSnapshotProvider";
+import { useClipboard } from "../Helpers/Clipboard";
+import { useEveShipFitLink } from "../EveShipFitLink";
 import { useFormatAsEft } from "../FormatAsEft";
 import { useFormatEftToEsi } from "../FormatEftToEsi";
 
@@ -72,6 +74,7 @@ const ClipboardButton = () => {
   const shipSnapshot = React.useContext(ShipSnapshotContext);
   const toEft = useFormatAsEft();
   const eftToEsiFit = useFormatEftToEsi();
+  const { copy, copied } = useClipboard();
 
   const [isPopupOpen, setIsPopupOpen] = React.useState(false);
   const [isPasteOpen, setIsPasteOpen] = React.useState(false);
@@ -81,10 +84,10 @@ const ClipboardButton = () => {
     const eft = toEft();
     if (eft === undefined) return;
 
-    navigator.clipboard.writeText(eft);
+    copy(eft);
 
     setIsPopupOpen(false);
-  }, [toEft]);
+  }, [copy, toEft]);
 
   const importFromClipboard = React.useCallback(() => {
     if (!shipSnapshot.loaded) return;
@@ -112,7 +115,7 @@ const ClipboardButton = () => {
   return <>
     <div className={styles.popupButton} onMouseOver={() => setIsPopupOpen(true)} onMouseOut={() => setIsPopupOpen(false)}>
       <div className={styles.button}>
-        Clipboard
+        {copied ? "In Clipboard" : "Clipboard"}
       </div>
       <div className={clsx(styles.popup, {[styles.collapsed]: !isPopupOpen})}>
         <div>
@@ -142,6 +145,24 @@ const ClipboardButton = () => {
   </>
 }
 
+const ShareButton = () => {
+  const link = useEveShipFitLink();
+  const { copy, copied } = useClipboard();
+
+  const onClick = React.useCallback((e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    e.preventDefault();
+    copy(link);
+  }, [copy, link]);
+
+  return <>
+    <div className={styles.popupButton}>
+      <div className={styles.button} onClick={onClick}>
+      {copied ? "In Clipboard" : "Share Link"}
+      </div>
+    </div>
+  </>
+}
+
 const RenameButton = () => {
   const shipSnapshot = React.useContext(ShipSnapshotContext);
 
@@ -183,6 +204,7 @@ export const FitButtonBar = () => {
   return <div className={styles.fitButtonBar}>
     <SaveButton />
     <ClipboardButton />
+    <ShareButton />
     <RenameButton />
   </div>
 };

src/Helpers/Clipboard.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+/* Based on https://github.com/mantinedev/mantine/blob/master/src/mantine-hooks/src/use-clipboard/use-clipboard.ts */
+export function useClipboard({ timeout = 2000 } = {}) {
+  const [copied, setCopied] = React.useState(false);
+  const [copyTimeout, setCopyTimeout] = React.useState<number | undefined>(undefined);
+
+  const handleCopyResult = (value: boolean) => {
+    if (copyTimeout !== undefined) {
+      window.clearTimeout(copyTimeout);
+    }
+    setCopyTimeout(window.setTimeout(() => setCopied(false), timeout));
+    setCopied(value);
+  };
+
+  const copy = (valueToCopy: string) => {
+    navigator.clipboard.writeText(valueToCopy).then(() => handleCopyResult(true));
+  };
+
+  return { copy, copied };
+}

src/ShipFit/FitLink.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 
 import { useEveShipFitLink } from "../EveShipFitLink";
+import { useClipboard } from "../Helpers/Clipboard";
 
 import styles from "./ShipFit.module.css";
 
@@ -16,26 +17,6 @@ const useIsRemoteViewer = () => {
   return remote;
 }
 
-/* Based on https://github.com/mantinedev/mantine/blob/master/src/mantine-hooks/src/use-clipboard/use-clipboard.ts */
-export function useClipboard({ timeout = 2000 } = {}) {
-  const [copied, setCopied] = React.useState(false);
-  const [copyTimeout, setCopyTimeout] = React.useState<number | undefined>(undefined);
-
-  const handleCopyResult = (value: boolean) => {
-    if (copyTimeout !== undefined) {
-      window.clearTimeout(copyTimeout);
-    }
-    setCopyTimeout(window.setTimeout(() => setCopied(false), timeout));
-    setCopied(value);
-  };
-
-  const copy = (valueToCopy: string) => {
-    navigator.clipboard.writeText(valueToCopy).then(() => handleCopyResult(true));
-  };
-
-  return { copy, copied };
-}
-
 export const FitLink = () => {
   const link = useEveShipFitLink();
   const isRemoteViewer = useIsRemoteViewer();