Refactor into component and use React Query

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

@@ -4,5 +4,6 @@ export {
   useDeleteWsEnvironment,
   useGetUserWorkspaces,
   useRenameWorkspace,
+  useToggleAutoCapitalization,
   useUpdateWsEnvironment
 } from './queries';

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();
 

frontend/src/hooks/api/workspace/types.ts

@@ -3,6 +3,7 @@ export type Workspace = {
   _id: string;
   name: string;
   organization: string;
+  autoCapitalization: boolean;
   environments: WorkspaceEnv[];
 };
 
@@ -10,6 +11,7 @@ export type WorkspaceEnv = { name: string; slug: string };
 
 // mutation dto
 export type RenameWorkspaceDTO = { workspaceID: string; newWorkspaceName: string };
+export type ToggleAutoCapitalizationDTO = { workspaceID: string; state: boolean };
 
 export type DeleteWorkspaceDTO = { workspaceID: string };