From ea019a082b279b614c85814d3139a5418e79e6b8 Mon Sep 17 00:00:00 2001
From: aymanhab <ahabib@stanford.edu>
Date: Mon, 13 Nov 2023 22:15:42 -0800
Subject: [PATCH] Add option to share with a link

---
 src/components/Components/ShareModal.tsx | 46 ++++++++++++++++++++++++
 src/components/Components/ShareView.tsx  |  3 ++
 2 files changed, 49 insertions(+)
 create mode 100644 src/components/Components/ShareModal.tsx

diff --git a/src/components/Components/ShareModal.tsx b/src/components/Components/ShareModal.tsx
new file mode 100644
index 0000000..33bbe03
--- /dev/null
+++ b/src/components/Components/ShareModal.tsx
@@ -0,0 +1,46 @@
+import { Button, FormControl, IconButton, Modal, TextField } from '@mui/material';
+import React from 'react';
+import CloseTwoToneIcon from '@mui/icons-material/CloseTwoTone';
+
+const ShareModal: React.FC<{ message: string }> = ({message}) => {
+  const [open, setOpen] = React.useState(false);
+
+  const handleOpen = () => {
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  return (
+    <div>
+      <Button type="button" onClick={handleOpen}>
+        Share with a link
+      </Button>
+      <Modal
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="Sharing Link"
+      >
+        <div style={{ marginTop: '20em', marginLeft: '5em' }}>
+        <FormControl variant="standard">
+        <TextField
+          id="url"
+          label="URL"
+          defaultValue={message}
+          InputProps={{
+            readOnly: true,
+          }}
+        />
+      </FormControl>
+        <IconButton edge="end" color="inherit" onClick={handleClose} aria-label="close">
+            <CloseTwoToneIcon />
+          </IconButton>
+        </div>
+      </Modal>
+    </div>
+  );
+}
+
+export default ShareModal;
diff --git a/src/components/Components/ShareView.tsx b/src/components/Components/ShareView.tsx
index da95143..f3f70e9 100644
--- a/src/components/Components/ShareView.tsx
+++ b/src/components/Components/ShareView.tsx
@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next'
 import Button from '@mui/material/Button';
 import Tooltip from '@mui/material/Tooltip';
 import Grid from '@mui/material/Grid';
+import ShareModal from './ShareModal';
 
 function FileView() {
   const { t } = useTranslation();
@@ -93,6 +94,8 @@ function FileView() {
           </Grid>
       </Button>
     </Tooltip>
+
+    <ShareModal message={window.location.href}/>
   </>
   );
 }