feat: combo of the day dedicated page

src/components/layout/Footer/Footer.tsx

@@ -27,7 +27,7 @@ const Footer: React.FC<Props> = ({ className, noMargin, comboOfTheDay }) => {
             <Link href="/find-my-combos/">Find My Combos</Link>
             <Link href="/search/?q=is:featured">Featured Combos</Link>
             <Link href="/metrics/">Metrics</Link>
-            <Link href={comboOfTheDay ? `/combo/${comboOfTheDay}` : '/combo/combo-of-the-day/'}>Combo of the Day</Link>
+            <Link href={comboOfTheDay ? `/combo/${comboOfTheDay}` : '/combo-of-the-day/'}>Combo of the Day</Link>
           </div>
           <div className={styles.linkCollection}>
             <h3 className={styles.header}>Commander Spellbook</h3>

src/pages/combo-of-the-day.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import ArtCircle from '../components/layout/ArtCircle/ArtCircle';
+import SpellbookHead from '../components/SpellbookHead/SpellbookHead';
+import Link from 'next/link';
+import { GetServerSideProps } from 'next';
+import { apiConfiguration } from 'services/api.service';
+import { PropertiesApi, ResponseError } from '@space-cow-media/spellbook-client';
+
+const MissingComboOfTheDay: React.FC = () => {
+  return (
+    <>
+      <SpellbookHead
+        title="Commander Spellbook: Combo of the Day"
+        description="Every day, we feature a new combo from the Commander Spellbook database."
+      />
+      <div className={`static-page`}>
+        <ArtCircle cardName="Kethis, the Hidden Hand" className="m-auto md:block hidden" />
+        <h1 className="heading-title">Combo of the Day</h1>
+
+        <div className="text-center">
+          <p>Today we are missing a combo of the day. Please check back later or tomorrow.</p>
+          <Link role="button" className="button" href="/">
+            Go back to the homepage
+          </Link>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default MissingComboOfTheDay;
+
+export const getServerSideProps: GetServerSideProps = async (context) => {
+  const configuration = apiConfiguration(context);
+  const propertiesApi = new PropertiesApi(configuration);
+  try {
+    const comboOfTheDayData = await propertiesApi.propertiesRetrieve({ key: 'combo_of_the_day' });
+    if (comboOfTheDayData.value) {
+      return {
+        redirect: {
+          destination: `/combo/${comboOfTheDayData.value}`,
+          permanent: false,
+        },
+      };
+    }
+  } catch (err) {
+    if (!(err instanceof ResponseError && err.response.status === 404)) {
+      throw err;
+    }
+  }
+  return {
+    props: {},
+  };
+};

src/pages/combo/[id]/index.tsx

@@ -14,7 +14,6 @@ import EDHRECService from '../../../services/edhrec.service';
 import NoCombosFound from 'components/layout/NoCombosFound/NoCombosFound';
 import {
   FindMyCombosApi,
-  PropertiesApi,
   ResponseError,
   Template,
   Variant,
@@ -375,24 +374,6 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
   }
 
   const configuration = apiConfiguration(context);
-  if (params.id === 'combo-of-the-day') {
-    const propertiesApi = new PropertiesApi(configuration);
-    try {
-      const comboOfTheDayData = await propertiesApi.propertiesRetrieve({ key: 'combo_of_the_day' });
-      if (comboOfTheDayData.value) {
-        return {
-          redirect: {
-            destination: `/combo/${comboOfTheDayData.value}`,
-            permanent: false,
-          },
-        };
-      }
-    } catch (err) {
-      if (!(err instanceof ResponseError && err.response.status === 404)) {
-        throw err;
-      }
-    }
-  }
   const variantsApi = new VariantsApi(configuration);
 
   try {