feat: fetch latest tag and show in footer

src/components/layout/footer.tsx

@@ -1,5 +1,7 @@
 import Link from 'next/link';
 
+import { useConfigStore } from 'fpp/store/config.store';
+
 const links = [
   {
     url: '/analytics',
@@ -16,6 +18,8 @@ const links = [
 ];
 
 export function Footer() {
+  const latestTag = useConfigStore((state) => state.latestTag);
+
   return (
     <footer>
       <div className="pointer-events-none fixed bottom-0 z-40 block min-h-[50px] min-w-full bg-[#121314] sm:min-h-[30px]" />
@@ -28,6 +32,14 @@ export function Footer() {
           >
             free-planning-poker.com
           </Link>{' '}
+          <a
+            href="https://github.com/jkrumm/free-planning-poker/releases"
+            target="_blank"
+            className="pr-0.5 text-[#C1C2C5] no-underline visited:text-[#C1C2C5] hover:text-[#1971c2] cursor-pointer"
+            rel="noopener noreferrer"
+          >
+            {latestTag}
+          </a>{' '}
           is licensed under{' '}
           <Link
             href="/imprint#license"

src/constants/logging.constant.ts

@@ -12,5 +12,6 @@ export const logEndpoint = {
   TRACK_ESTIMATION: 'TRACK_ESTIMATION',
   ABLY_TOKEN: 'ABLY_TOKEN',
   GET_ROOMS: 'GET_ROOMS',
+  GET_LATEST_TAG: 'GET_LATEST_TAG',
   GET_FEATURE_FLAGS: 'GET_FEATURE_FLAGS',
 } as const;

src/pages/_app.tsx

@@ -13,11 +13,13 @@ import 'normalize.css/normalize.css';
 import { AxiomWebVitals } from 'next-axiom';
 
 import { api } from 'fpp/utils/api';
-import { FeatureFlagLoaderUtil } from 'fpp/utils/feature-flag-loader.util';
+import { useConfigLoader } from 'fpp/utils/config-loader.hook';
 
 // const theme = createTheme({});
 
 const MyApp: AppType = ({ Component, pageProps: { ...pageProps } }) => {
+  useConfigLoader();
+
   return (
     <MantineProvider
       // withNormalizeCSS
@@ -32,7 +34,6 @@ const MyApp: AppType = ({ Component, pageProps: { ...pageProps } }) => {
     >
       <Suspense fallback={<></>}>
         <AxiomWebVitals />
-        <FeatureFlagLoaderUtil />
         <Notifications position="top-right" />
       </Suspense>
       <main className={GeistSans.className}>

src/pages/contact.tsx

@@ -20,7 +20,7 @@ import { useLogger } from 'next-axiom';
 import { api } from 'fpp/utils/api';
 import { sendTrackEvent } from 'fpp/utils/send-track-event.util';
 
-import { useFeatureFlagStore } from 'fpp/store/feature-flag.store';
+import { useConfigStore } from 'fpp/store/config.store';
 import { useLocalstorageStore } from 'fpp/store/local-storage.store';
 
 import { EventType, FeatureFlagType, RouteType } from 'fpp/server/db/schema';
@@ -34,7 +34,7 @@ const Contact: NextPage = () => {
   const logger = useLogger().with({ route: RouteType.CONTACT });
   useTrackPageView(RouteType.CONTACT, logger);
 
-  const activeFeatureFlags = useFeatureFlagStore(
+  const activeFeatureFlags = useConfigStore(
     (state) => state.activeFeatureFlags,
   );
 

src/store/feature-flag.store.ts → src/store/config.store.ts

@@ -2,7 +2,9 @@ import { create } from 'zustand';
 
 import { FeatureFlagType } from 'fpp/server/db/schema';
 
-type FeatureFlagStore = {
+type ConfigStore = {
+  latestTag: string;
+  setLatestTag: (tag: string) => void;
   featureFlags: {
     name: keyof typeof FeatureFlagType;
     enabled: boolean;
@@ -16,7 +18,9 @@ type FeatureFlagStore = {
   activeFeatureFlags: string[];
 };
 
-export const useFeatureFlagStore = create<FeatureFlagStore>((set, get) => ({
+export const useConfigStore = create<ConfigStore>((set, get) => ({
+  latestTag: '2.0.0',
+  setLatestTag: (tag: string) => set({ latestTag: tag }),
   featureFlags: Object.keys(FeatureFlagType).map((name) => ({
     name: name as keyof typeof FeatureFlagType,
     enabled: false,

src/utils/config-loader.hook.ts

@@ -0,0 +1,47 @@
+import * as Sentry from '@sentry/nextjs';
+
+import { logEndpoint } from 'fpp/constants/logging.constant';
+
+import { api } from 'fpp/utils/api';
+
+import { useConfigStore } from 'fpp/store/config.store';
+
+import { FeatureFlagType } from 'fpp/server/db/schema';
+
+export const useConfigLoader = () => {
+  const setFeatureFlags = useConfigStore((state) => state.setFeatureFlags);
+
+  const { data: featureFlags, status } =
+    api.featureFlag.getFeatureFlags.useQuery(undefined, {
+      staleTime: Infinity,
+      refetchOnMount: false,
+      refetchOnWindowFocus: false,
+      retry: false,
+    });
+
+  if (status === 'success') {
+    setFeatureFlags(featureFlags);
+  } else {
+    setFeatureFlags(
+      Object.keys(FeatureFlagType).map((name) => ({
+        name: name as keyof typeof FeatureFlagType,
+        enabled: false,
+      })),
+    );
+  }
+
+  const setLatestTag = useConfigStore((state) => state.setLatestTag);
+
+  fetch('https://api.github.com/repos/jkrumm/free-planning-poker/tags')
+    .then((res) => res.json())
+    .then((res: { name: string }[]) => {
+      setLatestTag(res[0]!.name);
+    })
+    .catch((e) => {
+      Sentry.captureException(e, {
+        tags: {
+          endpoint: logEndpoint.GET_LATEST_TAG,
+        },
+      });
+    });
+};