Adding a share button (#100)

* Adding a share button * Auto hide and change severity to info --------- Co-authored-by: Nicolas Vuillamy <[email protected]>
oxsecurity · Aug 17, 2023 · 79e4375 · 79e4375
1 parent c40adb1
commit 79e4375
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -26,6 +26,7 @@ _Can be run using `npm run codetotal:beta`_
   - Add link to packages' registry in SBOM panel
   - Fix Safari not showing Score component correctly #81
   - Display "snippet" in results page instead of md5: xxxx
+  - Add a share button in the footer
 
 - Back-End
   - Bug fix: SBOM packages not showing up in report page. Async parsing of packages information in SBOM module

diff --git a/packages/app/src/app/components/Footer.tsx b/packages/app/src/app/components/Footer.tsx
@@ -3,10 +3,12 @@ import { FC } from "react";
 import { makeStyles } from "tss-react/mui";
 import { ReactComponent as BackgroundSvg } from "../../assets/bg.svg";
 import oxLogo from "../../assets/ox.svg";
+import { ShareButton } from "./ShareButton";
 import { ToggleThemeButton } from "./ToggleThemeButton";
 
 export const Footer: FC = () => {
   const { classes } = useStyles();
+
 
   return (
     <div className={classes.footer}>
@@ -45,7 +47,10 @@ export const Footer: FC = () => {
               MegaLinter
             </a>
           </Typography>
-          <ToggleThemeButton />
+          <div className={classes.actions}>
+            <ShareButton />
+            <ToggleThemeButton />
+          </div>
         </div>
       </Container>
       <BackgroundSvg />
@@ -97,4 +102,8 @@ const useStyles = makeStyles()((theme: Theme) => ({
     width: "1.3em",
     height: "1.3em",
   },
+  actions: {
+    display: "flex",
+    gap: theme.spacing(2),
+  },
 }));
diff --git a/packages/app/src/app/components/ShareButton.tsx b/packages/app/src/app/components/ShareButton.tsx
@@ -0,0 +1,92 @@
+import { Alert, AlertTitle, Button, Slide, Snackbar } from "@mui/material";
+import { FC, useState } from "react";
+import { makeStyles } from "tss-react/mui";
+
+const CODE_TOTAL_URL = "https://codetotal.io";
+
+export const ShareButton: FC = () => {
+  const { classes } = useStyles();
+  const [error, setError] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [success, setSuccess] = useState(false);
+
+  const handleShare = async () => {
+    try {
+      setLoading(true);
+      await navigator.clipboard.writeText(CODE_TOTAL_URL);
+      setSuccess(true);
+    } catch (err) {
+      setError(true);
+      setSuccess(false);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleClose = () => {
+    setError(false);
+    setSuccess(false);
+  };
+
+  return (
+    <>
+      <Button
+        size="small"
+        startIcon={<i style={{ fontSize: "1em" }}>&#x1F496;</i>}
+        onClick={handleShare}
+        disabled={loading}
+      >
+        Share
+      </Button>
+
+      <Snackbar
+        open={error}
+        onClose={handleClose}
+        autoHideDuration={10000}
+        anchorOrigin={{ vertical: "top", horizontal: "center" }}
+        TransitionComponent={Slide}
+      >
+        <Alert onClose={handleClose} severity="error">
+          <AlertTitle>Unable to copy URL to clipboard</AlertTitle>
+          Please copy or click the following URL manually to share:&nbsp;
+          <a
+            href={CODE_TOTAL_URL}
+            target="_blank"
+            rel="noreferrer"
+            className={classes.link}
+          >
+            {CODE_TOTAL_URL}
+          </a>
+        </Alert>
+      </Snackbar>
+
+      <Snackbar
+        open={success}
+        onClose={handleClose}
+        autoHideDuration={10000}
+        anchorOrigin={{ vertical: "top", horizontal: "center" }}
+        TransitionComponent={Slide}
+      >
+        <Alert severity="info" onClose={handleClose}>
+          <AlertTitle>URL copied successfully</AlertTitle>
+          <div className={classes.thankYou}>
+            Thank you for sharing CodeTotal with the community&nbsp;
+            <span style={{ fontSize: "2em" }}>&#x1F497;</span>
+          </div>
+        </Alert>
+      </Snackbar>
+    </>
+  );
+};
+
+const useStyles = makeStyles()((theme) => ({
+  link: {
+    color: "inherit",
+    fontWeight: "bold",
+  },
+  thankYou: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(1),
+  },
+}));