From f8235a5fc4d87c650008cba9abc8eabb38f4a3fe Mon Sep 17 00:00:00 2001
From: leomet07 <leomet07@gmail.com>
Date: Thu, 2 Nov 2023 23:42:47 -0400
Subject: [PATCH] Workaround for sub sections with no images

---
 .../department/[department]/[sub_section].tsx | 28 +++++++++++++------
 1 file changed, 19 insertions(+), 9 deletions(-)
diff --git a/pages/department/[department]/[sub_section].tsx b/pages/department/[department]/[sub_section].tsx
index b1f4841..c6f29c7 100644
--- a/pages/department/[department]/[sub_section].tsx
+++ b/pages/department/[department]/[sub_section].tsx
@@ -10,6 +10,7 @@ import { NextPageContext } from "next";
 import styles from "../../../styles/[department].module.css";
 import MixedArticleDisplay from "../../../components/MixedArticleDisplay";
 import { generateMetaTags } from "../../../utils/generateMetaTags";
+import ListArticleDisplay from "../../../components/ListArticleDisplay";
 
 interface Props {
 	articles: ReceivedArticle[];
@@ -19,12 +20,14 @@ interface Props {
 }
 
 function SubSection(props: Props) {
-	const sub_section_display =
+	let sub_section_display =
 		props.sub_section.charAt(0).toUpperCase() + props.sub_section.slice(1);
+	sub_section_display = sub_section_display.split("-").join(" ");
 
 	const page_title = sub_section_display + " - The Stuyvesant Spectator";
-	const meta_url = `https://stuyspec.com/department/${DepartmentsArray[props.department_id]
-		}/${props.sub_section}`;
+	const meta_url = `https://stuyspec.com/department/${
+		DepartmentsArray[props.department_id]
+	}/${props.sub_section}`;
 	const meta_description = `${sub_section_display} at The Stuyvesant Spectator.`;
 
 	const fetch_addtional_articles = async (skip?: number, max?: number) => {
@@ -44,6 +47,9 @@ function SubSection(props: Props) {
 		return articles;
 	};
 
+	// Temporary workaround for when no images and mixedArticleDisplay craashes
+	const useList = props.articles.every((v) => !v.cover_image);
+
 	return (
 		<div>
 			<Head>
@@ -54,15 +60,19 @@ function SubSection(props: Props) {
 				<h1 id={styles.departmentTitle}>
 					<span id={styles.sub_section}>{sub_section_display}</span>
 				</h1>
-				<MixedArticleDisplay
-					articles={props.articles}
-					display_department={true}
-					additional_article_function={fetch_addtional_articles}
-				/>
+				{useList ? (
+					<ListArticleDisplay articles={props.articles} />
+				) : (
+					<MixedArticleDisplay
+						articles={props.articles}
+						display_department={true}
+						additional_article_function={fetch_addtional_articles}
+					/>
+				)}
 			</main>
 		</div>
 	);
-};
+}
 
 export default SubSection;
 
