Refactor DocSearchView to use BoolFilter component

Introduced a new `BoolFilter` component to encapsulate the checkbox and switch functionality previously handled in `DocSearchView`. This refactor improves code organization and reusability. Removed unnecessary imports from `doc-search-view.tsx` and added imports for the new component in `bool-filter.tsx`.

src/client/dd-hub-react/src/sections/document/bool-filter.tsx

@@ -0,0 +1,34 @@
+import { useState } from 'react';
+
+import Switch from '@mui/material/Switch';
+import Checkbox from '@mui/material/Checkbox';
+import FormGroup from '@mui/material/FormGroup';
+import AddBoxIcon from '@mui/icons-material/AddBox';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import AddBoxTwoToneIcon from '@mui/icons-material/AddBoxTwoTone';
+// ----------------------------------------------------------------------
+
+type BoolFilterProps = {
+    label: string;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}
+
+export function BoolFilter({ label }: BoolFilterProps) {
+    const [disabled, setDisabled] = useState<boolean>(true);
+
+    return (
+        <FormGroup row>
+            <Checkbox
+                {...{ inputProps: { 'aria-label': 'Checkbox demo' } }}
+                icon={<AddBoxTwoToneIcon />}
+                checkedIcon={<AddBoxIcon />}
+                onClick={() => setDisabled(!disabled)}
+            />
+            {
+                disabled
+                    ? <FormControlLabel disabled control={<Switch />} label={label} />
+                    : <FormControlLabel control={<Switch />} label={label} />
+            }
+        </FormGroup>
+    );
+}

src/client/dd-hub-react/src/sections/document/view/doc-search-view.tsx

@@ -3,15 +3,9 @@ import { useState, useCallback, useEffect } from 'react';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 import Button from '@mui/material/Button';
-import Switch from '@mui/material/Switch';
-import Checkbox from '@mui/material/Checkbox';
-import FormGroup from '@mui/material/FormGroup';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
 import Pagination from '@mui/material/Pagination';
-import AddBoxIcon from '@mui/icons-material/AddBox';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import AddBoxTwoToneIcon from '@mui/icons-material/AddBoxTwoTone';
 
 import { DashboardContent } from 'src/layouts/dashboard';
 import { Filter, getFiltersAsync } from 'src/api/filter-service';
@@ -19,6 +13,7 @@ import { Filter, getFiltersAsync } from 'src/api/filter-service';
 import { Iconify } from 'src/components/iconify';
 
 import { DocItem } from '../doc-item';
+import { BoolFilter } from '../bool-filter';
 
 import type { IDocItem } from '../doc-item';
 // ----------------------------------------------------------------------
@@ -107,20 +102,7 @@ export function DocSearchView({ posts }: Props) {
           let filterComp;
           switch (filter.type) {
             case 'BOOLEAN':
-              filterComp =
+              filterComp = <BoolFilter label={filter.label ?? filter.name} />
-                <FormGroup row>
-                  <Checkbox
-                    {...{ inputProps: { 'aria-label': 'Checkbox demo' } }}
-                    icon={<AddBoxTwoToneIcon />}
-                    checkedIcon={<AddBoxIcon />}
-                    onClick={() => setDisabledState(index, !disabledStates[index])}
-                  />
-                  {
-                    disabledStates[index] === undefined || disabledStates[index]
-                      ? <FormControlLabel disabled control={<Switch />} label={filter.label ?? filter.name} />
-                      : <FormControlLabel control={<Switch />} label={filter.label ?? filter.name} />
-                  }
-                </FormGroup>
               break;
             case 'VARCHAR':
             case 'INTEGER':