Refactor into component and use React Query

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