Create share feature in location page

client/src/pages/LocationPage/LeftColumnDetails.tsx

@@ -7,6 +7,8 @@ import ChatOutlinedIcon from '@mui/icons-material/ChatOutlined';
 import CameraAltOutlinedIcon from '@mui/icons-material/CameraAltOutlined';
 import ScreenShareOutlinedIcon from '@mui/icons-material/ScreenShareOutlined';
 import type { LocationType } from '../../types/LocationType';
+import SharePopup from './SharePopup';
+import { useState } from 'react';
 
 function LeftColumnDetais({
   locationInfo,
@@ -15,6 +17,14 @@ function LeftColumnDetais({
   locationInfo: LocationType | null;
   id: string;
 }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const handleOpen = () => {
+    setIsOpen(true);
+  };
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+
   return (
     <div id="location-page-left-column">
       <div id="location-page-left-buttons-container">
@@ -34,24 +44,31 @@ function LeftColumnDetais({
           </Link>
         </div>
         <div className="location-page-left-button">
-          <Button
-            variant="outlined"
-            color="inherit"
-            startIcon={<CameraAltOutlinedIcon />}
-            sx={{ textTransform: 'none', fontSize: '1em' }}
+          <Link
+            to={`/write-review/${id}`}
+            style={{ textDecoration: 'none', color: '#000' }}
           >
-            Add Photo
-          </Button>
+            <Button
+              variant="outlined"
+              color="inherit"
+              startIcon={<CameraAltOutlinedIcon />}
+              sx={{ textTransform: 'none', fontSize: '1em' }}
+            >
+              Add Photo
+            </Button>
+          </Link>
         </div>
         <div className="location-page-left-button">
           <Button
             variant="outlined"
             color="inherit"
+            onClick={handleOpen}
             startIcon={<ScreenShareOutlinedIcon />}
             sx={{ textTransform: 'none', fontSize: '1em' }}
           >
             Share
           </Button>
+          <SharePopup onClose={handleClose} isOpen={isOpen} />
         </div>
       </div>
 

client/src/pages/LocationPage/SharePopup.scss

@@ -0,0 +1,81 @@
+#share-popup-container {
+  padding: 0;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  text-align: center;
+  pointer-events: none;
+  outline: none;
+}
+
+#share-popup-inner-container {
+  display: inline-block;
+  height: 100%;
+  width: 100%;
+  max-width: 490px;
+  max-height: 600px;
+  border-radius: 0.5em;
+  box-sizing: border-box;
+  background: #fff;
+  overflow: hidden;
+  transform: translate(0);
+  pointer-events: all;
+  padding: 1em;
+}
+
+#share-popup-inner {
+  display: flex;
+  flex-direction: column;
+  vertical-align: middle;
+  height: 100%;
+  width: 100%;
+}
+#share-popup-title {
+  font-size: 2.5em;
+  font-weight: 1000;
+  font-family: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+#share-popup-page-inner {
+  float: left;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 400px;
+  text-align: left;
+}
+#share-popup-page-container {
+  display: table;
+  margin-top: 4em;
+  margin-bottom: 10em;
+}
+
+#share-popup-page-inner p {
+  margin-bottom: 2em;
+}
+
+%share-popup-textinput {
+  display: block;
+  margin: 0 0 1em;
+  padding: 0.4em 0.8em;
+  border: 1px solid #999;
+  border-radius: 0.3em;
+  width: 100%;
+  font-size: 1em;
+  box-sizing: border-box;
+}
+
+%share-popup-textinput:focus {
+  outline: none;
+  border-color: #2592ff;
+  box-shadow: 0 0 3px rgba(52, 160, 255, 0.5);
+}
+
+#share-popup-page-inner input {
+  @extend %share-popup-textinput;
+}
+
+#share-popup-page-inner textarea {
+  @extend %share-popup-textinput;
+  resize: vertical;
+  height: 7em;
+}

client/src/pages/LocationPage/SharePopup.tsx

@@ -0,0 +1,105 @@
+import Modal from '@mui/material/Modal';
+import CloseButton from '../../components/CloseButton';
+import { Container } from '@mui/material';
+import './SharePopup.scss';
+import { useForm } from 'react-hook-form';
+import { useEffect } from 'react';
+import MailIcon from '@mui/icons-material/Mail';
+import { Button } from '@mui/material';
+import { useState } from 'react';
+
+function SharePopup({
+  onClose,
+  isOpen,
+}: {
+  onClose: (event: {}) => void;
+  isOpen: boolean;
+}) {
+  const { register, setValue } = useForm<{
+    link: string;
+    recipient: string;
+    body: string;
+  }>();
+  useEffect(() => {
+    setValue('link', window.location.href);
+  }, [setValue]);
+
+  const [email, setEmail] = useState('');
+  const [body, setBody] = useState('');
+
+  const submitForm = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    window.location.href =
+      'mailto:' +
+      email +
+      '?subject=Shared Campus Map&body= Map Link: ' +
+      window.location.href +
+      '%0D%0A' +
+      body;
+  };
+
+  return (
+    <Modal
+      open={isOpen}
+      onClose={onClose}
+      sx={{
+        padding: '3em 1em',
+        '@media (min-width: 769px)': {
+          padding: '3em 2em',
+        },
+      }}
+    >
+      <div id="share-popup-container">
+        <div id="share-popup-inner-container">
+          <CloseButton
+            sx={{
+              position: 'absolute',
+              right: '1em',
+              top: '1em',
+            }}
+            onClick={() => {
+              onClose({});
+            }}
+          />
+
+          <div id="share-popup-title">Share Maps</div>
+          <Container maxWidth="md" id="share-popup-page-container">
+            <div id="share-popup-page-inner">
+              <form onSubmit={submitForm}>
+                <label>Link</label>
+                <input {...register('link')} type="text" placeholder="link" />
+
+                <label>Recipient</label>
+                <input
+                  {...register('recipient')}
+                  type="text"
+                  placeholder="Email Recipeint"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                />
+
+                <label>Message</label>
+                <textarea
+                  {...register('body')}
+                  value={body}
+                  onChange={(e) => setBody(e.target.value)}
+                />
+                <Button
+                  type="submit"
+                  variant="outlined"
+                  color="inherit"
+                  startIcon={<MailIcon />}
+                  sx={{ textTransform: 'none', fontSize: '1em' }}
+                >
+                  Share
+                </Button>
+              </form>
+            </div>
+          </Container>
+        </div>
+      </div>
+    </Modal>
+  );
+}
+
+export default SharePopup;