refactor: move useRecentSessionHistory to a separate file

lablup · Oct 21, 2024 · 39b99a9 · 39b99a9
1 parent 9ea769d
commit 39b99a9
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 58 deletions.
diff --git a/react/src/components/SessionTemplateModal.tsx b/react/src/components/SessionTemplateModal.tsx
@@ -1,5 +1,5 @@
 import { useBackendAIImageMetaData } from '../hooks';
-import { useRecentSessionHistory } from '../hooks/backendai';
+import { useRecentSessionHistory } from '../hooks/useRecentSessionHistory';
 import {
   ResourceNumbersOfSession,
   SessionLauncherFormValue,

diff --git a/react/src/hooks/backendai.tsx b/react/src/hooks/backendai.tsx
@@ -1,16 +1,10 @@
 import { useSuspendedBackendaiClient, useUpdatableState } from '.';
-import {
-  generateRandomString,
-  maskString,
-  useBaiSignedRequestWithPromise,
-} from '../helper';
+import { maskString, useBaiSignedRequestWithPromise } from '../helper';
 import {
   useSuspenseTanQuery,
   useTanMutation,
   useTanQuery,
 } from './reactQueryAlias';
-import { SessionHistory, useBAISettingUserState } from './useBAISetting';
-import { useEventNotStable } from './useEventNotStable';
 import _ from 'lodash';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
@@ -310,43 +304,3 @@ export const useAllowedHostNames = () => {
   });
   return allowedHosts?.allowed;
 };
-
-export const useRecentSessionHistory = () => {
-  const [recentSessionHistory, setRecentSessionHistory] =
-    useBAISettingUserState('recentSessionHistory');
-
-  const push = useEventNotStable(
-    ({
-      id,
-      params,
-      createdAt,
-    }: SelectivePartial<SessionHistory, 'id' | 'createdAt'>) => {
-      const newHistory: SessionHistory = {
-        id: id ?? generateRandomString(8),
-        params,
-        createdAt: createdAt ?? new Date().toISOString(),
-      };
-      // push new history to the top of recentSessionHistory and keep it up to 5
-      const newRecentSessionHistory = [
-        newHistory,
-        ...(recentSessionHistory || []),
-      ].slice(0, 5);
-      setRecentSessionHistory(newRecentSessionHistory);
-    },
-  );
-  const clear = useEventNotStable(() => setRecentSessionHistory([]));
-  const remove = useEventNotStable((id: string) => {
-    const newRecentSessionHistory = (recentSessionHistory || []).filter(
-      (item) => item.id !== id,
-    );
-    setRecentSessionHistory(newRecentSessionHistory);
-  });
-  return [
-    recentSessionHistory,
-    {
-      push,
-      clear,
-      remove,
-    },
-  ] as const;
-};
diff --git a/react/src/hooks/useRecentSessionHistory.tsx b/react/src/hooks/useRecentSessionHistory.tsx
@@ -0,0 +1,43 @@
+import { generateRandomString } from '../helper';
+import { SessionHistory, useBAISettingUserState } from './useBAISetting';
+import { useEventNotStable } from './useEventNotStable';
+
+export const useRecentSessionHistory = () => {
+  const [recentSessionHistory, setRecentSessionHistory] =
+    useBAISettingUserState('recentSessionHistory');
+
+  const push = useEventNotStable(
+    ({
+      id,
+      params,
+      createdAt,
+    }: SelectivePartial<SessionHistory, 'id' | 'createdAt'>) => {
+      const newHistory: SessionHistory = {
+        id: id ?? generateRandomString(8),
+        params,
+        createdAt: createdAt ?? new Date().toISOString(),
+      };
+      // push new history to the top of recentSessionHistory and keep it up to 5
+      const newRecentSessionHistory = [
+        newHistory,
+        ...(recentSessionHistory || []),
+      ].slice(0, 5);
+      setRecentSessionHistory(newRecentSessionHistory);
+    },
+  );
+  const clear = useEventNotStable(() => setRecentSessionHistory([]));
+  const remove = useEventNotStable((id: string) => {
+    const newRecentSessionHistory = (recentSessionHistory || []).filter(
+      (item) => item.id !== id,
+    );
+    setRecentSessionHistory(newRecentSessionHistory);
+  });
+  return [
+    recentSessionHistory,
+    {
+      push,
+      clear,
+      remove,
+    },
+  ] as const;
+};
diff --git a/react/src/pages/SessionLauncherPage.tsx b/react/src/pages/SessionLauncherPage.tsx
@@ -46,12 +46,10 @@ import {
   useUpdatableState,
   useWebUINavigate,
 } from '../hooks';
-import {
-  useCurrentUserRole,
-  useRecentSessionHistory,
-} from '../hooks/backendai';
+import { useCurrentUserRole } from '../hooks/backendai';
 import { useSetBAINotification } from '../hooks/useBAINotification';
 import { useCurrentProjectValue } from '../hooks/useCurrentProject';
+import { useRecentSessionHistory } from '../hooks/useRecentSessionHistory';
 import { useThemeMode } from '../hooks/useThemeMode';
 // @ts-ignore
 import customCSS from './SessionLauncherPage.css?raw';
@@ -296,11 +294,7 @@ const SessionLauncherPage = () => {
   }, []);
 
   const mergedInitialValues = useMemo(() => {
-    return _.merge(
-      {},
-      INITIAL_FORM_VALUES,
-      formValuesFromQueryParams,
-    );
+    return _.merge({}, INITIAL_FORM_VALUES, formValuesFromQueryParams);
   }, [INITIAL_FORM_VALUES, formValuesFromQueryParams]);
 
   // ScrollTo top when step is changed
@@ -685,7 +679,7 @@ const SessionLauncherPage = () => {
                 style={{ paddingRight: 0, paddingLeft: 0 }}
                 onClick={() => toggleIsOpenTemplateModal()}
               >
-                {t('session.launcher.TemplateAndHistory')}
+                {t('session.launcher.RecentHistory')}
               </Button>
             </Flex>
           </Flex>