create hook to fetch showcase -- move req to server to prevent CORS i…

…ssue

pages/api/showcase.ts

@@ -0,0 +1,48 @@
+import { NextApiRequest as Req, NextApiResponse as Res } from 'next';
+
+import { Showcase } from '@this/data/types/gradShowcase';
+import axios, { isAxiosError } from 'axios';
+
+import dayjs from 'dayjs';
+
+export default async function showcaseHandler(req: Req, res: Res) {
+  if (req.method === 'GET') {
+    try {
+      const { data: showcase } = await axios.get<Showcase>(
+        'https://showcase.operationspark.org/api/showcases/active',
+      );
+      if (!showcase) {
+        res.status(404).end('Showcase inactive');
+        return;
+      }
+
+      const { startDateTime, doorsOffset, websiteActive, active } = showcase;
+
+      if (!startDateTime || !websiteActive || !active) {
+        res.status(404).end('Showcase inactive');
+        return;
+      }
+
+      const disableTime = dayjs(startDateTime).add(doorsOffset ?? 30, 'minutes');
+
+      if (disableTime.isBefore(dayjs())) {
+        console.info('Showcase inactive');
+        res.status(404).end('Showcase inactive');
+        return;
+      }
+
+      res.status(200).json(showcase);
+    } catch (err) {
+      if (isAxiosError(err) && err.response?.status === 404) {
+        console.info('Showcase inactive');
+        res.status(404).end('Showcase inactive');
+        return;
+      }
+      console.error('Showcase fetch error: ', err);
+      res.status(500).end('Showcase fetch error');
+      return;
+    }
+  }
+
+  res.status(405).end('Method Not Allowed');
+}

pages/index.tsx

@@ -1,6 +1,4 @@
-import axios, { isAxiosError } from 'axios';
-import type { GetServerSideProps, NextPage } from 'next';
-import { useState } from 'react';
+import type { GetStaticProps, NextPage } from 'next';
 
 import { IHome } from '../data/types/home';
 import { getStaticAsset } from './api/static/[asset]';
@@ -20,9 +18,7 @@ import { ILogo } from '@this/data/types/logos';
 import AtlantaPromo from '@this/src/components/Elements/AtlantaPromo';
 import PromoVideo from '@this/src/components/Home/PromoVideo';
 import ShowcasePromo from '@this/src/components/Home/ShowcasePromo';
-import { toDayJs } from '@this/src/helpers/time';
-
-// const gCloudBaseUrl = 'https://storage.googleapis.com/operationspark-org';
+import { useShowcase } from '@this/src/hooks/useShowcase';
 
 interface HomeProps extends IHome {
   logos: ILogo[];
@@ -35,17 +31,12 @@ const Home: NextPage<HomeProps> = ({
   greatCompanies,
   programsForAll,
   teamEffort,
-  showcase,
 }) => {
-  const [showcaseInfo, setShowcaseInfo] = useState<Showcase | null>(showcase || null);
+  const { showcase, clearShowcase } = useShowcase();
 
   return (
     <Main style={{ paddingTop: 0 }}>
-      {showcaseInfo ? (
-        <ShowcasePromo info={showcaseInfo} clearShowcase={() => setShowcaseInfo(null)} />
-      ) : (
-        <TopCard />
-      )}
+      {showcase ? <ShowcasePromo info={showcase} clearShowcase={clearShowcase} /> : <TopCard />}
 
       <AtlantaPromo />
       <PromoVideo />
@@ -59,49 +50,19 @@ const Home: NextPage<HomeProps> = ({
   );
 };
 
-const getShowcase = async () => {
-  try {
-    const { data } = await axios.get<Showcase>(
-      'https://showcase.operationspark.org/api/showcases/active',
-    );
-
-    if (!data || !data.startDateTime || !data.websiteActive || !data.active) {
-      return null;
-    }
-
-    const disableTime = toDayJs(data.startDateTime).add(data.doorsOffset ?? 30, 'minutes');
-
-    if (disableTime.isBefore(toDayJs())) {
-      return null;
-    }
-
-    return data;
-  } catch (err) {
-    if (isAxiosError(err) && err.response?.status === 404) {
-      console.info('Showcase inactive');
-      return null;
-    }
-    console.error('Showcase fetch error: ', err);
-    return null;
-  }
-};
-
-export const getServerSideProps: GetServerSideProps<HomeProps> = async () => {
+export const getStaticProps: GetStaticProps<HomeProps> = async () => {
   const { greatCompanies, programsForAll, igniteCareer, teamEffort }: IHome = await getStaticAsset(
     'index',
   );
   const logos: ILogo[] = await getStaticAsset('logos', 'partners');
 
-  const showcase = await getShowcase();
-
   return {
     props: {
       greatCompanies,
       programsForAll,
       igniteCareer,
       teamEffort,
       logos,
-      showcase,
     },
   };
 };

src/hooks/useShowcase.ts

@@ -0,0 +1,45 @@
+import axios, { isAxiosError } from 'axios';
+
+import { Showcase } from '@this/data/types/gradShowcase';
+import { toDayJs } from '@this/src/helpers/time';
+import { useEffect, useState } from 'react';
+
+const getShowcase = async () => {
+  try {
+    const { data } = await axios.get<Showcase>('/api/showcase');
+
+    if (!data || !data.startDateTime || !data.websiteActive || !data.active) {
+      return null;
+    }
+
+    const disableTime = toDayJs(data.startDateTime).add(data.doorsOffset ?? 30, 'minutes');
+
+    if (disableTime.isBefore(toDayJs())) {
+      console.info('Showcase inactive');
+      return null;
+    }
+
+    return data;
+  } catch (err) {
+    if (isAxiosError(err) && err.response?.status === 404) {
+      console.info('Showcase inactive');
+      return null;
+    }
+    console.error('Showcase fetch error: ', err);
+    return null;
+  }
+};
+
+export const useShowcase = () => {
+  const [showcase, setShowcase] = useState<Showcase | null>();
+
+  useEffect(() => {
+    getShowcase().then((showcase) => showcase && setShowcase(showcase));
+  }, []);
+
+  return {
+    showcase,
+    clearShowcase: () => setShowcase(null),
+    refreshShowcase: () => getShowcase().then((showcase) => showcase && setShowcase(showcase)),
+  };
+};