refactor(web): remove typescript

packages/web/src/pages/Flows/index.jsx

@@ -9,8 +9,6 @@ import CircularProgress from '@mui/material/CircularProgress';
 import Divider from '@mui/material/Divider';
 import Pagination from '@mui/material/Pagination';
 import PaginationItem from '@mui/material/PaginationItem';
-import type { IFlow } from 'types';
-
 import Can from 'components/Can';
 import FlowRow from 'components/FlowRow';
 import NoResultFound from 'components/NoResultFound';
@@ -21,15 +19,12 @@ import SearchInput from 'components/SearchInput';
 import useFormatMessage from 'hooks/useFormatMessage';
 import { GET_FLOWS } from 'graphql/queries/get-flows';
 import * as URLS from 'config/urls';
-
 const FLOW_PER_PAGE = 10;
-
-const getLimitAndOffset = (page: number) => ({
+const getLimitAndOffset = (page) => ({
   limit: FLOW_PER_PAGE,
   offset: (page - 1) * FLOW_PER_PAGE,
 });
-
-export default function Flows(): React.ReactElement {
+export default function Flows() {
   const formatMessage = useFormatMessage();
   const [searchParams, setSearchParams] = useSearchParams();
   const page = parseInt(searchParams.get('page') || '', 10) || 1;
@@ -40,7 +35,6 @@ export default function Flows(): React.ReactElement {
       setLoading(false);
     },
   });
-
   const fetchData = React.useMemo(
     () =>
       debounce(
@@ -51,43 +45,35 @@ export default function Flows(): React.ReactElement {
               name,
             },
           }),
-        300
+        300,
       ),
-    [page, getFlows]
+    [page, getFlows],
   );
-
   React.useEffect(
     function fetchFlowsOnSearch() {
       setLoading(true);
-
       fetchData(flowName);
     },
-    [fetchData, flowName]
+    [fetchData, flowName],
   );
-
   React.useEffect(
     function resetPageOnSearch() {
       // reset search params which only consists of `page`
       setSearchParams({});
     },
-    [flowName]
+    [flowName],
   );
-
   React.useEffect(function cancelDebounceOnUnmount() {
     return () => {
       fetchData.cancel();
     };
   }, []);
-
   const { pageInfo, edges } = data?.getFlows || {};
-
-  const flows: IFlow[] = edges?.map(({ node }: { node: IFlow }) => node);
+  const flows = edges?.map(({ node }) => node);
   const hasFlows = flows?.length;
-
   const onSearchChange = React.useCallback((event) => {
     setFlowName(event.target.value);
   }, []);
-
   return (
     <Box sx={{ py: 3 }}>
       <Container>
@@ -130,21 +116,17 @@ export default function Flows(): React.ReactElement {
         </Grid>
 
         <Divider sx={{ mt: [2, 0], mb: 2 }} />
-
         {loading && (
           <CircularProgress sx={{ display: 'block', margin: '20px auto' }} />
         )}
-
         {!loading &&
           flows?.map((flow) => <FlowRow key={flow.id} flow={flow} />)}
-
         {!loading && !hasFlows && (
           <NoResultFound
             text={formatMessage('flows.noFlows')}
             to={URLS.CREATE_FLOW}
           />
         )}
-
         {!loading && pageInfo && pageInfo.totalPages > 1 && (
           <Pagination
             sx={{ display: 'flex', justifyContent: 'center', mt: 3 }}