added centrifuge app updater

Author: derensdima22

src/hooks/useCentrifuge.ts

@@ -4,13 +4,28 @@ import { useAppStore } from '../store/useAppStore';import { refreshToken } from
 
 const VITE_APP_CENTRIFUGE_SERVICE = import.meta.env.VITE_APP_CENTRIFUGE_SERVICE;
 
+type CounterType =
+  | 'counter_chats'
+  | 'counter_api_calls'
+  | 'counter_aitokens'
+  | 'counter_files'
+  | 'counter_transactions'
+  | 'counter_sessions'
+  | 'counter_registered';
+
+  interface CentrifugeData {
+    type: CounterType;
+    appId: string;
+  }
+
 export function useCentrifugeChannel() {
    const currentUser = useAppStore((s) => s.currentUser);
 
-  const [data, setData] = useState<Record<string, string | number>>();
+  const [data, setData] = useState<CentrifugeData>();
   const [connected, setConnected] = useState(false);
 
   const getToken = async () => {
+    console.log('[centrifuge] getToken CALLED!');
     const newTokens = await refreshToken();
 
     return newTokens.wsToken;

src/hooks/useCentrifugeAppUpdater.ts

@@ -0,0 +1,69 @@
+import { useEffect } from 'react';
+import { useCentrifugeChannel } from './useCentrifuge';
+import { ModelApp } from '../models';
+
+type CounterType =
+  | 'counter_chats'
+  | 'counter_api_calls'
+  | 'counter_aitokens'
+  | 'counter_files'
+  | 'counter_transactions'
+  | 'counter_sessions'
+  | 'counter_registered';
+
+interface CentrifugeData {
+  type: CounterType;
+  appId: string;
+}
+
+function capitalize(word: string): string {
+  return word.charAt(0).toUpperCase() + word.slice(1);
+}
+
+function updateStatsField(
+  setAppState: React.Dispatch<React.SetStateAction<ModelApp[]>>,
+  appId: string,
+  fields: Partial<Record<keyof ModelApp['stats'], number>>
+) {
+  setAppState((prev) =>
+    prev.map((app) =>
+      app._id === appId
+        ? {
+            ...app,
+            stats: Object.entries(fields).reduce((acc, [key, value]) => {
+              acc[key as keyof typeof acc] += value!;
+              return acc;
+            }, { ...app.stats }),
+          }
+        : app
+    )
+  );
+}
+
+export function useCentrifugeAppUpdater(
+  setAppState: React.Dispatch<React.SetStateAction<ModelApp[]>>
+) {
+  const { data } = useCentrifugeChannel();
+
+  useEffect(() => {
+    if (!data) return;
+
+    const { type, appId } = data as CentrifugeData;
+
+    if (!type.startsWith('counter_')) return;
+
+    const statBase = type.replace('counter_', '');
+    const statName = statBase
+      .split('_')
+      .map((part, i) => (i === 0 ? part : capitalize(part)))
+      .join('');
+
+    const totalKey = `total${capitalize(statName)}` as keyof ModelApp['stats'];
+    const recentlyKey = `recently${capitalize(statName)}` as keyof ModelApp['stats'];
+
+    updateStatsField(setAppState, appId, {
+      [totalKey]: 1,
+      [recentlyKey]: 1,
+    });
+  }, [data, setAppState]);
+}

src/pages/AdminApps.tsx

@@ -9,7 +9,7 @@ import { NewAppModal } from '../components/modal/NewAppModal';
 import { Sorting } from '../components/Sorting';
 import CsvButton from '../components/UI/Buttons/CSVButton.tsx';
 import { Pagination } from '../components/UI/Pagination/Pagination.tsx';
-import { useCentrifugeChannel } from '../hooks/useCentrifuge.ts';
+import { useCentrifugeAppUpdater } from '../hooks/useCentrifugeAppUpdater.ts';
 import { getExportAppsCsv, httpGetApps } from '../http';
 import { ModelApp, OrderByType } from '../models';
 import { useAppStore } from '../store/useAppStore';
@@ -28,8 +28,6 @@ export default function AdminApps() {
   const doSetApps = useAppStore((s) => s.doSetApps);
   const currentApp = useAppStore((s) => s.currentApp as ModelApp);
 
-  const { data } = useCentrifugeChannel();
-
   const limit = useMemo(
     () => Number(searchParams.get('limit')) || 5,
     [searchParams]
@@ -175,26 +173,28 @@ export default function AdminApps() {
     setAppState(apps);
   }, [apps]);
 
-  useEffect(() => {
-    if (!data) return;
-
-    if (data.type === 'counter_new_chats') {
-      setAppState((prev) =>
-        prev.map((app) =>
-          app._id === data.appId
-            ? {
-                ...app,
-                stats: {
-                  ...app.stats,
-                  totalChats: app.stats.totalChats + 1,
-                  recentlyChats: app.stats.recentlyChats + 1,
-                },
-              }
-            : app
-        )
-      );
-    }
-  }, [data]);
+  useCentrifugeAppUpdater(setAppState);
+
+  // useEffect(() => {
+  //   if (!data) return;
+
+  //   if (data.type === 'counter_chats') {
+  //     setAppState((prev) =>
+  //       prev.map((app) =>
+  //         app._id === data.appId
+  //           ? {
+  //               ...app,
+  //               stats: {
+  //                 ...app.stats,
+  //                 totalChats: app.stats.totalChats + 1,
+  //                 recentlyChats: app.stats.recentlyChats + 1,
+  //               },
+  //             }
+  //           : app
+  //       )
+  //     );
+  //   }
+  // }, [data]);
 
   return (
     <>
@@ -218,7 +218,7 @@ export default function AdminApps() {
                 )}
                 <button
                   onClick={() => setShowModal(true)}
-                  className="flex items-center justify-center sm:w-[40px] h-[40px] w-[60px] bg-brand-500 rounded-xl hover:bg-brand-darker text-white text-sm font-varela"
+                  className="flex items-center justify-center sm:w-full h-[40px] w-[60px] bg-brand-500 rounded-xl hover:bg-brand-darker text-white text-sm font-varela"
                 >
                   <IconAdd color="white" className="md:mr-2" />
                   <span className="hidden md:block">Create App</span>
@@ -234,13 +234,14 @@ export default function AdminApps() {
               <ApplicationStarterInf onClose={() => setShowStarterInf(false)} />
             )}
 
-            {appsState.map((app) => (
-              <ApplicationPreview
-                key={app._id}
-                app={app}
-                primaryColor={currentApp.primaryColor}
-              />
-            ))}
+            {appsState &&
+              appsState.map((app) => (
+                <ApplicationPreview
+                  key={app._id}
+                  app={app}
+                  primaryColor={currentApp.primaryColor}
+                />
+              ))}
 
             {currentUser?.isSuperAdmin && (
               <Pagination