Workaround for sub sections with no images

stuyspec · Nov 3, 2023 · f8235a5 · f8235a5
1 parent a3e722c
commit f8235a5
Showing 1 changed file with 19 additions and 9 deletions.
diff --git 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;