fix: update chatbot to be a query-client (#199)

* fix: update chatbot to be a mutation using query-client

* fix: update code formatting to match prettier

* fix: update usePostAppAction's first setQueryData to be an array
- This changes assure to have an array as prevData and solve the s.some is not a function error

* Update setQueryData of appAction.ts

- Wrap the newData into an array if prevData is null
- Add some comments

Co-authored-by: Basile Spaenlehauer <[email protected]>

---------

Co-authored-by: Basile Spaenlehauer <[email protected]>

Author: ReidyT

.gitignore

@@ -19,5 +19,5 @@ yarn-error.log
 
 # editors
 .idea/
-
 .DS_Store
+.env.*

src/api/chatBot.ts

@@ -0,0 +1,23 @@
+import { ChatBotMessage } from '@graasp/sdk';
+
+import { ApiData, ChatBotCompletion } from 'src/types';
+
+import configureAxios from './axios';
+import { buildPostChatBotRoute } from './routes';
+
+const axios = configureAxios();
+
+export const postChatBot = (
+  args: ApiData & {
+    body: ChatBotMessage[];
+  },
+) => {
+  const { token, itemId, apiHost, body } = args;
+  return axios
+    .post<ChatBotCompletion>(`${apiHost}/${buildPostChatBotRoute(itemId)}`, body, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    })
+    .then(({ data }) => data);
+};

src/api/index.ts

@@ -3,3 +3,4 @@ export * from './appData';
 export * from './appAction';
 export * from './appSetting';
 export * from './mocks';
+export * from './chatBot';

src/hooks/index.ts

@@ -5,13 +5,11 @@ import configureAppActionHooks from './appAction';
 import configureAppDataHooks from './appData';
 import configureAppSettingHooks from './appSetting';
 import configurePostMessageHooks from './postMessage';
-import { useChatbotApi } from './useChatbotApi';
 
 export default (queryConfig: QueryClientConfig, websocketClient?: WebsocketClient) => ({
   ...configureAppsHooks(queryConfig),
   ...configureAppDataHooks(queryConfig, websocketClient),
   ...configurePostMessageHooks(queryConfig),
   ...configureAppSettingHooks(queryConfig, websocketClient),
   ...configureAppActionHooks(queryConfig, websocketClient),
-  useChatbotApi,
 });

src/hooks/useChatbotApi.tsx

@@ -27,7 +27,8 @@ export default (queryConfig: QueryClientConfig) => {
           const newData: AppAction = newAppAction;
           // check that the websocket event has not already been received and therefore the data were added
           if (!prevData) {
-            queryClient.setQueryData(key, newData);
+            // we need to wrap the created appAction in an array because the cache key will receive all the actions but the post call only return the current posted data
+            queryClient.setQueryData<AppAction[]>(key, [newData]);
           } else if (!prevData.some((a) => a.id === newData.id)) {
             queryClient.setQueryData(key, [...(prevData ?? []), newData]);
           }

src/mutations/appAction.ts

@@ -0,0 +1,34 @@
+import { ChatBotMessage } from '@graasp/sdk';
+
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import * as Api from '../api';
+import { getApiHost, getDataOrThrow } from '../config/utils';
+import { postChatBotRoutine } from '../routines';
+import { QueryClientConfig } from '../types';
+
+export default (queryConfig: QueryClientConfig) => {
+  const { notifier } = queryConfig;
+
+  const usePostChatBot = () => {
+    const queryClient = useQueryClient();
+    return useMutation(
+      async (payload: ChatBotMessage[]) => {
+        const apiHost = getApiHost(queryClient);
+        const data = getDataOrThrow(queryClient);
+
+        return Api.postChatBot({ ...data, body: payload, apiHost });
+      },
+      {
+        onError: (error: Error) => {
+          notifier?.({
+            type: postChatBotRoutine.FAILURE,
+            payload: { error },
+          });
+        },
+      },
+    );
+  };
+
+  return { usePostChatBot };
+};

src/mutations/chatBot.ts

@@ -2,12 +2,13 @@ import { QueryClientConfig } from '../types';
 import appActionMutations from './appAction';
 import appMutations from './appData';
 import appSettingMutations from './appSetting';
+import chatBotMutations from './chatBot';
 
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 const configureMutations = (queryConfig: QueryClientConfig) => ({
   ...appMutations(queryConfig),
   ...appSettingMutations(queryConfig),
   ...appActionMutations(queryConfig),
+  ...chatBotMutations(queryConfig),
 });
 
 export default configureMutations;

src/mutations/index.ts

@@ -0,0 +1,3 @@
+import createRoutine from './utils';
+
+export const postChatBotRoutine = createRoutine('POST_CHAT_BOT');

src/routines/chatBot.ts

@@ -2,3 +2,4 @@ export * from './appData';
 export * from './appSetting';
 export * from './appAction';
 export * from './postMessage';
+export * from './chatBot';

src/routines/index.ts

@@ -107,4 +107,7 @@ export interface Database {
   items: DiscriminatedItem[];
 }
 
-export type UserDataType = { [key: string]: unknown };
+export type ChatBotCompletion = {
+  completion: string;
+  model: string;
+};