Edit Page Enhancements

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);
     };

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;
@@ -47,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;
+}

app/pages/EditBreakingNewsPage.tsx

@@ -46,16 +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 (articleId) {
-      dataService.put(route, article);
+    if (articleId){
+      dataService.put(route, articleFromState);
+      alert(`Article "${articleFromState.headline}" has been updated!`)
     } else {
-      dataService.post(route, article);
+      dataService.post(route, articleFromState);
+      alert(`Article "${articleFromState.headline}" has been created!`);
     }
   };
 
@@ -92,15 +101,14 @@ 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>
+      {
+        isActive(article) ? (
+          <div className={'round-edges active-status'}>Active</div>
+        ) : (
+          <div className={'round-edges inactive-status'}>Inactive</div>
+        )
+      }
       <label>
         Headline
         <input
@@ -165,6 +173,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(index)}
+        >
+          <RiSave3Line />
+          Save
+        </button>
+        <button type="button" onClick={() => onDelete(article.id, index)}>
+          <RiDeleteBin5Line />
+          Delete
+        </button>
+      </div>
     </form>
   );