From 116db4068a9847f41815aa672bcb7657f7dcd6b6 Mon Sep 17 00:00:00 2001
From: Reveal <reveal@Reveals-MBP.attlocal.net>
Date: Tue, 6 Feb 2024 11:54:57 -0800
Subject: [PATCH 1/6] move article save/delete buttons to bottom of the
 edit/create form

---
 app/pages/EditBreakingNewsPage.scss | 10 +++++++++
 app/pages/EditBreakingNewsPage.tsx  | 34 +++++++++++++++++++----------
 2 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/app/pages/EditBreakingNewsPage.scss b/app/pages/EditBreakingNewsPage.scss
index d37d509ea..caa3f6cf0 100644
--- a/app/pages/EditBreakingNewsPage.scss
+++ b/app/pages/EditBreakingNewsPage.scss
@@ -38,6 +38,16 @@
   }
 }
 
+.breaking-news-form-buttons {
+  display: flex;
+  justify-content: center;
+  margin: 10px 0px;
+}
+
+.button-with-margin {
+  margin-right: 10px;
+}
+
 .breaking-news-footer {
   display: flex;
   justify-content: center;
diff --git a/app/pages/EditBreakingNewsPage.tsx b/app/pages/EditBreakingNewsPage.tsx
index a0db343f0..242870689 100644
--- a/app/pages/EditBreakingNewsPage.tsx
+++ b/app/pages/EditBreakingNewsPage.tsx
@@ -52,10 +52,14 @@ export const EditBreakingNewsPage = () => {
     );
     const route = `/api/news_articles/${articleId ?? ""}`;
 
-    if (articleId) {
-      dataService.put(route, article);
-    } else {
-      dataService.post(route, article);
+    if (article) {
+      if (articleId){
+        dataService.put(route, article);
+        alert(`Article "${article.headline}" has been updated!`)
+      } else {
+        dataService.post(route, article);
+        alert(`Article "${article.headline}" has been created!`)
+      }
     }
   };
 
@@ -92,14 +96,6 @@ export const EditBreakingNewsPage = () => {
     <form className="form" key={article.id}>
       <div className="form-header">
         <h2>{`Breaking News Article #${index + 1}`}</h2>
-        <button type="button" onClick={() => onSave(article.id)}>
-          <RiSave3Line />
-          Save
-        </button>
-        <button type="button" onClick={() => onDelete(article.id, index)}>
-          <RiDeleteBin5Line />
-          Delete
-        </button>
       </div>
       <label>
         Headline
@@ -165,6 +161,20 @@ export const EditBreakingNewsPage = () => {
           onChange={(e) => onFieldChange(article.id, e)}
         />
       </label>
+      <div className="breaking-news-form-buttons">
+        <button
+          type="button"
+          className="button-with-margin"
+          onClick={() => onSave(article.id)}
+        >
+          <RiSave3Line />
+          Save
+        </button>
+        <button type="button" onClick={() => onDelete(article.id, index)}>
+          <RiDeleteBin5Line />
+          Delete
+        </button>
+      </div>
     </form>
   );
 

From ceaa76bbaf2c1f817e629e6580d0fff63ca60d8e Mon Sep 17 00:00:00 2001
From: GeorgeCloud <net.george.sky@gmail.com>
Date: Thu, 8 Feb 2024 00:29:32 -0800
Subject: [PATCH 2/6] add active/inactive status bars to breaking news articles

---
 .../ui/NewsArticles/NewsArticles.tsx          |  2 +-
 app/pages/EditBreakingNewsPage.scss           | 20 ++++++++++
 app/pages/EditBreakingNewsPage.tsx            | 38 ++++++++++++-------
 3 files changed, 46 insertions(+), 14 deletions(-)

diff --git a/app/components/ui/NewsArticles/NewsArticles.tsx b/app/components/ui/NewsArticles/NewsArticles.tsx
index e46902cd1..09c7955f8 100644
--- a/app/components/ui/NewsArticles/NewsArticles.tsx
+++ b/app/components/ui/NewsArticles/NewsArticles.tsx
@@ -64,7 +64,7 @@ export const NewsArticles = () => {
 
   useEffect(() => {
     const fetchBreakingNewsArticles = async () => {
-      const response = await dataService.get("/api/news_articles");
+      const response = await dataService.get("/api/news_articles?active=true");
       const { news_articles }: { news_articles: NewsArticle[] } = response;
       setBreakingNewsArticles(news_articles);
     };
diff --git a/app/pages/EditBreakingNewsPage.scss b/app/pages/EditBreakingNewsPage.scss
index caa3f6cf0..533bf517a 100644
--- a/app/pages/EditBreakingNewsPage.scss
+++ b/app/pages/EditBreakingNewsPage.scss
@@ -57,3 +57,23 @@
 .labelSubtext {
   color: $color-grey5;
 }
+
+.round-edges {
+  width: 80px;
+  height: 30px;
+  border-radius: 10%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+}
+
+.active-status {
+  color: white;
+  background-color: $color-status-amber;
+}
+
+.inactive-status {
+  color: white;
+  background-color: red;
+}
diff --git a/app/pages/EditBreakingNewsPage.tsx b/app/pages/EditBreakingNewsPage.tsx
index 242870689..7d6e76afa 100644
--- a/app/pages/EditBreakingNewsPage.tsx
+++ b/app/pages/EditBreakingNewsPage.tsx
@@ -46,20 +46,25 @@ export const EditBreakingNewsPage = () => {
     ]);
   };
 
-  const onSave = (articleId: string) => {
-    const article = breakingNewsArticles.find(
-      ({ id }: any) => id === articleId
-    );
+  const isActive = (article: NewsArticle): boolean => {
+    const today = new Date();
+    const isEffective = !article.effective_date || new Date(article.effective_date) <= today;
+    const isNotExpired = !article.expiration_date || new Date(article.expiration_date) >= today;
+
+    return Boolean(article.id && isEffective && isNotExpired);
+  };
+
+  const onSave = (index: number) => {
+    const articleFromState = breakingNewsArticles[index];
+    const articleId = articleFromState.id
     const route = `/api/news_articles/${articleId ?? ""}`;
 
-    if (article) {
-      if (articleId){
-        dataService.put(route, article);
-        alert(`Article "${article.headline}" has been updated!`)
-      } else {
-        dataService.post(route, article);
-        alert(`Article "${article.headline}" has been created!`)
-      }
+    if (articleId){
+      dataService.put(route, articleFromState);
+      alert(`Article "${articleFromState.headline}" has been updated!`)
+    } else {
+      dataService.post(route, articleFromState);
+      alert(`Article "${articleFromState.headline}" has been created!`);
     }
   };
 
@@ -97,6 +102,13 @@ export const EditBreakingNewsPage = () => {
       <div className="form-header">
         <h2>{`Breaking News Article #${index + 1}`}</h2>
       </div>
+      {
+        isActive(article) ? (
+          <div className={'round-edges active-status'}>Active</div>
+        ) : (
+          <div className={'round-edges inactive-status'}>Inactive</div>
+        )
+      }
       <label>
         Headline
         <input
@@ -165,7 +177,7 @@ export const EditBreakingNewsPage = () => {
         <button
           type="button"
           className="button-with-margin"
-          onClick={() => onSave(article.id)}
+          onClick={() => onSave(index)}
         >
           <RiSave3Line />
           Save

From 317b81789fc757d74cb66b484f2e9d80786b8f22 Mon Sep 17 00:00:00 2001
From: GeorgeCloud <net.george.sky@gmail.com>
Date: Tue, 27 Feb 2024 15:51:00 -0800
Subject: [PATCH 3/6] add: scheduled status, add confirm flash message for
 deleting article, and update css class names

---
 app/pages/EditBreakingNewsPage.scss | 28 ++++++------
 app/pages/EditBreakingNewsPage.tsx  | 70 ++++++++++++++++++-----------
 2 files changed, 58 insertions(+), 40 deletions(-)

diff --git a/app/pages/EditBreakingNewsPage.scss b/app/pages/EditBreakingNewsPage.scss
index 533bf517a..a25a42d0c 100644
--- a/app/pages/EditBreakingNewsPage.scss
+++ b/app/pages/EditBreakingNewsPage.scss
@@ -42,10 +42,7 @@
   display: flex;
   justify-content: center;
   margin: 10px 0px;
-}
-
-.button-with-margin {
-  margin-right: 10px;
+  gap: 1em;
 }
 
 .breaking-news-footer {
@@ -58,22 +55,25 @@
   color: $color-grey5;
 }
 
-.round-edges {
-  width: 80px;
-  height: 30px;
-  border-radius: 10%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.breaking-news-round-edges {
+  min-width: 2em;
+  padding: 0.5em;
+  border-radius: 5%;
+  display: inline-block;
   font-weight: bold;
 }
 
-.active-status {
+.breaking-news-scheduled-status {
   color: white;
   background-color: $color-status-amber;
 }
 
-.inactive-status {
+.breaking-news-active-status {
+  color: white;
+  background-color: $color-status-green;
+}
+
+.breaking-news-expired-status {
   color: white;
-  background-color: red;
+  background-color: $color-status-red;
 }
diff --git a/app/pages/EditBreakingNewsPage.tsx b/app/pages/EditBreakingNewsPage.tsx
index 7d6e76afa..3d5601f90 100644
--- a/app/pages/EditBreakingNewsPage.tsx
+++ b/app/pages/EditBreakingNewsPage.tsx
@@ -46,22 +46,48 @@ export const EditBreakingNewsPage = () => {
     ]);
   };
 
-  const isActive = (article: NewsArticle): boolean => {
+  const articleStatus = (article: NewsArticle): JSX.Element | null => {
     const today = new Date();
-    const isEffective = !article.effective_date || new Date(article.effective_date) <= today;
-    const isNotExpired = !article.expiration_date || new Date(article.expiration_date) >= today;
+    const isEffective =
+      !article.effective_date || new Date(article.effective_date) <= today;
+    const isNotExpired =
+      !article.expiration_date || new Date(article.expiration_date) > today;
 
-    return Boolean(article.id && isEffective && isNotExpired);
+    if (isEffective && isNotExpired) {
+      return (
+        <div
+          className={"breaking-news-round-edges breaking-news-active-status"}
+        >
+          Active
+        </div>
+      );
+    } else if (!isEffective && isNotExpired) {
+      return (
+        <div
+          className={"breaking-news-round-edges breaking-news-scheduled-status"}
+        >
+          Scheduled
+        </div>
+      );
+    } else {
+      return (
+        <div
+          className={"breaking-news-round-edges breaking-news-expired-status"}
+        >
+          Expired
+        </div>
+      );
+    }
   };
 
   const onSave = (index: number) => {
     const articleFromState = breakingNewsArticles[index];
-    const articleId = articleFromState.id
+    const articleId = articleFromState.id;
     const route = `/api/news_articles/${articleId ?? ""}`;
 
-    if (articleId){
+    if (articleId) {
       dataService.put(route, articleFromState);
-      alert(`Article "${articleFromState.headline}" has been updated!`)
+      alert(`Article "${articleFromState.headline}" has been updated!`);
     } else {
       dataService.post(route, articleFromState);
       alert(`Article "${articleFromState.headline}" has been created!`);
@@ -69,15 +95,17 @@ export const EditBreakingNewsPage = () => {
   };
 
   const onDelete = (articleId: string, index: number) => {
-    const updatedBreakingNewsArticles = [...breakingNewsArticles];
-    updatedBreakingNewsArticles.splice(index, 1);
+    if (window.confirm("Are you sure you want to delete this article?")) {
+      const updatedBreakingNewsArticles = [...breakingNewsArticles];
+      updatedBreakingNewsArticles.splice(index, 1);
 
-    if (articleId) {
-      dataService.APIDelete(`/api/news_articles/${articleId}`);
-      // Todo: Add a catch here; if this fails, front-end state will be out of sync with the actual data
-    }
+      if (articleId) {
+        dataService.APIDelete(`/api/news_articles/${articleId}`);
+        // Todo: Add a catch here; if this fails, front-end state will be out of sync with the actual data
+      }
 
-    setBreakingNewsArticles(updatedBreakingNewsArticles);
+      setBreakingNewsArticles(updatedBreakingNewsArticles);
+    }
   };
 
   const onFieldChange = (articleId: string, { target }: any) => {
@@ -102,13 +130,7 @@ export const EditBreakingNewsPage = () => {
       <div className="form-header">
         <h2>{`Breaking News Article #${index + 1}`}</h2>
       </div>
-      {
-        isActive(article) ? (
-          <div className={'round-edges active-status'}>Active</div>
-        ) : (
-          <div className={'round-edges inactive-status'}>Inactive</div>
-        )
-      }
+      <div>{articleStatus(article)}</div>
       <label>
         Headline
         <input
@@ -174,11 +196,7 @@ export const EditBreakingNewsPage = () => {
         />
       </label>
       <div className="breaking-news-form-buttons">
-        <button
-          type="button"
-          className="button-with-margin"
-          onClick={() => onSave(index)}
-        >
+        <button type="button" onClick={() => onSave(index)}>
           <RiSave3Line />
           Save
         </button>

From d8bfdedf16295dc91adce3e70187e555f45ea909 Mon Sep 17 00:00:00 2001
From: GeorgeCloud <net.george.sky@gmail.com>
Date: Wed, 28 Feb 2024 19:23:43 -0800
Subject: [PATCH 4/6] sort articles by status order

---
 app/pages/EditBreakingNewsPage.scss |  2 +-
 app/pages/EditBreakingNewsPage.tsx  | 79 +++++++++++++----------------
 2 files changed, 36 insertions(+), 45 deletions(-)

diff --git a/app/pages/EditBreakingNewsPage.scss b/app/pages/EditBreakingNewsPage.scss
index a25a42d0c..292fae5ad 100644
--- a/app/pages/EditBreakingNewsPage.scss
+++ b/app/pages/EditBreakingNewsPage.scss
@@ -55,7 +55,7 @@
   color: $color-grey5;
 }
 
-.breaking-news-round-edges {
+.breaking-news-status-badge {
   min-width: 2em;
   padding: 0.5em;
   border-radius: 5%;
diff --git a/app/pages/EditBreakingNewsPage.tsx b/app/pages/EditBreakingNewsPage.tsx
index 3d5601f90..4f9cc9a4a 100644
--- a/app/pages/EditBreakingNewsPage.tsx
+++ b/app/pages/EditBreakingNewsPage.tsx
@@ -10,21 +10,24 @@ export const EditBreakingNewsPage = () => {
     Array<NewsArticle>
   >([]);
   useEffect(() => {
-    dataService.get("/api/news_articles").then(({ news_articles }) => {
-      setBreakingNewsArticles(
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-        news_articles.map((article: NewsArticle) => ({
-          ...article,
-          effective_date: article.effective_date
-            ? formatDate(article.effective_date)
-            : "",
-          expiration_date: article.expiration_date
-            ? formatDate(article.expiration_date)
-            : "",
-        }))
-      );
+  dataService.get("/api/news_articles").then(({ news_articles }) => {
+    const sortedArticles = news_articles.map((article: NewsArticle) => ({
+      ...article,
+      effective_date: article.effective_date ? formatDate(article.effective_date) : "",
+      expiration_date: article.expiration_date ? formatDate(article.expiration_date) : "",
+    }));
+
+    sortedArticles.sort((a, b) => {
+      const statusOrder = ["Scheduled", "Active", "Expired"];
+      const statusA = articleStatus(a).props.children;
+      const statusB = articleStatus(b).props.children;
+
+      return statusOrder.indexOf(statusA) - statusOrder.indexOf(statusB);
     });
-  }, []);
+
+    setBreakingNewsArticles(sortedArticles);
+  });
+}, []);
 
   // eslint-disable-next-line arrow-body-style
   const formatDate = (date: string): string | null => {
@@ -48,36 +51,24 @@ export const EditBreakingNewsPage = () => {
 
   const articleStatus = (article: NewsArticle): JSX.Element | null => {
     const today = new Date();
-    const isEffective =
-      !article.effective_date || new Date(article.effective_date) <= today;
-    const isNotExpired =
-      !article.expiration_date || new Date(article.expiration_date) > today;
-
-    if (isEffective && isNotExpired) {
-      return (
-        <div
-          className={"breaking-news-round-edges breaking-news-active-status"}
-        >
-          Active
-        </div>
-      );
-    } else if (!isEffective && isNotExpired) {
-      return (
-        <div
-          className={"breaking-news-round-edges breaking-news-scheduled-status"}
-        >
-          Scheduled
-        </div>
-      );
-    } else {
-      return (
-        <div
-          className={"breaking-news-round-edges breaking-news-expired-status"}
-        >
-          Expired
-        </div>
-      );
-    }
+    const isEffective = !article.effective_date || new Date(article.effective_date) <= today;
+    const isNotExpired = !article.expiration_date || new Date(article.expiration_date) > today;
+
+    const getStatusClassName = () => {
+      if (isEffective && isNotExpired) {
+        return "breaking-news-active-status";
+      } else if (!isEffective && isNotExpired) {
+        return "breaking-news-scheduled-status";
+      } else {
+        return "breaking-news-expired-status";
+      }
+    };
+
+    return (
+      <div className={`breaking-news-status-badge ${getStatusClassName()}`}>
+        {isEffective && isNotExpired ? "Active" : isNotExpired ? "Scheduled" : "Expired"}
+      </div>
+    );
   };
 
   const onSave = (index: number) => {

From 57cfd76b4baee61048fda11dc4c296dc00e79397 Mon Sep 17 00:00:00 2001
From: GeorgeCloud <net.george.sky@gmail.com>
Date: Wed, 28 Feb 2024 19:25:20 -0800
Subject: [PATCH 5/6] breaking news article prettier syntax

---
 app/pages/EditBreakingNewsPage.tsx | 50 ++++++++++++++++++------------
 1 file changed, 30 insertions(+), 20 deletions(-)

diff --git a/app/pages/EditBreakingNewsPage.tsx b/app/pages/EditBreakingNewsPage.tsx
index 4f9cc9a4a..9aa519680 100644
--- a/app/pages/EditBreakingNewsPage.tsx
+++ b/app/pages/EditBreakingNewsPage.tsx
@@ -10,24 +10,28 @@ export const EditBreakingNewsPage = () => {
     Array<NewsArticle>
   >([]);
   useEffect(() => {
-  dataService.get("/api/news_articles").then(({ news_articles }) => {
-    const sortedArticles = news_articles.map((article: NewsArticle) => ({
-      ...article,
-      effective_date: article.effective_date ? formatDate(article.effective_date) : "",
-      expiration_date: article.expiration_date ? formatDate(article.expiration_date) : "",
-    }));
-
-    sortedArticles.sort((a, b) => {
-      const statusOrder = ["Scheduled", "Active", "Expired"];
-      const statusA = articleStatus(a).props.children;
-      const statusB = articleStatus(b).props.children;
-
-      return statusOrder.indexOf(statusA) - statusOrder.indexOf(statusB);
+    dataService.get("/api/news_articles").then(({ news_articles }) => {
+      const sortedArticles = news_articles.map((article: NewsArticle) => ({
+        ...article,
+        effective_date: article.effective_date
+          ? formatDate(article.effective_date)
+          : "",
+        expiration_date: article.expiration_date
+          ? formatDate(article.expiration_date)
+          : "",
+      }));
+
+      sortedArticles.sort((a, b) => {
+        const statusOrder = ["Scheduled", "Active", "Expired"];
+        const statusA = articleStatus(a).props.children;
+        const statusB = articleStatus(b).props.children;
+
+        return statusOrder.indexOf(statusA) - statusOrder.indexOf(statusB);
+      });
+
+      setBreakingNewsArticles(sortedArticles);
     });
-
-    setBreakingNewsArticles(sortedArticles);
-  });
-}, []);
+  }, []);
 
   // eslint-disable-next-line arrow-body-style
   const formatDate = (date: string): string | null => {
@@ -51,8 +55,10 @@ export const EditBreakingNewsPage = () => {
 
   const articleStatus = (article: NewsArticle): JSX.Element | null => {
     const today = new Date();
-    const isEffective = !article.effective_date || new Date(article.effective_date) <= today;
-    const isNotExpired = !article.expiration_date || new Date(article.expiration_date) > today;
+    const isEffective =
+      !article.effective_date || new Date(article.effective_date) <= today;
+    const isNotExpired =
+      !article.expiration_date || new Date(article.expiration_date) > today;
 
     const getStatusClassName = () => {
       if (isEffective && isNotExpired) {
@@ -66,7 +72,11 @@ export const EditBreakingNewsPage = () => {
 
     return (
       <div className={`breaking-news-status-badge ${getStatusClassName()}`}>
-        {isEffective && isNotExpired ? "Active" : isNotExpired ? "Scheduled" : "Expired"}
+        {isEffective && isNotExpired
+          ? "Active"
+          : isNotExpired
+          ? "Scheduled"
+          : "Expired"}
       </div>
     );
   };

From d142a98552c20cdf39424baed6d855e71be27d57 Mon Sep 17 00:00:00 2001
From: Richard Xia <richardxia@richardxia.com>
Date: Wed, 10 Apr 2024 21:17:38 -0700
Subject: [PATCH 6/6] Fix lint issues by splitting non-React parts out of
 article status function.

---
 app/pages/EditBreakingNewsPage.tsx | 100 ++++++++++++++++++-----------
 1 file changed, 63 insertions(+), 37 deletions(-)

diff --git a/app/pages/EditBreakingNewsPage.tsx b/app/pages/EditBreakingNewsPage.tsx
index 9aa519680..cb70c1727 100644
--- a/app/pages/EditBreakingNewsPage.tsx
+++ b/app/pages/EditBreakingNewsPage.tsx
@@ -5,32 +5,40 @@ import { NewsArticle } from "models";
 import * as dataService from "../utils/DataService";
 import "./EditBreakingNewsPage.scss";
 
+const statusOrder = ["Scheduled", "Active", "Expired"] as const;
+
+// Extract the literal types of the elements from the array above
+type ArticleStatus = (typeof statusOrder)[number];
+
 export const EditBreakingNewsPage = () => {
   const [breakingNewsArticles, setBreakingNewsArticles] = useState<
     Array<NewsArticle>
   >([]);
   useEffect(() => {
-    dataService.get("/api/news_articles").then(({ news_articles }) => {
-      const sortedArticles = news_articles.map((article: NewsArticle) => ({
-        ...article,
-        effective_date: article.effective_date
-          ? formatDate(article.effective_date)
-          : "",
-        expiration_date: article.expiration_date
-          ? formatDate(article.expiration_date)
-          : "",
-      }));
-
-      sortedArticles.sort((a, b) => {
-        const statusOrder = ["Scheduled", "Active", "Expired"];
-        const statusA = articleStatus(a).props.children;
-        const statusB = articleStatus(b).props.children;
-
-        return statusOrder.indexOf(statusA) - statusOrder.indexOf(statusB);
+    dataService
+      .get("/api/news_articles")
+      .then(({ news_articles }: { news_articles: NewsArticle[] }) => {
+        const sortedArticles = news_articles.map<NewsArticle>(
+          (article: NewsArticle) => ({
+            ...article,
+            effective_date: article.effective_date
+              ? formatDate(article.effective_date)
+              : "",
+            expiration_date: article.expiration_date
+              ? formatDate(article.expiration_date)
+              : "",
+          })
+        );
+
+        sortedArticles.sort((a, b) => {
+          const statusA = getArticleStatus(a);
+          const statusB = getArticleStatus(b);
+
+          return statusOrder.indexOf(statusA) - statusOrder.indexOf(statusB);
+        });
+
+        setBreakingNewsArticles(sortedArticles);
       });
-
-      setBreakingNewsArticles(sortedArticles);
-    });
   }, []);
 
   // eslint-disable-next-line arrow-body-style
@@ -53,30 +61,46 @@ export const EditBreakingNewsPage = () => {
     ]);
   };
 
-  const articleStatus = (article: NewsArticle): JSX.Element | null => {
+  const getArticleStatus = (article: NewsArticle): ArticleStatus => {
     const today = new Date();
     const isEffective =
       !article.effective_date || new Date(article.effective_date) <= today;
     const isNotExpired =
       !article.expiration_date || new Date(article.expiration_date) > today;
 
-    const getStatusClassName = () => {
-      if (isEffective && isNotExpired) {
-        return "breaking-news-active-status";
-      } else if (!isEffective && isNotExpired) {
-        return "breaking-news-scheduled-status";
-      } else {
-        return "breaking-news-expired-status";
-      }
-    };
+    if (isEffective && isNotExpired) {
+      return "Active";
+    }
+    if (!isEffective && isNotExpired) {
+      return "Scheduled";
+    }
+    return "Expired";
+  };
+
+  const StatusBadge = ({
+    article,
+  }: {
+    article: NewsArticle;
+  }): JSX.Element | null => {
+    const status = getArticleStatus(article);
+    let statusClassName: string;
+    switch (status) {
+      case "Active":
+        statusClassName = "breaking-news-active-status";
+        break;
+      case "Scheduled":
+        statusClassName = "breaking-news-scheduled-status";
+        break;
+      case "Expired":
+        statusClassName = "breaking-news-expired-status";
+        break;
+      default:
+        throw new Error(`Unknown status: {status}`);
+    }
 
     return (
-      <div className={`breaking-news-status-badge ${getStatusClassName()}`}>
-        {isEffective && isNotExpired
-          ? "Active"
-          : isNotExpired
-          ? "Scheduled"
-          : "Expired"}
+      <div className={`breaking-news-status-badge ${statusClassName}`}>
+        {status}
       </div>
     );
   };
@@ -131,7 +155,9 @@ export const EditBreakingNewsPage = () => {
       <div className="form-header">
         <h2>{`Breaking News Article #${index + 1}`}</h2>
       </div>
-      <div>{articleStatus(article)}</div>
+      <div>
+        <StatusBadge article={article} />
+      </div>
       <label>
         Headline
         <input