refactor: use mutation from apps query client

Author: kim

package.json

@@ -14,7 +14,7 @@
     "@codemirror/lang-javascript": "6.2.4",
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.1",
-    "@graasp/apps-query-client": "3.8.0",
+    "@graasp/apps-query-client": "github:graasp/graasp-apps-query-client#upload-app-setting",
     "@graasp/sdk": "5.16.5",
     "@graasp/ui": "5.5.4",
     "@mui/icons-material": "6.5.0",

src/modules/settings/chatbot/ChatbotAvatarEditor.tsx

@@ -8,16 +8,10 @@ import {
   styled,
 } from '@mui/material';
 
-import { useLocalContext } from '@graasp/apps-query-client';
-
-import { useMutation } from '@tanstack/react-query';
-import axios from 'axios';
 import { PenIcon } from 'lucide-react';
 
 import { CHATBOT_THUMBNAIL_APP_SETTING_NAME } from '@/config/appSetting';
-import { API_ROUTES, hooks } from '@/config/queryClient';
-
-const { buildUploadAppSettingFilesRoute } = API_ROUTES;
+import { hooks, mutations } from '@/config/queryClient';
 
 const VisuallyHiddenInput = styled('input')({
   clip: 'rect(0 0 0 0)',
@@ -40,45 +34,10 @@ const EditButton = styled(IconButton)(() => ({
   },
 }));
 
-export const useUploadThumbnail = () => {
-  const { itemId, apiHost } = useLocalContext();
-  const { data: token } = hooks.useAuthToken(itemId);
-  return useMutation({
-    mutationFn: async (args: { file: Blob }) => {
-      const payload = new FormData();
-
-      /* WARNING: this file field needs to be the last one,
-       * otherwise the normal fields can not be read
-       * https://github.com/fastify/fastify-multipart?tab=readme-ov-file#usage
-       */
-      payload.append('name', CHATBOT_THUMBNAIL_APP_SETTING_NAME);
-      payload.append('files', args.file);
-
-      await axios.post(
-        `${apiHost}/${buildUploadAppSettingFilesRoute(itemId)}`,
-        payload,
-        {
-          //   formData: true,
-          //   allowedMetaFields: ['name'],
-          headers: {
-            'Content-Type': 'multipart/form-data',
-            authorization: `Bearer ${token}`,
-          },
-        },
-      );
-    },
-    onSuccess: () => {
-      console.debug('success');
-    },
-    onError: (error: Error) => {
-      console.error(error);
-    },
-  });
-};
-
 export function ChatbotAvatarEditor() {
   const fileInput = useRef<HTMLInputElement>(null);
-  const { mutate: uploadThumbnail, isPending } = useUploadThumbnail();
+  const { mutate: uploadThumbnail, isPending } =
+    mutations.useUploadAppSettingFile();
   const { data: appSettings } = hooks.useAppSettings({
     name: CHATBOT_THUMBNAIL_APP_SETTING_NAME,
   });
@@ -92,7 +51,10 @@ export function ChatbotAvatarEditor() {
 
   const onChange: ChangeEventHandler<HTMLInputElement> = (e) => {
     if (e.target.files) {
-      uploadThumbnail({ file: e.target.files[0] });
+      uploadThumbnail({
+        file: e.target.files[0],
+        name: CHATBOT_THUMBNAIL_APP_SETTING_NAME,
+      });
     }
   };
 

yarn.lock

@@ -2351,9 +2351,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graasp/apps-query-client@npm:3.8.0":
+"@graasp/apps-query-client@github:graasp/graasp-apps-query-client#upload-app-setting":
   version: 3.8.0
-  resolution: "@graasp/apps-query-client@npm:3.8.0"
+  resolution: "@graasp/apps-query-client@https://github.com/graasp/graasp-apps-query-client.git#commit=eb2e6ca2b6b615c06560dfc8a1560347c78cd8f7"
   dependencies:
     "@emotion/react": "npm:11.14.0"
     "@emotion/styled": "npm:11.14.1"
@@ -2375,7 +2375,7 @@ __metadata:
     date-fns: ^3.3.0 || ^4.0.0
     react: ^18.0.0 || ^19.0.0
     react-dom: ^18.0.0 || ^19.0.0
-  checksum: 10/1778df7c7d5bb9722b97fa014f12553dd0c09b511c138ca3185fa1dbb97a93d62f2d40f650fde73d7be61e61d549bbd14553dddc6f9b49698399dfc66229a266
+  checksum: 10/fc2f6658f6f5d53872adb6aac2747a98f4de0b81afeb6b9c7f5c6a06132438f5ba857e8ac785b7fd3017f5d2610cee8673f29140c6555f48e31620a456f8593d
   languageName: node
   linkType: hard
 
@@ -7753,7 +7753,7 @@ __metadata:
     "@eslint/compat": "npm:1.4.1"
     "@eslint/eslintrc": "npm:3.3.1"
     "@eslint/js": "npm:9.39.1"
-    "@graasp/apps-query-client": "npm:3.8.0"
+    "@graasp/apps-query-client": "github:graasp/graasp-apps-query-client#upload-app-setting"
     "@graasp/sdk": "npm:5.16.5"
     "@graasp/ui": "npm:5.5.4"
     "@mui/icons-material": "npm:6.5.0"