From f7325444370ceec3603c6d85f5b0d355fbb0b102 Mon Sep 17 00:00:00 2001
From: SuperTurk <alim@refty.co>
Date: Thu, 18 Jan 2024 13:17:38 +0100
Subject: [PATCH] fix: Tasklist flick (#676)

---
 frontend/package.json                         |  6 ++---
 .../molecules/tasklist/TaskList.tsx           | 25 ++++++++++++++-----
 libs/react-client/src/api/hooks/api.ts        |  2 +-
 3 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 09dbdb8cad..73abf2ff00 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -12,8 +12,8 @@
     "format": "prettier src/**/*.{ts,tsx} --write --loglevel error"
   },
   "dependencies": {
-    "@chainlit/react-components": "workspace:^",
     "@chainlit/react-client": "workspace:^",
+    "@chainlit/react-components": "workspace:^",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.14.9",
@@ -24,13 +24,13 @@
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "sonner": "^1.2.3",
     "react-hotkeys-hook": "^4.4.1",
     "react-i18next": "^14.0.0",
     "react-router-dom": "^6.15.0",
     "react-speech-recognition": "^3.10.0",
     "recoil": "^0.7.7",
     "regenerator-runtime": "^0.14.0",
+    "sonner": "^1.2.3",
     "usehooks-ts": "^2.9.1",
     "uuid": "^9.0.0",
     "yup": "^1.2.0"
@@ -46,4 +46,4 @@
     "vite": "^4.4.9",
     "vite-tsconfig-paths": "^4.2.0"
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/molecules/tasklist/TaskList.tsx b/frontend/src/components/molecules/tasklist/TaskList.tsx
index e0b4d55ab3..5ec6630ab9 100644
--- a/frontend/src/components/molecules/tasklist/TaskList.tsx
+++ b/frontend/src/components/molecules/tasklist/TaskList.tsx
@@ -1,8 +1,9 @@
-import { useFetch } from 'usehooks-ts';
+import { apiClient } from 'api';
+import { useMemo } from 'react';
 
 import { Box, Chip, List, Theme, useTheme } from '@mui/material';
 
-import { useChatData } from '@chainlit/react-client';
+import { useApi, useChatData } from '@chainlit/react-client';
 import { grey } from '@chainlit/react-components/theme';
 
 import { Translator } from 'components/i18n';
@@ -56,13 +57,25 @@ const TaskList = ({ isMobile }: { isMobile: boolean }) => {
 
   const tasklist = tasklists[tasklists.length - 1];
 
-  const url = tasklist?.url;
-
-  const { data, error } = useFetch(url);
+  // We remove the base URL since the useApi hook is already set with a base URL.
+  // This ensures we only pass the relative path and search parameters to the hook.
+  const url = useMemo(() => {
+    if (!tasklist?.url) return null;
+    const parsedUrl = new URL(tasklist.url);
+    return parsedUrl.pathname + parsedUrl.search;
+  }, [tasklist?.url]);
+
+  const { isLoading, error, data } = useApi<ITaskList>(
+    apiClient,
+    url ? url : null,
+    {
+      keepPreviousData: true
+    }
+  );
 
   if (!url) return null;
 
-  if (!data && !error) {
+  if (isLoading && !data) {
     return (
       <div>
         <Translator path="components.molecules.tasklist.TaskList.loading" />
diff --git a/libs/react-client/src/api/hooks/api.ts b/libs/react-client/src/api/hooks/api.ts
index 1aa765f6cb..cf4b64c538 100644
--- a/libs/react-client/src/api/hooks/api.ts
+++ b/libs/react-client/src/api/hooks/api.ts
@@ -15,7 +15,7 @@ const fetcher = async (
 
 function useApi<T>(
   client: ChainlitAPI,
-  path: string | null,
+  path?: string | null,
   options?: SWRConfiguration
 ) {
   const accessToken = useRecoilValue(accessTokenState);