fix: enhance changelog functionality with version filtering and refactor state management

Author: medyo

src/features/changelog/api/getVersions.ts

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

src/features/changelog/components/Changelog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { HiSparkles } from 'react-icons/hi'
 import ReactMarkdown from 'react-markdown'
 import BeatLoader from 'react-spinners/BeatLoader'
@@ -8,6 +8,7 @@ import { getAppVersion } from 'src/utils/Os'
 import { format } from 'timeago.js'
 import { useGetVersions } from '../api/getVersions'
 import { useChangelogStore } from '../stores/changelog'
+import { isVersionLowerOrEqual } from '../utils/semver'
 
 export const Changelog = () => {
   const tooltipId = 'tl-1'
@@ -19,10 +20,15 @@ export const Changelog = () => {
   } = useGetVersions({
     config: {
       enabled: tooltipShown,
+      select: (data) => {
+        const currentVersion = getAppVersion()
+        if (!currentVersion) return data
+        return data.filter((item) => isVersionLowerOrEqual(item.name, currentVersion))
+      },
     },
   })
 
-  const { lastReadVersion, setVersionAsRead } = useChangelogStore()
+  const { lastReadVersion, markVersionAsRead } = useChangelogStore()
 
   const isChangelogRead = (): boolean => {
     return lastReadVersion === getAppVersion()
@@ -34,11 +40,31 @@ export const Changelog = () => {
       trackChangeLogOpen()
 
       if (currentVersion) {
-        setVersionAsRead(currentVersion)
+        markVersionAsRead(currentVersion)
       }
     }
-  }, [tooltipShown, setVersionAsRead])
+  }, [tooltipShown, markVersionAsRead])
 
+  const versionsMemo = useMemo(() => {
+    return (versions || []).map((item) => {
+      return (
+        <div key={item.name}>
+          <div className="tooltipHeader">
+            <a
+              href="/#"
+              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>
+      )
+    })
+  }, [versions])
   return (
     <>
       <ReactTooltip
@@ -58,24 +84,7 @@ export const Changelog = () => {
         ) : isError || !versions.length ? (
           <p className="tooltipErrorMsg">Failed to load the changelog</p>
         ) : (
-          versions.map((item) => {
-            return (
-              <div key={item.name}>
-                <div className="tooltipHeader">
-                  <a
-                    href="/#"
-                    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>
-            )
-          })
+          versionsMemo
         )}
       </ReactTooltip>
       <button

src/features/changelog/stores/changelog.ts

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

src/features/changelog/utils/semver.ts

@@ -0,0 +1,10 @@
+export const isVersionLowerOrEqual = (v1: string, v2: string) => {
+  const a = v1.replace(/^v/, '').split('.').map(Number)
+  const b = v2.replace(/^v/, '').split('.').map(Number)
+  for (let i = 0; i < Math.max(a.length, b.length); i++) {
+    const diff = (a[i] || 0) - (b[i] || 0)
+    if (diff < 0) return true // v1 < v2
+    if (diff > 0) return false // v1 > v2
+  }
+  return true // equal
+}