optimize share dialog

frontend/compiled-lang/de.json

@@ -30,6 +30,7 @@
   "live.text.success": "Wörter hinzugefügt. Je nach Filter werden Wörter ausgeblendet.",
   "live.text.toggler.tokenizerActive": "Wortarten erkennen",
   "sharemodal.title": "Teilen",
+  "sharemodal.toggler.showAdminLink": "Änderungen erlauben",
   "start.buttons.feedback": "Feedback",
   "start.buttons.live": "Text",
   "start.disclaimer.background": "Bild von Miguel Pedroso",

frontend/compiled-lang/en.json

@@ -25,6 +25,7 @@
   "live.text.success": "Words added. Depending on the chosen filter they might not be visible yet.",
   "live.text.toggler.tokenizerActive": "Tag grammar cateogries of input",
   "sharemodal.title": "Share",
+  "sharemodal.toggler.showAdminLink": "Use admin link",
   "start.buttons.feedback": "Feedback",
   "start.buttons.live": "Text",
   "start.feature.one": "Create a WordChart",

frontend/compiled-lang/lang.json

@@ -21,6 +21,7 @@
   "live.text.success": "Words added. Depending on the chosen filter they might not be visible yet.",
   "live.text.toggler.tokenizerActive": "Tag grammar cateogries of input",
   "sharemodal.title": "Share",
+  "sharemodal.toggler.showAdminLink": "Use admin link",
   "start.buttons.feedback": "Feedback",
   "start.buttons.live": "Text",
   "start.feature.one": "Create a WordChart",

frontend/lang/de.json

@@ -92,6 +92,9 @@
   "sharemodal.title": {
     "defaultMessage": "Teilen"
   },
+  "sharemodal.toggler.showAdminLink": {
+    "defaultMessage": "Änderungen erlauben"
+  },
   "start.buttons.feedback": {
     "defaultMessage": "Feedback"
   },

frontend/lang/en.json

@@ -77,6 +77,9 @@
   "sharemodal.title": {
     "defaultMessage": "Share"
   },
+  "sharemodal.toggler.showAdminLink": {
+    "defaultMessage": "Use admin link"
+  },
   "start.buttons.feedback": {
     "defaultMessage": "Feedback"
   },

frontend/lang/lang.json

@@ -65,6 +65,9 @@
   "sharemodal.title": {
     "defaultMessage": "Share"
   },
+  "sharemodal.toggler.showAdminLink": {
+    "defaultMessage": "Use admin link"
+  },
   "start.buttons.feedback": {
     "defaultMessage": "Feedback"
   },

frontend/src/shared/components/AdminOptionToolbar.tsx

@@ -225,6 +225,7 @@ export function AdminOptionToolbar({ id, adminId, language, filterFromServer, se
         (openShareModal) &&
         <ShareModal
           handleClose={() => setShareModalOpen(false)}
+          adminId={adminId}
         />
       }
     </div >

frontend/src/shared/components/CopyButton.tsx

@@ -10,14 +10,14 @@ export const CopyButton = ({ contentToCopy }: CopyProps): React.ReactElement =>
   const [copied, setCopied] = useState(false)
 
   const copyUrl = async (): Promise<void> => {
-    if ('share' in (window.navigator)) {
+    if ('clipboard' in (window.navigator)) {
+      await navigator.clipboard.writeText(contentToCopy)
+      setCopied(true)
+    } else if ('share' in (window.navigator)) {
       await (window.navigator as any)?.share({
         title: 'WordCharts',
         url: contentToCopy
       })
-    } else if ('clipboard' in (window.navigator)) {
-      await navigator.clipboard.writeText(contentToCopy)
-      setCopied(true)
     }
   }
 

frontend/src/shared/components/ShareModal.test.tsx

@@ -7,7 +7,7 @@ describe('ShareModal', () => {
   test('renders the share modal', () => {
     render(
       <IntlProvider locale={'en'} defaultLocale="en">
-        <ShareModal handleClose={vi.fn()} />
+        <ShareModal handleClose={vi.fn()} adminId={'123'} />
       </IntlProvider>
     )
 

frontend/src/shared/components/ShareModal.tsx

@@ -4,12 +4,14 @@ import { Form } from 'react-bootstrap'
 import Button from 'react-bootstrap/Button'
 import Modal from 'react-bootstrap/Modal'
 import InputGroup from 'react-bootstrap/InputGroup'
-import { FormattedMessage } from 'react-intl'
+import { FormattedMessage, useIntl } from 'react-intl'
 import { cleanUrlFromAdminId } from '../utils'
 import { CopyButton } from './CopyButton'
+import { Share2 } from 'react-feather'
 
 interface ShareModalProps {
   handleClose: () => void
+  adminId: string | undefined
 }
 
 const qrCode = new QRCodeStyling({
@@ -36,9 +38,12 @@ const qrCode = new QRCodeStyling({
   }
 })
 
-export function ShareModal({ handleClose }: ShareModalProps): React.ReactElement {
+export function ShareModal({ handleClose, adminId }: ShareModalProps): React.ReactElement {
+  const intl = useIntl()
   const [url] = useState(cleanUrlFromAdminId(window.location.href))
+  const [sharableUrl, setSharableUrl] = useState('')
   const ref = useRef(null)
+  const [showAdminLink, setShowAdminLink] = useState(false)
 
   useEffect(() => {
     if (ref.current === null) return
@@ -48,16 +53,34 @@ export function ShareModal({ handleClose }: ShareModalProps): React.ReactElement
 
   useEffect(() => {
     qrCode.update({
-      data: url
+      data: sharableUrl
     })
-  }, [url])
+  }, [sharableUrl])
+
+  useEffect(() => {
+    const newUrl = showAdminLink && adminId !== undefined ? `${url}#adminId=${adminId}` : url
+    setSharableUrl(newUrl)
+  }, [showAdminLink, url, adminId])
+
+  const share = async (): Promise<void> => {
+    if ('share' in (window.navigator)) {
+      await (window.navigator as any)?.share({
+        title: 'WordCharts',
+        url: sharableUrl
+      })
+    }
+  }
 
   const onDownload = async (): Promise<void> => {
     await qrCode.download({
       extension: 'png'
     })
   }
 
+  const toggleShowAdminLink = (): void => {
+    setShowAdminLink(!showAdminLink)
+  }
+
   return (
     <>
       <Modal show={true} onHide={handleClose} dialogClassName="modal-340px">
@@ -70,9 +93,24 @@ export function ShareModal({ handleClose }: ShareModalProps): React.ReactElement
           </Modal.Title>
         </Modal.Header>
         <Modal.Body>
+          {adminId !== undefined &&
+            <Form.Switch
+              onChange={(_e: React.ChangeEvent<HTMLInputElement>) => { toggleShowAdminLink() }}
+              className="mb-2"
+              checked={showAdminLink}
+              label={
+                intl.formatMessage(
+                  {
+                    id: 'sharemodal.toggler.showAdminLink',
+                    defaultMessage: 'Use admin link'
+                  }
+                )
+              }
+            />
+          }
           <InputGroup className="mb-3">
-            <Form.Control disabled placeholder={url} />
-            <CopyButton contentToCopy={url} />
+            <Form.Control disabled placeholder={sharableUrl} />
+            <CopyButton contentToCopy={sharableUrl} />
           </InputGroup>
           <div ref={ref} />
           <Button
@@ -85,6 +123,11 @@ export function ShareModal({ handleClose }: ShareModalProps): React.ReactElement
           </Button>
         </Modal.Body>
         <Modal.Footer>
+          { ('share' in (window.navigator)) &&
+            <Button variant="primary" onClick={share}>
+              <Share2 />
+            </Button>
+          }
           <Button variant="primary" onClick={handleClose}>
             <FormattedMessage
               id="close"