Refactor into component and use React Query

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

@@ -7,6 +7,7 @@ import {
   DeleteEnvironmentDTO,
   DeleteWorkspaceDTO,
   RenameWorkspaceDTO,
+  ToggleAutoCapitalizationDTO,
   UpdateEnvironmentDTO,
   Workspace
 } from './types';
@@ -17,7 +18,6 @@ const workspaceKeys = {
 
 const fetchUserWorkspaces = async () => {
   const { data } = await apiRequest.get<{ workspaces: Workspace[] }>('/api/v1/workspace');
-
   return data.workspaces;
 };
 
@@ -37,6 +37,18 @@ export const useRenameWorkspace = () => {
   });
 };
 
+export const useToggleAutoCapitalization = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, ToggleAutoCapitalizationDTO>({
+    mutationFn: ({ workspaceID, state }) =>
+      apiRequest.post(`/api/v2/workspace/${workspaceID}/settings`, { autoCapitalization: state }),
+    onSuccess: () => {
+      queryClient.invalidateQueries(workspaceKeys.getAllUserWorkspace);
+    }
+  });
+};
+
 export const useDeleteWorkspace = () => {
   const queryClient = useQueryClient();