allow show page to only have title field (#142)

Refuge-Worldwide · Sep 25, 2024 · c1a1f26 · c1a1f26
1 parent 8f2f2c3
commit c1a1f26
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 17 deletions.
diff --git a/lib/contentful/client.ts b/lib/contentful/client.ts
@@ -72,6 +72,7 @@ export async function getPastShows(
   if (filter.length == 0) {
     const { items } = await client.getEntries<TypeShowFields>({
       "fields.mixcloudLink[exists]": true,
+      "fields.coverImage[exists]": true,
       "fields.date[lte]": now,
       order: "-fields.date,fields.title",
       content_type: "show",

diff --git a/lib/contentful/pages/radio.ts b/lib/contentful/pages/radio.ts
@@ -12,6 +12,15 @@ import {
   sort,
 } from "../../../util";
 
+const placeholderImage = {
+  sys: { id: "4njwdSvfwFLNoSZ6j1jE2G" },
+  title: "",
+  description: "",
+  url: "/images/placeholder.jpg",
+  width: 2000,
+  height: 1340,
+};
+
 export const RADIO_SHOWS_PAGE_SIZE = 20;
 
 export async function getRadioPageSingle(slug: string, preview: boolean) {
@@ -83,6 +92,10 @@ export async function getRadioPageSingle(slug: string, preview: boolean) {
     throw new Error(`No Show found for slug '${slug}'`);
   }
 
+  if (!entry.coverImage) {
+    entry.coverImage = placeholderImage;
+  }
+
   console.log(entry.genresCollection);
 
   const genres = entry.genresCollection.items.map((genre) => genre?.name);
@@ -247,7 +260,9 @@ export async function getRelatedShows(
     date: show.date,
     slug: show.slug,
     mixcloudLink: show.mixcloudLink,
-    coverImage: show.coverImage.url,
+    coverImage: show.coverImage?.url
+      ? show.coverImage.url
+      : placeholderImage.url,
     genres: show.genresCollection.items
       .map((genre) => genre?.name)
       .filter(Boolean),

diff --git a/pages/radio/[slug].tsx b/pages/radio/[slug].tsx
@@ -31,7 +31,7 @@ export default function Show({
   );
 }
 
-export async function getStaticProps({ params, preview = false }) {
+export async function getStaticProps({ params, preview = true }) {
   return {
     props: { preview, ...(await getRadioPageSingle(params.slug, preview)) },
   };

diff --git a/views/radio/showBody.tsx b/views/radio/showBody.tsx
@@ -71,7 +71,7 @@ export default function ShowBody({
               <div className="h-3 block md:hidden" />
 
               <p className="text-small text-center">
-                <Date dateString={date} />
+                {date && <Date dateString={date} />}
               </p>
 
               <div className="h-6" />
@@ -80,22 +80,26 @@ export default function ShowBody({
 
               <div className="h-6" />
 
-              <ul className="w-full flex flex-wrap justify-center gap-2">
-                {genres.map((genre, i) => (
-                  <li className="cursor-pointer" key={i}>
-                    <Link
-                      href={`/radio?genre=${encodeURIComponent(genre)}#shows`}
-                      legacyBehavior
-                    >
-                      <Badge as="a" text={genre} />
-                    </Link>
-                  </li>
-                ))}
-              </ul>
+              {genres.length > 0 && (
+                <ul className="w-full flex flex-wrap justify-center gap-2">
+                  {genres.map((genre, i) => (
+                    <li className="cursor-pointer" key={i}>
+                      <Link
+                        href={`/radio?genre=${encodeURIComponent(genre)}#shows`}
+                        legacyBehavior
+                      >
+                        <Badge as="a" text={genre} />
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              )}
 
               <div className="h-6" />
 
-              <p className="font-medium text-center">With {persons}</p>
+              {artists.length > 0 && (
+                <p className="font-medium text-center">With {persons}</p>
+              )}
             </div>
 
             <div className="flex">
@@ -110,7 +114,7 @@ export default function ShowBody({
 
           <div className="h-6" />
 
-          <Prose>{documentToReactComponents(content?.json)}</Prose>
+          {content && <Prose>{documentToReactComponents(content?.json)}</Prose>}
         </div>
       </section>
     </Fragment>