feat(ui): api hooks for new org settings page

frontend/src/hooks/api/organization/queries.tsx

@@ -1,8 +1,8 @@
-import { useQuery } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 
 import { apiRequest } from '@app/config/request';
 
-import { Organization } from './types';
+import { Organization, RenameOrgDTO } from './types';
 
 const organizationKeys = {
   getUserOrganization: ['organization'] as const
@@ -16,3 +16,16 @@ const fetchUserOrganization = async () => {
 
 export const useGetOrganization = () =>
   useQuery({ queryKey: organizationKeys.getUserOrganization, queryFn: fetchUserOrganization });
+
+// mutation
+export const useRenameOrg = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, RenameOrgDTO>({
+    mutationFn: ({ newOrgName, orgId }) =>
+      apiRequest.patch(`/api/v1/organization/${orgId}/name`, { name: newOrgName }),
+    onSuccess: () => {
+      queryClient.invalidateQueries(organizationKeys.getUserOrganization);
+    }
+  });
+};