init

src/components/Announce/Announce.tsx

@@ -0,0 +1,61 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { Button } from "@mantine/core";
+import styles from "./Announce.module.css";
+import config from "../../config";
+
+const GITHUB_REPO = "howardchung/watchparty-announcements";
+
+type Issue = {
+  title: string;
+  body: string;
+  number: number;
+  updated_at: string;
+};
+const Announce = () => {
+  const [announcement, setAnnouncement] = useState<Issue | null>(null);
+  useEffect(() => {
+    const update = async () => {
+      const response = await fetch(
+        "https://api.github.com/search/issues?" +
+          new URLSearchParams({
+            q: `repo:${GITHUB_REPO} label:${
+              config.NODE_ENV === "development" ? "test" : "release"
+            }`,
+            order: "desc",
+            page: "1",
+            per_page: "1",
+          }),
+      );
+      const data: { items: Issue[] } = await response.json();
+      //   console.log(data);
+      const top = data?.items?.[0];
+      if (
+        top?.number > Number(localStorage.getItem("announcement-dismiss")) &&
+        new Date(top.updated_at) >
+          new Date(Date.now() - 7 * 24 * 60 * 60 * 1000)
+      ) {
+        setAnnouncement(top);
+      }
+    };
+    update();
+  }, []);
+
+  const onDismiss = useCallback((value: number) => {
+    localStorage.setItem("announcement-dismiss", value.toString());
+    setAnnouncement(null);
+  }, []);
+
+  return announcement != null ? (
+    <div className={styles.announce}>
+      {/* <h4>{announcement.title}</h4> */}
+      <pre style={{ whiteSpace: "pre-wrap" }}>{announcement.body}</pre>
+      <aside>
+        <Button color="blue" onClick={() => onDismiss(announcement.number)}>
+          Dismiss
+        </Button>
+      </aside>
+    </div>
+  ) : null;
+};
+
+export default Announce;