Add possibility to create shortened share links

#3
neesjanvaneck · Dec 15, 2021 · 04f9faf · 04f9faf
1 parent 980bf42
commit 04f9faf
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 12 deletions.
diff --git a/package.json b/package.json
@@ -46,6 +46,7 @@
     "react-helmet": "^6.1.0",
     "react-html-parser": "^2.0.2",
     "react-router-dom": "^5.0.1",
+    "tinyurl": "^1.1.7",
     "use-debounce": "0.0.7"
   },
   "devDependencies": {

diff --git a/src/components/ui/Share/index.js b/src/components/ui/Share/index.js
@@ -1,15 +1,16 @@
 /* eslint-disable no-undef */
 /* eslint-disable jsx-a11y/anchor-is-valid */
 /* eslint-disable jsx-a11y/anchor-has-content */
-import React, { useContext, useRef, useState } from 'react';
+import React, { useContext, useRef, useState, useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
 import {
-  Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, TextField, Tooltip, Typography
+  Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, FormControlLabel, Switch, TextField, Tooltip, Typography
 } from '@material-ui/core';
 import CloseIcon from '@material-ui/icons/Close';
 import ShareIcon from '@material-ui/icons/Share';
 import QRCode from 'qrcode.react';
 import _cloneDeep from 'lodash/cloneDeep';
+import TinyURL from 'tinyurl';
 
 import { ConfigStoreContext, QueryStringStoreContext, UiStoreContext } from 'store/stores';
 import { parameterKeys } from 'utils/variables';
@@ -21,8 +22,16 @@ const Share = observer(() => {
   const queryStringStore = useContext(QueryStringStoreContext);
   const uiStore = useContext(UiStoreContext);
   const [isOpen, setIsOpen] = useState(false);
+  const [isShortLink, setIsShortLink] = useState(false);
+  const [shareUrl, setShareUrl] = useState('');
+  const [embedCode, setEmbedCode] = useState('');
   const qrImageEl = useRef(null);
 
+  useEffect(async () => {
+    setShareUrl(isShortLink ? await getShortenedShareURL() : getShareURL());
+    setEmbedCode(getEmbedCode(isShortLink ? await getShortenedShareURL(true) : getShareURL(true)));
+  });
+
   const showShareDialog = () => {
     setIsOpen(!isOpen);
   };
@@ -53,22 +62,21 @@ const Share = observer(() => {
     }
   };
 
-  const getShareURL = () => {
+  const getShareURL = (isEmbedded = false) => {
     const { origin, pathname } = window.location;
     const queryObject = getQueryObject();
+    if (isEmbedded) queryObject[parameterKeys.SIMPLE_UI] = true;
     const queryString = Object.keys(queryObject).reduce((acc, key, idx) => `${acc}${idx === 0 ? '?' : '&'}${key}=${queryObject[key]}`, '');
     return `${origin}${pathname}${queryString}`;
   };
 
-  const getEmbedCode = () => {
-    const { origin, pathname } = window.location;
-    const queryObject = getQueryObject();
-    queryObject[parameterKeys.SIMPLE_UI] = true;
-    const queryString = Object.keys(queryObject).reduce((acc, key, idx) => `${acc}${idx === 0 ? '?' : '&'}${key}=${queryObject[key]}`, '');
-    const embedUrl = `${origin}${pathname}${queryString}`;
-    return `<iframe allowfullscreen="true" src="${embedUrl}" width="100%" height="75%" style="border: 1px solid #ddd; max-width: 1000px; min-height: 500px"></iframe>`;
+  const getShortenedShareURL = async (isEmbedded = false) => {
+    const url = await TinyURL.shorten(getShareURL(isEmbedded));
+    return url;
   };
 
+  const getEmbedCode = (url) => `<iframe allowfullscreen="true" src="${url}" width="100%" height="75%" style="border: 1px solid #ddd; max-width: 1000px; min-height: 500px"></iframe>`;
+
   const getQueryObject = () => {
     const result = _cloneDeep(queryStringStore.parameters);
     if (result[parameterKeys.JSON]) {
@@ -141,14 +149,28 @@ const Share = observer(() => {
                     Download
                   </Button>
                 </div>
+                <div className={s.switchBox}>
+                  <FormControlLabel
+                    classes={{ label: s.switchLabel }}
+                    control={(
+                      <Switch
+                        checked={isShortLink}
+                        onChange={event => setIsShortLink(event.target.checked)}
+                        color="primary"
+                      />
+                    )}
+                    label="Short link"
+                    labelPlacement="start"
+                  />
+                </div>
                 <div className={s.inputBox}>
                   <TextField
                     id="share-link-input"
                     className={s.input}
                     label="Link"
                     multiline
                     maxRows={3}
-                    defaultValue={getShareURL()}
+                    value={shareUrl}
                     InputProps={{ readOnly: true }}
                   />
                   <Button
@@ -166,7 +188,7 @@ const Share = observer(() => {
                     label="Embed code"
                     multiline
                     maxRows={3}
-                    defaultValue={getEmbedCode()}
+                    value={embedCode}
                     InputProps={{ readOnly: true }}
                   />
                   <Button

diff --git a/src/components/ui/Share/styles.js b/src/components/ui/Share/styles.js
@@ -61,3 +61,17 @@ export const downloadButton = css`
   margin-bottom: 20px !important;
   margin-left: 20px !important;
 `;
+
+export const switchBox = css`
+  label: switch-box;
+  margin-top: 16px;
+`;
+
+export const switchLabel = css`
+  label: switch-label;
+  margin-left: -16px !important;
+  transform: scale(0.75);
+  transform-origin: left;
+  opacity: 0.65;
+  font-size: 1rem !important;
+`;