Feature/sithu soe04/be/cors-permission

backend/index.js

@@ -5,7 +5,7 @@ import dotenv from 'dotenv';
 import connectDB from './database/connect-db.js';
 // import testDatabaseConnection from './database/db-test.js';
 import connectMailchimp from './mailchimp/connect-mailchimp.js';
-import { addContacts, getContacts } from './mailchimp/contacts.js';
+// import { addContacts, getContacts } from './mailchimp/contacts.js';
 
 // import routes
 import eventRoutes from './routes/event.js';
@@ -20,7 +20,20 @@ dotenv.config();
 
 app.use(bodyParser.json({ limit: '30mb', extended: true }));
 app.use(bodyParser.urlencoded({ limit: '30mb', extended: true }));
-app.use(cors());
+const allowedOrigins = ['http://localhost:3000', 'https://csesucsd.com'];
+app.use(cors({
+  origin: (origin, callback) => {
+    if (allowedOrigins.includes(origin) || !origin) {
+      callback(null, true);
+    } else {
+      callback(new Error('Not allowed by CORS'));
+    }
+  },
+  methods: 'GET,POST,PUT,DELETE,OPTIONS',
+  credentials: true
+}));
+
+// app.use(cors());
 
 const PORT = process.env.PORT || 5000;
 const baseApi = '/api/v1';

frontend/package.json

@@ -23,6 +23,7 @@
     "axios": "^1.4.0",
     "bootstrap": "^5.3.0",
     "dayjs": "^1.11.9",
+    "framer-motion": "^6.5.1",
     "install": "^0.13.0",
     "npm": "^9.8.1",
     "react": "^18.2.0",

frontend/src/components/About/About.tsx

@@ -1,6 +1,4 @@
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
-import Button from '../Button/Button';
+import React, { useEffect, useRef, useState } from 'react';
 import { Container, Box, Grid, createTheme, useMediaQuery } from '@mui/material';
 import bgTop from '../../images/shape2.svg';
 import bgBtm from '../../images/shape2.svg';
@@ -9,16 +7,46 @@ import books from '../../images/aboutbooks.png';
 import lightBulb from '../../images/aboutlightbulb.png';
 import MeetTheTeam from './MeetTheTeam';
 import Communities from './OurCommunities';
+import HowtoJoin from './HowToJoin';
 import about1 from '../../images/aboutpage/about_1.jpg';
-import about3 from '../../images/aboutpage/about_3.jpg';
 import { ImageWithBoxShadow } from '../Opportunities/Opportunities';
+import Typewriter from './TypeWriter';
+import { motion } from "framer-motion"
 
 const About = () => {
-  const navigate = useNavigate();
   const styles = aboutStyles();
   const theme = createTheme();
   const isSmallScreen = useMediaQuery(theme.breakpoints.between('xs', 'sm'));
 
+  const [isInView, setIsInView] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const currentRef = ref.current; // Copy ref to a local variable
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsInView(true);
+          observer.disconnect(); // Disconnect after first trigger
+        }
+      },
+      {
+        threshold: 0.1, // Adjust this value as needed
+      }
+    );
+
+    if (currentRef) {
+      observer.observe(currentRef);
+    }
+
+    return () => {
+      if (currentRef) {
+        observer.unobserve(currentRef); // Use the local variable for cleanup
+      }
+    };
+  }, [ref]);
+
   return (
     <Box sx={{ position: 'relative', overflow: 'hidden' }}>
       <Box sx={styles.root}>
@@ -47,13 +75,13 @@ const About = () => {
                       fontWeight: '700',
                     }}
                   >
-                    WHAT IS CSE Society?
+                    <Typewriter text="WHHAT IS CSES?" speed={200} />
                   </h1>
 
                   <p style={{ color: 'white', fontSize: 'clamp(15px, 3vw, 20px)' }}>
                     CSE Society was the first CSE organization at UCSD starting over twenty years
                     ago, and we have innovated over the years to stay relevant in serving the CSE
-                    community. We are open to all majors and indivduals who are interested in
+                    community. We are open to all majors and individuals who are interested in
                     computing!
                   </p>
                 </Box>
@@ -79,20 +107,36 @@ const About = () => {
               lg={3}
               sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}
             >
+              <motion.div
+      ref={ref}
+      initial={{ x: -100, opacity: 0 }}
+      animate={isInView ? { x: 0, opacity: 1 } : {}}
+      transition={{ type: 'spring', stiffness: 50, damping: 20, mass: 1, delay: 0.2 }}
+    >
               <img src={books} alt="img" style={{ width: '80%' }} />
+              </motion.div>
             </Grid>
             <Grid item sm={5} lg={5}>
+            <motion.div
+      ref={ref}
+      initial={{ x: 100, opacity: 0 }}
+      animate={isInView ? { x: 0, opacity: 1 } : {}}
+      transition={{ type: 'spring', stiffness: 50, damping: 20, mass: 1, delay: 0.2 }}
+    >
               <Box
                 sx={{
                   color: 'white',
                   textAlign: { lg: 'left', sm: 'left', xs: 'center' },
                 }}
               >
                 <h1>Our History</h1>
+
                 <p style={{ color: 'white', fontSize: 'clamp(15px, 3vw, 20px)' }}>
                   CSES was the first CSE organization at UCSD starting over twenty years ago, and we have innovated over the years to stay relevant in serving the CSE community. We are open to all majors and indivduals who are interested in computing!
                 </p>
+
               </Box>
+            </motion.div>
             </Grid>
           </Grid>
           <Grid
@@ -104,6 +148,12 @@ const About = () => {
             direction={isSmallScreen ? 'column-reverse' : 'row'}
           >
             <Grid item sm={5}>
+            <motion.div
+      ref={ref}
+      initial={{ x: -100, opacity: 0 }}
+      animate={isInView ? { x: 0, opacity: 1 } : {}}
+      transition={{ type: 'spring', stiffness: 50, damping: 20, mass: 1, delay: 0.6 }}
+    >
               <Box sx={{ color: 'white', textAlign: { lg: 'left', sm: 'left', xs: 'center' } }}>
                 <h1>Our Future</h1>
               </Box>
@@ -116,55 +166,21 @@ const About = () => {
               >
                 Our mission statement is to help our members get professional opportunities while fostering a network of individuals. We do this through quarterly career fairs, mentorship programs for career development, and project opportunities to gain experience.
               </p>
+            </motion.div>
             </Grid>
+
             <Grid item sm={4} md={3} lg={3} maxHeight={'100%'}>
+            <motion.div
+      ref={ref}
+      initial={{ x: 100, opacity: 0 }}
+      animate={isInView ? { x: 0, opacity: 1 } : {}}
+      transition={{ type: 'spring', stiffness: 50, damping: 20, mass: 1, delay: 0.6 }}
+    >
               <img src={lightBulb} alt="img" />
+              </motion.div>
             </Grid>
           </Grid>
-
-          <Container maxWidth="xl" sx={styles.body}>
-            <Box sx={{ maxWidth: '90%', margin: '0 auto' }}>
-              <Grid
-                container
-                justifyContent="center"
-                mt={12}
-                mb={12}
-                direction={isSmallScreen ? 'column-reverse' : 'row'}
-              >
-                <Grid item sm={7} pl={{ lg: '8%' }}>
-                  <Box sx={{ color: 'white', textAlign: { md: 'left', sm: 'left', xs: 'center' } }}>
-                    <h1>How do I join?</h1>
-                  </Box>
-                  <Box sx={{ color: 'white', textAlign: { lg: 'left', sm: 'left', xs: 'center' } }}>
-                    <p style={{ color: 'white', fontSize: 'clamp(15px, 3vw, 20px)' }}>
-                      To become a general member, simply sign up with your UCSD email!
-                    </p>
-                    <p style={{ color: 'white', fontSize: 'clamp(15px, 3vw, 20px)' }}>
-                      Do you want to be a part of the internal team? Become a member and follow us
-                      on our socials to be notified of when board applications open on a rolling
-                      basis.
-                    </p>
-                    <Box
-                      sx={{
-                        marginLeft: '-2%',
-                        display: 'flex',
-                        justifyContent: { xs: 'center', sm: 'left' },
-                      }}
-                    >
-                      <Button
-                        size="large"
-                        text="Become a Member ->"
-                        onClick={() => navigate('/membership')}
-                      />
-                    </Box>
-                  </Box>
-                </Grid>
-                <Grid item sm={5} pl={{ lg: '2%' }} pr={{ lg: '8%' }}>
-                  <ImageWithBoxShadow src={about3} alt="img" />
-                </Grid>
-              </Grid>
-            </Box>
-          </Container>
+          <HowtoJoin />
           <Communities />
           <MeetTheTeam />
         </Container>

frontend/src/components/About/HowToJoin.tsx

@@ -0,0 +1,98 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import Button from '../Button/Button';
+import { Container, Box, Grid, createTheme, useMediaQuery } from '@mui/material';
+import { aboutStyles } from './styles';
+import about3 from '../../images/aboutpage/about_3.jpg';
+import { ImageWithBoxShadow } from '../Opportunities/Opportunities';
+import { motion } from "framer-motion"
+
+const HowtoJoin = () => {
+    const navigate = useNavigate();
+    const styles = aboutStyles();
+    const theme = createTheme();
+    const isSmallScreen = useMediaQuery(theme.breakpoints.between('xs', 'sm'));
+    const [isInView1, setIsInView1] = useState(false);
+    const ref1 = useRef(null);
+
+    useEffect(() => {
+      const currentRef = ref1.current; // Copy ref1 to a local variable
+
+      const observer = new IntersectionObserver(
+        ([entry]) => {
+          if (entry.isIntersecting) {
+            setIsInView1(true);
+            observer.disconnect(); // Disconnect after first trigger
+          }
+        },
+        {
+          threshold: 0.1, // Adjust this value as needed
+        }
+      );
+
+      if (currentRef) {
+        observer.observe(currentRef);
+      }
+
+      return () => {
+        if (currentRef) {
+          observer.unobserve(currentRef); // Use the local variable for cleanup
+        }
+      };
+    }, [ref1]);
+
+    return (
+        <motion.div
+      ref={ref1}
+      initial={{ x: 100, opacity: 0 }}
+      animate={isInView1 ? { x: 0, opacity: 1 } : {}}
+      transition={{ type: 'spring', stiffness: 50, damping: 20, mass: 1, delay: 0.6 }}
+    >
+        <Container maxWidth="xl" sx={styles.body}>
+            <Box sx={{ maxWidth: '90%', margin: '0 auto' }}>
+              <Grid
+                container
+                justifyContent="center"
+                mt={12}
+                mb={12}
+                direction={isSmallScreen ? 'column-reverse' : 'row'}
+              >
+                <Grid item sm={7} pl={{ lg: '8%' }}>
+                  <Box sx={{ color: 'white', textAlign: { md: 'left', sm: 'left', xs: 'center' } }}>
+                    <h1>How do I join?</h1>
+                  </Box>
+                  <Box sx={{ color: 'white', textAlign: { lg: 'left', sm: 'left', xs: 'center' } }}>
+                    <p style={{ color: 'white', fontSize: 'clamp(15px, 3vw, 20px)' }}>
+                      To become a general member, simply sign up with your UCSD email!
+                    </p>
+                    <p style={{ color: 'white', fontSize: 'clamp(15px, 3vw, 20px)' }}>
+                      Do you want to be a part of the internal team? Become a member and follow us
+                      on our socials to be notified of when board applications open on a rolling
+                      basis.
+                    </p>
+                    <Box
+                      sx={{
+                        marginLeft: '-2%',
+                        display: 'flex',
+                        justifyContent: { xs: 'center', sm: 'left' },
+                      }}
+                    >
+                      <Button
+                        size="large"
+                        text="Become a Member ->"
+                        onClick={() => navigate('/membership')}
+                      />
+                    </Box>
+                  </Box>
+                </Grid>
+                <Grid item sm={5} pl={{ lg: '2%' }} pr={{ lg: '8%' }}>
+                  <ImageWithBoxShadow src={about3} alt="img" />
+                </Grid>
+              </Grid>
+            </Box>
+          </Container>
+          </motion.div>
+    );
+};
+
+export default HowtoJoin;