소스 검색

Feat: Fixed the issue where the chat page would jump after entering the homepage #3221 (#7616)

### What problem does this PR solve?

Feat: Fixed the issue where the chat page would jump after entering the
homepage #3221
### Type of change


- [x] New Feature (non-breaking change which adds functionality)
tags/v0.19.0
balibabu 5 달 전
부모
커밋
b4cc37f3c1
No account linked to committer's email address

+ 4
- 5
web/src/components/chunk-method-dialog/dynamic-page-range.tsx 파일 보기

FormMessage, FormMessage,
} from '@/components/ui/form'; } from '@/components/ui/form';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
import { Plus, Trash2 } from 'lucide-react';
import { Plus, X } from 'lucide-react';
import { useFieldArray, useFormContext } from 'react-hook-form'; import { useFieldArray, useFormContext } from 'react-hook-form';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Separator } from '../ui/separator'; import { Separator } from '../ui/separator';
</FormItem> </FormItem>
)} )}
/> />
<Trash2
className="cursor-pointer mx-3 size-4 text-colors-text-functional-danger"
onClick={() => remove(index)}
/>
<Button variant={'ghost'} onClick={() => remove(index)}>
<X />
</Button>
</div> </div>
); );
})} })}

+ 1
- 3
web/src/components/confirm-delete-dialog.tsx 파일 보기

AlertDialogTitle, AlertDialogTitle,
AlertDialogTrigger, AlertDialogTrigger,
} from '@/components/ui/alert-dialog'; } from '@/components/ui/alert-dialog';
import { Trash2 } from 'lucide-react';
import { PropsWithChildren } from 'react'; import { PropsWithChildren } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';


{t('common.cancel')} {t('common.cancel')}
</AlertDialogCancel> </AlertDialogCancel>
<AlertDialogAction <AlertDialogAction
className="bg-colors-background-functional-solid-danger text--colors-text-neutral-strong"
className="bg-text-delete-red text-text-title"
onClick={onOk} onClick={onOk}
> >
<Trash2 />
{t('common.ok')} {t('common.ok')}
</AlertDialogAction> </AlertDialogAction>
</AlertDialogFooter> </AlertDialogFooter>

+ 77
- 0
web/src/hooks/use-chat-request.ts 파일 보기

import { ChatSearchParams } from '@/constants/chat';
import { IDialog } from '@/interfaces/database/chat';
import chatService from '@/services/chat-service';
import { useQuery } from '@tanstack/react-query';
import { useCallback, useMemo } from 'react';
import { history, useSearchParams } from 'umi';

export const useGetChatSearchParams = () => {
const [currentQueryParameters] = useSearchParams();

return {
dialogId: currentQueryParameters.get(ChatSearchParams.DialogId) || '',
conversationId:
currentQueryParameters.get(ChatSearchParams.ConversationId) || '',
isNew: currentQueryParameters.get(ChatSearchParams.isNew) || '',
};
};

export const useClickDialogCard = () => {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [_, setSearchParams] = useSearchParams();

const newQueryParameters: URLSearchParams = useMemo(() => {
return new URLSearchParams();
}, []);

const handleClickDialog = useCallback(
(dialogId: string) => {
newQueryParameters.set(ChatSearchParams.DialogId, dialogId);
// newQueryParameters.set(
// ChatSearchParams.ConversationId,
// EmptyConversationId,
// );
setSearchParams(newQueryParameters);
},
[newQueryParameters, setSearchParams],
);

return { handleClickDialog };
};

export const useFetchDialogList = (pureFetch = false) => {
const { handleClickDialog } = useClickDialogCard();
const { dialogId } = useGetChatSearchParams();

const {
data,
isFetching: loading,
refetch,
} = useQuery<IDialog[]>({
queryKey: ['fetchDialogList'],
initialData: [],
gcTime: 0,
refetchOnWindowFocus: false,
queryFn: async (...params) => {
console.log('🚀 ~ queryFn: ~ params:', params);
const { data } = await chatService.listDialog();

if (data.code === 0) {
const list: IDialog[] = data.data;
if (!pureFetch) {
if (list.length > 0) {
if (list.every((x) => x.id !== dialogId)) {
handleClickDialog(data.data[0].id);
}
} else {
history.push('/chat');
}
}
}

return data?.data ?? [];
},
});

return { data, loading, refetch };
};

+ 2
- 2
web/src/pages/home/chat-list.tsx 파일 보기

import { useFetchNextDialogList } from '@/hooks/chat-hooks';
import { useFetchDialogList } from '@/hooks/use-chat-request';
import { ApplicationCard } from './application-card'; import { ApplicationCard } from './application-card';


export function ChatList() { export function ChatList() {
const { data } = useFetchNextDialogList();
const { data } = useFetchDialogList(true);


return data return data
.slice(0, 10) .slice(0, 10)

Loading…
취소
저장