Merge pull request #200 from nwplus/daniel/enhancements-qa

QA + Enhancements
nwplus · Sep 15, 2024 · 8772762 · 8772762
2 parents ec6008e + 9345cc3
commit 8772762
Show file tree

Hide file tree

Showing 15 changed files with 10,861 additions and 5,204 deletions.
diff --git a/components/Hackathons.js b/components/Hackathons.js
@@ -541,4 +541,4 @@ export default function Hackathons() {
       <SpaceDeerImg src={SpaceDeer} />
     </>
   );
-}
+}
diff --git a/components/Hero.js b/components/Hero.js
@@ -6,15 +6,16 @@ import { ContentContainer } from './ContentContainer';
 import { LargeTitle, Title2 } from './Typography';
 import scollAnimation from './lotties/scroll.json';
 import Button from './Button';
+import heroBg from "../public/assets/hero_illustration.png";
 
 const HeroContainer = styled.div`
   width: 100%;
   height: 0;
   padding-bottom: 69%;
-  background: url(/assets/hero_illustration.svg);
+  background: url(${heroBg});
   background-repeat: no-repeat;
   background-position: top;
-  background-size: contain;
+  background-size: cover;
   ${(div) => div.theme.mediaQueries.mobile} {
     background: url(/assets/hero_illustration_mobile.svg);
     background-repeat: no-repeat;
@@ -171,6 +172,7 @@ export default function Hero() {
 
   return (
     <HeroContainer>
+
       <HeroTextContainer>
         <ContentContainer>
           <LargeTitle withGradient>nwPlus</LargeTitle>

diff --git a/components/ResourcePage.js b/components/ResourcePage.js
@@ -26,12 +26,23 @@ const ResourcePageContainer = styled.div`
   }
 `;
 
-const RESOURCES_PER_PAGE = 6;
-
 export default function ResourcePage({ resources, startingPageIndex = 0 }) {
   const [currPageIndex, setCurrPageIndex] = useState(startingPageIndex);
   const [currPageResources, setCurrPageResources] = useState([]);
+  const [width, setWidth] = useState(0);
+  const mobileBreakpoint = 1024;
+
+  useEffect(() => {
+    function onResize() {
+      setWidth(window.innerWidth);
+    }
+    onResize();
+    window.addEventListener('resize', onResize);
+
+    return () => window.removeEventListener('resize', onResize);
+  }, []);
 
+  const RESOURCES_PER_PAGE = width <= mobileBreakpoint ? 3 : 6;
   const TOTAL_RESOURCE_PAGES = Math.ceil(resources.length / RESOURCES_PER_PAGE);
 
   const getCurrPageResources = (resources, currPageIndex) => {
@@ -48,7 +59,7 @@ export default function ResourcePage({ resources, startingPageIndex = 0 }) {
 
   useEffect(() => {
     setCurrPageResources(getCurrPageResources(resources, currPageIndex));
-  }, [currPageIndex, setCurrPageIndex, resources]);
+  }, [currPageIndex, setCurrPageIndex, resources, RESOURCES_PER_PAGE]);
 
   const handlePageChange = (nextPageIndex) => {
     if (nextPageIndex === TOTAL_RESOURCE_PAGES || nextPageIndex < 0) {

diff --git a/components/Stats.js b/components/Stats.js
@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import styled from 'styled-components';
 import { Title1 } from './Typography';
+import anime from 'animejs';
 
 const StatsContainer = styled.div`
   display: flex;
@@ -35,20 +36,101 @@ const StatDescription = styled.div`
     font-size: 16px;
   }
 `;
+
+/** @typedef {{ value: number, type: string, description: string }} StatProps */
+
+/**
+ * @param {{stat: StatProps}} param0 
+ */
+function Stat({stat: s}) {
+  const cardRef = useRef(null);
+
+  useEffect(() => {
+    const card = cardRef.current;
+
+    const spinAnimation = anime({
+      targets: card,
+      rotateX: '360deg',
+      duration: 400,
+      easing: 'easeInOutSine',
+      autoplay: false,
+      complete: () => {
+        cardRef.current.style.transform = 'rotateX(0deg)';
+      },
+    });
+
+    const onMouseEnter = () => {
+      spinAnimation.play();
+    };
+
+    const onMouseLeave = () => {
+      spinAnimation.reverse();
+      spinAnimation.play();
+    }
+
+    card.addEventListener('mouseenter', onMouseEnter);
+    card.addEventListener('mouseleave', onMouseLeave);
+
+    return () => {
+      card.removeEventListener('mouseenter', onMouseEnter);
+      card.removeEventListener('mouseleave', onMouseLeave);
+    };
+  }, []);
+
+  return (
+    <StatContainer ref={cardRef}>
+      <Title1 withGradient className='num' id={s.type} data-val={s.value}>
+        0
+      </Title1>
+      <StatDescription>{s.description}</StatDescription>
+    </StatContainer>
+  );
+}
+
 /**
  *
- * @param {{ stats: { title: string, description: string }[] }} props
+ * @param {{ stats: StatProps[] }} props
  * @returns
  */
 export default function Stats(props) {
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const stats = window.document.querySelector('.stats');
+      const renderCountAnimation = () => {
+        const valueDisplays = window.document.querySelectorAll('.num');
+        const interval = 500;
+        valueDisplays.forEach((valueDisplay) => {
+          let startValue = 0;
+          const endValue = parseInt(valueDisplay.getAttribute('data-val'));
+          const id = valueDisplay.getAttribute('id');
+          const duration = Math.floor(interval / endValue);
+          const counter = setInterval(function () {
+            startValue += Math.max(Math.floor((endValue - startValue)/50), 1);
+            if (id === 'moneysign') {
+              valueDisplay.textContent = `$${startValue}+`;
+            } else {
+              valueDisplay.textContent = `${startValue}+`;
+            }
+
+            if (startValue === endValue) {
+              clearInterval(counter);
+            }
+          }, duration);
+        });
+      };
+      const observer = new window.IntersectionObserver(function (entries) {
+        if (entries[0].isIntersecting) {
+          renderCountAnimation();
+        }
+      });
+      observer.observe(stats);
+    }
+  });
 
   return (
-    <StatsContainer numRows={props.stats.length}>
+    <StatsContainer numRows={props.stats.length} className='stats'>
       {props.stats.map((s, i) => (
-        <StatContainer key={i}>
-          <Title1 withGradient>{s.title}</Title1>
-          <StatDescription>{s.description}</StatDescription>
-        </StatContainer>
+        <Stat stat={s} key={i} />
       ))}
     </StatsContainer>
   );

diff --git a/next.config.js b/next.config.js
@@ -6,6 +6,10 @@ module.exports = () => {
       reactStrictMode: true,
       poweredByHeader: false,
       trailingSlash: true,
+      images: {
+        disableStaticImages: true
+      },
+      optimizeImagesInDev: true,
       env: {
         NEXT_PUBLIC_FIREBASE_API_KEY: process.env.NEXT_ENV_FIREBASE_API_KEY,
         NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN: process.env.NEXT_ENV_FIREBASE_AUTH_DOMAIN,
@@ -21,6 +25,9 @@ module.exports = () => {
   return withOptimizedImages({
     poweredByHeader: false,
     trailingSlash: true,
+    images: {
+      disableStaticImages: true,
+    },
     env: {
       NEXT_PUBLIC_FIREBASE_API_KEY: 'AIzaSyDGa7alU0NhfBATSQ6CalkY4Za9wWPrM7o',
       NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN: 'nwplus-ubc.firebaseapp.com',
@@ -31,5 +38,5 @@ module.exports = () => {
       NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID: '306881258768',
       NEXT_PUBLIC_FIREBASE_APP_ID: '1:306881258768:web:bc922148732abee79f7195',
     },
-  })
+  });
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -541,4 +541,4 @@ export default function Hackathons() { @@
           <SpaceDeerImg src={SpaceDeer} />
         </>
       );
-    }
+    }