refactor(web): remove typescript

packages/web/src/components/AppConnectionRow/index.jsx

@@ -10,26 +10,18 @@ import Stack from '@mui/material/Stack';
 import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import { DateTime } from 'luxon';
 import * as React from 'react';
-
-import type { IConnection } from 'types';
 import ConnectionContextMenu from 'components/AppConnectionContextMenu';
 import { DELETE_CONNECTION } from 'graphql/mutations/delete-connection';
 import { TEST_CONNECTION } from 'graphql/queries/test-connection';
 import useFormatMessage from 'hooks/useFormatMessage';
 import { CardContent, Typography } from './style';
-
-type AppConnectionRowProps = {
-  connection: IConnection;
-};
-
-const countTranslation = (value: React.ReactNode) => (
+const countTranslation = (value) => (
   <>
     <Typography variant="body1">{value}</Typography>
     <br />
   </>
 );
-
-function AppConnectionRow(props: AppConnectionRowProps): React.ReactElement {
+function AppConnectionRow(props) {
   const enqueueSnackbar = useEnqueueSnackbar();
   const [verificationVisible, setVerificationVisible] = React.useState(false);
   const [testConnection, { called: testCalled, loading: testLoading }] =
@@ -43,7 +35,6 @@ function AppConnectionRow(props: AppConnectionRowProps): React.ReactElement {
       },
     });
   const [deleteConnection] = useMutation(DELETE_CONNECTION);
-
   const formatMessage = useFormatMessage();
   const {
     id,
@@ -54,17 +45,14 @@ function AppConnectionRow(props: AppConnectionRowProps): React.ReactElement {
     flowCount,
     reconnectable,
   } = props.connection;
-
-  const contextButtonRef = React.useRef<SVGSVGElement | null>(null);
-  const [anchorEl, setAnchorEl] = React.useState<SVGSVGElement | null>(null);
-
+  const contextButtonRef = React.useRef(null);
+  const [anchorEl, setAnchorEl] = React.useState(null);
   const handleClose = () => {
     setAnchorEl(null);
   };
-
   const onContextMenuClick = () => setAnchorEl(contextButtonRef.current);
   const onContextMenuAction = React.useCallback(
-    async (event, action: { [key: string]: string }) => {
+    async (event, action) => {
       if (action.type === 'delete') {
         await deleteConnection({
           variables: { input: { id } },
@@ -73,13 +61,11 @@ function AppConnectionRow(props: AppConnectionRowProps): React.ReactElement {
               __typename: 'Connection',
               id,
             });
-
             cache.evict({
               id: connectionCacheId,
             });
           },
         });
-
         enqueueSnackbar(formatMessage('connection.deletedMessage'), {
           variant: 'success',
           SnackbarProps: {
@@ -91,13 +77,11 @@ function AppConnectionRow(props: AppConnectionRowProps): React.ReactElement {
         testConnection({ variables: { id } });
       }
     },
-    [deleteConnection, id, testConnection, formatMessage, enqueueSnackbar]
+    [deleteConnection, id, testConnection, formatMessage, enqueueSnackbar],
   );
-
   const relativeCreatedAt = DateTime.fromMillis(
-    parseInt(createdAt, 10)
+    parseInt(createdAt, 10),
   ).toRelative();
-
   return (
     <>
       <Card sx={{ my: 2 }} data-test="app-connection-row">
@@ -125,14 +109,17 @@ function AppConnectionRow(props: AppConnectionRowProps): React.ReactElement {
                     </Typography>
                   </>
                 )}
-                {verificationVisible && testCalled && !testLoading && verified && (
-                  <>
-                    <CheckCircleIcon fontSize="small" color="success" />
-                    <Typography variant="caption">
-                      {formatMessage('connection.testSuccessful')}
-                    </Typography>
-                  </>
-                )}
+                {verificationVisible &&
+                  testCalled &&
+                  !testLoading &&
+                  verified && (
+                    <>
+                      <CheckCircleIcon fontSize="small" color="success" />
+                      <Typography variant="caption">
+                        {formatMessage('connection.testSuccessful')}
+                      </Typography>
+                    </>
+                  )}
                 {verificationVisible &&
                   testCalled &&
                   !testLoading &&
@@ -179,5 +166,4 @@ function AppConnectionRow(props: AppConnectionRowProps): React.ReactElement {
     </>
   );
 }
-
 export default AppConnectionRow;

packages/web/src/components/AppConnectionRow/style.js

@@ -1,7 +1,6 @@
 import { styled } from '@mui/material/styles';
 import MuiCardContent from '@mui/material/CardContent';
 import MuiTypography from '@mui/material/Typography';
-
 export const CardContent = styled(MuiCardContent)(({ theme }) => ({
   display: 'grid',
   gridTemplateRows: 'auto',
@@ -9,7 +8,6 @@ export const CardContent = styled(MuiCardContent)(({ theme }) => ({
   gridColumnGap: theme.spacing(2),
   alignItems: 'center',
 }));
-
 export const Typography = styled(MuiTypography)(() => ({
   textAlign: 'center',
   display: 'inline-block',