typescript changelog feature

Author: medyo

package.json

@@ -33,7 +33,8 @@
     "styled-components": "2",
     "timeago.js": "^4.0.2",
     "type-fest": "^1.2.0",
-    "web-vitals": "^0.2.4"
+    "web-vitals": "^0.2.4",
+    "zustand": "^4.1.3"
   },
   "proxy": "https://api.hackertab.dev/",
   "scripts": {
@@ -63,12 +64,10 @@
   },
   "devDependencies": {
     "@types/chrome": "^0.0.198",
+    "@types/jest": "^29.1.2",
     "@types/node": "^18.11.0",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
-    "@types/jest": "^29.1.2",
-    "prettier": "^2.7.1",
-    "typescript": "^4.8.4",
     "@typescript-eslint/eslint-plugin": "^5.40.1",
     "@typescript-eslint/parser": "^5.40.1",
     "eslint-config-airbnb": "19.0.4",
@@ -80,6 +79,8 @@
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.28.0",
-    "eslint-plugin-react-hooks": "^4.3.0"
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "prettier": "^2.7.1",
+    "typescript": "^4.8.4"
   }
 }

src/components/Changelog.js

@@ -9,7 +9,7 @@ import SettingsModal from '../settings/SettingsModal'
 import { BsMoon } from 'react-icons/bs'
 import { IoMdSunny } from 'react-icons/io'
 import { trackSearchEngineUse } from 'src/lib/analytics'
-import Changelog from './Changelog'
+import {Changelog} from 'src/features/changelog'
 import { GoSearch } from 'react-icons/go'
 
 function SearchBar({ state }) {

src/components/Header.js

@@ -0,0 +1,27 @@
+import { useQuery } from '@tanstack/react-query';
+import { ExtractFnReturnType, QueryConfig } from 'src/lib/react-query';
+import { Version } from "../types";
+import { axios } from 'src/lib/axios';
+
+const getAd = async (): Promise<Version[]> => {
+
+  return axios.get<Version[]>('https://api.github.com/repos/medyo/hackertab.dev/releases')
+  .then(response => {
+    const versions = response.data as unknown as Version[];
+    console.log("response.data", versions)
+    return versions
+  })
+}
+
+type QueryFnType = typeof getAd;
+
+type UseGetAdOptions = {
+  config?: QueryConfig<QueryFnType>;
+};
+export const useGetVersions = ({ config }: UseGetAdOptions = {}) => {
+  return useQuery<ExtractFnReturnType<QueryFnType>>({
+    ...config,
+    queryKey: ['versions'],
+    queryFn: () => getAd(),
+  });
+}

src/features/changelog/api/getVersions.ts

@@ -0,0 +1,74 @@
+import React, { useEffect, useState }  from 'react'
+import ReactTooltip from 'react-tooltip'
+import { HiBell } from 'react-icons/hi'
+import ReactMarkdown from 'react-markdown'
+import { format } from 'timeago.js'
+import BeatLoader from 'react-spinners/BeatLoader'
+import {useGetVersions} from "../api/getVersions";
+import {useChangelogStore} from "../stores/changelog";
+import {getAppVersion} from "src/utils/Os";
+
+export const Changelog = ()  => {
+  const tooltipId = 'tl-1'
+  const [tooltipOpen, setTooltipShown] = useState(false);
+  const {isLoading, isError, data: versions} = useGetVersions({
+    config: {
+      enabled: tooltipOpen
+    }
+  });
+
+  const {lastReadVersion, setVersionAsRead} = useChangelogStore();
+
+  const isChangelogRead = (): boolean => {
+    return lastReadVersion === getAppVersion();
+  }
+
+  useEffect(() => {
+    if (tooltipOpen) {
+      setVersionAsRead(getAppVersion())
+    }
+  }, [tooltipOpen, setVersionAsRead])
+
+  return (
+    <>
+      <ReactTooltip
+        id={tooltipId}
+        event="click"
+        scrollHide={false}
+        afterShow={() => {setTooltipShown(true)}}
+        place="bottom"
+        className="changelogTooltip scrollable"
+        globalEventOff="click">
+        {isLoading ? (
+          <div className="tooltipLoading">
+            <BeatLoader color={'#A9B2BD'} loading={isLoading} size={15} />
+          </div>
+        ) : isError || !versions.length ? (
+          <p className="tooltipErrorMsg">Failed to load the changelog</p>
+        ) : (
+          versions.map((item) => {
+            return (
+              <div key={item.name}>
+                <div className="tooltipHeader">
+                  <a className="tooltipVersion" onClick={() => window.open(item.html_url, '_blank')}>
+                    {item.name}
+                  </a>
+                  <span className="tooltipDate">{format(new Date(item.published_at))}</span>
+                </div>
+                <div className="tooltipContent">
+                  <ReactMarkdown children={item.body} />
+                </div>
+              </div>
+            )
+          })
+        )}
+      </ReactTooltip>
+      <span
+        data-tip
+        data-for={tooltipId}
+        className={'changelogButton' + (!isChangelogRead() ? ' active' : '')}>
+        <HiBell style={{ width: 14 }} />
+      </span>
+    </>
+  )
+}

src/features/changelog/components/Changelog.tsx

@@ -0,0 +1,2 @@
+export * from "./types"
+export * from "./components/Changelog"

src/features/changelog/index.ts

@@ -0,0 +1,17 @@
+import create from 'zustand';
+import { persist } from 'zustand/middleware'
+
+type ChangelogVersionStore = {
+  lastReadVersion: string | undefined | null;
+  setVersionAsRead: (versionName: string | undefined | null) => void;
+};
+
+export const useChangelogStore = create(persist<ChangelogVersionStore>((set) => ({
+    lastReadVersion: undefined,
+    setVersionAsRead: (versionName: string | undefined | null) =>
+    set(() => ({
+        lastReadVersion: versionName,
+    }))
+}),{
+  name: 'changelog_storage',
+}));

src/features/changelog/stores/changelog.ts

@@ -0,0 +1,6 @@
+export type Version = {
+    name: string;
+    published_at: string;
+    body: string;
+    html_url: string;
+}

src/features/changelog/types/index.ts

@@ -2,6 +2,7 @@ import AppStorage from '../services/localStorage';
 import { init, track, identify, Identify } from '@amplitude/analytics-browser'
 import { isDevelopment } from 'src/utils/Environment';
 import { ANALYTICS_SDK_KEY, ANALYTICS_ENDPOINT, LS_ANALYTICS_ID_KEY } from 'src/Constants'
+import {getAppVersion} from "src/utils/Os";
 
 enum Objects {
   PAGE = 'Page',
@@ -305,14 +306,7 @@ const getRandomUserId = () => {
   return userId
 }
 
-const getAppVersion = (): string | undefined => {
-  try {
-    var manifestData = chrome.runtime.getManifest()
-    return manifestData.version
-  } catch (e) {
-    return undefined
-  }
-}
+
 const getScreenResolution = (): string => {
   const realWidth = window.screen.width
   const realHeight = window.screen.height

src/lib/analytics.ts

@@ -2,7 +2,11 @@ import React from 'react'
 
 const PreferencesContext = React.createContext({
     userSelectedTags: [],
-    dispatcher: null
+    dispatcher: null,
+    changelogMeta: {
+        shown: false,
+        version: "",
+    }
 });