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 };
 

frontend/src/pages/api/workspace/toggleAutoCapitalization.ts

@@ -1,26 +0,0 @@
-import SecurityClient from '@app/components/utilities/SecurityClient';
-
-/**
- * This route lets us change the auto capitalization settings in a project.
- * @param {*} req
- * @param {*} res
- * @returns
- */
-const toggleAutoCapitalization = (workspaceId: string, state: boolean) =>
-  SecurityClient.fetchCall(`/api/v2/workspace/${workspaceId}/settings`, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json'
-    },
-    body: JSON.stringify({
-      autoCapitalization: state
-    })
-  }).then(async (res) => {
-    if (res && res.status === 200) {
-      return res;
-    }
-    console.log('Failed to toggle auto capitalization state');
-    return undefined;
-  });
-
-export default toggleAutoCapitalization;

frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx

@@ -24,9 +24,11 @@ import {
   useGetUserWsKey,
   useGetUserWsServiceTokens,
   useRenameWorkspace,
+  useToggleAutoCapitalization,
   useUpdateWsEnvironment
 } from '@app/hooks/api';
 
+import { AutoCapitalizationSection } from './components/AutoCapitalizationSection/AutoCapitalizationSection';
 import {
   CopyProjectIDSection,
   CreateServiceToken,
@@ -39,6 +41,7 @@ import {
 export const ProjectSettingsPage = () => {
   const { t } = useTranslation();
   const { currentWorkspace, workspaces } = useWorkspace();
+  console.log(currentWorkspace);
   const router = useRouter();
   const { data: serviceTokens } = useGetUserWsServiceTokens({
     workspaceID: currentWorkspace?._id || ''
@@ -50,6 +53,8 @@ export const ProjectSettingsPage = () => {
   const [isDeleting, setIsDeleting] = useToggle();
 
   const renameWorkspace = useRenameWorkspace();
+  const toggleAutoCapitalization = useToggleAutoCapitalization();
+  
   const deleteWorkspace = useDeleteWorkspace();
   // env crud operation
   const createWsEnv = useCreateWsEnvironment();
@@ -83,6 +88,26 @@ export const ProjectSettingsPage = () => {
     }
   };
 
+  const onAutoCapitalizationToggle = async (state: boolean) => {  
+    try {
+      await toggleAutoCapitalization.mutateAsync({
+        workspaceID,
+        state
+      });
+      const text = `Successfully ${state ? 'enabled' : 'disabled'} auto capitalization`;
+      createNotification({
+        text,
+        type: 'success'
+      });
+    } catch (error) {
+      console.error(error);
+      createNotification({
+        text: 'Failed to update auto capitalization',
+        type: 'error'
+      });
+    }
+  };
+
   const onDeleteWorkspace = async () => {
     setIsDeleting.on();
     try {
@@ -241,6 +266,10 @@ export const ProjectSettingsPage = () => {
         workspaceName={currentWorkspace?.name}
         onProjectNameChange={onRenameWorkspace}
       />
+      <AutoCapitalizationSection
+        workspaceAutoCapitalization={currentWorkspace?.autoCapitalization}
+        onAutoCapitalizationChange={onAutoCapitalizationToggle}
+      />
       <CopyProjectIDSection workspaceID={currentWorkspace?._id || ''} />
       <EnvironmentSection
         environments={currentWorkspace?.environments || []}

frontend/src/views/Settings/ProjectSettingsPage/components/AutoCapitalizationSection/AutoCapitalizationSection.tsx

@@ -0,0 +1,34 @@
+import { useTranslation } from 'react-i18next';
+
+import { Checkbox } from '@app/components/v2';
+
+type Props = {
+  workspaceAutoCapitalization?: boolean;
+  onAutoCapitalizationChange: (state: boolean) => Promise<void>;
+};
+
+export const AutoCapitalizationSection = ({
+  workspaceAutoCapitalization,
+  onAutoCapitalizationChange
+}: Props) => {
+  const { t } = useTranslation();
+  return (
+    <form>
+      <div className="mb-2 flex w-full flex-col items-start rounded-md bg-white/5 px-6 pb-6 pt-2">
+        <p className="mb-4 mt-2 text-xl font-semibold">
+          {t('settings-project:auto-capitalization')}
+        </p>
+        <Checkbox
+          className="data-[state=checked]:bg-primary"
+          id="autoCapitalization"
+          isChecked={workspaceAutoCapitalization}
+          onCheckedChange={(state) => {
+            onAutoCapitalizationChange(state as boolean);
+          }}
+        >
+          {t('settings-project:auto-capitalization-description')}
+        </Checkbox>
+      </div>
+    </form>
+  );
+};

frontend/src/views/Settings/ProjectSettingsPage/components/AutoCapitalizationSection/index.tsx

@@ -0,0 +1 @@
+export { AutoCapitalizationSection } from './AutoCapitalizationSection';