refactor(web): remove typescript

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

@@ -5,8 +5,6 @@ import Collapse from '@mui/material/Collapse';
 import ListItem from '@mui/material/ListItem';
 import TextField from '@mui/material/TextField';
 import * as React from 'react';
-
-import type { IApp, IConnection, IStep, ISubstep } from 'types';
 import AddAppConnection from 'components/AddAppConnection';
 import AppAuthClientsDialog from 'components/AppAuthClientsDialog/index.ee';
 import FlowSubstepTitle from 'components/FlowSubstepTitle';
@@ -16,34 +14,15 @@ import { GET_APP_CONNECTIONS } from 'graphql/queries/get-app-connections';
 import { TEST_CONNECTION } from 'graphql/queries/test-connection';
 import useAuthenticateApp from 'hooks/useAuthenticateApp.ee';
 import useFormatMessage from 'hooks/useFormatMessage';
-
-type ChooseConnectionSubstepProps = {
-  application: IApp;
-  substep: ISubstep;
-  expanded?: boolean;
-  onExpand: () => void;
-  onCollapse: () => void;
-  onChange: ({ step }: { step: IStep }) => void;
-  onSubmit: () => void;
-  step: IStep;
-};
-
 const ADD_CONNECTION_VALUE = 'ADD_CONNECTION';
 const ADD_SHARED_CONNECTION_VALUE = 'ADD_SHARED_CONNECTION';
-
-const optionGenerator = (
-  connection: IConnection
-): { label: string; value: string } => ({
-  label: (connection?.formattedData?.screenName as string) ?? 'Unnamed',
-  value: connection?.id as string,
+const optionGenerator = (connection) => ({
+  label: connection?.formattedData?.screenName ?? 'Unnamed',
+  value: connection?.id,
 });
-
-const getOption = (options: Record<string, unknown>[], connectionId?: string) =>
+const getOption = (options, connectionId) =>
   options.find((connection) => connection.value === connectionId) || null;
-
-function ChooseConnectionSubstep(
-  props: ChooseConnectionSubstepProps
-): React.ReactElement {
+function ChooseConnectionSubstep(props) {
   const {
     substep,
     expanded = false,
@@ -78,7 +57,6 @@ function ChooseConnectionSubstep(
       id: connection?.id,
     },
   });
-
   React.useEffect(() => {
     if (connection?.id) {
       testConnection({
@@ -89,42 +67,34 @@ function ChooseConnectionSubstep(
     }
     // intentionally no dependencies for initial test
   }, []);
-
   const connectionOptions = React.useMemo(() => {
-    const appWithConnections = data?.getApp as IApp;
+    const appWithConnections = data?.getApp;
     const options =
       appWithConnections?.connections?.map((connection) =>
-        optionGenerator(connection)
+        optionGenerator(connection),
       ) || [];
-
     if (!appConfig || appConfig.canCustomConnect) {
       options.push({
         label: formatMessage('chooseConnectionSubstep.addNewConnection'),
         value: ADD_CONNECTION_VALUE,
       });
     }
-
     if (appConfig?.canConnect) {
       options.push({
         label: formatMessage('chooseConnectionSubstep.addNewSharedConnection'),
         value: ADD_SHARED_CONNECTION_VALUE,
       });
     }
-
     return options;
   }, [data, formatMessage, appConfig]);
-
-  const handleClientClick = async (appAuthClientId: string) => {
+  const handleClientClick = async (appAuthClientId) => {
     try {
       const response = await authenticate?.({
         appAuthClientId,
       });
-
       const connectionId = response?.createConnection.id;
-
       if (connectionId) {
         await refetch();
-
         onChange({
           step: {
             ...step,
@@ -140,18 +110,13 @@ function ChooseConnectionSubstep(
       setShowAddSharedConnectionDialog(false);
     }
   };
-
   const { name } = substep;
-
   const handleAddConnectionClose = React.useCallback(
     async (response) => {
       setShowAddConnectionDialog(false);
-
       const connectionId = response?.createConnection.id;
-
       if (connectionId) {
         await refetch();
-
         onChange({
           step: {
             ...step,
@@ -162,27 +127,23 @@ function ChooseConnectionSubstep(
         });
       }
     },
-    [onChange, refetch, step]
+    [onChange, refetch, step],
   );
-
   const handleChange = React.useCallback(
-    (event: React.SyntheticEvent, selectedOption: unknown) => {
+    (event, selectedOption) => {
       if (typeof selectedOption === 'object') {
         // TODO: try to simplify type casting below.
-        const typedSelectedOption = selectedOption as { value: string };
-        const option: { value: string } = typedSelectedOption;
-        const connectionId = option?.value as string;
-
+        const typedSelectedOption = selectedOption;
+        const option = typedSelectedOption;
+        const connectionId = option?.value;
         if (connectionId === ADD_CONNECTION_VALUE) {
           setShowAddConnectionDialog(true);
           return;
         }
-
         if (connectionId === ADD_SHARED_CONNECTION_VALUE) {
           setShowAddSharedConnectionDialog(true);
           return;
         }
-
         if (connectionId !== step.connection?.id) {
           onChange({
             step: {
@@ -195,9 +156,8 @@ function ChooseConnectionSubstep(
         }
       }
     },
-    [step, onChange]
+    [step, onChange],
   );
-
   React.useEffect(() => {
     if (step.connection?.id) {
       retestConnection({
@@ -205,9 +165,7 @@ function ChooseConnectionSubstep(
       });
     }
   }, [step.connection?.id, retestConnection]);
-
   const onToggle = expanded ? onCollapse : onExpand;
-
   return (
     <React.Fragment>
       <FlowSubstepTitle
@@ -235,7 +193,7 @@ function ChooseConnectionSubstep(
               <TextField
                 {...params}
                 label={formatMessage(
-                  'chooseConnectionSubstep.chooseConnection'
+                  'chooseConnectionSubstep.chooseConnection',
                 )}
               />
             )}
@@ -279,5 +237,4 @@ function ChooseConnectionSubstep(
     </React.Fragment>
   );
 }
-
 export default ChooseConnectionSubstep;