style: auto format whole project

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

@@ -20,13 +20,11 @@ import { CardContent, Typography } from './style';
 
 type AppConnectionRowProps = {
   connection: IConnection;
-}
+};
 
 const countTranslation = (value: React.ReactNode) => (
   <>
-    <Typography variant="body1">
-      {value}
-    </Typography>
+    <Typography variant="body1">{value}</Typography>
     <br />
   </>
 );
@@ -34,15 +32,21 @@ const countTranslation = (value: React.ReactNode) => (
 function AppConnectionRow(props: AppConnectionRowProps): React.ReactElement {
   const { enqueueSnackbar } = useSnackbar();
   const [verificationVisible, setVerificationVisible] = React.useState(false);
-  const [testConnection, { called: testCalled, loading: testLoading }] = useLazyQuery(TEST_CONNECTION, {
-    fetchPolicy: 'network-only',
-    onCompleted: () => { setTimeout(() => setVerificationVisible(false), 3000); },
-    onError: () => { setTimeout(() => setVerificationVisible(false), 3000); },
-  });
+  const [testConnection, { called: testCalled, loading: testLoading }] =
+    useLazyQuery(TEST_CONNECTION, {
+      fetchPolicy: 'network-only',
+      onCompleted: () => {
+        setTimeout(() => setVerificationVisible(false), 3000);
+      },
+      onError: () => {
+        setTimeout(() => setVerificationVisible(false), 3000);
+      },
+    });
   const [deleteConnection] = useMutation(DELETE_CONNECTION);
 
   const formatMessage = useFormatMessage();
-  const { id, key, formattedData, verified, createdAt, flowCount } = props.connection;
+  const { id, key, formattedData, verified, createdAt, flowCount } =
+    props.connection;
 
   const contextButtonRef = React.useRef<SVGSVGElement | null>(null);
   const [anchorEl, setAnchorEl] = React.useState<SVGSVGElement | null>(null);
@@ -52,47 +56,52 @@ function AppConnectionRow(props: AppConnectionRowProps): React.ReactElement {
   };
 
   const onContextMenuClick = () => setAnchorEl(contextButtonRef.current);
-  const onContextMenuAction = React.useCallback(async (event, action: { [key: string]: string }) => {
-    if (action.type === 'delete') {
-      await deleteConnection({
-        variables: { input: { id } },
-        update: (cache) => {
-          const connectionCacheId = cache.identify({
-            __typename: 'Connection',
-            id,
-          });
+  const onContextMenuAction = React.useCallback(
+    async (event, action: { [key: string]: string }) => {
+      if (action.type === 'delete') {
+        await deleteConnection({
+          variables: { input: { id } },
+          update: (cache) => {
+            const connectionCacheId = cache.identify({
+              __typename: 'Connection',
+              id,
+            });
 
-          cache.evict({
-            id: connectionCacheId,
-          });
-        }
-      });
+            cache.evict({
+              id: connectionCacheId,
+            });
+          },
+        });
 
-      enqueueSnackbar(formatMessage('connection.deletedMessage'), { variant: 'success' });
-    } else if (action.type === 'test') {
-      setVerificationVisible(true);
-      testConnection({ variables: { id } });
-    }
-  }, [deleteConnection, id, testConnection, formatMessage, enqueueSnackbar]);
+        enqueueSnackbar(formatMessage('connection.deletedMessage'), {
+          variant: 'success',
+        });
+      } else if (action.type === 'test') {
+        setVerificationVisible(true);
+        testConnection({ variables: { id } });
+      }
+    },
+    [deleteConnection, id, testConnection, formatMessage, enqueueSnackbar]
+  );
 
-  const relativeCreatedAt = DateTime.fromMillis(parseInt(createdAt, 10)).toRelative();
+  const relativeCreatedAt = DateTime.fromMillis(
+    parseInt(createdAt, 10)
+  ).toRelative();
 
   return (
     <>
       <Card sx={{ my: 2 }} data-test="app-connection-row">
         <CardActionArea onClick={onContextMenuClick}>
           <CardContent>
-            <Stack
-              justifyContent="center"
-              alignItems="flex-start"
-              spacing={1}
-            >
+            <Stack justifyContent="center" alignItems="flex-start" spacing={1}>
               <Typography variant="h6" sx={{ textAlign: 'left' }}>
                 {formattedData?.screenName}
               </Typography>
 
               <Typography variant="caption">
-                {formatMessage('connection.addedAt', { datetime: relativeCreatedAt })}
+                {formatMessage('connection.addedAt', {
+                  datetime: relativeCreatedAt,
+                })}
               </Typography>
             </Stack>
 
@@ -101,27 +110,42 @@ function AppConnectionRow(props: AppConnectionRowProps): React.ReactElement {
                 {verificationVisible && testCalled && testLoading && (
                   <>
                     <CircularProgress size={16} />
-                    <Typography variant="caption">{formatMessage('connection.testing')}</Typography>
+                    <Typography variant="caption">
+                      {formatMessage('connection.testing')}
+                    </Typography>
                   </>
                 )}
                 {verificationVisible && testCalled && !testLoading && verified && (
                   <>
                     <CheckCircleIcon fontSize="small" color="success" />
-                    <Typography variant="caption">{formatMessage('connection.testSuccessful')}</Typography>
-                  </>
-                )}
-                {verificationVisible && testCalled && !testLoading && !verified && (
-                  <>
-                    <ErrorIcon fontSize="small" color="error" />
-                    <Typography variant="caption">{formatMessage('connection.testFailed')}</Typography>
+                    <Typography variant="caption">
+                      {formatMessage('connection.testSuccessful')}
+                    </Typography>
                   </>
                 )}
+                {verificationVisible &&
+                  testCalled &&
+                  !testLoading &&
+                  !verified && (
+                    <>
+                      <ErrorIcon fontSize="small" color="error" />
+                      <Typography variant="caption">
+                        {formatMessage('connection.testFailed')}
+                      </Typography>
+                    </>
+                  )}
               </Stack>
             </Box>
 
             <Box sx={{ px: 2 }}>
-              <Typography variant="caption" color="textSecondary" sx={{ display: ['none', 'inline-block'] }}>
-                {formatMessage('connection.flowCount', { count: countTranslation(flowCount) })}
+              <Typography
+                variant="caption"
+                color="textSecondary"
+                sx={{ display: ['none', 'inline-block'] }}
+              >
+                {formatMessage('connection.flowCount', {
+                  count: countTranslation(flowCount),
+                })}
               </Typography>
             </Box>
 
@@ -132,13 +156,15 @@ function AppConnectionRow(props: AppConnectionRowProps): React.ReactElement {
         </CardActionArea>
       </Card>
 
-      {anchorEl && <ConnectionContextMenu
-        appKey={key}
-        connectionId={id}
-        onClose={handleClose}
-        onMenuItemClick={onContextMenuAction}
-        anchorEl={anchorEl}
-      />}
+      {anchorEl && (
+        <ConnectionContextMenu
+          appKey={key}
+          connectionId={id}
+          onClose={handleClose}
+          onMenuItemClick={onContextMenuAction}
+          anchorEl={anchorEl}
+        />
+      )}
     </>
   );
 }