Feat: Render dialog list #3221 (#9249)

### What problem does this PR solve?

Feat: Render dialog list #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/hooks/logic-hooks/navigate-hooks.ts

@@ -35,9 +35,12 @@ export const useNavigatePage = () => {
     navigate(Routes.Chats);
   }, [navigate]);
 
-  const navigateToChat = useCallback(() => {
-    navigate(Routes.Chat);
-  }, [navigate]);
+  const navigateToChat = useCallback(
+    (id: string) => () => {
+      navigate(`${Routes.Chat}/${id}`);
+    },
+    [navigate],
+  );
 
   const navigateToAgents = useCallback(() => {
     navigate(Routes.Agents);

web/src/hooks/use-chat-request.ts

@@ -1,9 +1,22 @@
+import message from '@/components/ui/message';
 import { ChatSearchParams } from '@/constants/chat';
 import { IDialog } from '@/interfaces/database/chat';
 import chatService from '@/services/chat-service';
-import { useQuery } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useDebounce } from 'ahooks';
 import { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { history, useSearchParams } from 'umi';
+import {
+  useGetPaginationWithRouter,
+  useHandleSearchChange,
+} from './logic-hooks';
+
+export const enum ChatApiAction {
+  FetchDialogList = 'fetchDialogList',
+  RemoveDialog = 'removeDialog',
+  SetDialog = 'setDialog',
+}
 
 export const useGetChatSearchParams = () => {
   const [currentQueryParameters] = useSearchParams();
@@ -42,13 +55,22 @@ export const useClickDialogCard = () => {
 export const useFetchDialogList = (pureFetch = false) => {
   const { handleClickDialog } = useClickDialogCard();
   const { dialogId } = useGetChatSearchParams();
+  const { searchString, handleInputChange } = useHandleSearchChange();
+  const { pagination, setPagination } = useGetPaginationWithRouter();
+  const debouncedSearchString = useDebounce(searchString, { wait: 500 });
 
   const {
     data,
     isFetching: loading,
     refetch,
   } = useQuery<IDialog[]>({
-    queryKey: ['fetchDialogList'],
+    queryKey: [
+      ChatApiAction.FetchDialogList,
+      {
+        debouncedSearchString,
+        ...pagination,
+      },
+    ],
     initialData: [],
     gcTime: 0,
     refetchOnWindowFocus: false,
@@ -73,5 +95,76 @@ export const useFetchDialogList = (pureFetch = false) => {
     },
   });
 
-  return { data, loading, refetch };
+  const onInputChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(
+    (e) => {
+      handleInputChange(e);
+    },
+    [handleInputChange],
+  );
+
+  return {
+    data,
+    loading,
+    refetch,
+    searchString,
+    handleInputChange: onInputChange,
+    pagination: { ...pagination, total: data?.total },
+    setPagination,
+  };
+};
+
+export const useRemoveDialog = () => {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+
+  const {
+    data,
+    isPending: loading,
+    mutateAsync,
+  } = useMutation({
+    mutationKey: [ChatApiAction.RemoveDialog],
+    mutationFn: async (dialogIds: string[]) => {
+      const { data } = await chatService.removeDialog({ dialogIds });
+      if (data.code === 0) {
+        queryClient.invalidateQueries({ queryKey: ['fetchDialogList'] });
+
+        message.success(t('message.deleted'));
+      }
+      return data.code;
+    },
+  });
+
+  return { data, loading, removeDialog: mutateAsync };
+};
+
+export const useSetDialog = () => {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+
+  const {
+    data,
+    isPending: loading,
+    mutateAsync,
+  } = useMutation({
+    mutationKey: [ChatApiAction.SetDialog],
+    mutationFn: async (params: IDialog) => {
+      const { data } = await chatService.setDialog(params);
+      if (data.code === 0) {
+        queryClient.invalidateQueries({
+          exact: false,
+          queryKey: ['fetchDialogList'],
+        });
+
+        queryClient.invalidateQueries({
+          queryKey: ['fetchDialog'],
+        });
+        message.success(
+          t(`message.${params.dialog_id ? 'modified' : 'created'}`),
+        );
+      }
+      return data?.code;
+    },
+  });
+
+  return { data, loading, setDialog: mutateAsync };
 };