feat: added release notes

Author: debater-coder

apps/client/RELEASE_NOTES.md

@@ -0,0 +1,5 @@
+You can open release notes by going to Settings -> About -> Release notes.
+
+## 1.9.8-beta
+
+- Added release notes

apps/client/src/components/ReleaseNotes/ReleaseNotes.tsx

@@ -0,0 +1,35 @@
+import releaseNotes from "../../../RELEASE_NOTES.md?raw";
+import {
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+} from "@chakra-ui/react";
+import { Prose } from "@nikolovlazar/chakra-ui-prose";
+import { micromark } from "micromark";
+
+type ReleaseNotesProps = {
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+export default function ReleaseNotes(props: ReleaseNotesProps) {
+  return (
+    <Modal {...props}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Release Notes</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <Prose>
+            <div
+              dangerouslySetInnerHTML={{ __html: micromark(releaseNotes) }}
+            />
+          </Prose>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+}

apps/client/src/components/ReleaseNotes/index.ts

@@ -1,4 +1,6 @@
+import { version } from "../../../package.json";
 import { BottomNav } from "../../components/BottomNav";
+import ReleaseNotes from "../../components/ReleaseNotes/ReleaseNotes";
 import Sidebar from "../../components/Sidebar";
 import { useAuthActions } from "../../services/UserInterface";
 import { useIsLoggedIn } from "../../stores/auth";
@@ -13,6 +15,7 @@ import {
   ModalBody,
   Button,
   Heading,
+  useDisclosure,
 } from "@chakra-ui/react";
 import { useEffect } from "react";
 import { Outlet, useNavigate } from "react-router-dom";
@@ -22,6 +25,19 @@ export default function Main() {
   const loggedIn = useIsLoggedIn();
   const { logout } = useAuthActions();
   const isLargerThanMd = useBreakpointValue({ base: false, md: true });
+  const { onOpen, isOpen, onClose } = useDisclosure();
+
+  useEffect(() => {
+    const storedVersion = localStorage.getItem("appVersion");
+
+    if (
+      storedVersion !== version &&
+      localStorage.getItem("consentedToWelcomeMessage")
+    ) {
+      onOpen();
+      localStorage.setItem("appVersion", version);
+    }
+  });
 
   useEffect(() => {
     if (!loggedIn) {
@@ -92,6 +108,7 @@ export default function Main() {
           </ModalContent>
         </Modal>
       </Flex>
+      <ReleaseNotes onClose={onClose} isOpen={isOpen} />
     </>
   );
 }

apps/client/src/routes/Main/Main.tsx

@@ -1,4 +1,5 @@
 import { version } from "../../../../package.json";
+import ReleaseNotes from "../../../components/ReleaseNotes/ReleaseNotes";
 import { ExternalLinkIcon } from "@chakra-ui/icons";
 import {
   Accordion,
@@ -7,12 +8,16 @@ import {
   AccordionItem,
   AccordionPanel,
   Box,
+  Button,
   Heading,
   Link,
   Text,
+  useDisclosure,
 } from "@chakra-ui/react";
 
 export default function About() {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
   return (
     <>
       <Heading size={"sm"} fontFamily="Poppins, sans-serif">
@@ -22,6 +27,10 @@ export default function About() {
         Timetabl is a blazing fast, offline-enabled, installable timetable app
         for SBHS.
       </Text>
+      <Button variant={"outline"} alignSelf={"flex-start"} onClick={onOpen}>
+        Release notes
+      </Button>
+      <ReleaseNotes isOpen={isOpen} onClose={onClose} />
       <Text>
         Source code can be found on Github{" "}
         <Link
@@ -57,9 +66,7 @@ export default function About() {
           </AccordionButton>
           <AccordionPanel>
             <Text whiteSpace="pre-line">
-              {
-                'Copyright (c) 2022 Hamzah Ahmed'
-              }
+              {"Copyright (c) 2022 Hamzah Ahmed"}
             </Text>
           </AccordionPanel>
         </AccordionItem>