Merge pull request #73 from kunalkeshan/client-feat/feedback-modal

Feedback Modal Added

Author: kunalkeshan

src/App.jsx

@@ -16,6 +16,7 @@ import Navbar from './components/layouts/Navbar';
 import Footer from './components/layouts/Footer';
 import CallToAction from './components/layouts/CallToAction';
 import ScrollToTop from './components/layouts/ScrollToTop';
+import FeedbackModal from './components/reuseable/FeedbackModal';
 
 // Hooks
 import useGA from './hooks/useGA';
@@ -26,6 +27,7 @@ import WritingAnimation from './assets/lottie/writing.json';
 
 function App() {
   const [show, setShow] = useState(false);
+  const [openModal, setOpenModal] = useState(false);
 
   useGA();
   usePageTracking();
@@ -74,6 +76,7 @@ function App() {
       </Container>
       <CallToAction />
       <ScrollToTop show={show} setShow={setShow} />
+      <FeedbackModal open={openModal} setOpen={setOpenModal} />
       <Footer />
     </Main>
   );

src/components/layouts/CallToAction.jsx

@@ -12,6 +12,7 @@ import { SpeedDial, SpeedDialAction, styled } from '@mui/material'
 import ShareIcon from '@mui/icons-material/Share';
 import WhatsAppIcon from '@mui/icons-material/WhatsApp';
 import TwitterIcon from '@mui/icons-material/Twitter';
+import FeedbackIcon from '@mui/icons-material/Feedback';
 
 // Hooks
 import useGA from '../../hooks/useGA';
@@ -30,7 +31,12 @@ const CallToAction = () => {
             name: 'Share with Twitter',
             url: `http://twitter.com/share?text=Check out this website to get the best ECE Notes available out there! @_kunalkeshan_&url=${window.location.protocol}//${window.location.host}?utm_source=twitter.com&utm_medium=social&hashtags=srmist,ece,btech,kunalkeshan`,
             icon: <TwitterIcon sx={{ '&:hover': { color: '#1DA1F2 !important' } }} />
-        }
+        },
+        {
+            name: 'Have some Feedback?',
+            url: config.GOOGLE_FORM_FEEDBACK_URL,
+            icon: <FeedbackIcon sx={{ '&:hover': { color: `${config.APP_COLORS.main} !important` } }} />
+        },
     ];
 
     const handleClick = (url) => () => {

src/components/layouts/Footer.jsx

@@ -49,6 +49,10 @@ const Footer = () => {
             name: 'Drive',
             link: 'https://drive.google.com/drive/u/7/folders/17bng9aIkZ3FaULebbgEGpdCsB225dr_K',
         },
+        {
+            name: 'Give Feedback',
+            link: config.GOOGLE_FORM_FEEDBACK_URL,
+        }
     ];
 
     const handleNavigate = ({ link = null, nav = null }) => {

src/components/reuseable/FeedbackModal.jsx

@@ -0,0 +1,122 @@
+/**
+ * Feedback Modal
+ */
+
+// Dependencies
+import React, { useEffect, useState } from 'react';
+import config from '../../config';
+
+import {
+    Dialog,
+    DialogTitle,
+    styled,
+    Container,
+    Typography,
+    Link,
+    DialogActions,
+    Button,
+} from '@mui/material';
+
+
+
+const FeedbackModal = ({ open, setOpen }) => {
+    const TWO_WEEKS_MS = 1.21e9;
+    const THIRTY_MS = 1000 * 30;
+    const [, setFormStatus] = useState({
+        lastShown: null,
+    });
+
+    const onClose = () => {
+        setOpen(false);
+    };
+
+    useEffect(() => {
+        const handleShowForm = () => {
+            setTimeout(() => {
+                setOpen(true);
+                setFormStatus((prev) => {
+                    const newStatus = {
+                        ...prev,
+                        lastShown: Date.now(),
+                    };
+                    localStorage.setItem(
+                        'formStatus',
+                        JSON.stringify(newStatus)
+                    );
+                    return newStatus;
+                });
+            }, THIRTY_MS);
+        };
+
+        const handleFormStatus = () => {
+            let localFormStatus = localStorage.getItem('formStatus');
+            if (localFormStatus) {
+                localFormStatus = JSON.parse(localFormStatus);
+                setFormStatus(localFormStatus);
+                if (localFormStatus.lastShown !== null) {
+                    const now = Date.now();
+                    if (now - localFormStatus.lastShown > TWO_WEEKS_MS)
+                        handleShowForm();
+                } else handleShowForm();
+            } else handleShowForm();
+        };
+        handleFormStatus();
+    }, [THIRTY_MS, setOpen]);
+
+    return (
+        <Dialog
+            open={open}
+            onClose={onClose}
+            sx={{
+                overflowX: 'hidden',
+                '.MuiPaper-root': {
+                    width: 'fit-content',
+                    maxWidth: 'none',
+                },
+            }}
+        >
+            <Container>
+                <DialogTitle>Feedback Form</DialogTitle>
+                <Typography mx={3} mb={2}>
+                    Unable to view the form, use{' '}
+                    <Link
+                        href={config.GOOGLE_FORM_FEEDBACK_URL}
+                        target='_blank'
+                    >
+                        {' '}
+                        this link instead
+                    </Link>
+                    .
+                </Typography>
+                <FormIframe
+                    src={`${config.GOOGLE_FORM_FEEDBACK_URL}&embedded=true`}
+                    frameBorder='0'
+                    title='Shiryoku Feedback Form'
+                >
+                    Loading…
+                </FormIframe>
+                <DialogActions>
+                    <CloseButton variant='text' color='error' onClick={onClose}>
+                        Close
+                    </CloseButton>
+                </DialogActions>
+            </Container>
+        </Dialog>
+    );
+};
+
+const FormIframe = styled('iframe')({
+    width: '640px',
+    height: '520px',
+    overflowX: 'hidden',
+    '@media(max-width: 700px)': {
+        width: '520px',
+    },
+    '@media(max-width: 440px)': {
+        width: '280px',
+    },
+});
+
+const CloseButton = styled(Button)({});
+
+export default FeedbackModal;

src/config/index.js

@@ -49,6 +49,7 @@ const config = {
         github: 'https://github.com/kunalkeshan',
         youtube: 'https://www.youtube.com/channel/UCwVRztzBdqgB_Y9hkMX3lZA',
     },
+    GOOGLE_FORM_FEEDBACK_URL: 'https://docs.google.com/forms/d/e/1FAIpQLSfNQDOQkEKPubOBRIhselYTjCv82qv7qTyPh6exFvkT3sumhw/viewform?usp=pp_url&entry.34189569=Notes+Initiative',
 };
 
 export default config;