refactor(ManageDittoServer): remove getDittoInstance, use useInstanceV2 instead

src/features/admin/hooks/useManageDittoServer.ts

@@ -1,42 +1,20 @@
-import { useMutation, useQuery } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
 
 import { DittoInstanceCredentials } from 'soapbox/features/admin/manage-ditto-server.tsx';
 import { useApi } from 'soapbox/hooks/useApi.ts';
 import { queryClient } from 'soapbox/queries/client.ts';
-import { instanceV2Schema } from 'soapbox/schemas/instance.ts';
 
 function useManageDittoServer() {
   const api = useApi();
 
-  const getDittoInstance = async () => {
-    const response = await api.get('/api/v2/instance');
-    const data: DittoInstanceCredentials = await response.json();
-
-    const instance = instanceV2Schema.parse(data);
-    return {
-      title: instance.title,
-      description: instance.description,
-      short_description: instance.short_description,
-      screenshots: instance.screenshots,
-      thumbnail: instance.thumbnail,
-    };
-  };
-
-  const result = useQuery<Readonly<DittoInstanceCredentials>>({
-    queryKey: ['DittoInstance'],
-    queryFn: getDittoInstance,
-  });
-
-
   const { mutate: updateDittoInstance } = useMutation({
     mutationFn: (data: DittoInstanceCredentials) => api.put('/api/v1/admin/ditto/instance', data),
     onSuccess: () => {
-      queryClient.refetchQueries({ queryKey: ['DittoInstance'] });
+      queryClient.refetchQueries({ queryKey: ['instance', api.baseUrl, 'v2'] });
     },
   });
 
   return {
-    ...result,
     updateDittoInstance,
   };
 }

src/features/admin/manage-ditto-server.tsx

@@ -1,9 +1,10 @@
 import { AxiosError } from 'axios';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { uploadMedia } from 'soapbox/actions/media.ts';
 import { HTTPError } from 'soapbox/api/HTTPError.ts';
+import { useInstanceV2 } from 'soapbox/api/hooks/instance/useInstanceV2.ts';
 import StillImage from 'soapbox/components/still-image.tsx';
 import { Button } from 'soapbox/components/ui/button.tsx';
 import { Column } from 'soapbox/components/ui/column.tsx';
@@ -63,30 +64,19 @@ export interface DittoInstanceCredentials {
 const ManageDittoServer: React.FC = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
-  const { updateDittoInstance, data: dittoInstanceData } = useManageDittoServer();
+  const { updateDittoInstance } = useManageDittoServer();
+  const { instance } = useInstanceV2();
 
   const [data, setData] = useState<DittoInstanceCredentials>({
-    title: dittoInstanceData?.title ?? '',
+    title: instance?.title ?? '',
-    description: dittoInstanceData?.description ?? '',
+    description: instance?.description ?? '',
-    short_description: dittoInstanceData?.short_description ?? '',
+    short_description: instance?.short_description ?? '',
-    screenshots: dittoInstanceData?.screenshots ?? [],
+    screenshots: instance?.screenshots ?? [],
-    thumbnail: dittoInstanceData?.thumbnail ?? { url: '', versions: {} },
+    thumbnail: instance?.thumbnail ?? { url: '', versions: {} },
   });
 
   const [isThumbnailLoading, setThumbnailLoading] = useState<boolean>(false);
 
-  useEffect(() => {
-    if (dittoInstanceData) {
-      setData({
-        title: dittoInstanceData.title,
-        description: dittoInstanceData.description,
-        short_description: dittoInstanceData.short_description,
-        screenshots: dittoInstanceData.screenshots,
-        thumbnail: dittoInstanceData.thumbnail,
-      });
-    }
-  }, [dittoInstanceData]);
-
   const handleSubmit: React.FormEventHandler = async (event) => {
     event.preventDefault();
     updateDittoInstance(data, {