From 0b5a28fa7b2d1fc77035da3e4753c89a4172ab35 Mon Sep 17 00:00:00 2001
From: desmondlsl <68117020+desmondlsl@users.noreply.github.com>
Date: Mon, 16 Dec 2024 16:48:58 +0800
Subject: [PATCH] Notice should not repat dates; Fix link to Special Traffic
 News Page; Notice hyperlinks should open in new page (#212)

* notice should not repeat dates

* fix link to Special Traffic News Page

* notice hyperlinks should open in new page

* Prettified Code!

---------

Co-authored-by: desmondlsl <desmondlsl@users.noreply.github.com>
---
 src/pages/Notice.tsx | 52 +++++++++++++++++++++++++++-----------------
 1 file changed, 32 insertions(+), 20 deletions(-)

diff --git a/src/pages/Notice.tsx b/src/pages/Notice.tsx
index b7b992c1261e..2f2a32600e77 100644
--- a/src/pages/Notice.tsx
+++ b/src/pages/Notice.tsx
@@ -1,5 +1,5 @@
-import { useEffect, useState } from "react";
 import { Link, Paper, SxProps, Theme, Typography } from "@mui/material";
+import { Fragment, useEffect, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import useLanguage from "../hooks/useTranslation";
@@ -30,21 +30,27 @@ const Notice = () => {
 
   return (
     <Paper sx={paperSx} square elevation={0}>
-      {notices.map(({ msgID, ChinText, EngText, ReferenceDate }) => (
-        <Paper key={msgID} elevation={5} sx={noticeContainerSx}>
-          <Typography variant="body2" sx={{ alignSelf: "flex-end" }}>
-            {ReferenceDate}
-          </Typography>
-          <ReactMarkdown
-            remarkPlugins={[remarkGfm]}
-            components={{
-              p: ({ ...props }) => <Typography variant="body1" {...props} />,
-              a: ({ ...props }) => <Link sx={linkSx} {...props} />,
-            }}
-          >
-            {language === "zh" ? ChinText : EngText}
-          </ReactMarkdown>
-        </Paper>
+      {notices.map(({ msgID, ChinText, EngText, ReferenceDate }, i) => (
+        <Fragment key={msgID}>
+          {(i === 0 || ReferenceDate !== notices[i - 1].ReferenceDate) && (
+            <Typography variant="body2" sx={{ alignSelf: "flex-end" }}>
+              {ReferenceDate}
+            </Typography>
+          )}
+          <Paper elevation={5} sx={noticeContainerSx}>
+            <ReactMarkdown
+              remarkPlugins={[remarkGfm]}
+              components={{
+                p: ({ ...props }) => <Typography variant="body1" {...props} />,
+                a: ({ ...props }) => (
+                  <Link sx={linkSx} target="_blank" {...props} />
+                ),
+              }}
+            >
+              {language === "zh" ? ChinText : EngText}
+            </ReactMarkdown>
+          </Paper>
+        </Fragment>
       ))}
     </Paper>
   );
@@ -88,10 +94,16 @@ const xmlToJson = (root: Document): NoticeType[] => {
             .replace("下午", "PM")
             .replace("上午", "AM");
         } else {
-          acc[node.tagName as keyof NoticeType] = node.textContent.replace(
-            /\n/g,
-            "\n\n"
-          );
+          acc[node.tagName as keyof NoticeType] = node.textContent
+            .replace(/\n/g, "\n\n")
+            .replace(
+              /詳情請參看: 特別交通消息網頁。/g,
+              "詳情請參看: [特別交通消息網頁](https://www.td.gov.hk/tc/special_news/spnews.htm)。"
+            )
+            .replace(
+              /For more details, please visit: Special Traffic News Page./g,
+              "For more details, please visit: [Special Traffic News Page](https://www.td.gov.hk/en/special_news/spnews.htm)."
+            );
         }
         return acc;
       }, {} as NoticeType)