From 5009d3c8ec9ceec99401abf14d615f976670fbeb Mon Sep 17 00:00:00 2001 From: koji Date: Mon, 2 Dec 2024 15:26:57 -0500 Subject: [PATCH] refactor(app): clean up react import statements (#16998) * refactor(app): clean up react import statements (#16998) --- app/src/App/Navbar.tsx | 4 +- app/src/atoms/Slideout/index.tsx | 10 ++-- .../__tests__/CustomKeyboard.test.tsx | 16 ++++--- .../AlphanumericKeyboard/index.tsx | 4 +- .../__tests__/FullKeyboard.test.tsx | 16 ++++--- .../SoftwareKeyboard/FullKeyboard/index.tsx | 8 ++-- .../__tests__/IndividualKey.test.tsx | 10 ++-- .../__tests__/NumericalKeyboard.test.tsx | 20 ++++---- .../molecules/CollapsibleSection/index.tsx | 8 ++-- .../molecules/InstrumentCard/MenuOverlay.tsx | 13 ++--- .../InterventionModal/DeckMapContent.tsx | 7 +-- .../ModalContentOneColSimpleButtons.tsx | 10 ++-- .../JogControls/DirectionControl.tsx | 11 +++-- app/src/molecules/JogControls/index.tsx | 11 ++--- .../molecules/ToggleGroup/useToggleGroup.tsx | 8 ++-- app/src/molecules/UploadInput/index.tsx | 28 ++++++----- .../organisms/ApplyHistoricOffsets/index.tsx | 8 ++-- .../Desktop/Alerts/AlertsProvider.tsx | 10 ++-- .../organisms/Desktop/CalibrateDeck/index.tsx | 7 +-- .../Desktop/CalibratePipetteOffset/index.tsx | 7 +-- .../AskForCalibrationBlockModal.tsx | 9 ++-- .../Desktop/CalibrateTipLength/index.tsx | 7 +-- .../Desktop/CalibrationPanels/SaveZPoint.tsx | 7 +-- .../Desktop/CheckCalibration/index.tsx | 10 ++-- .../Desktop/ChooseProtocolSlideout/index.tsx | 36 +++++++------- .../AvailableRobotOption.tsx | 9 ++-- .../index.tsx | 25 +++++----- .../ChangePipette/CheckPipettesButton.tsx | 8 ++-- .../Desktop/Devices/GripperCard/index.tsx | 19 ++++---- .../Devices/PipetteCard/FlexPipetteCard.tsx | 26 +++++----- .../ProtocolAnalysisErrorBanner.tsx | 7 +-- .../modals/ConfirmCancelModal.tsx | 12 +++-- .../modals/RunFailedModal.tsx | 7 +-- .../ProtocolRun/ProtocolRunHeader/index.tsx | 10 ++-- .../Devices/ProtocolRun/ProtocolRunSetup.tsx | 13 +++-- .../Desktop/Devices/RobotOverflowMenu.tsx | 15 +++--- .../Devices/RobotOverviewOverflowMenu.tsx | 20 ++++---- .../DeviceResetSlideout.tsx | 11 +++-- .../FactoryModeSlideout.tsx | 21 ++++---- .../RenameRobotSlideout.tsx | 10 ++-- .../AdvancedTab/Troubleshooting.tsx | 16 +++---- .../AdvancedTab/UpdateRobotSoftware.tsx | 9 ++-- .../ConnectModal/UploadKeyInput.tsx | 20 ++++---- .../RobotSettings/RobotSettingsAdvanced.tsx | 28 +++++------ .../RobotSettingsFeatureFlags.tsx | 8 ++-- .../RobotUpdateProgressModal.tsx | 29 ++++++----- .../__tests__/useLPCSuccessToast.test.ts | 9 ++-- .../LabwareCard/CustomLabwareOverflowMenu.tsx | 15 +++--- .../Desktop/Labware/LabwareCard/hooks.tsx | 7 +-- .../StyledComponents/ExpandingTitle.tsx | 15 +++--- .../Desktop/ProtocolAnalysisFailure/index.tsx | 17 +++---- .../ProtocolLabwareDetails.tsx | 7 +-- .../RobotConfigurationDetails.tsx | 13 ++--- .../Desktop/ProtocolsLanding/ProtocolList.tsx | 15 +++--- .../CalibrationDetails/OverflowMenu.tsx | 25 +++++----- .../AddFixtureModal.tsx | 19 ++++---- .../EmergencyStop/EstopPressedModal.tsx | 11 +++-- .../shared/ErrorDetailsModal.tsx | 19 ++++---- .../LabwarePositionCheck/AttachProbe.tsx | 11 ++--- .../LabwarePositionCheck/CheckItem.tsx | 7 +-- .../LabwarePositionCheck/DetachProbe.tsx | 9 ++-- .../IntroScreen/index.tsx | 7 +-- .../LabwarePositionCheck/JogToWell.tsx | 17 +++---- .../LabwarePositionCheck/PickUpTip.tsx | 7 +-- .../organisms/LabwarePositionCheck/index.tsx | 10 ++-- .../ModuleCard/ConfirmAttachmentModal.tsx | 8 ++-- .../ModuleCard/HeaterShakerSlideout.tsx | 7 +-- app/src/organisms/ModuleWizardFlows/index.tsx | 27 +++++------ .../organisms/ODD/InstrumentInfo/index.tsx | 17 +++---- .../AttachedInstrumentMountItem.tsx | 18 ++++--- .../ProtocolInstrumentMountItem.tsx | 37 +++++++------- .../ODD/Navigation/NavigationMenu.tsx | 7 +-- app/src/organisms/ODD/Navigation/index.tsx | 12 +++-- .../SelectAuthenticationType.tsx | 9 ++-- .../ODD/NetworkSettings/SetWifiSsid.tsx | 8 ++-- .../ProtocolSetupDeckConfiguration/index.tsx | 19 ++++---- .../ProtocolSetupLabware/index.tsx | 13 ++--- .../ProtocolSetupLiquids/index.tsx | 12 +++-- .../FixtureTable.tsx | 17 +++---- .../ModuleTable.tsx | 11 +++-- .../ProtocolSetupModulesAndDeck.tsx | 13 ++--- .../QuickTransferAdvancedSettings/AirGap.tsx | 13 ++--- .../BaseSettings.tsx | 9 ++-- .../QuickTransferAdvancedSettings/BlowOut.tsx | 11 +++-- .../QuickTransferAdvancedSettings/Delay.tsx | 17 +++---- .../FlowRate.tsx | 9 ++-- .../QuickTransferAdvancedSettings/Mix.tsx | 21 ++++---- .../PipettePath.tsx | 21 ++++---- .../TipPosition.tsx | 9 ++-- .../TouchTip.tsx | 15 +++--- .../QuickTransferAdvancedSettings/index.tsx | 11 ++--- .../QuickTransferFlow/SelectDestLabware.tsx | 13 +++-- .../ODD/QuickTransferFlow/SelectDestWells.tsx | 31 ++++++------ .../ODD/QuickTransferFlow/SelectPipette.tsx | 19 ++++---- .../QuickTransferFlow/SelectSourceLabware.tsx | 13 +++-- .../QuickTransferFlow/SelectSourceWells.tsx | 13 ++--- .../ODD/QuickTransferFlow/SelectTipRack.tsx | 13 ++--- .../QuickTransferFlow/SummaryAndSettings.tsx | 15 +++--- .../TipManagement/ChangeTip.tsx | 7 +-- .../TipManagement/TipDropLocation.tsx | 7 +-- .../QuickTransferFlow/TipManagement/index.tsx | 11 ++--- .../ODD/QuickTransferFlow/VolumeEntry.tsx | 11 +++-- .../organisms/ODD/QuickTransferFlow/index.tsx | 15 +++--- .../LanguageSetting.tsx | 9 ++-- .../RobotSettingsJoinOtherNetwork.tsx | 9 ++-- .../TouchScreenSleep.tsx | 11 +++-- .../RobotSettingsDashboard/UpdateChannel.tsx | 9 ++-- .../PipetteWizardFlows/ChoosePipette.tsx | 14 +++--- .../PipetteWizardFlows/DetachPipette.tsx | 19 ++++---- .../organisms/PipetteWizardFlows/Results.tsx | 7 +-- .../MaintenanceRunStatusProvider.tsx | 15 +++--- .../TakeoverModal/MaintenanceRunTakeover.tsx | 14 +++--- app/src/organisms/ToasterOven/ToasterOven.tsx | 9 ++-- .../WellSelection/Selection384Wells.tsx | 27 ++++++----- .../organisms/WellSelection/SelectionRect.tsx | 19 ++++---- .../ODD/ConnectViaWifi/JoinOtherNetwork.tsx | 9 ++-- app/src/pages/ODD/DeckConfiguration/index.tsx | 14 +++--- .../InstrumentDetailOverflowMenu.tsx | 13 ++--- .../ODD/ProtocolDashboard/PinnedProtocol.tsx | 7 +-- app/src/pages/ODD/ProtocolSetup/index.tsx | 48 +++++++++---------- .../QuickTransferDashboard/PinnedTransfer.tsx | 7 +-- .../QuickTransferCard.tsx | 11 +++-- .../resources/deck_configuration/hooks.tsx | 9 ++-- 123 files changed, 874 insertions(+), 793 deletions(-) diff --git a/app/src/App/Navbar.tsx b/app/src/App/Navbar.tsx index db8a4acd005..1471ca4c593 100644 --- a/app/src/App/Navbar.tsx +++ b/app/src/App/Navbar.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useCallback } from 'react' import { useTranslation } from 'react-i18next' import { NavLink, useNavigate } from 'react-router-dom' import styled from 'styled-components' @@ -118,7 +118,7 @@ export function Navbar({ routes }: { routes: RouteProps[] }): JSX.Element { ({ navLinkTo }: RouteProps) => navLinkTo != null ) - const debouncedNavigate = React.useCallback( + const debouncedNavigate = useCallback( debounce((path: string) => { navigate(path) }, DEBOUNCE_DURATION_MS), diff --git a/app/src/atoms/Slideout/index.tsx b/app/src/atoms/Slideout/index.tsx index b834bd1c6e5..53a6888efa0 100644 --- a/app/src/atoms/Slideout/index.tsx +++ b/app/src/atoms/Slideout/index.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useRef, useState, useEffect } from 'react' import { css } from 'styled-components' import { useTranslation } from 'react-i18next' @@ -124,9 +124,9 @@ export const Slideout = (props: SlideoutProps): JSX.Element => { multiSlideoutSpecs, } = props const { t } = useTranslation('shared') - const slideOutRef = React.useRef(null) - const [isReachedBottom, setIsReachedBottom] = React.useState(false) - const hasBeenExpanded = React.useRef(isExpanded ?? false) + const slideOutRef = useRef(null) + const [isReachedBottom, setIsReachedBottom] = useState(false) + const hasBeenExpanded = useRef(isExpanded ?? false) const handleScroll = (): void => { if (slideOutRef.current == null) return const { scrollTop, scrollHeight, clientHeight } = slideOutRef.current @@ -137,7 +137,7 @@ export const Slideout = (props: SlideoutProps): JSX.Element => { } } - React.useEffect(() => { + useEffect(() => { handleScroll() }, [slideOutRef]) diff --git a/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/__tests__/CustomKeyboard.test.tsx b/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/__tests__/CustomKeyboard.test.tsx index b4a9abaae89..2fdf2e30b7e 100644 --- a/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/__tests__/CustomKeyboard.test.tsx +++ b/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/__tests__/CustomKeyboard.test.tsx @@ -1,17 +1,19 @@ -import * as React from 'react' +import { useRef } from 'react' import { describe, it, expect, vi } from 'vitest' import '@testing-library/jest-dom/vitest' import { fireEvent, renderHook, screen } from '@testing-library/react' import { renderWithProviders } from '/app/__testing-utils__' import { AlphanumericKeyboard } from '..' -const render = (props: React.ComponentProps) => { +import type { ComponentProps } from 'react' + +const render = (props: ComponentProps) => { return renderWithProviders()[0] } describe('AlphanumericKeyboard', () => { it('should render alphanumeric keyboard - lower case', () => { - const { result } = renderHook(() => React.useRef(null)) + const { result } = renderHook(() => useRef(null)) const props = { onChange: vi.fn(), keyboardRef: result.current, @@ -55,7 +57,7 @@ describe('AlphanumericKeyboard', () => { }) }) it('should render alphanumeric keyboard - upper case, when clicking ABC key', () => { - const { result } = renderHook(() => React.useRef(null)) + const { result } = renderHook(() => useRef(null)) const props = { onChange: vi.fn(), keyboardRef: result.current, @@ -103,7 +105,7 @@ describe('AlphanumericKeyboard', () => { }) it('should render alphanumeric keyboard - numbers, when clicking number key', () => { - const { result } = renderHook(() => React.useRef(null)) + const { result } = renderHook(() => useRef(null)) const props = { onChange: vi.fn(), keyboardRef: result.current, @@ -133,7 +135,7 @@ describe('AlphanumericKeyboard', () => { }) it('should render alphanumeric keyboard - lower case when layout is numbers and clicking abc ', () => { - const { result } = renderHook(() => React.useRef(null)) + const { result } = renderHook(() => useRef(null)) const props = { onChange: vi.fn(), keyboardRef: result.current, @@ -182,7 +184,7 @@ describe('AlphanumericKeyboard', () => { }) it('should switch each alphanumeric keyboard properly', () => { - const { result } = renderHook(() => React.useRef(null)) + const { result } = renderHook(() => useRef(null)) const props = { onChange: vi.fn(), keyboardRef: result.current, diff --git a/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.tsx b/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.tsx index 4ab8dab1274..73ec9306fee 100644 --- a/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.tsx +++ b/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState } from 'react' import Keyboard from 'react-simple-keyboard' import { useSelector } from 'react-redux' import { getAppLanguage } from '/app/redux/config' @@ -24,7 +24,7 @@ export function AlphanumericKeyboard({ keyboardRef, debug = false, // If true, will input a \n }: AlphanumericKeyboardProps): JSX.Element { - const [layoutName, setLayoutName] = React.useState('default') + const [layoutName, setLayoutName] = useState('default') const appLanguage = useSelector(getAppLanguage) const onKeyPress = (button: string): void => { if (button === '{ABC}') handleShift() diff --git a/app/src/atoms/SoftwareKeyboard/FullKeyboard/__tests__/FullKeyboard.test.tsx b/app/src/atoms/SoftwareKeyboard/FullKeyboard/__tests__/FullKeyboard.test.tsx index 728ae462083..90786ff6a6f 100644 --- a/app/src/atoms/SoftwareKeyboard/FullKeyboard/__tests__/FullKeyboard.test.tsx +++ b/app/src/atoms/SoftwareKeyboard/FullKeyboard/__tests__/FullKeyboard.test.tsx @@ -1,17 +1,19 @@ -import * as React from 'react' +import { useRef } from 'react' import { describe, it, expect, vi } from 'vitest' import '@testing-library/jest-dom/vitest' import { fireEvent, renderHook, screen } from '@testing-library/react' import { renderWithProviders } from '/app/__testing-utils__' import { FullKeyboard } from '..' -const render = (props: React.ComponentProps) => { +import type { ComponentProps } from 'react' + +const render = (props: ComponentProps) => { return renderWithProviders()[0] } describe('FullKeyboard', () => { it('should render FullKeyboard keyboard', () => { - const { result } = renderHook(() => React.useRef(null)) + const { result } = renderHook(() => useRef(null)) const props = { onChange: vi.fn(), keyboardRef: result.current, @@ -59,7 +61,7 @@ describe('FullKeyboard', () => { }) it('should render full keyboard when hitting ABC key', () => { - const { result } = renderHook(() => React.useRef(null)) + const { result } = renderHook(() => useRef(null)) const props = { onChange: vi.fn(), keyboardRef: result.current, @@ -108,7 +110,7 @@ describe('FullKeyboard', () => { }) it('should render full keyboard when hitting 123 key', () => { - const { result } = renderHook(() => React.useRef(null)) + const { result } = renderHook(() => useRef(null)) const props = { onChange: vi.fn(), keyboardRef: result.current, @@ -158,7 +160,7 @@ describe('FullKeyboard', () => { }) it('should render the software keyboards when hitting #+= key', () => { - const { result } = renderHook(() => React.useRef(null)) + const { result } = renderHook(() => useRef(null)) const props = { onChange: vi.fn(), keyboardRef: result.current, @@ -204,7 +206,7 @@ describe('FullKeyboard', () => { }) it('should call mock function when clicking a key', () => { - const { result } = renderHook(() => React.useRef(null)) + const { result } = renderHook(() => useRef(null)) const props = { onChange: vi.fn(), keyboardRef: result.current, diff --git a/app/src/atoms/SoftwareKeyboard/FullKeyboard/index.tsx b/app/src/atoms/SoftwareKeyboard/FullKeyboard/index.tsx index eed2a0b5934..2846930ad1e 100644 --- a/app/src/atoms/SoftwareKeyboard/FullKeyboard/index.tsx +++ b/app/src/atoms/SoftwareKeyboard/FullKeyboard/index.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState } from 'react' import { KeyboardReact as Keyboard } from 'react-simple-keyboard' import { useSelector } from 'react-redux' import { getAppLanguage } from '/app/redux/config' @@ -7,6 +7,8 @@ import { layoutCandidates, fullKeyboardLayout, } from '../constants' + +import type { MutableRefObject } from 'react' import type { KeyboardReactInterface } from 'react-simple-keyboard' import '../index.css' @@ -15,7 +17,7 @@ import './index.css' // TODO (kk:04/05/2024) add debug to make debugging easy interface FullKeyboardProps { onChange: (input: string) => void - keyboardRef: React.MutableRefObject + keyboardRef: MutableRefObject debug?: boolean } @@ -24,7 +26,7 @@ export function FullKeyboard({ keyboardRef, debug = false, }: FullKeyboardProps): JSX.Element { - const [layoutName, setLayoutName] = React.useState('default') + const [layoutName, setLayoutName] = useState('default') const appLanguage = useSelector(getAppLanguage) const handleShift = (button: string): void => { switch (button) { diff --git a/app/src/atoms/SoftwareKeyboard/IndividualKey/__tests__/IndividualKey.test.tsx b/app/src/atoms/SoftwareKeyboard/IndividualKey/__tests__/IndividualKey.test.tsx index b29404ba226..ecdbdf9aa78 100644 --- a/app/src/atoms/SoftwareKeyboard/IndividualKey/__tests__/IndividualKey.test.tsx +++ b/app/src/atoms/SoftwareKeyboard/IndividualKey/__tests__/IndividualKey.test.tsx @@ -1,17 +1,19 @@ -import * as React from 'react' +import { useRef } from 'react' import { describe, it, vi, expect } from 'vitest' import { fireEvent, renderHook, screen } from '@testing-library/react' import { renderWithProviders } from '/app/__testing-utils__' import { IndividualKey } from '..' -const render = (props: React.ComponentProps) => { +import type { ComponentProps } from 'react' + +const render = (props: ComponentProps) => { return renderWithProviders()[0] } describe('IndividualKey', () => { it('should render the text key', () => { - const { result } = renderHook(() => React.useRef(null)) + const { result } = renderHook(() => useRef(null)) const props = { onChange: vi.fn(), keyboardRef: result.current, @@ -22,7 +24,7 @@ describe('IndividualKey', () => { }) it('should call mock function when clicking text key', () => { - const { result } = renderHook(() => React.useRef(null)) + const { result } = renderHook(() => useRef(null)) const props = { onChange: vi.fn(), keyboardRef: result.current, diff --git a/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/__tests__/NumericalKeyboard.test.tsx b/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/__tests__/NumericalKeyboard.test.tsx index 1bda1caaa71..722f50dfcf1 100644 --- a/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/__tests__/NumericalKeyboard.test.tsx +++ b/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/__tests__/NumericalKeyboard.test.tsx @@ -1,17 +1,19 @@ -import * as React from 'react' +import { useRef } from 'react' import { describe, it, expect, vi } from 'vitest' import '@testing-library/jest-dom/vitest' import { fireEvent, renderHook, screen } from '@testing-library/react' import { renderWithProviders } from '/app/__testing-utils__' import { NumericalKeyboard } from '..' -const render = (props: React.ComponentProps) => { +import type { ComponentProps } from 'react' + +const render = (props: ComponentProps) => { return renderWithProviders()[0] } describe('NumericalKeyboard', () => { it('should render numerical keyboard isDecimal: false and hasHyphen: false', () => { - const { result } = renderHook(() => React.useRef(null)) + const { result } = renderHook(() => useRef(null)) const props = { onChange: vi.fn(), keyboardRef: result.current, @@ -41,7 +43,7 @@ describe('NumericalKeyboard', () => { }) it('should render numerical keyboard isDecimal: false and hasHyphen: true', () => { - const { result } = renderHook(() => React.useRef(null)) + const { result } = renderHook(() => useRef(null)) const props = { onChange: vi.fn(), keyboardRef: result.current, @@ -72,7 +74,7 @@ describe('NumericalKeyboard', () => { }) it('should render numerical keyboard isDecimal: true and hasHyphen: false', () => { - const { result } = renderHook(() => React.useRef(null)) + const { result } = renderHook(() => useRef(null)) const props = { onChange: vi.fn(), keyboardRef: result.current, @@ -103,7 +105,7 @@ describe('NumericalKeyboard', () => { }) it('should render numerical keyboard isDecimal: true and hasHyphen: true', () => { - const { result } = renderHook(() => React.useRef(null)) + const { result } = renderHook(() => useRef(null)) const props = { onChange: vi.fn(), keyboardRef: result.current, @@ -135,7 +137,7 @@ describe('NumericalKeyboard', () => { }) it('should call mock function when clicking num key', () => { - const { result } = renderHook(() => React.useRef(null)) + const { result } = renderHook(() => useRef(null)) const props = { onChange: vi.fn(), keyboardRef: result.current, @@ -149,7 +151,7 @@ describe('NumericalKeyboard', () => { }) it('should call mock function when clicking decimal point key', () => { - const { result } = renderHook(() => React.useRef(null)) + const { result } = renderHook(() => useRef(null)) const props = { onChange: vi.fn(), keyboardRef: result.current, @@ -163,7 +165,7 @@ describe('NumericalKeyboard', () => { }) it('should call mock function when clicking hyphen key', () => { - const { result } = renderHook(() => React.useRef(null)) + const { result } = renderHook(() => useRef(null)) const props = { onChange: vi.fn(), keyboardRef: result.current, diff --git a/app/src/molecules/CollapsibleSection/index.tsx b/app/src/molecules/CollapsibleSection/index.tsx index 3b9d6c4b8d0..3a359edeb4f 100644 --- a/app/src/molecules/CollapsibleSection/index.tsx +++ b/app/src/molecules/CollapsibleSection/index.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState } from 'react' import { css } from 'styled-components' import { @@ -12,6 +12,8 @@ import { LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' + +import type { ReactNode } from 'react' import type { StyleProps } from '@opentrons/components' const ACCORDION_STYLE = css` @@ -26,7 +28,7 @@ const ACCORDION_STYLE = css` interface CollapsibleSectionProps extends StyleProps { title: string - children: React.ReactNode + children: ReactNode isExpandedInitially?: boolean } @@ -34,7 +36,7 @@ export function CollapsibleSection( props: CollapsibleSectionProps ): JSX.Element { const { title, children, isExpandedInitially = true, ...styleProps } = props - const [isExpanded, setIsExpanded] = React.useState(isExpandedInitially) + const [isExpanded, setIsExpanded] = useState(isExpandedInitially) return ( + label: ReactNode + onClick: MouseEventHandler disabled?: boolean } @@ -41,14 +42,14 @@ export function MenuOverlay(props: MenuOverlayProps): JSX.Element { right="0" whiteSpace={NO_WRAP} zIndex={10} - onClick={(e: React.MouseEvent) => { + onClick={(e: MouseEvent) => { e.preventDefault() e.stopPropagation() setShowMenuOverlay(false) }} > {menuOverlayItems.map((menuOverlayItem, i) => ( - + {/* insert a divider before the last item if desired */} {hasDivider && i === menuOverlayItems.length - 1 ? ( @@ -59,7 +60,7 @@ export function MenuOverlay(props: MenuOverlayProps): JSX.Element { > {menuOverlayItem.label} - + ))} ) diff --git a/app/src/molecules/InterventionModal/DeckMapContent.tsx b/app/src/molecules/InterventionModal/DeckMapContent.tsx index a45bc920e0a..6bafed02bd1 100644 --- a/app/src/molecules/InterventionModal/DeckMapContent.tsx +++ b/app/src/molecules/InterventionModal/DeckMapContent.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useEffect } from 'react' import { css } from 'styled-components' import { Box, @@ -11,6 +11,7 @@ import { useDeckLocationSelect, } from '@opentrons/components' +import type { ComponentProps } from 'react' import type { LabwareDefinition2, RobotType, @@ -22,7 +23,7 @@ export type MapKind = 'intervention' | 'deck-config' export interface InterventionStyleDeckMapContentProps extends Pick< - React.ComponentProps, + ComponentProps, 'deckConfig' | 'robotType' | 'labwareOnDeck' | 'modulesOnDeck' > { kind: 'intervention' @@ -107,7 +108,7 @@ function DeckConfigStyleDeckMapContent({ robotType, 'default' ) - React.useEffect(() => { + useEffect(() => { setSelectedLocation != null && setSelectedLocation(selectedLocation) }, [selectedLocation, setSelectedLocation]) return <>{DeckLocationSelect} diff --git a/app/src/molecules/InterventionModal/ModalContentOneColSimpleButtons.tsx b/app/src/molecules/InterventionModal/ModalContentOneColSimpleButtons.tsx index c70ddbea7d1..9302192aa68 100644 --- a/app/src/molecules/InterventionModal/ModalContentOneColSimpleButtons.tsx +++ b/app/src/molecules/InterventionModal/ModalContentOneColSimpleButtons.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState } from 'react' import { Flex, DIRECTION_COLUMN, @@ -9,10 +9,12 @@ import { } from '@opentrons/components' import { OneColumn } from './OneColumn' +import type { ChangeEventHandler } from 'react' + export interface ButtonProps { label: string value: string - onChange?: React.ChangeEventHandler + onChange?: ChangeEventHandler } export interface ModalContentOneColSimpleButtonsProps { @@ -20,14 +22,14 @@ export interface ModalContentOneColSimpleButtonsProps { firstButton: ButtonProps secondButton: ButtonProps furtherButtons?: ButtonProps[] - onSelect?: React.ChangeEventHandler + onSelect?: ChangeEventHandler initialSelected?: string } export function ModalContentOneColSimpleButtons( props: ModalContentOneColSimpleButtonsProps ): JSX.Element { - const [selected, setSelected] = React.useState( + const [selected, setSelected] = useState( props.initialSelected ?? null ) const furtherButtons = props.furtherButtons ?? [] diff --git a/app/src/molecules/JogControls/DirectionControl.tsx b/app/src/molecules/JogControls/DirectionControl.tsx index 8b05e533e4d..d51615fd97e 100644 --- a/app/src/molecules/JogControls/DirectionControl.tsx +++ b/app/src/molecules/JogControls/DirectionControl.tsx @@ -1,5 +1,5 @@ // jog controls component -import * as React from 'react' +import { useState } from 'react' import { useTranslation } from 'react-i18next' import styled, { css } from 'styled-components' @@ -31,8 +31,9 @@ import { ControlContainer } from './ControlContainer' import { HORIZONTAL_PLANE, VERTICAL_PLANE } from './constants' import { TouchControlButton } from './TouchControlButton' -import type { IconName } from '@opentrons/components' +import type { MouseEvent } from 'react' import type { CSSProperties } from 'styled-components' +import type { IconName } from '@opentrons/components' import type { Jog, Plane, Sign, Bearing, Axis, StepSize } from './types' interface Control { @@ -223,12 +224,12 @@ interface DirectionControlProps { export function DirectionControl(props: DirectionControlProps): JSX.Element { const { planes, jog, stepSize, initialPlane } = props - const [currentPlane, setCurrentPlane] = React.useState( + const [currentPlane, setCurrentPlane] = useState( initialPlane ?? planes[0] ) const { t } = useTranslation(['robot_calibration']) - const handlePlane = (event: React.MouseEvent): void => { + const handlePlane = (event: MouseEvent): void => { setCurrentPlane(event.currentTarget.value as Plane) event.currentTarget.blur() } @@ -449,7 +450,7 @@ export function TouchDirectionControl( props: DirectionControlProps ): JSX.Element { const { planes, jog, stepSize, initialPlane } = props - const [currentPlane, setCurrentPlane] = React.useState( + const [currentPlane, setCurrentPlane] = useState( initialPlane ?? planes[0] ) const { i18n, t } = useTranslation(['robot_calibration']) diff --git a/app/src/molecules/JogControls/index.tsx b/app/src/molecules/JogControls/index.tsx index c9d0d7b49f0..0208739d025 100644 --- a/app/src/molecules/JogControls/index.tsx +++ b/app/src/molecules/JogControls/index.tsx @@ -1,5 +1,5 @@ // jog controls component -import * as React from 'react' +import { useState } from 'react' import { css } from 'styled-components' import { Flex, @@ -20,15 +20,16 @@ import { DEFAULT_STEP_SIZES, } from './constants' -import type { Jog, Plane, StepSize } from './types' +import type { ReactNode } from 'react' import type { StyleProps } from '@opentrons/components' +import type { Jog, Plane, StepSize } from './types' export type { Jog } export interface JogControlsProps extends StyleProps { jog: Jog planes?: Plane[] stepSizes?: StepSize[] - auxiliaryControl?: React.ReactNode | null + auxiliaryControl?: ReactNode | null directionControlButtonColor?: string initialPlane?: Plane isOnDevice?: boolean @@ -53,9 +54,7 @@ export function JogControls(props: JogControlsProps): JSX.Element { isOnDevice = false, ...styleProps } = props - const [currentStepSize, setCurrentStepSize] = React.useState( - stepSizes[0] - ) + const [currentStepSize, setCurrentStepSize] = useState(stepSizes[0]) const controls = isOnDevice ? ( <> diff --git a/app/src/molecules/ToggleGroup/useToggleGroup.tsx b/app/src/molecules/ToggleGroup/useToggleGroup.tsx index ebe3efd14c8..5b356ba74cd 100644 --- a/app/src/molecules/ToggleGroup/useToggleGroup.tsx +++ b/app/src/molecules/ToggleGroup/useToggleGroup.tsx @@ -1,13 +1,15 @@ -import * as React from 'react' +import { useState } from 'react' import { ToggleGroup } from '@opentrons/components' import { useTrackEvent } from '/app/redux/analytics' +import type { ReactNode } from 'react' + export const useToggleGroup = ( left: string, right: string, trackEventName?: string -): [string, React.ReactNode] => { - const [selectedValue, setSelectedValue] = React.useState(left) +): [string, ReactNode] => { + const [selectedValue, setSelectedValue] = useState(left) const trackEvent = useTrackEvent() const handleLeftClick = (): void => { setSelectedValue(left) diff --git a/app/src/molecules/UploadInput/index.tsx b/app/src/molecules/UploadInput/index.tsx index 77dc5a2616d..89877f38c33 100644 --- a/app/src/molecules/UploadInput/index.tsx +++ b/app/src/molecules/UploadInput/index.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useRef, useState } from 'react' import styled, { css } from 'styled-components' import { useTranslation } from 'react-i18next' import { @@ -18,6 +18,12 @@ import { TYPOGRAPHY, } from '@opentrons/components' +import type { + ChangeEventHandler, + DragEventHandler, + MouseEventHandler, +} from 'react' + const StyledLabel = styled.label` display: ${DISPLAY_FLEX}; cursor: ${CURSOR_POINTER}; @@ -66,39 +72,37 @@ export function UploadInput(props: UploadInputProps): JSX.Element | null { } = props const { t } = useTranslation('protocol_info') - const fileInput = React.useRef(null) - const [isFileOverDropZone, setIsFileOverDropZone] = React.useState( - false - ) - const [isHover, setIsHover] = React.useState(false) - const handleDrop: React.DragEventHandler = e => { + const fileInput = useRef(null) + const [isFileOverDropZone, setIsFileOverDropZone] = useState(false) + const [isHover, setIsHover] = useState(false) + const handleDrop: DragEventHandler = e => { e.preventDefault() e.stopPropagation() Array.from(e.dataTransfer.files).forEach(f => onUpload(f)) setIsFileOverDropZone(false) } - const handleDragEnter: React.DragEventHandler = e => { + const handleDragEnter: DragEventHandler = e => { e.preventDefault() e.stopPropagation() } - const handleDragLeave: React.DragEventHandler = e => { + const handleDragLeave: DragEventHandler = e => { e.preventDefault() e.stopPropagation() setIsFileOverDropZone(false) setIsHover(false) } - const handleDragOver: React.DragEventHandler = e => { + const handleDragOver: DragEventHandler = e => { e.preventDefault() e.stopPropagation() setIsFileOverDropZone(true) setIsHover(true) } - const handleClick: React.MouseEventHandler = _event => { + const handleClick: MouseEventHandler = _event => { onClick != null ? onClick() : fileInput.current?.click() } - const onChange: React.ChangeEventHandler = event => { + const onChange: ChangeEventHandler = event => { ;[...(event.target.files ?? [])].forEach(f => onUpload(f)) if ('value' in event.currentTarget) event.currentTarget.value = '' } diff --git a/app/src/organisms/ApplyHistoricOffsets/index.tsx b/app/src/organisms/ApplyHistoricOffsets/index.tsx index 6925145c012..60b166fe8d8 100644 --- a/app/src/organisms/ApplyHistoricOffsets/index.tsx +++ b/app/src/organisms/ApplyHistoricOffsets/index.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState } from 'react' import { createPortal } from 'react-dom' import { useSelector } from 'react-redux' import pick from 'lodash/pick' @@ -25,6 +25,8 @@ import { LabwareOffsetTabs } from '/app/organisms/LabwareOffsetTabs' import { getLabwareDefinitionsFromCommands } from '/app/local-resources/labware' import { LabwareOffsetTable } from './LabwareOffsetTable' import { getIsLabwareOffsetCodeSnippetsOn } from '/app/redux/config' + +import type { ChangeEvent } from 'react' import type { LabwareOffset } from '@opentrons/api-client' import type { LoadedLabware, @@ -58,7 +60,7 @@ export function ApplyHistoricOffsets( modules, commands, } = props - const [showOffsetDataModal, setShowOffsetDataModal] = React.useState(false) + const [showOffsetDataModal, setShowOffsetDataModal] = useState(false) const { t } = useTranslation('labware_position_check') const isLabwareOffsetCodeSnippetsOn = useSelector( getIsLabwareOffsetCodeSnippetsOn @@ -85,7 +87,7 @@ export function ApplyHistoricOffsets( return ( ) => { + onChange={(e: ChangeEvent) => { setShouldApplyOffsets(e.currentTarget.checked) }} value={shouldApplyOffsets} diff --git a/app/src/organisms/Desktop/Alerts/AlertsProvider.tsx b/app/src/organisms/Desktop/Alerts/AlertsProvider.tsx index 21aeccbf855..79b6088b445 100644 --- a/app/src/organisms/Desktop/Alerts/AlertsProvider.tsx +++ b/app/src/organisms/Desktop/Alerts/AlertsProvider.tsx @@ -1,21 +1,23 @@ -import * as React from 'react' +import { createContext, useRef } from 'react' import { AlertsModal } from '.' import { useToaster } from '/app/organisms/ToasterOven' +import type { ReactNode } from 'react' + export interface AlertsContextProps { removeActiveAppUpdateToast: () => void } -export const AlertsContext = React.createContext({ +export const AlertsContext = createContext({ removeActiveAppUpdateToast: () => null, }) interface AlertsProps { - children: React.ReactNode + children: ReactNode } export function Alerts({ children }: AlertsProps): JSX.Element { - const toastRef = React.useRef(null) + const toastRef = useRef(null) const { eatToast } = useToaster() const removeActiveAppUpdateToast = (): void => { diff --git a/app/src/organisms/Desktop/CalibrateDeck/index.tsx b/app/src/organisms/Desktop/CalibrateDeck/index.tsx index 783b3d0ba13..b1201dc4553 100644 --- a/app/src/organisms/Desktop/CalibrateDeck/index.tsx +++ b/app/src/organisms/Desktop/CalibrateDeck/index.tsx @@ -1,5 +1,5 @@ // Deck Calibration Orchestration Component -import * as React from 'react' +import { useMemo } from 'react' import { createPortal } from 'react-dom' import { useTranslation } from 'react-i18next' import { useQueryClient } from 'react-query' @@ -27,6 +27,7 @@ import { useCalibrationError, } from '/app/organisms/Desktop/CalibrationError' +import type { ComponentType } from 'react' import type { Mount } from '@opentrons/components' import type { CalibrationLabware, @@ -37,7 +38,7 @@ import type { CalibrationPanelProps } from '/app/organisms/Desktop/CalibrationPa import type { CalibrateDeckParentProps } from './types' const PANEL_BY_STEP: Partial< - Record> + Record> > = { [Sessions.DECK_STEP_SESSION_STARTED]: Introduction, [Sessions.DECK_STEP_LABWARE_LOADED]: DeckSetup, @@ -89,7 +90,7 @@ export function CalibrateDeck({ const errorInfo = useCalibrationError(requestIds, session?.id) - const isMulti = React.useMemo(() => { + const isMulti = useMemo(() => { const spec = instrument && getPipetteModelSpecs(instrument.model) return spec ? spec.channels > 1 : false }, [instrument]) diff --git a/app/src/organisms/Desktop/CalibratePipetteOffset/index.tsx b/app/src/organisms/Desktop/CalibratePipetteOffset/index.tsx index dce310da9c6..2359d275384 100644 --- a/app/src/organisms/Desktop/CalibratePipetteOffset/index.tsx +++ b/app/src/organisms/Desktop/CalibratePipetteOffset/index.tsx @@ -1,5 +1,5 @@ // Pipette Offset Calibration Orchestration Component -import * as React from 'react' +import { useMemo } from 'react' import { createPortal } from 'react-dom' import { useTranslation } from 'react-i18next' import { useQueryClient } from 'react-query' @@ -27,6 +27,7 @@ import { useCalibrationError, } from '/app/organisms/Desktop/CalibrationError' +import type { ComponentType } from 'react' import type { Mount } from '@opentrons/components' import type { CalibrationLabware, @@ -37,7 +38,7 @@ import type { CalibratePipetteOffsetParentProps } from './types' import type { CalibrationPanelProps } from '/app/organisms/Desktop/CalibrationPanels/types' const PANEL_BY_STEP: Partial< - Record> + Record> > = { [Sessions.PIP_OFFSET_STEP_SESSION_STARTED]: Introduction, [Sessions.PIP_OFFSET_STEP_LABWARE_LOADED]: DeckSetup, @@ -88,7 +89,7 @@ export function CalibratePipetteOffset({ const calBlock: CalibrationLabware | null = labware != null ? labware.find(l => !l.isTiprack) ?? null : null - const isMulti = React.useMemo(() => { + const isMulti = useMemo(() => { const spec = instrument != null ? getPipetteModelSpecs(instrument.model) : null return spec != null ? spec.channels > 1 : false diff --git a/app/src/organisms/Desktop/CalibrateTipLength/AskForCalibrationBlockModal.tsx b/app/src/organisms/Desktop/CalibrateTipLength/AskForCalibrationBlockModal.tsx index 62a8ca00ef0..85eb76ae126 100644 --- a/app/src/organisms/Desktop/CalibrateTipLength/AskForCalibrationBlockModal.tsx +++ b/app/src/organisms/Desktop/CalibrateTipLength/AskForCalibrationBlockModal.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState } from 'react' import { createPortal } from 'react-dom' import { Trans, useTranslation } from 'react-i18next' import { @@ -24,6 +24,7 @@ import { WizardHeader } from '/app/molecules/WizardHeader' import { getTopPortalEl } from '/app/App/portal' import { setUseTrashSurfaceForTipCal } from '/app/redux/calibration' +import type { ChangeEvent } from 'react' import type { Dispatch } from '/app/redux/types' const BLOCK_REQUEST_EMAIL_BODY = @@ -41,9 +42,7 @@ interface Props { export function AskForCalibrationBlockModal(props: Props): JSX.Element { const { t } = useTranslation(['robot_calibration', 'shared', 'branded']) - const [rememberPreference, setRememberPreference] = React.useState( - true - ) + const [rememberPreference, setRememberPreference] = useState(true) const dispatch = useDispatch() const makeSetHasBlock = (hasBlock: boolean) => (): void => { @@ -108,7 +107,7 @@ export function AskForCalibrationBlockModal(props: Props): JSX.Element { > ) => { + onChange={(e: ChangeEvent) => { setRememberPreference(e.currentTarget.checked) }} value={rememberPreference} diff --git a/app/src/organisms/Desktop/CalibrateTipLength/index.tsx b/app/src/organisms/Desktop/CalibrateTipLength/index.tsx index 02ac74e09d5..e905f1b77c7 100644 --- a/app/src/organisms/Desktop/CalibrateTipLength/index.tsx +++ b/app/src/organisms/Desktop/CalibrateTipLength/index.tsx @@ -1,5 +1,5 @@ // Tip Length Calibration Orchestration Component -import * as React from 'react' +import { useMemo } from 'react' import { createPortal } from 'react-dom' import { useTranslation } from 'react-i18next' import { useQueryClient } from 'react-query' @@ -30,6 +30,7 @@ import { import slotOneRemoveBlockAsset from '/app/assets/videos/tip-length-cal/Slot_1_Remove_CalBlock_(330x260)REV1.webm' import slotThreeRemoveBlockAsset from '/app/assets/videos/tip-length-cal/Slot_3_Remove_CalBlock_(330x260)REV1.webm' +import type { ComponentType } from 'react' import type { Mount } from '@opentrons/components' import type { SessionCommandParams, @@ -43,7 +44,7 @@ export { AskForCalibrationBlockModal } from './AskForCalibrationBlockModal' export { ConfirmRecalibrationModal } from './ConfirmRecalibrationModal' const PANEL_BY_STEP: Partial< - Record> + Record> > = { sessionStarted: Introduction, labwareLoaded: DeckSetup, @@ -80,7 +81,7 @@ export function CalibrateTipLength({ const queryClient = useQueryClient() const host = useHost() - const isMulti = React.useMemo(() => { + const isMulti = useMemo(() => { const spec = instrument != null ? getPipetteModelSpecs(instrument.model) : null return spec != null ? spec.channels > 1 : false diff --git a/app/src/organisms/Desktop/CalibrationPanels/SaveZPoint.tsx b/app/src/organisms/Desktop/CalibrationPanels/SaveZPoint.tsx index 7c85aa4b020..094b94a2025 100644 --- a/app/src/organisms/Desktop/CalibrationPanels/SaveZPoint.tsx +++ b/app/src/organisms/Desktop/CalibrationPanels/SaveZPoint.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useMemo } from 'react' import { css } from 'styled-components' import { Trans, useTranslation } from 'react-i18next' import { @@ -29,6 +29,7 @@ import slot5LeftSingleDemoAsset from '/app/assets/videos/cal-movement/SLOT_5_LEF import slot5RightMultiDemoAsset from '/app/assets/videos/cal-movement/SLOT_5_RIGHT_MULTI_Z.webm' import slot5RightSingleDemoAsset from '/app/assets/videos/cal-movement/SLOT_5_RIGHT_SINGLE_Z.webm' +import type { MouseEventHandler } from 'react' import type { Axis, Sign, StepSize } from '/app/molecules/JogControls/types' import type { CalibrationPanelProps } from './types' @@ -46,7 +47,7 @@ const assetMap = { export function SaveZPoint(props: CalibrationPanelProps): JSX.Element { const { t } = useTranslation('robot_calibration') const { isMulti, mount, sendCommands, sessionType } = props - const demoAsset = React.useMemo( + const demoAsset = useMemo( () => mount && assetMap[mount][isMulti ? 'multi' : 'single'], [mount, isMulti] ) @@ -62,7 +63,7 @@ export function SaveZPoint(props: CalibrationPanelProps): JSX.Element { const isHealthCheck = sessionType === Sessions.SESSION_TYPE_CALIBRATION_HEALTH_CHECK - const proceed: React.MouseEventHandler = _event => { + const proceed: MouseEventHandler = _event => { isHealthCheck ? sendCommands( { command: Sessions.checkCommands.COMPARE_POINT }, diff --git a/app/src/organisms/Desktop/CheckCalibration/index.tsx b/app/src/organisms/Desktop/CheckCalibration/index.tsx index f2dae1c242e..10bf25e93f9 100644 --- a/app/src/organisms/Desktop/CheckCalibration/index.tsx +++ b/app/src/organisms/Desktop/CheckCalibration/index.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useMemo } from 'react' import { createPortal } from 'react-dom' import { useTranslation } from 'react-i18next' @@ -22,7 +22,9 @@ import { WizardHeader } from '/app/molecules/WizardHeader' import { getTopPortalEl } from '/app/App/portal' import { ReturnTip } from './ReturnTip' import { ResultsSummary } from './ResultsSummary' +import { CHECK_PIPETTE_RANK_FIRST } from '/app/redux/sessions' +import type { ComponentType } from 'react' import type { Mount } from '@opentrons/components' import type { CalibrationLabware, @@ -30,15 +32,13 @@ import type { RobotCalibrationCheckStep, SessionCommandParams, } from '/app/redux/sessions/types' - import type { CalibrationPanelProps } from '/app/organisms/Desktop/CalibrationPanels/types' import type { CalibrationCheckParentProps } from './types' -import { CHECK_PIPETTE_RANK_FIRST } from '/app/redux/sessions' const ROBOT_CALIBRATION_CHECK_SUBTITLE = 'Calibration health check' const PANEL_BY_STEP: { - [step in RobotCalibrationCheckStep]?: React.ComponentType + [step in RobotCalibrationCheckStep]?: ComponentType } = { [Sessions.CHECK_STEP_SESSION_STARTED]: Introduction, [Sessions.CHECK_STEP_LABWARE_LOADED]: DeckSetup, @@ -124,7 +124,7 @@ export function CheckCalibration( cleanUpAndExit() }, true) - const isMulti = React.useMemo(() => { + const isMulti = useMemo(() => { const spec = activePipette && getPipetteModelSpecs(activePipette.model) return spec ? spec.channels > 1 : false }, [activePipette]) diff --git a/app/src/organisms/Desktop/ChooseProtocolSlideout/index.tsx b/app/src/organisms/Desktop/ChooseProtocolSlideout/index.tsx index a4824c76c5c..5fa0536eb60 100644 --- a/app/src/organisms/Desktop/ChooseProtocolSlideout/index.tsx +++ b/app/src/organisms/Desktop/ChooseProtocolSlideout/index.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useEffect, useState, Fragment } from 'react' import first from 'lodash/first' import { Trans, useTranslation } from 'react-i18next' import { Link, NavLink, useNavigate } from 'react-router-dom' @@ -62,6 +62,7 @@ import { } from '/app/transformations/runs' import { getAnalysisStatus } from '/app/organisms/Desktop/ProtocolsLanding/utils' +import type { MouseEventHandler } from 'react' import type { DropdownOption } from '@opentrons/components' import type { RunTimeParameter } from '@opentrons/shared-data' import type { Robot } from '/app/redux/discovery/types' @@ -100,7 +101,7 @@ export function ChooseProtocolSlideoutComponent( const [ showRestoreValuesTooltip, setShowRestoreValuesTooltip, - ] = React.useState(false) + ] = useState(false) const { robot, showSlideout, onCloseClick } = props const { name } = robot @@ -108,26 +109,25 @@ export function ChooseProtocolSlideoutComponent( const [ selectedProtocol, setSelectedProtocol, - ] = React.useState(null) - const [ - runTimeParametersOverrides, - setRunTimeParametersOverrides, - ] = React.useState([]) - const [currentPage, setCurrentPage] = React.useState(1) - const [hasParamError, setHasParamError] = React.useState(false) - const [hasMissingFileParam, setHasMissingFileParam] = React.useState( + ] = useState(null) + const [runTimeParametersOverrides, setRunTimeParametersOverrides] = useState< + RunTimeParameter[] + >([]) + const [currentPage, setCurrentPage] = useState(1) + const [hasParamError, setHasParamError] = useState(false) + const [hasMissingFileParam, setHasMissingFileParam] = useState( runTimeParametersOverrides?.some( parameter => parameter.type === 'csv_file' ) ?? false ) - const [isInputFocused, setIsInputFocused] = React.useState(false) + const [isInputFocused, setIsInputFocused] = useState(false) - React.useEffect(() => { + useEffect(() => { setRunTimeParametersOverrides( selectedProtocol?.mostRecentAnalysis?.runTimeParameters ?? [] ) }, [selectedProtocol]) - React.useEffect(() => { + useEffect(() => { setHasParamError(errors.length > 0) setHasMissingFileParam( runTimeParametersOverrides.some( @@ -149,7 +149,7 @@ export function ChooseProtocolSlideoutComponent( const missingAnalysisData = analysisStatus === 'error' || analysisStatus === 'stale' - const [shouldApplyOffsets, setShouldApplyOffsets] = React.useState(true) + const [shouldApplyOffsets, setShouldApplyOffsets] = useState(true) const offsetCandidates = useOffsetCandidatesForAnalysis( (!missingAnalysisData ? selectedProtocol?.mostRecentAnalysis : null) ?? null, @@ -211,7 +211,7 @@ export function ChooseProtocolSlideoutComponent( })) : [] ) - const handleProceed: React.MouseEventHandler = () => { + const handleProceed: MouseEventHandler = () => { if (selectedProtocol != null) { trackCreateProtocolRunEvent({ name: 'createProtocolRecordRequest' }) const dataFilesForProtocolMap = runTimeParametersOverrides.reduce< @@ -725,7 +725,7 @@ function StoredProtocolList(props: StoredProtocolListProps): JSX.Element { ).filter( protocol => protocol.mostRecentAnalysis?.robotType === robot.robotModel ) - React.useEffect(() => { + useEffect(() => { handleSelectProtocol(first(storedProtocols) ?? null) }, []) @@ -744,7 +744,7 @@ function StoredProtocolList(props: StoredProtocolListProps): JSX.Element { const requiresCsvRunTimeParameter = analysisStatus === 'parameterRequired' return ( - + ) : null} - + ) })} diff --git a/app/src/organisms/Desktop/ChooseRobotSlideout/AvailableRobotOption.tsx b/app/src/organisms/Desktop/ChooseRobotSlideout/AvailableRobotOption.tsx index f06464c2f2a..992e25706dc 100644 --- a/app/src/organisms/Desktop/ChooseRobotSlideout/AvailableRobotOption.tsx +++ b/app/src/organisms/Desktop/ChooseRobotSlideout/AvailableRobotOption.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useEffect, useState } from 'react' import { useDispatch, useSelector } from 'react-redux' import { css } from 'styled-components' import { Trans, useTranslation } from 'react-i18next' @@ -24,6 +24,7 @@ import OT2_PNG from '/app/assets/images/OT2-R_HERO.png' import FLEX_PNG from '/app/assets/images/FLEX.png' import { useCurrentRunId, useNotifyRunQuery } from '/app/resources/runs' +import type { Dispatch as ReactDispatch } from 'react' import type { IconName } from '@opentrons/components' import type { Runs } from '@opentrons/api-client' import type { Robot } from '/app/redux/discovery/types' @@ -35,7 +36,7 @@ interface AvailableRobotOptionProps { onClick: () => void isSelected: boolean isSelectedRobotOnDifferentSoftwareVersion: boolean - registerRobotBusyStatus: React.Dispatch + registerRobotBusyStatus: ReactDispatch isError?: boolean showIdleOnly?: boolean } @@ -59,7 +60,7 @@ export function AvailableRobotOption( getRobotModelByName(state, robotName) ) - const [isBusy, setIsBusy] = React.useState(true) + const [isBusy, setIsBusy] = useState(true) const currentRunId = useCurrentRunId( { @@ -112,7 +113,7 @@ export function AvailableRobotOption( iconName = 'usb' } - React.useEffect(() => { + useEffect(() => { dispatch(fetchStatus(robotName)) // eslint-disable-next-line react-hooks/exhaustive-deps }, []) diff --git a/app/src/organisms/Desktop/ChooseRobotToRunProtocolSlideout/index.tsx b/app/src/organisms/Desktop/ChooseRobotToRunProtocolSlideout/index.tsx index f4850a649cf..e3946a4cc99 100644 --- a/app/src/organisms/Desktop/ChooseRobotToRunProtocolSlideout/index.tsx +++ b/app/src/organisms/Desktop/ChooseRobotToRunProtocolSlideout/index.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState } from 'react' import first from 'lodash/first' import { useTranslation } from 'react-i18next' import { useNavigate } from 'react-router-dom' @@ -33,6 +33,8 @@ import { ApplyHistoricOffsets } from '/app/organisms/ApplyHistoricOffsets' import { useOffsetCandidatesForAnalysis } from '/app/organisms/ApplyHistoricOffsets/hooks/useOffsetCandidatesForAnalysis' import { ChooseRobotSlideout } from '../ChooseRobotSlideout' import { useCreateRunFromProtocol } from './useCreateRunFromProtocol' + +import type { MouseEventHandler } from 'react' import type { StyleProps } from '@opentrons/components' import type { RunTimeParameter } from '@opentrons/shared-data' import type { Robot } from '/app/redux/discovery/types' @@ -65,16 +67,14 @@ export function ChooseRobotToRunProtocolSlideoutComponent( setSelectedRobot, } = props const navigate = useNavigate() - const [shouldApplyOffsets, setShouldApplyOffsets] = React.useState( - true - ) + const [shouldApplyOffsets, setShouldApplyOffsets] = useState(true) const { protocolKey, srcFileNames, srcFiles, mostRecentAnalysis, } = storedProtocolData - const [currentPage, setCurrentPage] = React.useState(1) + const [currentPage, setCurrentPage] = useState(1) const { trackCreateProtocolRunEvent } = useTrackCreateProtocolRunEvent( storedProtocolData, selectedRobot?.name ?? '' @@ -82,12 +82,11 @@ export function ChooseRobotToRunProtocolSlideoutComponent( const runTimeParameters = storedProtocolData.mostRecentAnalysis?.runTimeParameters ?? [] - const [ - runTimeParametersOverrides, - setRunTimeParametersOverrides, - ] = React.useState(runTimeParameters) - const [hasParamError, setHasParamError] = React.useState(false) - const [hasMissingFileParam, setHasMissingFileParam] = React.useState( + const [runTimeParametersOverrides, setRunTimeParametersOverrides] = useState< + RunTimeParameter[] + >(runTimeParameters) + const [hasParamError, setHasParamError] = useState(false) + const [hasMissingFileParam, setHasMissingFileParam] = useState( runTimeParameters?.some(parameter => parameter.type === 'csv_file') ?? false ) @@ -133,7 +132,7 @@ export function ChooseRobotToRunProtocolSlideoutComponent( })) : [] ) - const handleProceed: React.MouseEventHandler = () => { + const handleProceed: MouseEventHandler = () => { trackCreateProtocolRunEvent({ name: 'createProtocolRecordRequest' }) const dataFilesForProtocolMap = runTimeParametersOverrides.reduce< Record @@ -353,7 +352,7 @@ export function ChooseRobotToRunProtocolSlideoutComponent( export function ChooseRobotToRunProtocolSlideout( props: ChooseRobotToRunProtocolSlideoutProps ): JSX.Element | null { - const [selectedRobot, setSelectedRobot] = React.useState(null) + const [selectedRobot, setSelectedRobot] = useState(null) return ( void } @@ -26,7 +28,7 @@ export function CheckPipettesButton( ): JSX.Element | null { const { onDone, children, direction } = props const { t } = useTranslation('change_pipette') - const [isPending, setIsPending] = React.useState(false) + const [isPending, setIsPending] = useState(false) const { refetch: refetchPipettes } = usePipettesQuery( { refresh: true }, { diff --git a/app/src/organisms/Desktop/Devices/GripperCard/index.tsx b/app/src/organisms/Desktop/Devices/GripperCard/index.tsx index c8a5280049e..0d425640c11 100644 --- a/app/src/organisms/Desktop/Devices/GripperCard/index.tsx +++ b/app/src/organisms/Desktop/Devices/GripperCard/index.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState, useEffect } from 'react' import { Trans, useTranslation } from 'react-i18next' import { css } from 'styled-components' import { @@ -15,6 +15,7 @@ import { GripperWizardFlows } from '/app/organisms/GripperWizardFlows' import { AboutGripperSlideout } from './AboutGripperSlideout' import { GRIPPER_FLOW_TYPES } from '/app/organisms/GripperWizardFlows/constants' +import type { MouseEventHandler } from 'react' import type { BadGripper, GripperData } from '@opentrons/api-client' import type { GripperModel } from '@opentrons/shared-data' import type { GripperWizardFlowType } from '/app/organisms/GripperWizardFlows/types' @@ -53,26 +54,24 @@ export function GripperCard({ const [ openWizardFlowType, setOpenWizardFlowType, - ] = React.useState(null) + ] = useState(null) const [ showAboutGripperSlideout, setShowAboutGripperSlideout, - ] = React.useState(false) + ] = useState(false) - const handleAttach: React.MouseEventHandler = () => { + const handleAttach: MouseEventHandler = () => { setOpenWizardFlowType(GRIPPER_FLOW_TYPES.ATTACH) } - const handleDetach: React.MouseEventHandler = () => { + const handleDetach: MouseEventHandler = () => { setOpenWizardFlowType(GRIPPER_FLOW_TYPES.DETACH) } - const handleCalibrate: React.MouseEventHandler = () => { + const handleCalibrate: MouseEventHandler = () => { setOpenWizardFlowType(GRIPPER_FLOW_TYPES.RECALIBRATE) } - const [pollForSubsystemUpdate, setPollForSubsystemUpdate] = React.useState( - false - ) + const [pollForSubsystemUpdate, setPollForSubsystemUpdate] = useState(false) const { data: subsystemUpdateData } = useCurrentSubsystemUpdateQuery( 'gripper', { @@ -84,7 +83,7 @@ export function GripperCard({ // detected until the update has been done for 5 seconds // this gives the instruments endpoint time to start reporting // a good instrument - React.useEffect(() => { + useEffect(() => { if (attachedGripper?.ok === false) { setPollForSubsystemUpdate(true) } else if ( diff --git a/app/src/organisms/Desktop/Devices/PipetteCard/FlexPipetteCard.tsx b/app/src/organisms/Desktop/Devices/PipetteCard/FlexPipetteCard.tsx index 3a1354f7680..50848a92d0c 100644 --- a/app/src/organisms/Desktop/Devices/PipetteCard/FlexPipetteCard.tsx +++ b/app/src/organisms/Desktop/Devices/PipetteCard/FlexPipetteCard.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState, useEffect } from 'react' import { Trans, useTranslation } from 'react-i18next' import { css } from 'styled-components' import { @@ -29,6 +29,7 @@ import { import { AboutPipetteSlideout } from './AboutPipetteSlideout' +import type { MouseEventHandler } from 'react' import type { BadPipette, HostConfig, @@ -79,12 +80,11 @@ export function FlexPipetteCard({ const [ showAboutPipetteSlideout, setShowAboutPipetteSlideout, - ] = React.useState(false) - const [showChoosePipette, setShowChoosePipette] = React.useState(false) - const [ - selectedPipette, - setSelectedPipette, - ] = React.useState(SINGLE_MOUNT_PIPETTES) + ] = useState(false) + const [showChoosePipette, setShowChoosePipette] = useState(false) + const [selectedPipette, setSelectedPipette] = useState( + SINGLE_MOUNT_PIPETTES + ) const attachedPipetteIs96Channel = attachedPipette?.ok && attachedPipette.instrumentName === 'p1000_96' const selectedPipetteForWizard = attachedPipetteIs96Channel @@ -107,7 +107,7 @@ export function FlexPipetteCard({ host, }) } - const handleChoosePipette: React.MouseEventHandler = () => { + const handleChoosePipette: MouseEventHandler = () => { setShowChoosePipette(true) } const handleAttach = (): void => { @@ -115,17 +115,15 @@ export function FlexPipetteCard({ handleLaunchPipetteWizardFlows(FLOWS.ATTACH) } - const handleDetach: React.MouseEventHandler = () => { + const handleDetach: MouseEventHandler = () => { handleLaunchPipetteWizardFlows(FLOWS.DETACH) } - const handleCalibrate: React.MouseEventHandler = () => { + const handleCalibrate: MouseEventHandler = () => { handleLaunchPipetteWizardFlows(FLOWS.CALIBRATE) } - const [pollForSubsystemUpdate, setPollForSubsystemUpdate] = React.useState( - false - ) + const [pollForSubsystemUpdate, setPollForSubsystemUpdate] = useState(false) const subsystem = attachedPipette?.subsystem ?? null const { data: subsystemUpdateData } = useCurrentSubsystemUpdateQuery( subsystem, @@ -139,7 +137,7 @@ export function FlexPipetteCard({ // detected until the update has been done for 5 seconds // this gives the instruments endpoint time to start reporting // a good instrument - React.useEffect(() => { + useEffect(() => { if (attachedPipette?.ok === false) { setPollForSubsystemUpdate(true) } else if ( diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderBannerContainer/ProtocolAnalysisErrorBanner.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderBannerContainer/ProtocolAnalysisErrorBanner.tsx index 18a8f0e682a..753ed296d86 100644 --- a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderBannerContainer/ProtocolAnalysisErrorBanner.tsx +++ b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderBannerContainer/ProtocolAnalysisErrorBanner.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState } from 'react' import { createPortal } from 'react-dom' import { Trans, useTranslation } from 'react-i18next' @@ -18,6 +18,7 @@ import { import { getTopPortalEl } from '/app/App/portal' +import type { MouseEventHandler } from 'react' import type { AnalysisError } from '@opentrons/shared-data' interface ProtocolAnalysisErrorBannerProps { @@ -29,9 +30,9 @@ export function ProtocolAnalysisErrorBanner( ): JSX.Element { const { errors } = props const { t } = useTranslation(['run_details']) - const [showErrorDetails, setShowErrorDetails] = React.useState(false) + const [showErrorDetails, setShowErrorDetails] = useState(false) - const handleToggleDetails: React.MouseEventHandler = e => { + const handleToggleDetails: MouseEventHandler = e => { e.preventDefault() e.stopPropagation() setShowErrorDetails(!showErrorDetails) diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/ConfirmCancelModal.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/ConfirmCancelModal.tsx index 083b7f752fc..770217dad82 100644 --- a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/ConfirmCancelModal.tsx +++ b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/ConfirmCancelModal.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState, useEffect } from 'react' import { createPortal } from 'react-dom' import { useTranslation } from 'react-i18next' @@ -27,6 +27,7 @@ import { useTrackProtocolRunEvent } from '/app/redux-resources/analytics' import { useIsFlex } from '/app/redux-resources/robots' import { ANALYTICS_PROTOCOL_RUN_ACTION } from '/app/redux/analytics' +import type { MouseEventHandler } from 'react' import type { RunStatus } from '@opentrons/api-client' export interface UseConfirmCancelModalResult { @@ -35,7 +36,7 @@ export interface UseConfirmCancelModalResult { } export function useConfirmCancelModal(): UseConfirmCancelModalResult { - const [showModal, setShowModal] = React.useState(false) + const [showModal, setShowModal] = useState(false) const toggleModal = (): void => { setShowModal(!showModal) @@ -58,14 +59,14 @@ export function ConfirmCancelModal( const { stopRun } = useStopRunMutation() const isFlex = useIsFlex(robotName) const { trackProtocolRunEvent } = useTrackProtocolRunEvent(runId, robotName) - const [isCanceling, setIsCanceling] = React.useState(false) + const [isCanceling, setIsCanceling] = useState(false) const { t } = useTranslation('run_details') const cancelRunAlertInfo = isFlex ? t('cancel_run_alert_info_flex') : t('cancel_run_alert_info_ot2') - const cancelRun: React.MouseEventHandler = (e): void => { + const cancelRun: MouseEventHandler = (e): void => { e.preventDefault() e.stopPropagation() setIsCanceling(true) @@ -78,7 +79,8 @@ export function ConfirmCancelModal( }, }) } - React.useEffect(() => { + + useEffect(() => { if ( runStatus === RUN_STATUS_STOP_REQUESTED || runStatus === RUN_STATUS_STOPPED diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/RunFailedModal.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/RunFailedModal.tsx index 77041e48c18..33d7949a449 100644 --- a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/RunFailedModal.tsx +++ b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/RunFailedModal.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState } from 'react' import { useTranslation } from 'react-i18next' import { css } from 'styled-components' @@ -25,6 +25,7 @@ import { import { useDownloadRunLog } from '../../../../hooks' import { RUN_STATUS_SUCCEEDED } from '@opentrons/api-client' +import type { MouseEventHandler } from 'react' import type { RunStatus } from '@opentrons/api-client' import type { ModalProps } from '@opentrons/components' import type { RunCommandError } from '@opentrons/shared-data' @@ -41,7 +42,7 @@ export interface UseRunFailedModalResult { export function useRunFailedModal( runErrors: UseRunErrorsResult ): UseRunFailedModalResult { - const [showRunFailedModal, setShowRunFailedModal] = React.useState(false) + const [showRunFailedModal, setShowRunFailedModal] = useState(false) const toggleModal = (): void => { setShowRunFailedModal(!showRunFailedModal) @@ -95,7 +96,7 @@ export function RunFailedModal({ toggleModal() } - const handleDownloadClick: React.MouseEventHandler = e => { + const handleDownloadClick: MouseEventHandler = e => { e.preventDefault() e.stopPropagation() downloadRunLog() diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/index.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/index.tsx index 40375135db9..fa13d31487b 100644 --- a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/index.tsx +++ b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/index.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useEffect, useRef } from 'react' import { useNavigate } from 'react-router-dom' import { css } from 'styled-components' @@ -30,8 +30,10 @@ import { RunHeaderContent } from './RunHeaderContent' import { EQUIPMENT_POLL_MS } from './constants' import { isCancellableStatus } from './utils' +import type { RefObject } from 'react' + export interface ProtocolRunHeaderProps { - protocolRunHeaderRef: React.RefObject | null + protocolRunHeaderRef: RefObject | null robotName: string runId: string makeHandleJumpToStep: (index: number) => () => void @@ -70,7 +72,7 @@ export function ProtocolRunHeader( runErrors, }) - React.useEffect(() => { + useEffect(() => { if (protocolData != null && !isRobotViewable) { navigate('/devices') } @@ -78,7 +80,7 @@ export function ProtocolRunHeader( // To persist "run again" loading conditions into a new run, we need a scalar that persists longer than // the runControl isResetRunLoading, which completes before we want to change user-facing copy/CTAs. - const isResetRunLoadingRef = React.useRef(false) + const isResetRunLoadingRef = useRef(false) if (runStatus === RUN_STATUS_IDLE || runStatus === RUN_STATUS_RUNNING) { isResetRunLoadingRef.current = false } diff --git a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunSetup.tsx b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunSetup.tsx index 8e10948795a..c1382acb777 100644 --- a/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunSetup.tsx +++ b/app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunSetup.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState } from 'react' import { useTranslation } from 'react-i18next' import { useDispatch, useSelector } from 'react-redux' @@ -60,11 +60,12 @@ import { SetupLiquids } from './SetupLiquids' import { EmptySetupStep } from './EmptySetupStep' import { HowLPCWorksModal } from './SetupLabwarePositionCheck/HowLPCWorksModal' +import type { RefObject } from 'react' import type { Dispatch, State } from '/app/redux/types' import type { StepKey } from '/app/redux/protocol-runs' interface ProtocolRunSetupProps { - protocolRunHeaderRef: React.RefObject | null + protocolRunHeaderRef: RefObject | null robotName: string runId: string } @@ -92,9 +93,7 @@ export function ProtocolRunSetup({ const isFlex = useIsFlex(robotName) const runHasStarted = useRunHasStarted(runId) const { analysisErrors } = useProtocolAnalysisErrors(runId) - const [expandedStepKey, setExpandedStepKey] = React.useState( - null - ) + const [expandedStepKey, setExpandedStepKey] = useState(null) const robotType = isFlex ? FLEX_ROBOT_TYPE : OT2_ROBOT_TYPE const deckConfigCompatibility = useDeckConfigurationCompatibility( robotType, @@ -481,14 +480,14 @@ function StepRightElement(props: StepRightElementProps): JSX.Element | null { function LearnAboutLPC(): JSX.Element { const { t } = useTranslation('protocol_setup') - const [showLPCHelpModal, setShowLPCHelpModal] = React.useState(false) + const [showLPCHelpModal, setShowLPCHelpModal] = useState(false) return ( <> { + onClick={(e: MouseEvent) => { // clicking link shouldn't toggle step expanded state e.preventDefault() e.stopPropagation() diff --git a/app/src/organisms/Desktop/Devices/RobotOverflowMenu.tsx b/app/src/organisms/Desktop/Devices/RobotOverflowMenu.tsx index 287c2ff032f..d2f5f3e8a82 100644 --- a/app/src/organisms/Desktop/Devices/RobotOverflowMenu.tsx +++ b/app/src/organisms/Desktop/Devices/RobotOverflowMenu.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState } from 'react' import { createPortal } from 'react-dom' import { useTranslation } from 'react-i18next' import { useDispatch } from 'react-redux' @@ -31,6 +31,7 @@ import { useCurrentRunId } from '/app/resources/runs' import { ConnectionTroubleshootingModal } from './ConnectionTroubleshootingModal' import { useIsRobotBusy } from '/app/redux-resources/robots' +import type { MouseEventHandler, MouseEvent, ReactNode } from 'react' import type { StyleProps } from '@opentrons/components' import type { DiscoveredRobot } from '/app/redux/discovery/types' import type { Dispatch } from '/app/redux/types' @@ -54,11 +55,11 @@ export function RobotOverflowMenu(props: RobotOverflowMenuProps): JSX.Element { const [ showChooseProtocolSlideout, setShowChooseProtocolSlideout, - ] = React.useState(false) + ] = useState(false) const [ showConnectionTroubleshootingModal, setShowConnectionTroubleshootingModal, - ] = React.useState(false) + ] = useState(false) const isRobotOnWrongVersionOfSoftware = useIsRobotOnWrongVersionOfSoftware( robot.name @@ -66,20 +67,20 @@ export function RobotOverflowMenu(props: RobotOverflowMenuProps): JSX.Element { const isRobotBusy = useIsRobotBusy({ poll: true }) - const handleClickRun: React.MouseEventHandler = e => { + const handleClickRun: MouseEventHandler = e => { e.preventDefault() e.stopPropagation() setShowChooseProtocolSlideout(true) setShowOverflowMenu(false) } - const handleClickConnectionTroubleshooting: React.MouseEventHandler = e => { + const handleClickConnectionTroubleshooting: MouseEventHandler = e => { e.preventDefault() e.stopPropagation() setShowConnectionTroubleshootingModal(true) setShowOverflowMenu(false) } - let menuItems: React.ReactNode + let menuItems: ReactNode if (robot.status === CONNECTABLE && runId == null) { menuItems = ( <> @@ -161,7 +162,7 @@ export function RobotOverflowMenu(props: RobotOverflowMenuProps): JSX.Element { data-testid={`RobotCard_${String(robot.name)}_overflowMenu`} flexDirection={DIRECTION_COLUMN} position={POSITION_RELATIVE} - onClick={(e: React.MouseEvent) => { + onClick={(e: MouseEvent) => { e.stopPropagation() }} {...styleProps} diff --git a/app/src/organisms/Desktop/Devices/RobotOverviewOverflowMenu.tsx b/app/src/organisms/Desktop/Devices/RobotOverviewOverflowMenu.tsx index 3b6dda678ca..5ff5ac357b6 100644 --- a/app/src/organisms/Desktop/Devices/RobotOverviewOverflowMenu.tsx +++ b/app/src/organisms/Desktop/Devices/RobotOverviewOverflowMenu.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState } from 'react' import { css } from 'styled-components' import { createPortal } from 'react-dom' import { useTranslation } from 'react-i18next' @@ -35,6 +35,8 @@ import { useIsRobotBusy } from '/app/redux-resources/robots' import { useCanDisconnect } from '/app/resources/networking/hooks' import { useIsEstopNotDisengaged } from '/app/resources/devices/hooks/useIsEstopNotDisengaged' import { useCurrentRunId } from '/app/resources/runs' + +import type { MouseEventHandler, MouseEvent } from 'react' import type { DiscoveredRobot } from '/app/redux/discovery/types' import type { Dispatch } from '/app/redux/types' @@ -61,25 +63,23 @@ export const RobotOverviewOverflowMenu = ( const dispatch = useDispatch() - const handleClickRestart: React.MouseEventHandler = () => { + const handleClickRestart: MouseEventHandler = () => { dispatch(restartRobot(robot.name)) } - const handleClickHomeGantry: React.MouseEventHandler = () => { + const handleClickHomeGantry: MouseEventHandler = () => { dispatch(home(robot.name, ROBOT)) } const [ showChooseProtocolSlideout, setShowChooseProtocolSlideout, - ] = React.useState(false) - const [showDisconnectModal, setShowDisconnectModal] = React.useState( - false - ) + ] = useState(false) + const [showDisconnectModal, setShowDisconnectModal] = useState(false) const canDisconnect = useCanDisconnect(robot.name) - const handleClickDisconnect: React.MouseEventHandler = () => { + const handleClickDisconnect: MouseEventHandler = () => { setShowDisconnectModal(true) } @@ -87,7 +87,7 @@ export const RobotOverviewOverflowMenu = ( dispatch(checkShellUpdate()) }) - const handleClickRun: React.MouseEventHandler = () => { + const handleClickRun: MouseEventHandler = () => { setShowChooseProtocolSlideout(true) } @@ -125,7 +125,7 @@ export const RobotOverviewOverflowMenu = ( top="2.25rem" right={0} flexDirection={DIRECTION_COLUMN} - onClick={(e: React.MouseEvent) => { + onClick={(e: MouseEvent) => { e.preventDefault() e.stopPropagation() setShowOverflowMenu(false) diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/DeviceResetSlideout.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/DeviceResetSlideout.tsx index d4ddba6e764..763ca9f0cb2 100644 --- a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/DeviceResetSlideout.tsx +++ b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/DeviceResetSlideout.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState, useEffect } from 'react' import { useSelector, useDispatch } from 'react-redux' import { useTranslation } from 'react-i18next' import snakeCase from 'lodash/snakeCase' @@ -40,6 +40,7 @@ import { import { useRobot, useIsFlex } from '/app/redux-resources/robots' import { useNotifyAllRunsQuery } from '/app/resources/runs' +import type { MouseEventHandler } from 'react' import type { State, Dispatch } from '/app/redux/types' import type { ResetConfigRequest } from '/app/redux/robot-admin/types' @@ -61,7 +62,7 @@ export function DeviceResetSlideout({ const doTrackEvent = useTrackEvent() const robot = useRobot(robotName) const dispatch = useDispatch() - const [resetOptions, setResetOptions] = React.useState({}) + const [resetOptions, setResetOptions] = useState({}) const runsQueryResponse = useNotifyAllRunsQuery() const isFlex = useIsFlex(robotName) @@ -98,11 +99,11 @@ export function DeviceResetSlideout({ ? options.filter(opt => opt.id.includes('authorizedKeys')) : [] - React.useEffect(() => { + useEffect(() => { dispatch(fetchResetConfigOptions(robotName)) }, [dispatch, robotName]) - const downloadCalibrationLogs: React.MouseEventHandler = e => { + const downloadCalibrationLogs: MouseEventHandler = e => { e.preventDefault() doTrackEvent({ name: ANALYTICS_CALIBRATION_DATA_DOWNLOADED, @@ -120,7 +121,7 @@ export function DeviceResetSlideout({ ) } - const downloadRunHistoryLogs: React.MouseEventHandler = e => { + const downloadRunHistoryLogs: MouseEventHandler = e => { e.preventDefault() const runsHistory = runsQueryResponse != null ? runsQueryResponse.data?.data : [] diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/FactoryModeSlideout.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/FactoryModeSlideout.tsx index 1472204ce8f..ff083c9b3e5 100644 --- a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/FactoryModeSlideout.tsx +++ b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/FactoryModeSlideout.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState, useEffect } from 'react' import { useDispatch } from 'react-redux' import { useForm, Controller } from 'react-hook-form' import { Trans, useTranslation } from 'react-i18next' @@ -28,6 +28,7 @@ import { FileUpload } from '/app/molecules/FileUpload' import { UploadInput } from '/app/molecules/UploadInput' import { restartRobot } from '/app/redux/robot-admin' +import type { ChangeEvent, MouseEventHandler } from 'react' import type { FieldError, Resolver } from 'react-hook-form' import type { RobotSettingsField } from '@opentrons/api-client' import type { Dispatch } from '/app/redux/types' @@ -63,11 +64,11 @@ export function FactoryModeSlideout({ const last = sn?.substring(sn.length - 4) - const [currentStep, setCurrentStep] = React.useState(1) - const [toggleValue, setToggleValue] = React.useState(false) - const [file, setFile] = React.useState(null) - const [fileError, setFileError] = React.useState(null) - const [isUploading, setIsUploading] = React.useState(false) + const [currentStep, setCurrentStep] = useState(1) + const [toggleValue, setToggleValue] = useState(false) + const [file, setFile] = useState(null) + const [fileError, setFileError] = useState(null) + const [isUploading, setIsUploading] = useState(false) const onFinishCompleteClick = (): void => { dispatch(restartRobot(robotName)) @@ -142,11 +143,11 @@ export function FactoryModeSlideout({ void handleSubmit(onSubmit)() } - const handleToggleClick: React.MouseEventHandler = () => { + const handleToggleClick: MouseEventHandler = () => { setToggleValue(toggleValue => !toggleValue) } - const handleCompleteClick: React.MouseEventHandler = () => { + const handleCompleteClick: MouseEventHandler = () => { setIsUploading(true) updateRobotSetting({ id: 'enableOEMMode', value: toggleValue }) } @@ -173,7 +174,7 @@ export function FactoryModeSlideout({ } } - React.useEffect(() => { + useEffect(() => { // initialize local state to OEM mode value if (isOEMMode != null) { setToggleValue(isOEMMode) @@ -229,7 +230,7 @@ export function FactoryModeSlideout({ id="factoryModeInput" name="factoryModeInput" type="text" - onChange={(e: React.ChangeEvent) => { + onChange={(e: ChangeEvent) => { field.onChange(e) clearErrors() }} diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/RenameRobotSlideout.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/RenameRobotSlideout.tsx index 5c02dc8eb95..55d9806a88f 100644 --- a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/RenameRobotSlideout.tsx +++ b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/RenameRobotSlideout.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState } from 'react' import { useSelector, useDispatch } from 'react-redux' import { useNavigate } from 'react-router-dom' import { useForm, Controller } from 'react-hook-form' @@ -24,9 +24,11 @@ import { useTrackEvent, ANALYTICS_RENAME_ROBOT } from '/app/redux/analytics' import { Slideout } from '/app/atoms/Slideout' import { useIsFlex } from '/app/redux-resources/robots' +import type { ChangeEvent } from 'react' import type { Resolver, FieldError } from 'react-hook-form' import type { UpdatedRobotName } from '@opentrons/api-client' import type { State, Dispatch } from '/app/redux/types' + interface RenameRobotSlideoutProps { isExpanded: boolean onCloseClick: () => void @@ -49,9 +51,7 @@ export function RenameRobotSlideout({ robotName, }: RenameRobotSlideoutProps): JSX.Element { const { t } = useTranslation('device_settings') - const [previousRobotName, setPreviousRobotName] = React.useState( - robotName - ) + const [previousRobotName, setPreviousRobotName] = useState(robotName) const isFlex = useIsFlex(robotName) const trackEvent = useTrackEvent() const navigate = useNavigate() @@ -190,7 +190,7 @@ export function RenameRobotSlideout({ id="newRobotName" name="newRobotName" type="text" - onChange={(e: React.ChangeEvent) => { + onChange={(e: ChangeEvent) => { field.onChange(e) trigger('newRobotName') }} diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/Troubleshooting.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/Troubleshooting.tsx index 45b2b96f462..a216c71cbd4 100644 --- a/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/Troubleshooting.tsx +++ b/app/src/organisms/Desktop/Devices/RobotSettings/AdvancedTab/Troubleshooting.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState, useRef } from 'react' import { useTranslation } from 'react-i18next' import { saveAs } from 'file-saver' import JSZip from 'jszip' @@ -25,6 +25,7 @@ import { useToaster } from '/app/organisms/ToasterOven' import { CONNECTABLE } from '/app/redux/discovery' import { useRobot } from '/app/redux-resources/robots' +import type { MouseEventHandler } from 'react' import type { IconProps } from '@opentrons/components' interface TroubleshootingProps { @@ -38,16 +39,15 @@ export function Troubleshooting({ const robot = useRobot(robotName) const controlDisabled = robot?.status !== CONNECTABLE const logsAvailable = robot?.health?.logs != null - const [ - isDownloadingRobotLogs, - setIsDownloadingRobotLogs, - ] = React.useState(false) + const [isDownloadingRobotLogs, setIsDownloadingRobotLogs] = useState( + false + ) const { makeToast, eatToast } = useToaster() const toastIcon: IconProps = { name: 'ot-spinner', spin: true } const host = useHost() - const handleClick: React.MouseEventHandler = () => { + const handleClick: MouseEventHandler = () => { setIsDownloadingRobotLogs(true) const toastId = makeToast(t('downloading_logs') as string, INFO_TOAST, { disableTimeout: true, @@ -99,8 +99,8 @@ export function Troubleshooting({ } } - // set ref on component to check if component is mounted https://react.dev/reference/react/useRef#manipulating-the-dom-with-a-ref - const mounted = React.useRef(null) + // set ref on component to check if component is mounted https://dev/reference/react/useRef#manipulating-the-dom-with-a-ref + const mounted = useRef(null) return ( (null) + const inputRef = useRef(null) const dispatchStartRobotUpdate = useDispatchStartRobotUpdate() - const handleChange: React.ChangeEventHandler = event => { + const handleChange: ChangeEventHandler = event => { const { files } = event.target if (files?.length === 1 && !updateDisabled) { dispatchStartRobotUpdate(robotName, files[0].path) @@ -65,7 +66,7 @@ export function UpdateRobotSoftware({ } } - const handleClick: React.MouseEventHandler = () => { + const handleClick: MouseEventHandler = () => { inputRef.current?.click() } diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/ConnectNetwork/ConnectModal/UploadKeyInput.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/ConnectNetwork/ConnectModal/UploadKeyInput.tsx index 6d450c336f2..4e79bba2cdc 100644 --- a/app/src/organisms/Desktop/Devices/RobotSettings/ConnectNetwork/ConnectModal/UploadKeyInput.tsx +++ b/app/src/organisms/Desktop/Devices/RobotSettings/ConnectNetwork/ConnectModal/UploadKeyInput.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { forwardRef, useEffect, useRef } from 'react' import styled from 'styled-components' import { useSelector } from 'react-redux' import last from 'lodash/last' @@ -6,6 +6,7 @@ import last from 'lodash/last' import { useDispatchApiRequest } from '/app/redux/robot-api' import { postWifiKeys, getWifiKeyByRequestId } from '/app/redux/networking' +import type { ChangeEventHandler, ForwardedRef } from 'react' import type { State } from '/app/redux/types' export interface UploadKeyInputProps { @@ -28,17 +29,17 @@ const HiddenInput = styled.input` const UploadKeyInputComponent = ( props: UploadKeyInputProps, - ref: React.ForwardedRef + ref: ForwardedRef ): JSX.Element => { const { robotName, label, onUpload } = props const [dispatchApi, requestIds] = useDispatchApiRequest() - const handleUpload = React.useRef<(key: string) => void>() + const handleUpload = useRef<(key: string) => void>() const createdKeyId = useSelector((state: State) => { return getWifiKeyByRequestId(state, robotName, last(requestIds) ?? null) })?.id - const handleFileInput: React.ChangeEventHandler = event => { + const handleFileInput: ChangeEventHandler = event => { if (event.target.files && event.target.files.length > 0) { const file = event.target.files[0] event.target.value = '' @@ -47,11 +48,11 @@ const UploadKeyInputComponent = ( } } - React.useEffect(() => { + useEffect(() => { handleUpload.current = onUpload }, [onUpload]) - React.useEffect(() => { + useEffect(() => { if (createdKeyId != null && handleUpload.current) { handleUpload.current(createdKeyId) } @@ -67,7 +68,6 @@ const UploadKeyInputComponent = ( ) } -export const UploadKeyInput = React.forwardRef< - HTMLInputElement, - UploadKeyInputProps ->(UploadKeyInputComponent) +export const UploadKeyInput = forwardRef( + UploadKeyInputComponent +) diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/RobotSettingsAdvanced.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/RobotSettingsAdvanced.tsx index feb67b08d9f..adf2c92a9a5 100644 --- a/app/src/organisms/Desktop/Devices/RobotSettings/RobotSettingsAdvanced.tsx +++ b/app/src/organisms/Desktop/Devices/RobotSettings/RobotSettingsAdvanced.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState, useEffect } from 'react' import { createPortal } from 'react-dom' import { useSelector, useDispatch } from 'react-redux' @@ -50,6 +50,7 @@ import { getRobotSerialNumber, UNREACHABLE } from '/app/redux/discovery' import { getTopPortalEl } from '/app/App/portal' import { useIsEstopNotDisengaged } from '/app/resources/devices/hooks/useIsEstopNotDisengaged' +import type { MouseEventHandler } from 'react' import type { State, Dispatch } from '/app/redux/types' import type { RobotSettings, @@ -69,19 +70,18 @@ export function RobotSettingsAdvanced({ const [ showRenameRobotSlideout, setShowRenameRobotSlideout, - ] = React.useState(false) + ] = useState(false) const [ showDeviceResetSlideout, setShowDeviceResetSlideout, - ] = React.useState(false) - const [ - showDeviceResetModal, - setShowDeviceResetModal, - ] = React.useState(false) + ] = useState(false) + const [showDeviceResetModal, setShowDeviceResetModal] = useState( + false + ) const [ showFactoryModeSlideout, setShowFactoryModeSlideout, - ] = React.useState(false) + ] = useState(false) const isRobotBusy = useIsRobotBusy({ poll: true }) const isEstopNotDisengaged = useIsEstopNotDisengaged(robotName) @@ -95,10 +95,8 @@ export function RobotSettingsAdvanced({ const reachable = robot?.status !== UNREACHABLE const sn = robot?.status != null ? getRobotSerialNumber(robot) : null - const [isRobotReachable, setIsRobotReachable] = React.useState( - reachable - ) - const [resetOptions, setResetOptions] = React.useState({}) + const [isRobotReachable, setIsRobotReachable] = useState(reachable) + const [resetOptions, setResetOptions] = useState({}) const findSettings = (id: string): RobotSettingsField | undefined => settings?.find(s => s.id === id) @@ -124,11 +122,11 @@ export function RobotSettingsAdvanced({ const dispatch = useDispatch() - React.useEffect(() => { + useEffect(() => { dispatch(fetchSettings(robotName)) }, [dispatch, robotName]) - React.useEffect(() => { + useEffect(() => { updateRobotStatus(isRobotBusy) }, [isRobotBusy, updateRobotStatus]) @@ -291,7 +289,7 @@ export function FeatureFlagToggle({ if (id == null) return null - const handleClick: React.MouseEventHandler = () => { + const handleClick: MouseEventHandler = () => { if (!isRobotBusy) { dispatch(updateSetting(robotName, id, !value)) } diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/RobotSettingsFeatureFlags.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/RobotSettingsFeatureFlags.tsx index 363589867fc..aa1210cdecc 100644 --- a/app/src/organisms/Desktop/Devices/RobotSettings/RobotSettingsFeatureFlags.tsx +++ b/app/src/organisms/Desktop/Devices/RobotSettings/RobotSettingsFeatureFlags.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useEffect } from 'react' import { useSelector, useDispatch } from 'react-redux' import { @@ -17,6 +17,8 @@ import { getRobotSettings, fetchSettings, } from '/app/redux/robot-settings' + +import type { MouseEventHandler } from 'react' import type { State, Dispatch } from '/app/redux/types' import type { RobotSettings, @@ -50,7 +52,7 @@ export function RobotSettingsFeatureFlags({ const dispatch = useDispatch() - React.useEffect(() => { + useEffect(() => { dispatch(fetchSettings(robotName)) }, [dispatch, robotName]) @@ -81,7 +83,7 @@ export function FeatureFlagToggle({ if (id == null) return null - const handleClick: React.MouseEventHandler = () => { + const handleClick: MouseEventHandler = () => { dispatch(updateSetting(robotName, id, !value)) } diff --git a/app/src/organisms/Desktop/Devices/RobotSettings/UpdateBuildroot/RobotUpdateProgressModal.tsx b/app/src/organisms/Desktop/Devices/RobotSettings/UpdateBuildroot/RobotUpdateProgressModal.tsx index 955ead2de49..8a4fc045a65 100644 --- a/app/src/organisms/Desktop/Devices/RobotSettings/UpdateBuildroot/RobotUpdateProgressModal.tsx +++ b/app/src/organisms/Desktop/Devices/RobotSettings/UpdateBuildroot/RobotUpdateProgressModal.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState, useEffect, useRef } from 'react' import { useTranslation } from 'react-i18next' import { useDispatch, useSelector } from 'react-redux' import { css } from 'styled-components' @@ -32,6 +32,7 @@ import { INIT_STATUS, } from '/app/resources/health/hooks' +import type { ChangeEventHandler } from 'react' import type { State } from '/app/redux/types' import type { SetStatusBarCreateCommand } from '@opentrons/shared-data/protocol' import type { RobotUpdateSession } from '/app/redux/robot-update/types' @@ -67,8 +68,8 @@ export function RobotUpdateProgressModal({ }: RobotUpdateProgressModalProps): JSX.Element { const dispatch = useDispatch() const { t } = useTranslation('device_settings') - const [showFileSelect, setShowFileSelect] = React.useState(false) - const installFromFileRef = React.useRef(null) + const [showFileSelect, setShowFileSelect] = useState(false) + const installFromFileRef = useRef(null) const completeRobotUpdateHandler = (): void => { if (closeUpdateBuildroot != null) closeUpdateBuildroot() @@ -85,14 +86,14 @@ export function RobotUpdateProgressModal({ useStatusBarAnimation(error != null) useCleanupRobotUpdateSessionOnDismount() - const handleFileSelect: React.ChangeEventHandler = event => { + const handleFileSelect: ChangeEventHandler = event => { const { files } = event.target if (files?.length === 1) { dispatch(startRobotUpdate(robotName, files[0].path)) } setShowFileSelect(false) } - React.useEffect(() => { + useEffect(() => { if (showFileSelect && installFromFileRef.current) installFromFileRef.current.click() }, [showFileSelect]) @@ -233,13 +234,11 @@ function useAllowExitIfUpdateStalled( progressPercent: number, robotInitStatus: RobotInitializationStatus ): boolean { - const [letUserExitUpdate, setLetUserExitUpdate] = React.useState( - false - ) - const prevSeenUpdateProgress = React.useRef(null) - const exitTimeoutRef = React.useRef(null) + const [letUserExitUpdate, setLetUserExitUpdate] = useState(false) + const prevSeenUpdateProgress = useRef(null) + const exitTimeoutRef = useRef(null) - React.useEffect(() => { + useEffect(() => { if (updateStep === 'initial' && prevSeenUpdateProgress.current !== null) { prevSeenUpdateProgress.current = null } else if (progressPercent !== prevSeenUpdateProgress.current) { @@ -258,7 +257,7 @@ function useAllowExitIfUpdateStalled( } }, [progressPercent, updateStep, robotInitStatus]) - React.useEffect(() => { + useEffect(() => { return () => { if (exitTimeoutRef.current) clearTimeout(exitTimeoutRef.current) } @@ -298,13 +297,13 @@ function useStatusBarAnimation(isError: boolean): void { } } - React.useEffect(startUpdatingAnimation, []) - React.useEffect(startIdleAnimationIfFailed, [isError]) + useEffect(startUpdatingAnimation, []) + useEffect(startIdleAnimationIfFailed, [isError]) } function useCleanupRobotUpdateSessionOnDismount(): void { const dispatch = useDispatch() - React.useEffect(() => { + useEffect(() => { return () => { dispatch(clearRobotUpdateSession()) } diff --git a/app/src/organisms/Desktop/Devices/hooks/__tests__/useLPCSuccessToast.test.ts b/app/src/organisms/Desktop/Devices/hooks/__tests__/useLPCSuccessToast.test.ts index a64b65252a1..6cb6897d8ca 100644 --- a/app/src/organisms/Desktop/Devices/hooks/__tests__/useLPCSuccessToast.test.ts +++ b/app/src/organisms/Desktop/Devices/hooks/__tests__/useLPCSuccessToast.test.ts @@ -1,11 +1,10 @@ -import * as React from 'react' +import { useContext } from 'react' import { vi, it, expect, describe } from 'vitest' import { renderHook } from '@testing-library/react' import { useLPCSuccessToast } from '..' -import type * as ReactType from 'react' vi.mock('react', async importOriginal => { - const actualReact = await importOriginal() + const actualReact = await importOriginal() return { ...actualReact, useContext: vi.fn(), @@ -14,7 +13,7 @@ vi.mock('react', async importOriginal => { describe('useLPCSuccessToast', () => { it('return true when useContext returns true', () => { - vi.mocked(React.useContext).mockReturnValue({ + vi.mocked(useContext).mockReturnValue({ setIsShowingLPCSuccessToast: true, }) const { result } = renderHook(() => useLPCSuccessToast()) @@ -23,7 +22,7 @@ describe('useLPCSuccessToast', () => { }) }) it('return false when useContext returns false', () => { - vi.mocked(React.useContext).mockReturnValue({ + vi.mocked(useContext).mockReturnValue({ setIsShowingLPCSuccessToast: false, }) const { result } = renderHook(() => useLPCSuccessToast()) diff --git a/app/src/organisms/Desktop/Labware/LabwareCard/CustomLabwareOverflowMenu.tsx b/app/src/organisms/Desktop/Labware/LabwareCard/CustomLabwareOverflowMenu.tsx index 6183fdf00de..08826189798 100644 --- a/app/src/organisms/Desktop/Labware/LabwareCard/CustomLabwareOverflowMenu.tsx +++ b/app/src/organisms/Desktop/Labware/LabwareCard/CustomLabwareOverflowMenu.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState } from 'react' import { createPortal } from 'react-dom' import { useDispatch } from 'react-redux' import { useTranslation } from 'react-i18next' @@ -36,6 +36,7 @@ import { openCustomLabwareDirectory, } from '/app/redux/custom-labware' +import type { MouseEventHandler } from 'react' import type { Dispatch } from '/app/redux/types' const LABWARE_CREATOR_HREF = 'https://labware.opentrons.com/create/' @@ -51,7 +52,7 @@ export function CustomLabwareOverflowMenu( const { filename, onDelete } = props const { t } = useTranslation(['labware_landing', 'shared']) const dispatch = useDispatch() - const [showOverflowMenu, setShowOverflowMenu] = React.useState(false) + const [showOverflowMenu, setShowOverflowMenu] = useState(false) const overflowMenuRef = useOnClickOutside({ onClickOutside: () => { setShowOverflowMenu(false) @@ -67,24 +68,24 @@ export function CustomLabwareOverflowMenu( dispatch(deleteCustomLabwareFile(filename)) onDelete?.() }, true) - const handleOpenInFolder: React.MouseEventHandler = e => { + const handleOpenInFolder: MouseEventHandler = e => { e.preventDefault() e.stopPropagation() setShowOverflowMenu(false) dispatch(openCustomLabwareDirectory()) } - const handleClickDelete: React.MouseEventHandler = e => { + const handleClickDelete: MouseEventHandler = e => { e.preventDefault() e.stopPropagation() setShowOverflowMenu(false) confirmDeleteLabware() } - const handleOverflowClick: React.MouseEventHandler = e => { + const handleOverflowClick: MouseEventHandler = e => { e.preventDefault() e.stopPropagation() setShowOverflowMenu(currentShowOverflowMenu => !currentShowOverflowMenu) } - const handleClickLabwareCreator: React.MouseEventHandler = e => { + const handleClickLabwareCreator: MouseEventHandler = e => { e.preventDefault() e.stopPropagation() trackEvent({ @@ -95,7 +96,7 @@ export function CustomLabwareOverflowMenu( window.open(LABWARE_CREATOR_HREF, '_blank') } - const handleCancelModal: React.MouseEventHandler = e => { + const handleCancelModal: MouseEventHandler = e => { e.preventDefault() e.stopPropagation() cancelDeleteLabware() diff --git a/app/src/organisms/Desktop/Labware/LabwareCard/hooks.tsx b/app/src/organisms/Desktop/Labware/LabwareCard/hooks.tsx index 62e0589ac51..3a5890d7f60 100644 --- a/app/src/organisms/Desktop/Labware/LabwareCard/hooks.tsx +++ b/app/src/organisms/Desktop/Labware/LabwareCard/hooks.tsx @@ -1,7 +1,8 @@ -import * as React from 'react' +import { useEffect } from 'react' +import type { RefObject } from 'react' export function useCloseOnOutsideClick( - ref: React.RefObject, + ref: RefObject, onClose: () => void ): void { const handleClick = (e: MouseEvent): void => { @@ -11,7 +12,7 @@ export function useCloseOnOutsideClick( } } - React.useEffect(() => { + useEffect(() => { document.addEventListener('click', handleClick) return () => { document.removeEventListener('click', handleClick) diff --git a/app/src/organisms/Desktop/Labware/LabwareDetails/StyledComponents/ExpandingTitle.tsx b/app/src/organisms/Desktop/Labware/LabwareDetails/StyledComponents/ExpandingTitle.tsx index c92a63434cb..a21a769ca43 100644 --- a/app/src/organisms/Desktop/Labware/LabwareDetails/StyledComponents/ExpandingTitle.tsx +++ b/app/src/organisms/Desktop/Labware/LabwareDetails/StyledComponents/ExpandingTitle.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState } from 'react' import { ALIGN_CENTER, Box, @@ -6,20 +6,21 @@ import { Flex, Icon, JUSTIFY_SPACE_BETWEEN, - Link, - SIZE_1, LegacyStyledText, + Link, TYPOGRAPHY, } from '@opentrons/components' import { Divider } from '/app/atoms/structure' +import type { ReactNode } from 'react' + interface ExpandingTitleProps { - label: React.ReactNode - diagram?: React.ReactNode + label: ReactNode + diagram?: ReactNode } export function ExpandingTitle(props: ExpandingTitleProps): JSX.Element { - const [diagramVisible, setDiagramVisible] = React.useState(false) + const [diagramVisible, setDiagramVisible] = useState(false) const toggleDiagramVisible = (): void => { setDiagramVisible(currentDiagramVisible => !currentDiagramVisible) } @@ -39,7 +40,7 @@ export function ExpandingTitle(props: ExpandingTitleProps): JSX.Element { )} diff --git a/app/src/organisms/Desktop/ProtocolAnalysisFailure/index.tsx b/app/src/organisms/Desktop/ProtocolAnalysisFailure/index.tsx index b2b904dd19d..3fe86f0385f 100644 --- a/app/src/organisms/Desktop/ProtocolAnalysisFailure/index.tsx +++ b/app/src/organisms/Desktop/ProtocolAnalysisFailure/index.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState } from 'react' import { createPortal } from 'react-dom' import { useDispatch } from 'react-redux' import { useTranslation, Trans } from 'react-i18next' @@ -6,15 +6,15 @@ import { css } from 'styled-components' import { ALIGN_CENTER, - Btn, Banner, + Btn, Flex, JUSTIFY_FLEX_END, - Modal, JUSTIFY_SPACE_BETWEEN, + LegacyStyledText, + Modal, PrimaryButton, SPACING, - LegacyStyledText, TYPOGRAPHY, WRAP_REVERSE, } from '@opentrons/components' @@ -22,6 +22,7 @@ import { import { analyzeProtocol } from '/app/redux/protocol-storage' import { getTopPortalEl } from '/app/App/portal' +import type { MouseEventHandler } from 'react' import type { Dispatch } from '/app/redux/types' interface ProtocolAnalysisFailureProps { errors: string[] @@ -34,19 +35,19 @@ export function ProtocolAnalysisFailure( const { errors, protocolKey } = props const { t } = useTranslation(['protocol_list', 'shared']) const dispatch = useDispatch() - const [showErrorDetails, setShowErrorDetails] = React.useState(false) + const [showErrorDetails, setShowErrorDetails] = useState(false) - const handleClickShowDetails: React.MouseEventHandler = e => { + const handleClickShowDetails: MouseEventHandler = e => { e.preventDefault() e.stopPropagation() setShowErrorDetails(true) } - const handleClickHideDetails: React.MouseEventHandler = e => { + const handleClickHideDetails: MouseEventHandler = e => { e.preventDefault() e.stopPropagation() setShowErrorDetails(false) } - const handleClickReanalyze: React.MouseEventHandler = e => { + const handleClickReanalyze: MouseEventHandler = e => { e.preventDefault() e.stopPropagation() dispatch(analyzeProtocol(protocolKey)) diff --git a/app/src/organisms/Desktop/ProtocolDetails/ProtocolLabwareDetails.tsx b/app/src/organisms/Desktop/ProtocolDetails/ProtocolLabwareDetails.tsx index 4fe95406355..cb74884c89e 100644 --- a/app/src/organisms/Desktop/ProtocolDetails/ProtocolLabwareDetails.tsx +++ b/app/src/organisms/Desktop/ProtocolDetails/ProtocolLabwareDetails.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState } from 'react' import { createPortal } from 'react-dom' import { useTranslation } from 'react-i18next' import { @@ -23,6 +23,7 @@ import { Divider } from '/app/atoms/structure' import { getTopPortalEl } from '/app/App/portal' import { LabwareDetails } from '/app/organisms/Desktop/Labware/LabwareDetails' +import type { MouseEventHandler } from 'react' import type { LoadLabwareRunTimeCommand } from '@opentrons/shared-data' import type { LabwareDefAndDate } from '/app/local-resources/labware' @@ -164,9 +165,9 @@ export const LabwareDetailOverflowMenu = ( const [ showLabwareDetailSlideout, setShowLabwareDetailSlideout, - ] = React.useState(false) + ] = useState(false) - const handleClickMenuItem: React.MouseEventHandler = e => { + const handleClickMenuItem: MouseEventHandler = e => { e.preventDefault() setShowOverflowMenu(false) setShowLabwareDetailSlideout(true) diff --git a/app/src/organisms/Desktop/ProtocolDetails/RobotConfigurationDetails.tsx b/app/src/organisms/Desktop/ProtocolDetails/RobotConfigurationDetails.tsx index 5789a8af6e6..d53a6eba889 100644 --- a/app/src/organisms/Desktop/ProtocolDetails/RobotConfigurationDetails.tsx +++ b/app/src/organisms/Desktop/ProtocolDetails/RobotConfigurationDetails.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { Fragment } from 'react' import { useTranslation } from 'react-i18next' import { @@ -31,6 +31,7 @@ import { Divider } from '/app/atoms/structure' import { getRobotTypeDisplayName } from '../ProtocolsLanding/utils' import { getSlotsForThermocycler } from './utils' +import type { ReactNode } from 'react' import type { CutoutConfigProtocolSpec, LoadModuleRunTimeCommand, @@ -153,7 +154,7 @@ export const RobotConfigurationDetails = ( ) : null} {requiredModuleDetails.map((module, index) => { return ( - + } /> - + ) })} {nonStandardRequiredFixtureDetails.map((fixture, index) => { return ( - + } /> - + ) })} @@ -217,7 +218,7 @@ export const RobotConfigurationDetails = ( interface RobotConfigurationDetailsItemProps { label: string - item: React.ReactNode + item: ReactNode } export const RobotConfigurationDetailsItem = ( diff --git a/app/src/organisms/Desktop/ProtocolsLanding/ProtocolList.tsx b/app/src/organisms/Desktop/ProtocolsLanding/ProtocolList.tsx index 112999787d0..9cd58925e34 100644 --- a/app/src/organisms/Desktop/ProtocolsLanding/ProtocolList.tsx +++ b/app/src/organisms/Desktop/ProtocolsLanding/ProtocolList.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState } from 'react' import { useDispatch, useSelector } from 'react-redux' import { useTranslation } from 'react-i18next' import { css } from 'styled-components' @@ -35,6 +35,7 @@ import { ProtocolUploadInput } from './ProtocolUploadInput' import { ProtocolCard } from './ProtocolCard' import { EmptyStateLinks } from './EmptyStateLinks' +import type { MouseEventHandler } from 'react' import type { StoredProtocolData, ProtocolSort, @@ -61,17 +62,17 @@ export function ProtocolList(props: ProtocolListProps): JSX.Element | null { const [ showImportProtocolSlideout, setShowImportProtocolSlideout, - ] = React.useState(false) + ] = useState(false) const [ showChooseRobotToRunProtocolSlideout, setShowChooseRobotToRunProtocolSlideout, - ] = React.useState(false) + ] = useState(false) const [ showSendProtocolToFlexSlideout, setShowSendProtocolToFlexSlideout, - ] = React.useState(false) + ] = useState(false) const sortBy = useSelector(getProtocolsDesktopSortKey) ?? 'alphabetical' - const [showSortByMenu, setShowSortByMenu] = React.useState(false) + const [showSortByMenu, setShowSortByMenu] = useState(false) const toggleSetShowSortByMenu = (): void => { setShowSortByMenu(!showSortByMenu) } @@ -80,13 +81,13 @@ export function ProtocolList(props: ProtocolListProps): JSX.Element | null { const [ selectedProtocol, setSelectedProtocol, - ] = React.useState(null) + ] = useState(null) const sortedStoredProtocols = useSortedProtocols(sortBy, storedProtocols) const dispatch = useDispatch() - const handleClickOutside: React.MouseEventHandler = e => { + const handleClickOutside: MouseEventHandler = e => { e.preventDefault() setShowSortByMenu(false) } diff --git a/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDetails/OverflowMenu.tsx b/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDetails/OverflowMenu.tsx index ee95d1abf73..1db51029549 100644 --- a/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDetails/OverflowMenu.tsx +++ b/app/src/organisms/Desktop/RobotSettingsCalibration/CalibrationDetails/OverflowMenu.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState, useEffect } from 'react' import { useTranslation } from 'react-i18next' import { saveAs } from 'file-saver' import { css } from 'styled-components' @@ -35,6 +35,7 @@ import { FLOWS } from '/app/organisms/PipetteWizardFlows/constants' import { useIsEstopNotDisengaged } from '/app/resources/devices' import { useAttachedPipettesFromInstrumentsQuery } from '/app/resources/instruments' +import type { MouseEvent } from 'react' import type { Mount } from '@opentrons/components' import type { PipetteName } from '@opentrons/shared-data' import type { DeleteCalRequestParams } from '@opentrons/api-client' @@ -82,10 +83,9 @@ export function OverflowMenu({ const tipLengthCalibrations = useAllTipLengthCalibrationsQuery().data?.data const { isRunRunning: isRunning } = useRunStatuses() - const [ - showPipetteWizardFlows, - setShowPipetteWizardFlows, - ] = React.useState(false) + const [showPipetteWizardFlows, setShowPipetteWizardFlows] = useState( + false + ) const isEstopNotDisengaged = useIsEstopNotDisengaged(robotName) const isPipetteForFlex = isFlexPipette(pipetteName as PipetteName) const ot3PipCal = @@ -103,7 +103,7 @@ export function OverflowMenu({ calType === 'pipetteOffset' ? applicablePipetteOffsetCal != null : applicableTipLengthCal != null - const handleRecalibrate = (e: React.MouseEvent): void => { + const handleRecalibrate = (e: MouseEvent): void => { e.preventDefault() if ( !isRunning && @@ -116,7 +116,7 @@ export function OverflowMenu({ setShowOverflowMenu(currentShowOverflowMenu => !currentShowOverflowMenu) } - const handleDownload = (e: React.MouseEvent): void => { + const handleDownload = (e: MouseEvent): void => { e.preventDefault() doTrackEvent({ name: ANALYTICS_CALIBRATION_DATA_DOWNLOADED, @@ -137,19 +137,18 @@ export function OverflowMenu({ setShowOverflowMenu(currentShowOverflowMenu => !currentShowOverflowMenu) } - React.useEffect(() => { + useEffect(() => { if (isRunning) { updateRobotStatus(true) } }, [isRunning, updateRobotStatus]) const { deleteCalibration } = useDeleteCalibrationMutation() - const [ - selectedPipette, - setSelectedPipette, - ] = React.useState(SINGLE_MOUNT_PIPETTES) + const [selectedPipette, setSelectedPipette] = useState( + SINGLE_MOUNT_PIPETTES + ) - const handleDeleteCalibration = (e: React.MouseEvent): void => { + const handleDeleteCalibration = (e: MouseEvent): void => { e.preventDefault() let params: DeleteCalRequestParams if (calType === 'pipetteOffset') { diff --git a/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx b/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx index 16062be3034..bf3be7e788e 100644 --- a/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx +++ b/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState } from 'react' import { useTranslation } from 'react-i18next' import { css } from 'styled-components' @@ -7,15 +7,15 @@ import { BORDERS, Btn, COLORS, + CURSOR_DEFAULT, DIRECTION_COLUMN, DIRECTION_ROW, Flex, JUSTIFY_SPACE_BETWEEN, LegacyStyledText, - SPACING, Modal, + SPACING, TYPOGRAPHY, - CURSOR_DEFAULT, } from '@opentrons/components' import { useModulesQuery, @@ -25,11 +25,11 @@ import { getCutoutDisplayName, getFixtureDisplayName, ABSORBANCE_READER_CUTOUTS, - ABSORBANCE_READER_V1, ABSORBANCE_READER_V1_FIXTURE, + ABSORBANCE_READER_V1, HEATER_SHAKER_CUTOUTS, - HEATERSHAKER_MODULE_V1, HEATERSHAKER_MODULE_V1_FIXTURE, + HEATERSHAKER_MODULE_V1, MAGNETIC_BLOCK_V1_FIXTURE, SINGLE_CENTER_CUTOUTS, SINGLE_LEFT_CUTOUTS, @@ -38,8 +38,8 @@ import { STAGING_AREA_RIGHT_SLOT_FIXTURE, STAGING_AREA_SLOT_WITH_MAGNETIC_BLOCK_V1_FIXTURE, TEMPERATURE_MODULE_CUTOUTS, - TEMPERATURE_MODULE_V2, TEMPERATURE_MODULE_V2_FIXTURE, + TEMPERATURE_MODULE_V2, THERMOCYCLER_MODULE_CUTOUTS, THERMOCYCLER_MODULE_V2, THERMOCYCLER_V2_FRONT_FIXTURE, @@ -54,6 +54,7 @@ import { TertiaryButton } from '/app/atoms/buttons' import { OddModal } from '/app/molecules/OddModal' import { useNotifyDeckConfigurationQuery } from '/app/resources/deck_configuration/' +import type { MouseEventHandler } from 'react' import type { CutoutConfig, CutoutId, @@ -101,9 +102,7 @@ export function AddFixtureModal({ // only show provided options if given as props initialStage = 'providedOptions' } - const [optionStage, setOptionStage] = React.useState( - initialStage - ) + const [optionStage, setOptionStage] = useState(initialStage) const modalHeader: OddModalHeaderBaseProps = { title: t('add_to_slot', { @@ -425,7 +424,7 @@ const GO_BACK_BUTTON_STYLE = css` ` interface FixtureOptionProps { - onClickHandler: React.MouseEventHandler + onClickHandler: MouseEventHandler optionName: string buttonText: string isOnDevice: boolean diff --git a/app/src/organisms/EmergencyStop/EstopPressedModal.tsx b/app/src/organisms/EmergencyStop/EstopPressedModal.tsx index 7c78de6b8e2..ccebc8e124a 100644 --- a/app/src/organisms/EmergencyStop/EstopPressedModal.tsx +++ b/app/src/organisms/EmergencyStop/EstopPressedModal.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState } from 'react' import { createPortal } from 'react-dom' import { useSelector } from 'react-redux' import { useTranslation } from 'react-i18next' @@ -30,11 +30,12 @@ import { SmallButton } from '/app/atoms/buttons' import { OddModal } from '/app/molecules/OddModal' import { getIsOnDevice } from '/app/redux/config' +import type { MouseEventHandler } from 'react' +import type { ModalProps } from '@opentrons/components' import type { OddModalHeaderBaseProps, ModalSize, } from '/app/molecules/OddModal/types' -import type { ModalProps } from '@opentrons/components' // Note (07/13/2023) After the launch, we will unify the modal components into one component. // Then TouchScreenModal and DesktopModal will be TouchScreenContent and DesktopContent that only render each content. @@ -81,7 +82,7 @@ function TouchscreenModal({ setIsWaitingForResumeOperation, }: EstopPressedModalProps): JSX.Element { const { t } = useTranslation(['device_settings', 'branded']) - const [isResuming, setIsResuming] = React.useState(false) + const [isResuming, setIsResuming] = useState(false) const { acknowledgeEstopDisengage } = useAcknowledgeEstopDisengageMutation() const { @@ -156,7 +157,7 @@ function DesktopModal({ setIsWaitingForResumeOperation, }: EstopPressedModalProps): JSX.Element { const { t } = useTranslation('device_settings') - const [isResuming, setIsResuming] = React.useState(false) + const [isResuming, setIsResuming] = useState(false) const { acknowledgeEstopDisengage } = useAcknowledgeEstopDisengageMutation() const { handlePlaceReaderLid, @@ -174,7 +175,7 @@ function DesktopModal({ width: '47rem', } - const handleClick: React.MouseEventHandler = (e): void => { + const handleClick: MouseEventHandler = (e): void => { e.preventDefault() setIsResuming(true) setIsWaitingForResumeOperation() diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/ErrorDetailsModal.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/ErrorDetailsModal.tsx index 603ac5af6c3..070e974bed3 100644 --- a/app/src/organisms/ErrorRecoveryFlows/shared/ErrorDetailsModal.tsx +++ b/app/src/organisms/ErrorRecoveryFlows/shared/ErrorDetailsModal.tsx @@ -1,17 +1,17 @@ -import * as React from 'react' +import { useState } from 'react' import { useTranslation } from 'react-i18next' import { createPortal } from 'react-dom' import { css } from 'styled-components' import { - Flex, - StyledText, - SPACING, - COLORS, - ModalShell, - ModalHeader, BORDERS, + COLORS, DIRECTION_COLUMN, + Flex, + ModalHeader, + ModalShell, + SPACING, + StyledText, } from '@opentrons/components' import { useErrorName } from '../hooks' @@ -22,6 +22,7 @@ import { InlineNotification } from '/app/atoms/InlineNotification' import { StepInfo } from './StepInfo' import { getErrorKind } from '../utils' +import type { ReactNode } from 'react' import type { LabwareDefinition2, RobotType } from '@opentrons/shared-data' import type { IconProps } from '@opentrons/components' import type { OddModalHeaderBaseProps } from '/app/molecules/OddModal/types' @@ -33,7 +34,7 @@ export function useErrorDetailsModal(): { showModal: boolean toggleModal: () => void } { - const [showModal, setShowModal] = React.useState(false) + const [showModal, setShowModal] = useState(false) const toggleModal = (): void => { setShowModal(!showModal) @@ -113,7 +114,7 @@ export function ErrorDetailsModal(props: ErrorDetailsModalProps): JSX.Element { } type ErrorDetailsModalType = ErrorDetailsModalProps & { - children: React.ReactNode + children: ReactNode modalHeader: OddModalHeaderBaseProps toggleModal: () => void desktopType: DesktopSizeType diff --git a/app/src/organisms/LabwarePositionCheck/AttachProbe.tsx b/app/src/organisms/LabwarePositionCheck/AttachProbe.tsx index b421b4be81f..afd9efba19f 100644 --- a/app/src/organisms/LabwarePositionCheck/AttachProbe.tsx +++ b/app/src/organisms/LabwarePositionCheck/AttachProbe.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useEffect, useState } from 'react' import { Trans, useTranslation } from 'react-i18next' import { RESPONSIVENESS, @@ -15,6 +15,7 @@ import attachProbe8 from '/app/assets/videos/pipette-wizard-flows/Pipette_Attach import attachProbe96 from '/app/assets/videos/pipette-wizard-flows/Pipette_Attach_Probe_96.webm' import { GenericWizardTile } from '/app/molecules/GenericWizardTile' +import type { Dispatch } from 'react' import type { CompletedProtocolAnalysis, CreateCommand, @@ -31,7 +32,7 @@ import type { interface AttachProbeProps extends AttachProbeStep { protocolData: CompletedProtocolAnalysis proceed: () => void - registerPosition: React.Dispatch + registerPosition: Dispatch chainRunCommands: ReturnType['chainRunCommands'] setFatalError: (errorMessage: string) => void workingOffsets: WorkingOffset[] @@ -52,9 +53,7 @@ export const AttachProbe = (props: AttachProbeProps): JSX.Element | null => { setFatalError, isOnDevice, } = props - const [showUnableToDetect, setShowUnableToDetect] = React.useState( - false - ) + const [showUnableToDetect, setShowUnableToDetect] = useState(false) const pipette = protocolData.pipettes.find(p => p.id === pipetteId) const pipetteName = pipette?.pipetteName @@ -72,7 +71,7 @@ export const AttachProbe = (props: AttachProbeProps): JSX.Element | null => { const pipetteMount = pipette?.mount - React.useEffect(() => { + useEffect(() => { // move into correct position for probe attach on mount chainRunCommands( [ diff --git a/app/src/organisms/LabwarePositionCheck/CheckItem.tsx b/app/src/organisms/LabwarePositionCheck/CheckItem.tsx index 5d5008554a6..734ee6468b1 100644 --- a/app/src/organisms/LabwarePositionCheck/CheckItem.tsx +++ b/app/src/organisms/LabwarePositionCheck/CheckItem.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useEffect } from 'react' import omit from 'lodash/omit' import isEqual from 'lodash/isEqual' import { Trans, useTranslation } from 'react-i18next' @@ -29,6 +29,7 @@ import { getCurrentOffsetForLabwareInLocation } from '/app/transformations/analy import { getIsOnDevice } from '/app/redux/config' import { getDisplayLocation } from './utils/getDisplayLocation' +import type { Dispatch } from 'react' import type { LabwareOffset } from '@opentrons/api-client' import type { CompletedProtocolAnalysis, @@ -54,7 +55,7 @@ interface CheckItemProps extends Omit { proceed: () => void chainRunCommands: ReturnType['chainRunCommands'] setFatalError: (errorMessage: string) => void - registerPosition: React.Dispatch + registerPosition: Dispatch workingOffsets: WorkingOffset[] existingOffsets: LabwareOffset[] handleJog: Jog @@ -131,7 +132,7 @@ export const CheckItem = (props: CheckItemProps): JSX.Element | null => { o.initialPosition != null )?.initialPosition - React.useEffect(() => { + useEffect(() => { if (initialPosition == null && modulePrepCommands.length > 0) { chainRunCommands(modulePrepCommands, false) .then(() => {}) diff --git a/app/src/organisms/LabwarePositionCheck/DetachProbe.tsx b/app/src/organisms/LabwarePositionCheck/DetachProbe.tsx index da0952ca407..dd040654a23 100644 --- a/app/src/organisms/LabwarePositionCheck/DetachProbe.tsx +++ b/app/src/organisms/LabwarePositionCheck/DetachProbe.tsx @@ -1,10 +1,10 @@ -import * as React from 'react' +import { useEffect } from 'react' import { useTranslation } from 'react-i18next' import { css } from 'styled-components' import { + LegacyStyledText, RESPONSIVENESS, SPACING, - LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { RobotMotionLoader } from './RobotMotionLoader' @@ -14,6 +14,7 @@ import detachProbe8 from '/app/assets/videos/pipette-wizard-flows/Pipette_Detach import detachProbe96 from '/app/assets/videos/pipette-wizard-flows/Pipette_Detach_Probe_96.webm' import { GenericWizardTile } from '/app/molecules/GenericWizardTile' +import type { Dispatch } from 'react' import type { CompletedProtocolAnalysis } from '@opentrons/shared-data' import type { Jog } from '/app/molecules/JogControls/types' import type { useChainRunCommands } from '/app/resources/runs' @@ -27,7 +28,7 @@ import type { LabwareOffset } from '@opentrons/api-client' interface DetachProbeProps extends DetachProbeStep { protocolData: CompletedProtocolAnalysis proceed: () => void - registerPosition: React.Dispatch + registerPosition: Dispatch chainRunCommands: ReturnType['chainRunCommands'] setFatalError: (errorMessage: string) => void workingOffsets: WorkingOffset[] @@ -58,7 +59,7 @@ export const DetachProbe = (props: DetachProbeProps): JSX.Element | null => { } const pipetteMount = pipette?.mount - React.useEffect(() => { + useEffect(() => { // move into correct position for probe detach on mount chainRunCommands( [ diff --git a/app/src/organisms/LabwarePositionCheck/IntroScreen/index.tsx b/app/src/organisms/LabwarePositionCheck/IntroScreen/index.tsx index dbaa5970c6c..44e5eb67ded 100644 --- a/app/src/organisms/LabwarePositionCheck/IntroScreen/index.tsx +++ b/app/src/organisms/LabwarePositionCheck/IntroScreen/index.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState } from 'react' import { createPortal } from 'react-dom' import { Trans, useTranslation } from 'react-i18next' import { css } from 'styled-components' @@ -32,6 +32,7 @@ import { CALIBRATION_PROBE } from '/app/organisms/PipetteWizardFlows/constants' import { TerseOffsetTable } from '../ResultsSummary' import { getLabwareDefinitionsFromCommands } from '/app/local-resources/labware' +import type { Dispatch } from 'react' import type { LabwareOffset } from '@opentrons/api-client' import type { CompletedProtocolAnalysis, @@ -49,7 +50,7 @@ const SUPPORT_PAGE_URL = 'https://support.opentrons.com/s/ot2-calibration' export const IntroScreen = (props: { proceed: () => void protocolData: CompletedProtocolAnalysis - registerPosition: React.Dispatch + registerPosition: Dispatch chainRunCommands: ReturnType['chainRunCommands'] handleJog: Jog setFatalError: (errorMessage: string) => void @@ -160,7 +161,7 @@ interface ViewOffsetsProps { function ViewOffsets(props: ViewOffsetsProps): JSX.Element { const { existingOffsets, labwareDefinitions } = props const { t, i18n } = useTranslation('labware_position_check') - const [showOffsetsTable, setShowOffsetsModal] = React.useState(false) + const [showOffsetsTable, setShowOffsetsModal] = useState(false) const latestCurrentOffsets = getLatestCurrentOffsets(existingOffsets) return existingOffsets.length > 0 ? ( <> diff --git a/app/src/organisms/LabwarePositionCheck/JogToWell.tsx b/app/src/organisms/LabwarePositionCheck/JogToWell.tsx index e212af695a5..bce4808a514 100644 --- a/app/src/organisms/LabwarePositionCheck/JogToWell.tsx +++ b/app/src/organisms/LabwarePositionCheck/JogToWell.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useEffect, useState } from 'react' import { createPortal } from 'react-dom' import { useTranslation } from 'react-i18next' import { useSelector } from 'react-redux' @@ -11,14 +11,14 @@ import { Flex, JUSTIFY_SPACE_BETWEEN, LabwareRender, + LegacyStyledText, + ModalShell, PipetteRender, PrimaryButton, RESPONSIVENESS, RobotWorkSpace, SecondaryButton, SPACING, - LegacyStyledText, - ModalShell, TYPOGRAPHY, WELL_LABEL_OPTIONS, } from '@opentrons/components' @@ -40,6 +40,7 @@ import { NeedHelpLink } from '/app/molecules/OT2CalibrationNeedHelpLink' import { JogControls } from '/app/molecules/JogControls' import { LiveOffsetValue } from './LiveOffsetValue' +import type { ReactNode } from 'react' import type { PipetteName, LabwareDefinition2 } from '@opentrons/shared-data' import type { WellStroke } from '@opentrons/components' import type { VectorOffset } from '@opentrons/api-client' @@ -55,8 +56,8 @@ interface JogToWellProps { handleJog: Jog pipetteName: PipetteName labwareDef: LabwareDefinition2 - header: React.ReactNode - body: React.ReactNode + header: ReactNode + body: ReactNode initialPosition: VectorOffset existingOffset: VectorOffset shouldUseMetalProbe: boolean @@ -76,12 +77,12 @@ export const JogToWell = (props: JogToWellProps): JSX.Element | null => { shouldUseMetalProbe, } = props - const [joggedPosition, setJoggedPosition] = React.useState( + const [joggedPosition, setJoggedPosition] = useState( initialPosition ) const isOnDevice = useSelector(getIsOnDevice) - const [showFullJogControls, setShowFullJogControls] = React.useState(false) - React.useEffect(() => { + const [showFullJogControls, setShowFullJogControls] = useState(false) + useEffect(() => { // NOTE: this will perform a "null" jog when the jog controls mount so // if a user reaches the "confirm exit" modal (unmounting this component) // and clicks "go back" we are able so initialize the live offset to whatever diff --git a/app/src/organisms/LabwarePositionCheck/PickUpTip.tsx b/app/src/organisms/LabwarePositionCheck/PickUpTip.tsx index c7505a13d92..de76e855097 100644 --- a/app/src/organisms/LabwarePositionCheck/PickUpTip.tsx +++ b/app/src/organisms/LabwarePositionCheck/PickUpTip.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState } from 'react' import { Trans, useTranslation } from 'react-i18next' import isEqual from 'lodash/isEqual' import { @@ -27,6 +27,7 @@ import { getDisplayLocation } from './utils/getDisplayLocation' import { useSelector } from 'react-redux' import { getIsOnDevice } from '/app/redux/config' +import type { Dispatch } from 'react' import type { CompletedProtocolAnalysis, CreateCommand, @@ -46,7 +47,7 @@ import type { TFunction } from 'i18next' interface PickUpTipProps extends PickUpTipStep { protocolData: CompletedProtocolAnalysis proceed: () => void - registerPosition: React.Dispatch + registerPosition: Dispatch chainRunCommands: ReturnType['chainRunCommands'] setFatalError: (errorMessage: string) => void workingOffsets: WorkingOffset[] @@ -77,7 +78,7 @@ export const PickUpTip = (props: PickUpTipProps): JSX.Element | null => { protocolHasModules, currentStepIndex, } = props - const [showTipConfirmation, setShowTipConfirmation] = React.useState(false) + const [showTipConfirmation, setShowTipConfirmation] = useState(false) const isOnDevice = useSelector(getIsOnDevice) const labwareDef = getLabwareDef(labwareId, protocolData) const pipette = protocolData.pipettes.find(p => p.id === pipetteId) diff --git a/app/src/organisms/LabwarePositionCheck/index.tsx b/app/src/organisms/LabwarePositionCheck/index.tsx index b1453f9267c..e96191c584e 100644 --- a/app/src/organisms/LabwarePositionCheck/index.tsx +++ b/app/src/organisms/LabwarePositionCheck/index.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { Component } from 'react' import { useLogger } from '../../logger' import { LabwarePositionCheckComponent } from './LabwarePositionCheckComponent' import { FatalErrorModal } from './FatalErrorModal' @@ -6,6 +6,8 @@ import { getIsOnDevice } from '/app/redux/config' import { useSelector } from 'react-redux' import { FLEX_ROBOT_TYPE } from '@opentrons/shared-data' + +import type { ErrorInfo, ReactNode } from 'react' import type { CompletedProtocolAnalysis, RobotType, @@ -48,7 +50,7 @@ export const LabwarePositionCheck = ( } interface ErrorBoundaryProps { - children: React.ReactNode + children: ReactNode onClose: () => void shouldUseMetalProbe: boolean logger: ReturnType @@ -60,7 +62,7 @@ interface ErrorBoundaryProps { }) => JSX.Element isOnDevice: boolean } -class ErrorBoundary extends React.Component< +class ErrorBoundary extends Component< ErrorBoundaryProps, { error: Error | null } > { @@ -69,7 +71,7 @@ class ErrorBoundary extends React.Component< this.state = { error: null } } - componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void { + componentDidCatch(error: Error, errorInfo: ErrorInfo): void { this.props.logger.error(`LPC error message: ${error.message}`) this.props.logger.error( `LPC error component stack: ${errorInfo.componentStack}` diff --git a/app/src/organisms/ModuleCard/ConfirmAttachmentModal.tsx b/app/src/organisms/ModuleCard/ConfirmAttachmentModal.tsx index 7031f176425..4a9cb9f3e4a 100644 --- a/app/src/organisms/ModuleCard/ConfirmAttachmentModal.tsx +++ b/app/src/organisms/ModuleCard/ConfirmAttachmentModal.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState } from 'react' import { useTranslation } from 'react-i18next' import { useDispatch } from 'react-redux' import { @@ -17,6 +17,8 @@ import { TYPOGRAPHY, } from '@opentrons/components' import { updateConfigValue } from '/app/redux/config' + +import type { ChangeEvent } from 'react' import type { Dispatch } from '/app/redux/types' import type { UpdateConfigValueAction } from '/app/redux/config/types' @@ -38,7 +40,7 @@ export const ConfirmAttachmentModal = ( ): JSX.Element | null => { const { isProceedToRunModal, onCloseClick, onConfirmClick } = props const { t } = useTranslation(['heater_shaker', 'shared']) - const [isDismissed, setIsDismissed] = React.useState(false) + const [isDismissed, setIsDismissed] = useState(false) const dispatch = useDispatch() const confirmAttached = (): void => { @@ -81,7 +83,7 @@ export const ConfirmAttachmentModal = ( }`} > ) => { + onChange={(e: ChangeEvent) => { setIsDismissed(e.currentTarget.checked) }} value={isDismissed} diff --git a/app/src/organisms/ModuleCard/HeaterShakerSlideout.tsx b/app/src/organisms/ModuleCard/HeaterShakerSlideout.tsx index 1b189f3174d..bccf5fb3a30 100644 --- a/app/src/organisms/ModuleCard/HeaterShakerSlideout.tsx +++ b/app/src/organisms/ModuleCard/HeaterShakerSlideout.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState } from 'react' import { useTranslation } from 'react-i18next' import { useCreateLiveCommandMutation } from '@opentrons/react-api-client' @@ -21,6 +21,7 @@ import { import { Slideout } from '/app/atoms/Slideout' import { SubmitPrimaryButton } from '/app/atoms/buttons' +import type { MouseEventHandler } from 'react' import type { HeaterShakerModule } from '/app/redux/modules/types' import type { HeaterShakerSetTargetTemperatureCreateCommand } from '@opentrons/shared-data' @@ -35,12 +36,12 @@ export const HeaterShakerSlideout = ( ): JSX.Element | null => { const { module, onCloseClick, isExpanded } = props const { t } = useTranslation('device_details') - const [hsValue, setHsValue] = React.useState(null) + const [hsValue, setHsValue] = useState(null) const { createLiveCommand } = useCreateLiveCommandMutation() const moduleName = getModuleDisplayName(module.moduleModel) const modulePart = t('temperature') - const sendSetTemperatureCommand: React.MouseEventHandler = e => { + const sendSetTemperatureCommand: MouseEventHandler = e => { e.preventDefault() e.stopPropagation() diff --git a/app/src/organisms/ModuleWizardFlows/index.tsx b/app/src/organisms/ModuleWizardFlows/index.tsx index 27a3555d70c..b802cd6ca85 100644 --- a/app/src/organisms/ModuleWizardFlows/index.tsx +++ b/app/src/organisms/ModuleWizardFlows/index.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState, useEffect } from 'react' import { createPortal } from 'react-dom' import { useSelector } from 'react-redux' import { Trans, useTranslation } from 'react-i18next' @@ -37,6 +37,7 @@ import { useNotifyCurrentMaintenanceRun, } from '/app/resources/maintenance_runs' +import type { SetStateAction } from 'react' import type { AttachedModule, CommandData } from '@opentrons/api-client' import { RUN_STATUS_FAILED } from '@opentrons/api-client' import type { @@ -107,7 +108,7 @@ export const ModuleWizardFlows = ( ) ) ?? [] - const [currentStepIndex, setCurrentStepIndex] = React.useState(0) + const [currentStepIndex, setCurrentStepIndex] = useState(0) const totalStepCount = moduleCalibrationSteps.length - 1 const currentStep = moduleCalibrationSteps?.[currentStepIndex] @@ -116,18 +117,16 @@ export const ModuleWizardFlows = ( currentStepIndex === 0 ? currentStepIndex : currentStepIndex - 1 ) } - const [createdMaintenanceRunId, setCreatedMaintenanceRunId] = React.useState< + const [createdMaintenanceRunId, setCreatedMaintenanceRunId] = useState< string | null >(null) - const [createdAdapterId, setCreatedAdapterId] = React.useState( - null - ) + const [createdAdapterId, setCreatedAdapterId] = useState(null) // we should start checking for run deletion only after the maintenance run is created // and the useCurrentRun poll has returned that created id const [ monitorMaintenanceRunForDeletion, setMonitorMaintenanceRunForDeletion, - ] = React.useState(false) + ] = useState(false) const { data: maintenanceRunData } = useNotifyCurrentMaintenanceRun({ refetchInterval: RUN_REFETCH_INTERVAL, @@ -142,16 +141,14 @@ export const ModuleWizardFlows = ( createTargetedMaintenanceRun, isLoading: isCreateLoading, } = useCreateTargetedMaintenanceRunMutation({ - onSuccess: (response: { - data: { id: React.SetStateAction } - }) => { + onSuccess: (response: { data: { id: SetStateAction } }) => { setCreatedMaintenanceRunId(response.data.id) }, }) // this will close the modal in case the run was deleted by the terminate // activity modal on the ODD - React.useEffect(() => { + useEffect(() => { if ( createdMaintenanceRunId !== null && maintenanceRunData?.data.id === createdMaintenanceRunId @@ -171,8 +168,8 @@ export const ModuleWizardFlows = ( closeFlow, ]) - const [errorMessage, setErrorMessage] = React.useState(null) - const [isExiting, setIsExiting] = React.useState(false) + const [errorMessage, setErrorMessage] = useState(null) + const [isExiting, setIsExiting] = useState(false) const proceed = (): void => { if (!isCommandMutationLoading) { setCurrentStepIndex( @@ -216,9 +213,9 @@ export const ModuleWizardFlows = ( } } - const [isRobotMoving, setIsRobotMoving] = React.useState(false) + const [isRobotMoving, setIsRobotMoving] = useState(false) - React.useEffect(() => { + useEffect(() => { if (isCommandMutationLoading || isExiting) { setIsRobotMoving(true) } else { diff --git a/app/src/organisms/ODD/InstrumentInfo/index.tsx b/app/src/organisms/ODD/InstrumentInfo/index.tsx index 68c3ebd5388..ecfb9456b05 100644 --- a/app/src/organisms/ODD/InstrumentInfo/index.tsx +++ b/app/src/organisms/ODD/InstrumentInfo/index.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState } from 'react' import { useTranslation } from 'react-i18next' import { useNavigate } from 'react-router-dom' import { @@ -8,8 +8,8 @@ import { Flex, JUSTIFY_CENTER, JUSTIFY_SPACE_BETWEEN, - SPACING, LegacyStyledText, + SPACING, TYPOGRAPHY, } from '@opentrons/components' import { @@ -23,6 +23,7 @@ import { FLOWS } from '/app/organisms/PipetteWizardFlows/constants' import { GRIPPER_FLOW_TYPES } from '/app/organisms/GripperWizardFlows/constants' import { formatTimeWithUtcLabel } from '/app/resources/runs' +import type { ComponentProps, MouseEventHandler } from 'react' import type { InstrumentData } from '@opentrons/api-client' import type { PipetteMount } from '@opentrons/shared-data' import type { StyleProps } from '@opentrons/components' @@ -36,14 +37,14 @@ export const InstrumentInfo = (props: InstrumentInfoProps): JSX.Element => { const { t, i18n } = useTranslation('instruments_dashboard') const { instrument } = props const navigate = useNavigate() - const [wizardProps, setWizardProps] = React.useState< - | React.ComponentProps - | React.ComponentProps + const [wizardProps, setWizardProps] = useState< + | ComponentProps + | ComponentProps | null >(null) const sharedGripperWizardProps: Pick< - React.ComponentProps, + ComponentProps, 'attachedGripper' | 'closeFlow' > = { attachedGripper: instrument, @@ -58,7 +59,7 @@ export const InstrumentInfo = (props: InstrumentInfoProps): JSX.Element => { instrument.mount !== 'extension' && instrument.data?.channels === 96 - const handleDetach: React.MouseEventHandler = () => { + const handleDetach: MouseEventHandler = () => { if (instrument != null && instrument.ok) { setWizardProps( instrument.mount === 'extension' @@ -85,7 +86,7 @@ export const InstrumentInfo = (props: InstrumentInfoProps): JSX.Element => { ) } } - const handleRecalibrate: React.MouseEventHandler = () => { + const handleRecalibrate: MouseEventHandler = () => { if (instrument != null && instrument.ok) { setWizardProps( instrument.mount === 'extension' diff --git a/app/src/organisms/ODD/InstrumentMountItem/AttachedInstrumentMountItem.tsx b/app/src/organisms/ODD/InstrumentMountItem/AttachedInstrumentMountItem.tsx index d2de81b8fdc..7af7dd4029a 100644 --- a/app/src/organisms/ODD/InstrumentMountItem/AttachedInstrumentMountItem.tsx +++ b/app/src/organisms/ODD/InstrumentMountItem/AttachedInstrumentMountItem.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState } from 'react' import { useNavigate } from 'react-router-dom' import { SINGLE_MOUNT_PIPETTES } from '@opentrons/shared-data' @@ -12,6 +12,7 @@ import { FLOWS } from '/app/organisms/PipetteWizardFlows/constants' import { GRIPPER_FLOW_TYPES } from '/app/organisms/GripperWizardFlows/constants' import { LabeledMount } from './LabeledMount' +import type { ComponentProps, MouseEventHandler } from 'react' import type { InstrumentData } from '@opentrons/api-client' import type { GripperModel, PipetteModel } from '@opentrons/shared-data' import type { Mount } from '/app/redux/pipettes/types' @@ -24,8 +25,8 @@ interface AttachedInstrumentMountItemProps { attachedInstrument: InstrumentData | null setWizardProps: ( props: - | React.ComponentProps - | React.ComponentProps + | ComponentProps + | ComponentProps | null ) => void } @@ -36,15 +37,12 @@ export function AttachedInstrumentMountItem( const navigate = useNavigate() const { mount, attachedInstrument, setWizardProps } = props - const [showChoosePipetteModal, setShowChoosePipetteModal] = React.useState( - false + const [showChoosePipetteModal, setShowChoosePipetteModal] = useState(false) + const [selectedPipette, setSelectedPipette] = useState( + SINGLE_MOUNT_PIPETTES ) - const [ - selectedPipette, - setSelectedPipette, - ] = React.useState(SINGLE_MOUNT_PIPETTES) - const handleClick: React.MouseEventHandler = () => { + const handleClick: MouseEventHandler = () => { if (attachedInstrument == null && mount !== 'extension') { setShowChoosePipetteModal(true) } else if (attachedInstrument == null && mount === 'extension') { diff --git a/app/src/organisms/ODD/InstrumentMountItem/ProtocolInstrumentMountItem.tsx b/app/src/organisms/ODD/InstrumentMountItem/ProtocolInstrumentMountItem.tsx index be034e8fb7a..86ae69e4107 100644 --- a/app/src/organisms/ODD/InstrumentMountItem/ProtocolInstrumentMountItem.tsx +++ b/app/src/organisms/ODD/InstrumentMountItem/ProtocolInstrumentMountItem.tsx @@ -1,17 +1,17 @@ -import * as React from 'react' +import { useState, useMemo } from 'react' import styled from 'styled-components' import { useTranslation } from 'react-i18next' import { ALIGN_CENTER, - Flex, - COLORS, - SPACING, - TYPOGRAPHY, - Icon, - DIRECTION_COLUMN, ALIGN_FLEX_START, BORDERS, + COLORS, + DIRECTION_COLUMN, + Flex, + Icon, JUSTIFY_FLEX_START, + SPACING, + TYPOGRAPHY, } from '@opentrons/components' import { NINETY_SIX_CHANNEL, @@ -27,6 +27,7 @@ import { FLOWS } from '/app/organisms/PipetteWizardFlows/constants' import { PipetteWizardFlows } from '/app/organisms/PipetteWizardFlows' import { GripperWizardFlows } from '/app/organisms/GripperWizardFlows' +import type { MouseEventHandler } from 'react' import type { InstrumentData } from '@opentrons/api-client' import type { GripperModel, @@ -61,26 +62,24 @@ export function ProtocolInstrumentMountItem( ): JSX.Element { const { i18n, t } = useTranslation('protocol_setup') const { mount, attachedInstrument, speccedName } = props - const [ - showPipetteWizardFlow, - setShowPipetteWizardFlow, - ] = React.useState(false) - const [ - showGripperWizardFlow, - setShowGripperWizardFlow, - ] = React.useState(false) - const memoizedAttachedGripper = React.useMemo( + const [showPipetteWizardFlow, setShowPipetteWizardFlow] = useState( + false + ) + const [showGripperWizardFlow, setShowGripperWizardFlow] = useState( + false + ) + const memoizedAttachedGripper = useMemo( () => attachedInstrument?.instrumentType === 'gripper' && attachedInstrument.ok ? attachedInstrument : null, [] ) - const [flowType, setFlowType] = React.useState(FLOWS.ATTACH) + const [flowType, setFlowType] = useState(FLOWS.ATTACH) const selectedPipette = speccedName === 'p1000_96' ? NINETY_SIX_CHANNEL : SINGLE_MOUNT_PIPETTES - const handleCalibrate: React.MouseEventHandler = () => { + const handleCalibrate: MouseEventHandler = () => { setFlowType(FLOWS.CALIBRATE) if (mount === 'extension') { setShowGripperWizardFlow(true) @@ -88,7 +87,7 @@ export function ProtocolInstrumentMountItem( setShowPipetteWizardFlow(true) } } - const handleAttach: React.MouseEventHandler = () => { + const handleAttach: MouseEventHandler = () => { setFlowType(FLOWS.ATTACH) if (mount === 'extension') { setShowGripperWizardFlow(true) diff --git a/app/src/organisms/ODD/Navigation/NavigationMenu.tsx b/app/src/organisms/ODD/Navigation/NavigationMenu.tsx index d2347bf52b0..0b1cbb40e92 100644 --- a/app/src/organisms/ODD/Navigation/NavigationMenu.tsx +++ b/app/src/organisms/ODD/Navigation/NavigationMenu.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState } from 'react' import { createPortal } from 'react-dom' import { useDispatch } from 'react-redux' import { useTranslation } from 'react-i18next' @@ -21,10 +21,11 @@ import { useLights } from '/app/resources/devices' import { getTopPortalEl } from '/app/App/portal' import { RestartRobotConfirmationModal } from './RestartRobotConfirmationModal' +import type { MouseEventHandler } from 'react' import type { Dispatch } from '/app/redux/types' interface NavigationMenuProps { - onClick: React.MouseEventHandler + onClick: MouseEventHandler robotName: string setShowNavMenu: (showNavMenu: boolean) => void } @@ -37,7 +38,7 @@ export function NavigationMenu(props: NavigationMenuProps): JSX.Element { const [ showRestartRobotConfirmationModal, setShowRestartRobotConfirmationModal, - ] = React.useState(false) + ] = useState(false) const navigate = useNavigate() diff --git a/app/src/organisms/ODD/Navigation/index.tsx b/app/src/organisms/ODD/Navigation/index.tsx index 8b60946f929..e562793e36b 100644 --- a/app/src/organisms/ODD/Navigation/index.tsx +++ b/app/src/organisms/ODD/Navigation/index.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState, useEffect, useRef } from 'react' import { useSelector } from 'react-redux' import { useTranslation } from 'react-i18next' import { useLocation, NavLink } from 'react-router-dom' @@ -32,6 +32,8 @@ import { useScrollPosition } from '/app/local-resources/dom-utils' import { useNetworkConnection } from '/app/resources/networking/hooks/useNetworkConnection' import { getLocalRobot } from '/app/redux/discovery' import { NavigationMenu } from './NavigationMenu' + +import type { Dispatch, SetStateAction } from 'react' import type { ON_DEVICE_DISPLAY_PATHS } from '/app/App/OnDeviceDisplayApp' const NAV_LINKS: Array = [ @@ -65,7 +67,7 @@ const CHAR_LIMIT_NO_ICON = 15 interface NavigationProps { // optionalProps for setting the zIndex and position between multiple sticky elements // used for ProtocolDashboard - setNavMenuIsOpened?: React.Dispatch> + setNavMenuIsOpened?: Dispatch> longPressModalIsOpened?: boolean } export function Navigation(props: NavigationProps): JSX.Element { @@ -73,7 +75,7 @@ export function Navigation(props: NavigationProps): JSX.Element { const { t } = useTranslation('top_navigation') const location = useLocation() const localRobot = useSelector(getLocalRobot) - const [showNavMenu, setShowNavMenu] = React.useState(false) + const [showNavMenu, setShowNavMenu] = useState(false) const robotName = localRobot?.name != null ? localRobot.name : 'no name' // We need to display an icon for what type of network connection (if any) @@ -95,8 +97,8 @@ export function Navigation(props: NavigationProps): JSX.Element { const { scrollRef, isScrolled } = useScrollPosition() - const navBarScrollRef = React.useRef(null) - React.useEffect(() => { + const navBarScrollRef = useRef(null) + useEffect(() => { navBarScrollRef?.current?.scrollIntoView({ behavior: 'auto', inline: 'center', diff --git a/app/src/organisms/ODD/NetworkSettings/SelectAuthenticationType.tsx b/app/src/organisms/ODD/NetworkSettings/SelectAuthenticationType.tsx index b918d48df5e..9f163929220 100644 --- a/app/src/organisms/ODD/NetworkSettings/SelectAuthenticationType.tsx +++ b/app/src/organisms/ODD/NetworkSettings/SelectAuthenticationType.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState, useEffect } from 'react' import { useDispatch, useSelector } from 'react-redux' import { useTranslation } from 'react-i18next' @@ -21,6 +21,7 @@ import { getNetworkInterfaces, fetchStatus } from '/app/redux/networking' import { useIsUnboxingFlowOngoing } from '/app/redux-resources/config' import { AlternativeSecurityTypeModal } from './AlternativeSecurityTypeModal' +import type { ChangeEvent } from 'react' import type { WifiSecurityType } from '@opentrons/api-client' import type { Dispatch, State } from '/app/redux/types' @@ -44,7 +45,7 @@ export function SelectAuthenticationType({ const [ showAlternativeSecurityTypeModal, setShowAlternativeSecurityTypeModal, - ] = React.useState(false) + ] = useState(false) const securityButtons = [ { @@ -59,11 +60,11 @@ export function SelectAuthenticationType({ }, ] - const handleChange = (event: React.ChangeEvent): void => { + const handleChange = (event: ChangeEvent): void => { setSelectedAuthType(event.target.value as WifiSecurityType) } - React.useEffect(() => { + useEffect(() => { dispatch(fetchStatus(robotName)) }, [robotName, dispatch]) diff --git a/app/src/organisms/ODD/NetworkSettings/SetWifiSsid.tsx b/app/src/organisms/ODD/NetworkSettings/SetWifiSsid.tsx index d2ea891a254..114d906215b 100644 --- a/app/src/organisms/ODD/NetworkSettings/SetWifiSsid.tsx +++ b/app/src/organisms/ODD/NetworkSettings/SetWifiSsid.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useRef } from 'react' import { useTranslation } from 'react-i18next' import { @@ -15,10 +15,12 @@ import { import { FullKeyboard } from '/app/atoms/SoftwareKeyboard' import { useIsUnboxingFlowOngoing } from '/app/redux-resources/config' +import type { Dispatch, SetStateAction } from 'react' + interface SetWifiSsidProps { errorMessage?: string | null inputSsid: string - setInputSsid: React.Dispatch> + setInputSsid: Dispatch> } export function SetWifiSsid({ @@ -27,7 +29,7 @@ export function SetWifiSsid({ setInputSsid, }: SetWifiSsidProps): JSX.Element { const { t } = useTranslation(['device_settings', 'shared']) - const keyboardRef = React.useRef(null) + const keyboardRef = useRef(null) const isUnboxingFlowOngoing = useIsUnboxingFlowOngoing() return ( diff --git a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupDeckConfiguration/index.tsx b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupDeckConfiguration/index.tsx index a7148788639..4f67deb6da6 100644 --- a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupDeckConfiguration/index.tsx +++ b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupDeckConfiguration/index.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState } from 'react' import { createPortal } from 'react-dom' import { useTranslation } from 'react-i18next' @@ -26,6 +26,7 @@ import { useMostRecentCompletedAnalysis } from '/app/resources/runs' import { getTopPortalEl } from '/app/App/portal' import { useNotifyDeckConfigurationQuery } from '/app/resources/deck_configuration' +import type { Dispatch, SetStateAction } from 'react' import type { CutoutFixtureId, CutoutId, @@ -37,7 +38,7 @@ import type { SetupScreens } from '../types' interface ProtocolSetupDeckConfigurationProps { cutoutId: CutoutId | null runId: string - setSetupScreen: React.Dispatch> + setSetupScreen: Dispatch> providedFixtureOptions: CutoutFixtureId[] } @@ -53,14 +54,12 @@ export function ProtocolSetupDeckConfiguration({ 'shared', ]) - const [ - showConfigurationModal, - setShowConfigurationModal, - ] = React.useState(true) - const [ - showDiscardChangeModal, - setShowDiscardChangeModal, - ] = React.useState(false) + const [showConfigurationModal, setShowConfigurationModal] = useState( + true + ) + const [showDiscardChangeModal, setShowDiscardChangeModal] = useState( + false + ) const mostRecentAnalysis = useMostRecentCompletedAnalysis(runId) const deckConfig = useNotifyDeckConfigurationQuery()?.data ?? [] diff --git a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupLabware/index.tsx b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupLabware/index.tsx index 2d440fc9516..3daa713de88 100644 --- a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupLabware/index.tsx +++ b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupLabware/index.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState } from 'react' import { useTranslation } from 'react-i18next' import { css } from 'styled-components' @@ -52,6 +52,7 @@ import { useMostRecentCompletedAnalysis } from '/app/resources/runs' import { LabwareMapView } from './LabwareMapView' import { SingleLabwareModal } from './SingleLabwareModal' +import type { Dispatch, SetStateAction } from 'react' import type { UseQueryResult } from 'react-query' import type { HeaterShakerCloseLatchCreateCommand, @@ -71,7 +72,7 @@ const DECK_CONFIG_POLL_MS = 5000 export interface ProtocolSetupLabwareProps { runId: string - setSetupScreen: React.Dispatch> + setSetupScreen: Dispatch> isConfirmed: boolean setIsConfirmed: (confirmed: boolean) => void } @@ -83,12 +84,12 @@ export function ProtocolSetupLabware({ setIsConfirmed, }: ProtocolSetupLabwareProps): JSX.Element { const { t } = useTranslation('protocol_setup') - const [showMapView, setShowMapView] = React.useState(false) + const [showMapView, setShowMapView] = useState(false) const [ showLabwareDetailsModal, setShowLabwareDetailsModal, - ] = React.useState(false) - const [selectedLabware, setSelectedLabware] = React.useState< + ] = useState(false) + const [selectedLabware, setSelectedLabware] = useState< | (LabwareDefinition2 & { location: LabwareLocation nickName: string | null @@ -289,7 +290,7 @@ function LabwareLatch({ createLiveCommand, isLoading: isLiveCommandLoading, } = useCreateLiveCommandMutation() - const [isRefetchingModules, setIsRefetchingModules] = React.useState(false) + const [isRefetchingModules, setIsRefetchingModules] = useState(false) const isLatchLoading = isLiveCommandLoading || isRefetchingModules || diff --git a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupLiquids/index.tsx b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupLiquids/index.tsx index 153315d294b..d8aa63d4b26 100644 --- a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupLiquids/index.tsx +++ b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupLiquids/index.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { Fragment, useState } from 'react' import { useTranslation } from 'react-i18next' import { ALIGN_CENTER, @@ -25,12 +25,14 @@ import { SmallButton } from '/app/atoms/buttons' import { useMostRecentCompletedAnalysis } from '/app/resources/runs' import { getTotalVolumePerLiquidId } from '/app/transformations/analysis' import { LiquidDetails } from './LiquidDetails' + +import type { Dispatch, SetStateAction } from 'react' import type { ParsedLiquid, RunTimeCommand } from '@opentrons/shared-data' import type { SetupScreens } from '../types' export interface ProtocolSetupLiquidsProps { runId: string - setSetupScreen: React.Dispatch> + setSetupScreen: Dispatch> isConfirmed: boolean setIsConfirmed: (confirmed: boolean) => void } @@ -95,13 +97,13 @@ export function ProtocolSetupLiquids({ {liquidsInLoadOrder?.map(liquid => ( - + - + ))} @@ -116,7 +118,7 @@ interface LiquidsListProps { export function LiquidsList(props: LiquidsListProps): JSX.Element { const { liquid, runId, commands } = props - const [openItem, setOpenItem] = React.useState(false) + const [openItem, setOpenItem] = useState(false) const labwareByLiquidId = parseLabwareInfoByLiquidId(commands ?? []) return ( diff --git a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/FixtureTable.tsx b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/FixtureTable.tsx index 3491d7530c7..7d990e112a0 100644 --- a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/FixtureTable.tsx +++ b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/FixtureTable.tsx @@ -1,4 +1,5 @@ -import * as React from 'react' +import { useState, Fragment } from 'react' +import { useSelector } from 'react-redux' import { useTranslation } from 'react-i18next' import { ALIGN_CENTER, @@ -29,7 +30,9 @@ import { SmallButton } from '/app/atoms/buttons' import { useDeckConfigurationCompatibility } from '/app/resources/deck_configuration/hooks' import { getRequiredDeckConfig } from '/app/resources/deck_configuration/utils' import { LocationConflictModal } from '/app/organisms/LocationConflictModal' +import { getLocalRobot } from '/app/redux/discovery' +import type { Dispatch, SetStateAction } from 'react' import type { CompletedProtocolAnalysis, CutoutFixtureId, @@ -39,13 +42,11 @@ import type { } from '@opentrons/shared-data' import type { SetupScreens } from '../types' import type { CutoutConfigAndCompatibility } from '/app/resources/deck_configuration/hooks' -import { useSelector } from 'react-redux' -import { getLocalRobot } from '/app/redux/discovery' interface FixtureTableProps { robotType: RobotType mostRecentAnalysis: CompletedProtocolAnalysis | null - setSetupScreen: React.Dispatch> + setSetupScreen: Dispatch> setCutoutId: (cutoutId: CutoutId) => void setProvidedFixtureOptions: (providedFixtureOptions: CutoutFixtureId[]) => void } @@ -134,7 +135,7 @@ export function FixtureTable({ interface FixtureTableItemProps extends CutoutConfigAndCompatibility { lastItem: boolean - setSetupScreen: React.Dispatch> + setSetupScreen: Dispatch> setCutoutId: (cutoutId: CutoutId) => void setProvidedFixtureOptions: (providedFixtureOptions: CutoutFixtureId[]) => void deckDef: DeckDefinition @@ -158,7 +159,7 @@ function FixtureTableItem({ const [ showLocationConflictModal, setShowLocationConflictModal, - ] = React.useState(false) + ] = useState(false) const isCurrentFixtureCompatible = cutoutFixtureId != null && @@ -215,7 +216,7 @@ function FixtureTableItem({ ) } return ( - + {showLocationConflictModal ? ( { @@ -265,6 +266,6 @@ function FixtureTableItem({ {chipLabel} - + ) } diff --git a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/ModuleTable.tsx b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/ModuleTable.tsx index 1a0b93c6f57..d4b0a32ad2d 100644 --- a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/ModuleTable.tsx +++ b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/ModuleTable.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState } from 'react' import { useTranslation } from 'react-i18next' import { useSelector } from 'react-redux' @@ -39,6 +39,7 @@ import { } from '/app/resources/runs' import { useNotifyDeckConfigurationQuery } from '/app/resources/deck_configuration' +import type { Dispatch, SetStateAction } from 'react' import type { CommandData } from '@opentrons/api-client' import type { CutoutConfig, DeckDefinition } from '@opentrons/shared-data' import type { ModulePrepCommandsType } from '/app/local-resources/modules' @@ -59,7 +60,7 @@ export function ModuleTable(props: ModuleTableProps): JSX.Element { const [ prepCommandErrorMessage, setPrepCommandErrorMessage, - ] = React.useState('') + ] = useState('') const { data: deckConfig } = useNotifyDeckConfigurationQuery({ refetchInterval: DECK_CONFIG_REFETCH_INTERVAL, @@ -119,7 +120,7 @@ interface ModuleTableItemProps { isLoading: boolean module: AttachedProtocolModuleMatch prepCommandErrorMessage: string - setPrepCommandErrorMessage: React.Dispatch> + setPrepCommandErrorMessage: Dispatch> deckDef: DeckDefinition robotName: string } @@ -162,11 +163,11 @@ function ModuleTableItem({ ) const isModuleReady = module.attachedModuleMatch != null - const [showModuleWizard, setShowModuleWizard] = React.useState(false) + const [showModuleWizard, setShowModuleWizard] = useState(false) const [ showLocationConflictModal, setShowLocationConflictModal, - ] = React.useState(false) + ] = useState(false) let moduleStatus: JSX.Element = ( <> diff --git a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/ProtocolSetupModulesAndDeck.tsx b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/ProtocolSetupModulesAndDeck.tsx index bcbc2b57bba..542ba3d3624 100644 --- a/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/ProtocolSetupModulesAndDeck.tsx +++ b/app/src/organisms/ODD/ProtocolSetup/ProtocolSetupModulesAndDeck/ProtocolSetupModulesAndDeck.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState, useEffect } from 'react' import { createPortal } from 'react-dom' import { useTranslation } from 'react-i18next' import { useNavigate } from 'react-router-dom' @@ -37,6 +37,7 @@ import { ModuleTable } from './ModuleTable' import { ModulesAndDeckMapView } from './ModulesAndDeckMapView' import { useNotifyDeckConfigurationQuery } from '/app/resources/deck_configuration' +import type { Dispatch, SetStateAction } from 'react' import type { CutoutId, CutoutFixtureId } from '@opentrons/shared-data' import type { SetupScreens } from '../types' @@ -45,7 +46,7 @@ const DECK_CONFIG_POLL_MS = 5000 interface ProtocolSetupModulesAndDeckProps { runId: string - setSetupScreen: React.Dispatch> + setSetupScreen: Dispatch> setCutoutId: (cutoutId: CutoutId) => void setProvidedFixtureOptions: (providedFixtureOptions: CutoutFixtureId[]) => void } @@ -62,7 +63,7 @@ export function ProtocolSetupModulesAndDeck({ const { i18n, t } = useTranslation('protocol_setup') const navigate = useNavigate() const runStatus = useRunStatus(runId) - React.useEffect(() => { + useEffect(() => { if (runStatus === RUN_STATUS_STOPPED) { navigate('/protocols') } @@ -70,12 +71,12 @@ export function ProtocolSetupModulesAndDeck({ const [ showSetupInstructionsModal, setShowSetupInstructionsModal, - ] = React.useState(false) - const [showMapView, setShowMapView] = React.useState(false) + ] = useState(false) + const [showMapView, setShowMapView] = useState(false) const [ clearModuleMismatchBanner, setClearModuleMismatchBanner, - ] = React.useState(false) + ] = useState(false) const mostRecentAnalysis = useMostRecentCompletedAnalysis(runId) const deckDef = getDeckDefFromRobotType(FLEX_ROBOT_TYPE) diff --git a/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/AirGap.tsx b/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/AirGap.tsx index d1cf5ae2c0a..e5c8efbcc69 100644 --- a/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/AirGap.tsx +++ b/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/AirGap.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState, useRef } from 'react' import { useTranslation } from 'react-i18next' import { createPortal } from 'react-dom' @@ -19,6 +19,7 @@ import { ChildNavigation } from '/app/organisms/ODD/ChildNavigation' import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics' import { ACTIONS } from '../constants' +import type { Dispatch } from 'react' import type { QuickTransferSummaryState, QuickTransferSummaryAction, @@ -30,7 +31,7 @@ import { NumericalKeyboard } from '/app/atoms/SoftwareKeyboard' interface AirGapProps { onBack: () => void state: QuickTransferSummaryState - dispatch: React.Dispatch + dispatch: Dispatch kind: FlowRateKind } @@ -38,15 +39,15 @@ export function AirGap(props: AirGapProps): JSX.Element { const { kind, onBack, state, dispatch } = props const { t } = useTranslation('quick_transfer') const { trackEventWithRobotSerial } = useTrackEventWithRobotSerial() - const keyboardRef = React.useRef(null) + const keyboardRef = useRef(null) - const [airGapEnabled, setAirGapEnabled] = React.useState( + const [airGapEnabled, setAirGapEnabled] = useState( kind === 'aspirate' ? state.airGapAspirate != null : state.airGapDispense != null ) - const [currentStep, setCurrentStep] = React.useState(1) - const [volume, setVolume] = React.useState( + const [currentStep, setCurrentStep] = useState(1) + const [volume, setVolume] = useState( kind === 'aspirate' ? state.airGapAspirate ?? null : state.airGapDispense ?? null diff --git a/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/BaseSettings.tsx b/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/BaseSettings.tsx index 9f300b335ad..297054b1d03 100644 --- a/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/BaseSettings.tsx +++ b/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/BaseSettings.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState } from 'react' import { useTranslation } from 'react-i18next' import { ALIGN_CENTER, @@ -17,6 +17,7 @@ import { import { FlowRateEntry } from './FlowRate' import { PipettePath } from './PipettePath' +import type { Dispatch } from 'react' import type { QuickTransferSummaryAction, QuickTransferSummaryState, @@ -24,15 +25,13 @@ import type { interface BaseSettingsProps { state: QuickTransferSummaryState - dispatch: React.Dispatch + dispatch: Dispatch } export function BaseSettings(props: BaseSettingsProps): JSX.Element | null { const { state, dispatch } = props const { t } = useTranslation(['quick_transfer', 'shared']) - const [selectedSetting, setSelectedSetting] = React.useState( - null - ) + const [selectedSetting, setSelectedSetting] = useState(null) let pipettePath: string = '' if (state.path === 'single') { diff --git a/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/BlowOut.tsx b/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/BlowOut.tsx index 55984b27d8b..e961b480960 100644 --- a/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/BlowOut.tsx +++ b/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/BlowOut.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState } from 'react' import isEqual from 'lodash/isEqual' import { useTranslation } from 'react-i18next' import { createPortal } from 'react-dom' @@ -22,6 +22,7 @@ import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics' import { ChildNavigation } from '/app/organisms/ODD/ChildNavigation' import { ACTIONS } from '../constants' +import type { Dispatch } from 'react' import type { DeckConfiguration } from '@opentrons/shared-data' import type { QuickTransferSummaryState, @@ -35,7 +36,7 @@ import { i18n } from '/app/i18n' interface BlowOutProps { onBack: () => void state: QuickTransferSummaryState - dispatch: React.Dispatch + dispatch: Dispatch kind: FlowRateKind } @@ -96,11 +97,11 @@ export function BlowOut(props: BlowOutProps): JSX.Element { const { trackEventWithRobotSerial } = useTrackEventWithRobotSerial() const deckConfig = useNotifyDeckConfigurationQuery().data ?? [] - const [isBlowOutEnabled, setisBlowOutEnabled] = React.useState( + const [isBlowOutEnabled, setisBlowOutEnabled] = useState( state.blowOut != null ) - const [currentStep, setCurrentStep] = React.useState(1) - const [blowOutLocation, setBlowOutLocation] = React.useState< + const [currentStep, setCurrentStep] = useState(1) + const [blowOutLocation, setBlowOutLocation] = useState< BlowOutLocation | undefined >(state.blowOut) diff --git a/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/Delay.tsx b/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/Delay.tsx index 0692cc904ac..556ddc181c8 100644 --- a/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/Delay.tsx +++ b/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/Delay.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState, useRef } from 'react' import { useTranslation } from 'react-i18next' import { createPortal } from 'react-dom' @@ -8,8 +8,8 @@ import { DIRECTION_COLUMN, Flex, InputField, - RadioButton, POSITION_FIXED, + RadioButton, SPACING, } from '@opentrons/components' import { ANALYTICS_QUICK_TRANSFER_SETTING_SAVED } from '/app/redux/analytics' @@ -18,6 +18,7 @@ import { ChildNavigation } from '/app/organisms/ODD/ChildNavigation' import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics' import { ACTIONS } from '../constants' +import type { Dispatch } from 'react' import type { QuickTransferSummaryState, QuickTransferSummaryAction, @@ -29,7 +30,7 @@ import { NumericalKeyboard } from '/app/atoms/SoftwareKeyboard' interface DelayProps { onBack: () => void state: QuickTransferSummaryState - dispatch: React.Dispatch + dispatch: Dispatch kind: FlowRateKind } @@ -37,20 +38,20 @@ export function Delay(props: DelayProps): JSX.Element { const { kind, onBack, state, dispatch } = props const { t } = useTranslation('quick_transfer') const { trackEventWithRobotSerial } = useTrackEventWithRobotSerial() - const keyboardRef = React.useRef(null) + const keyboardRef = useRef(null) - const [currentStep, setCurrentStep] = React.useState(1) - const [delayIsEnabled, setDelayIsEnabled] = React.useState( + const [currentStep, setCurrentStep] = useState(1) + const [delayIsEnabled, setDelayIsEnabled] = useState( kind === 'aspirate' ? state.delayAspirate != null : state.delayDispense != null ) - const [delayDuration, setDelayDuration] = React.useState( + const [delayDuration, setDelayDuration] = useState( kind === 'aspirate' ? state.delayAspirate?.delayDuration ?? null : state.delayDispense?.delayDuration ?? null ) - const [position, setPosition] = React.useState( + const [position, setPosition] = useState( kind === 'aspirate' ? state.delayAspirate?.positionFromBottom ?? null : state.delayDispense?.positionFromBottom ?? null diff --git a/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/FlowRate.tsx b/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/FlowRate.tsx index 88279b1c76a..1b2bed604fc 100644 --- a/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/FlowRate.tsx +++ b/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/FlowRate.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState, useRef } from 'react' import { createPortal } from 'react-dom' import { useTranslation } from 'react-i18next' @@ -24,6 +24,7 @@ import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics' import { ACTIONS } from '../constants' +import type { Dispatch } from 'react' import type { SupportedTip } from '@opentrons/shared-data' import type { QuickTransferSummaryState, @@ -34,7 +35,7 @@ import type { interface FlowRateEntryProps { onBack: () => void state: QuickTransferSummaryState - dispatch: React.Dispatch + dispatch: Dispatch kind: FlowRateKind } @@ -42,9 +43,9 @@ export function FlowRateEntry(props: FlowRateEntryProps): JSX.Element { const { onBack, state, dispatch, kind } = props const { i18n, t } = useTranslation(['quick_transfer', 'shared']) const { trackEventWithRobotSerial } = useTrackEventWithRobotSerial() - const keyboardRef = React.useRef(null) + const keyboardRef = useRef(null) - const [flowRate, setFlowRate] = React.useState( + const [flowRate, setFlowRate] = useState( kind === 'aspirate' ? state.aspirateFlowRate : state.dispenseFlowRate ) diff --git a/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/Mix.tsx b/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/Mix.tsx index 3774662bc38..b6c7862310c 100644 --- a/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/Mix.tsx +++ b/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/Mix.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState, useRef } from 'react' import { useTranslation } from 'react-i18next' import { createPortal } from 'react-dom' @@ -8,8 +8,8 @@ import { DIRECTION_COLUMN, Flex, InputField, - RadioButton, POSITION_FIXED, + RadioButton, SPACING, } from '@opentrons/components' @@ -18,19 +18,20 @@ import { getTopPortalEl } from '/app/App/portal' import { ChildNavigation } from '/app/organisms/ODD/ChildNavigation' import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics' import { ACTIONS } from '../constants' +import { i18n } from '/app/i18n' +import { NumericalKeyboard } from '/app/atoms/SoftwareKeyboard' +import type { Dispatch } from 'react' import type { QuickTransferSummaryState, QuickTransferSummaryAction, FlowRateKind, } from '../types' -import { i18n } from '/app/i18n' -import { NumericalKeyboard } from '/app/atoms/SoftwareKeyboard' interface MixProps { onBack: () => void state: QuickTransferSummaryState - dispatch: React.Dispatch + dispatch: Dispatch kind: FlowRateKind } @@ -38,20 +39,20 @@ export function Mix(props: MixProps): JSX.Element { const { kind, onBack, state, dispatch } = props const { t } = useTranslation('quick_transfer') const { trackEventWithRobotSerial } = useTrackEventWithRobotSerial() - const keyboardRef = React.useRef(null) + const keyboardRef = useRef(null) - const [mixIsEnabled, setMixIsEnabled] = React.useState( + const [mixIsEnabled, setMixIsEnabled] = useState( kind === 'aspirate' ? state.mixOnAspirate != null : state.mixOnDispense != null ) - const [currentStep, setCurrentStep] = React.useState(1) - const [mixVolume, setMixVolume] = React.useState( + const [currentStep, setCurrentStep] = useState(1) + const [mixVolume, setMixVolume] = useState( kind === 'aspirate' ? state.mixOnAspirate?.mixVolume ?? null : state.mixOnDispense?.mixVolume ?? null ) - const [mixReps, setMixReps] = React.useState( + const [mixReps, setMixReps] = useState( kind === 'aspirate' ? state.mixOnAspirate?.repititions ?? null : state.mixOnDispense?.repititions ?? null diff --git a/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/PipettePath.tsx b/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/PipettePath.tsx index 9db8923bd58..eabbe9fc678 100644 --- a/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/PipettePath.tsx +++ b/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/PipettePath.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState, useRef } from 'react' import isEqual from 'lodash/isEqual' import { useTranslation } from 'react-i18next' import { createPortal } from 'react-dom' @@ -9,8 +9,8 @@ import { DIRECTION_COLUMN, Flex, InputField, - RadioButton, POSITION_FIXED, + RadioButton, SPACING, } from '@opentrons/components' @@ -25,6 +25,7 @@ import { ACTIONS } from '../constants' import { i18n } from '/app/i18n' import { NumericalKeyboard } from '/app/atoms/SoftwareKeyboard' +import type { Dispatch } from 'react' import type { PathOption, QuickTransferSummaryState, @@ -35,25 +36,25 @@ import type { interface PipettePathProps { onBack: () => void state: QuickTransferSummaryState - dispatch: React.Dispatch + dispatch: Dispatch } export function PipettePath(props: PipettePathProps): JSX.Element { const { onBack, state, dispatch } = props const { t } = useTranslation('quick_transfer') const { trackEventWithRobotSerial } = useTrackEventWithRobotSerial() - const keyboardRef = React.useRef(null) + const keyboardRef = useRef(null) const deckConfig = useNotifyDeckConfigurationQuery().data ?? [] - const [selectedPath, setSelectedPath] = React.useState(state.path) - const [currentStep, setCurrentStep] = React.useState(1) - const [blowOutLocation, setBlowOutLocation] = React.useState< + const [selectedPath, setSelectedPath] = useState(state.path) + const [currentStep, setCurrentStep] = useState(1) + const [blowOutLocation, setBlowOutLocation] = useState< BlowOutLocation | undefined >(state.blowOut) - const [disposalVolume, setDisposalVolume] = React.useState< - number | undefined - >(state?.disposalVolume) + const [disposalVolume, setDisposalVolume] = useState( + state?.disposalVolume + ) const maxPipetteVolume = Object.values(state.pipette.liquids)[0].maxVolume const tipVolume = Object.values(state.tipRack.wells)[0].totalLiquidVolume diff --git a/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/TipPosition.tsx b/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/TipPosition.tsx index 92082cf9c7d..8a5abf1a169 100644 --- a/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/TipPosition.tsx +++ b/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/TipPosition.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState, useRef } from 'react' import { useTranslation } from 'react-i18next' import { @@ -19,6 +19,7 @@ import { ACTIONS } from '../constants' import { createPortal } from 'react-dom' import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics' +import type { Dispatch } from 'react' import type { QuickTransferSummaryState, QuickTransferSummaryAction, @@ -28,7 +29,7 @@ import type { interface TipPositionEntryProps { onBack: () => void state: QuickTransferSummaryState - dispatch: React.Dispatch + dispatch: Dispatch kind: FlowRateKind // TODO: rename flowRateKind to be generic } @@ -36,9 +37,9 @@ export function TipPositionEntry(props: TipPositionEntryProps): JSX.Element { const { onBack, state, dispatch, kind } = props const { i18n, t } = useTranslation(['quick_transfer', 'shared']) const { trackEventWithRobotSerial } = useTrackEventWithRobotSerial() - const keyboardRef = React.useRef(null) + const keyboardRef = useRef(null) - const [tipPosition, setTipPosition] = React.useState( + const [tipPosition, setTipPosition] = useState( kind === 'aspirate' ? state.tipPositionAspirate : state.tipPositionDispense ) diff --git a/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/TouchTip.tsx b/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/TouchTip.tsx index a30b204d4a4..41780d65181 100644 --- a/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/TouchTip.tsx +++ b/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/TouchTip.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState, useRef } from 'react' import { useTranslation } from 'react-i18next' import { createPortal } from 'react-dom' @@ -8,8 +8,8 @@ import { DIRECTION_COLUMN, Flex, InputField, - RadioButton, POSITION_FIXED, + RadioButton, SPACING, } from '@opentrons/components' @@ -21,6 +21,7 @@ import { i18n } from '/app/i18n' import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics' import { NumericalKeyboard } from '/app/atoms/SoftwareKeyboard' +import type { Dispatch } from 'react' import type { QuickTransferSummaryState, QuickTransferSummaryAction, @@ -30,7 +31,7 @@ import type { interface TouchTipProps { onBack: () => void state: QuickTransferSummaryState - dispatch: React.Dispatch + dispatch: Dispatch kind: FlowRateKind } @@ -38,15 +39,15 @@ export function TouchTip(props: TouchTipProps): JSX.Element { const { kind, onBack, state, dispatch } = props const { t } = useTranslation('quick_transfer') const { trackEventWithRobotSerial } = useTrackEventWithRobotSerial() - const keyboardRef = React.useRef(null) + const keyboardRef = useRef(null) - const [touchTipIsEnabled, setTouchTipIsEnabled] = React.useState( + const [touchTipIsEnabled, setTouchTipIsEnabled] = useState( kind === 'aspirate' ? state.touchTipAspirate != null : state.touchTipDispense != null ) - const [currentStep, setCurrentStep] = React.useState(1) - const [position, setPosition] = React.useState( + const [currentStep, setCurrentStep] = useState(1) + const [position, setPosition] = useState( kind === 'aspirate' ? state.touchTipAspirate ?? null : state.touchTipDispense ?? null diff --git a/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/index.tsx b/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/index.tsx index 2911b7975d1..33a603b6f75 100644 --- a/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/index.tsx +++ b/app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/index.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState, useEffect } from 'react' import { useTranslation } from 'react-i18next' import { @@ -34,13 +34,14 @@ import { TouchTip } from './TouchTip' import { AirGap } from './AirGap' import { BlowOut } from './BlowOut' +import type { Dispatch } from 'react' import type { QuickTransferSummaryAction, QuickTransferSummaryState, } from '../types' interface QuickTransferAdvancedSettingsProps { state: QuickTransferSummaryState - dispatch: React.Dispatch + dispatch: Dispatch } export function QuickTransferAdvancedSettings( @@ -48,13 +49,11 @@ export function QuickTransferAdvancedSettings( ): JSX.Element | null { const { state, dispatch } = props const { t, i18n } = useTranslation(['quick_transfer', 'shared']) - const [selectedSetting, setSelectedSetting] = React.useState( - null - ) + const [selectedSetting, setSelectedSetting] = useState(null) const { trackEventWithRobotSerial } = useTrackEventWithRobotSerial() const { makeSnackbar } = useToaster() - React.useEffect(() => { + useEffect(() => { trackEventWithRobotSerial({ name: ANALYTICS_QUICK_TRANSFER_ADVANCED_SETTINGS_TAB, properties: {}, diff --git a/app/src/organisms/ODD/QuickTransferFlow/SelectDestLabware.tsx b/app/src/organisms/ODD/QuickTransferFlow/SelectDestLabware.tsx index ba90e54de4d..62921e8e08d 100644 --- a/app/src/organisms/ODD/QuickTransferFlow/SelectDestLabware.tsx +++ b/app/src/organisms/ODD/QuickTransferFlow/SelectDestLabware.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState } from 'react' import { useTranslation } from 'react-i18next' import { Flex, @@ -15,6 +15,7 @@ import { import { ChildNavigation } from '/app/organisms/ODD/ChildNavigation' import { getCompatibleLabwareByCategory } from './utils' +import type { ComponentProps, Dispatch } from 'react' import type { LabwareDefinition2 } from '@opentrons/shared-data' import type { SmallButton } from '/app/atoms/buttons' import type { LabwareFilter } from '/app/local-resources/labware' @@ -26,9 +27,9 @@ import type { interface SelectDestLabwareProps { onNext: () => void onBack: () => void - exitButtonProps: React.ComponentProps + exitButtonProps: ComponentProps state: QuickTransferWizardState - dispatch: React.Dispatch + dispatch: Dispatch } export function SelectDestLabware( @@ -44,10 +45,8 @@ export function SelectDestLabware( if (state.pipette?.channels === 1) { labwareDisplayCategoryFilters.push('tubeRack') } - const [selectedCategory, setSelectedCategory] = React.useState( - 'all' - ) - const [selectedLabware, setSelectedLabware] = React.useState< + const [selectedCategory, setSelectedCategory] = useState('all') + const [selectedLabware, setSelectedLabware] = useState< LabwareDefinition2 | 'source' | undefined >(state.destination) diff --git a/app/src/organisms/ODD/QuickTransferFlow/SelectDestWells.tsx b/app/src/organisms/ODD/QuickTransferFlow/SelectDestWells.tsx index 0cb402f6ee8..41dcf155fb7 100644 --- a/app/src/organisms/ODD/QuickTransferFlow/SelectDestWells.tsx +++ b/app/src/organisms/ODD/QuickTransferFlow/SelectDestWells.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState } from 'react' import { createPortal } from 'react-dom' import { useTranslation } from 'react-i18next' import without from 'lodash/without' @@ -24,6 +24,12 @@ import { RECTANGULAR_WELL_96_PLATE_DEFINITION_URI, } from './SelectSourceWells' +import type { + ComponentProps, + Dispatch, + SetStateAction, + MouseEvent, +} from 'react' import type { SmallButton } from '/app/atoms/buttons' import type { OddModalHeaderBaseProps } from '/app/molecules/OddModal/types' import type { @@ -35,7 +41,7 @@ interface SelectDestWellsProps { onNext: () => void onBack: () => void state: QuickTransferWizardState - dispatch: React.Dispatch + dispatch: Dispatch } export function SelectDestWells(props: SelectDestWellsProps): JSX.Element { @@ -53,12 +59,11 @@ export function SelectDestWells(props: SelectDestWellsProps): JSX.Element { const [ showNumberWellsSelectedErrorModal, setShowNumberWellsSelectedErrorModal, - ] = React.useState(false) - const [selectedWells, setSelectedWells] = React.useState(destinationWellGroup) - const [ - isNumberWellsSelectedError, - setIsNumberWellsSelectedError, - ] = React.useState(false) + ] = useState(false) + const [selectedWells, setSelectedWells] = useState(destinationWellGroup) + const [isNumberWellsSelectedError, setIsNumberWellsSelectedError] = useState( + false + ) const selectedWellCount = Object.keys(selectedWells).length const sourceWellCount = state.sourceWells?.length ?? 0 @@ -88,7 +93,7 @@ export function SelectDestWells(props: SelectDestWellsProps): JSX.Element { } const is384WellPlate = labwareDefinition?.parameters.format === '384Standard' - const [analyticsStartTime] = React.useState(new Date()) + const [analyticsStartTime] = useState(new Date()) const handleClickNext = (): void => { if ( @@ -130,10 +135,10 @@ export function SelectDestWells(props: SelectDestWellsProps): JSX.Element { } } - const resetButtonProps: React.ComponentProps = { + const resetButtonProps: ComponentProps = { buttonType: 'tertiaryLowLight', buttonText: t('shared:reset'), - onClick: (e: React.MouseEvent) => { + onClick: (e: MouseEvent) => { setIsNumberWellsSelectedError(false) setSelectedWells({}) e.currentTarget.blur?.() @@ -214,9 +219,7 @@ function NumberWellsSelectedErrorModal({ selectionUnit, selectionUnits, }: { - setShowNumberWellsSelectedErrorModal: React.Dispatch< - React.SetStateAction - > + setShowNumberWellsSelectedErrorModal: Dispatch> wellCount: number selectionUnit: string selectionUnits: string diff --git a/app/src/organisms/ODD/QuickTransferFlow/SelectPipette.tsx b/app/src/organisms/ODD/QuickTransferFlow/SelectPipette.tsx index 3331800e1a9..0b01a93977d 100644 --- a/app/src/organisms/ODD/QuickTransferFlow/SelectPipette.tsx +++ b/app/src/organisms/ODD/QuickTransferFlow/SelectPipette.tsx @@ -1,18 +1,19 @@ -import * as React from 'react' +import { useState } from 'react' import { useTranslation } from 'react-i18next' import { + DIRECTION_COLUMN, Flex, - SPACING, LegacyStyledText, - TYPOGRAPHY, - DIRECTION_COLUMN, RadioButton, + SPACING, + TYPOGRAPHY, } from '@opentrons/components' import { useInstrumentsQuery } from '@opentrons/react-api-client' import { RIGHT, LEFT } from '@opentrons/shared-data' import { usePipetteSpecsV2 } from '/app/local-resources/instruments' import { ChildNavigation } from '/app/organisms/ODD/ChildNavigation' +import type { ComponentProps, Dispatch } from 'react' import type { PipetteData, Mount } from '@opentrons/api-client' import type { SmallButton } from '/app/atoms/buttons' import type { @@ -23,9 +24,9 @@ import type { interface SelectPipetteProps { onNext: () => void onBack: () => void - exitButtonProps: React.ComponentProps + exitButtonProps: ComponentProps state: QuickTransferWizardState - dispatch: React.Dispatch + dispatch: Dispatch } export function SelectPipette(props: SelectPipetteProps): JSX.Element { @@ -44,9 +45,9 @@ export function SelectPipette(props: SelectPipetteProps): JSX.Element { const rightPipetteSpecs = usePipetteSpecsV2(rightPipette?.instrumentModel) // automatically select 96 channel if it is attached - const [selectedPipette, setSelectedPipette] = React.useState< - Mount | undefined - >(leftPipetteSpecs?.channels === 96 ? LEFT : state.mount) + const [selectedPipette, setSelectedPipette] = useState( + leftPipetteSpecs?.channels === 96 ? LEFT : state.mount + ) const handleClickNext = (): void => { const selectedPipetteSpecs = diff --git a/app/src/organisms/ODD/QuickTransferFlow/SelectSourceLabware.tsx b/app/src/organisms/ODD/QuickTransferFlow/SelectSourceLabware.tsx index 2d4752a5aa1..c51e4782c1d 100644 --- a/app/src/organisms/ODD/QuickTransferFlow/SelectSourceLabware.tsx +++ b/app/src/organisms/ODD/QuickTransferFlow/SelectSourceLabware.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState } from 'react' import { useTranslation } from 'react-i18next' import { Flex, @@ -15,6 +15,7 @@ import { import { ChildNavigation } from '/app/organisms/ODD/ChildNavigation' import { getCompatibleLabwareByCategory } from './utils' +import type { ComponentProps, Dispatch } from 'react' import type { LabwareDefinition2 } from '@opentrons/shared-data' import type { SmallButton } from '/app/atoms/buttons' import type { LabwareFilter } from '/app/local-resources/labware' @@ -26,9 +27,9 @@ import type { interface SelectSourceLabwareProps { onNext: () => void onBack: () => void - exitButtonProps: React.ComponentProps + exitButtonProps: ComponentProps state: QuickTransferWizardState - dispatch: React.Dispatch + dispatch: Dispatch } export function SelectSourceLabware( @@ -44,11 +45,9 @@ export function SelectSourceLabware( if (state.pipette?.channels === 1) { labwareDisplayCategoryFilters.push('tubeRack') } - const [selectedCategory, setSelectedCategory] = React.useState( - 'all' - ) + const [selectedCategory, setSelectedCategory] = useState('all') - const [selectedLabware, setSelectedLabware] = React.useState< + const [selectedLabware, setSelectedLabware] = useState< LabwareDefinition2 | undefined >(state.source) diff --git a/app/src/organisms/ODD/QuickTransferFlow/SelectSourceWells.tsx b/app/src/organisms/ODD/QuickTransferFlow/SelectSourceWells.tsx index a78ec884560..1a643780e08 100644 --- a/app/src/organisms/ODD/QuickTransferFlow/SelectSourceWells.tsx +++ b/app/src/organisms/ODD/QuickTransferFlow/SelectSourceWells.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState } from 'react' import { useTranslation } from 'react-i18next' import without from 'lodash/without' import { @@ -14,6 +14,7 @@ import { WellSelection } from '/app/organisms/WellSelection' import { ANALYTICS_QUICK_TRANSFER_WELL_SELECTION_DURATION } from '/app/redux/analytics' import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics' +import type { ComponentProps, Dispatch, MouseEvent } from 'react' import type { SmallButton } from '/app/atoms/buttons' import type { QuickTransferWizardState, @@ -24,7 +25,7 @@ interface SelectSourceWellsProps { onNext: () => void onBack: () => void state: QuickTransferWizardState - dispatch: React.Dispatch + dispatch: Dispatch } export const CIRCULAR_WELL_96_PLATE_DEFINITION_URI = @@ -42,8 +43,8 @@ export function SelectSourceWells(props: SelectSourceWellsProps): JSX.Element { return { ...acc, [well]: null } }, {}) - const [selectedWells, setSelectedWells] = React.useState(sourceWellGroup) - const [startingTimeStamp] = React.useState(new Date()) + const [selectedWells, setSelectedWells] = useState(sourceWellGroup) + const [startingTimeStamp] = useState(new Date()) const is384WellPlate = state.source?.parameters.format === '384Standard' const handleClickNext = (): void => { @@ -62,10 +63,10 @@ export function SelectSourceWells(props: SelectSourceWellsProps): JSX.Element { onNext() } - const resetButtonProps: React.ComponentProps = { + const resetButtonProps: ComponentProps = { buttonType: 'tertiaryLowLight', buttonText: t('shared:reset'), - onClick: (e: React.MouseEvent) => { + onClick: (e: MouseEvent) => { setSelectedWells({}) e.currentTarget.blur?.() }, diff --git a/app/src/organisms/ODD/QuickTransferFlow/SelectTipRack.tsx b/app/src/organisms/ODD/QuickTransferFlow/SelectTipRack.tsx index e8ebd52d90c..f5fd1abae85 100644 --- a/app/src/organisms/ODD/QuickTransferFlow/SelectTipRack.tsx +++ b/app/src/organisms/ODD/QuickTransferFlow/SelectTipRack.tsx @@ -1,14 +1,15 @@ -import * as React from 'react' +import { useState } from 'react' import { useTranslation } from 'react-i18next' import { - Flex, - SPACING, DIRECTION_COLUMN, + Flex, RadioButton, + SPACING, } from '@opentrons/components' import { getAllDefinitions } from '@opentrons/shared-data' import { ChildNavigation } from '/app/organisms/ODD/ChildNavigation' +import type { ComponentProps, Dispatch } from 'react' import type { LabwareDefinition2 } from '@opentrons/shared-data' import type { SmallButton } from '/app/atoms/buttons' import type { @@ -19,9 +20,9 @@ import type { interface SelectTipRackProps { onNext: () => void onBack: () => void - exitButtonProps: React.ComponentProps + exitButtonProps: ComponentProps state: QuickTransferWizardState - dispatch: React.Dispatch + dispatch: Dispatch } export function SelectTipRack(props: SelectTipRackProps): JSX.Element { @@ -32,7 +33,7 @@ export function SelectTipRack(props: SelectTipRackProps): JSX.Element { const selectedPipetteDefaultTipracks = state.pipette?.liquids.default.defaultTipracks ?? [] - const [selectedTipRack, setSelectedTipRack] = React.useState< + const [selectedTipRack, setSelectedTipRack] = useState< LabwareDefinition2 | undefined >(state.tipRack) diff --git a/app/src/organisms/ODD/QuickTransferFlow/SummaryAndSettings.tsx b/app/src/organisms/ODD/QuickTransferFlow/SummaryAndSettings.tsx index 6ddba5ca50e..2567b703b93 100644 --- a/app/src/organisms/ODD/QuickTransferFlow/SummaryAndSettings.tsx +++ b/app/src/organisms/ODD/QuickTransferFlow/SummaryAndSettings.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState, useReducer } from 'react' import { useTranslation } from 'react-i18next' import { useNavigate } from 'react-router-dom' import { useQueryClient } from 'react-query' @@ -33,11 +33,12 @@ import { SaveOrRunModal } from './SaveOrRunModal' import { getInitialSummaryState, createQuickTransferFile } from './utils' import { quickTransferSummaryReducer } from './reducers' +import type { ComponentProps } from 'react' import type { SmallButton } from '/app/atoms/buttons' import type { QuickTransferWizardState } from './types' interface SummaryAndSettingsProps { - exitButtonProps: React.ComponentProps + exitButtonProps: ComponentProps state: QuickTransferWizardState analyticsStartTime: Date } @@ -51,18 +52,14 @@ export function SummaryAndSettings( const queryClient = useQueryClient() const host = useHost() const { t } = useTranslation(['quick_transfer', 'shared']) - const [showSaveOrRunModal, setShowSaveOrRunModal] = React.useState( - false - ) + const [showSaveOrRunModal, setShowSaveOrRunModal] = useState(false) const displayCategory: string[] = [ 'overview', 'advanced_settings', 'tip_management', ] - const [selectedCategory, setSelectedCategory] = React.useState( - 'overview' - ) + const [selectedCategory, setSelectedCategory] = useState('overview') const deckConfig = useNotifyDeckConfigurationQuery().data ?? [] const initialSummaryState = getInitialSummaryState({ @@ -71,7 +68,7 @@ export function SummaryAndSettings( state: wizardFlowState, deckConfig, }) - const [state, dispatch] = React.useReducer( + const [state, dispatch] = useReducer( quickTransferSummaryReducer, initialSummaryState ) diff --git a/app/src/organisms/ODD/QuickTransferFlow/TipManagement/ChangeTip.tsx b/app/src/organisms/ODD/QuickTransferFlow/TipManagement/ChangeTip.tsx index 7c72dbe202e..dd3869ff329 100644 --- a/app/src/organisms/ODD/QuickTransferFlow/TipManagement/ChangeTip.tsx +++ b/app/src/organisms/ODD/QuickTransferFlow/TipManagement/ChangeTip.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState } from 'react' import { useTranslation } from 'react-i18next' import { createPortal } from 'react-dom' @@ -16,6 +16,7 @@ import { getTopPortalEl } from '/app/App/portal' import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics' import { ChildNavigation } from '/app/organisms/ODD/ChildNavigation' +import type { Dispatch } from 'react' import type { ChangeTipOptions, QuickTransferSummaryState, @@ -25,7 +26,7 @@ import type { interface ChangeTipProps { onBack: () => void state: QuickTransferSummaryState - dispatch: React.Dispatch + dispatch: Dispatch } export function ChangeTip(props: ChangeTipProps): JSX.Element { @@ -53,7 +54,7 @@ export function ChangeTip(props: ChangeTipProps): JSX.Element { const [ selectedChangeTipOption, setSelectedChangeTipOption, - ] = React.useState(state.changeTip) + ] = useState(state.changeTip) const handleClickSave = (): void => { if (selectedChangeTipOption !== state.changeTip) { diff --git a/app/src/organisms/ODD/QuickTransferFlow/TipManagement/TipDropLocation.tsx b/app/src/organisms/ODD/QuickTransferFlow/TipManagement/TipDropLocation.tsx index 6dae428684b..b61a73389cd 100644 --- a/app/src/organisms/ODD/QuickTransferFlow/TipManagement/TipDropLocation.tsx +++ b/app/src/organisms/ODD/QuickTransferFlow/TipManagement/TipDropLocation.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState } from 'react' import { useTranslation } from 'react-i18next' import { createPortal } from 'react-dom' import { @@ -21,6 +21,7 @@ import { useNotifyDeckConfigurationQuery } from '/app/resources/deck_configurati import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics' import { ChildNavigation } from '/app/organisms/ODD/ChildNavigation' +import type { Dispatch } from 'react' import type { QuickTransferSummaryState, QuickTransferSummaryAction, @@ -30,7 +31,7 @@ import type { CutoutConfig } from '@opentrons/shared-data' interface TipDropLocationProps { onBack: () => void state: QuickTransferSummaryState - dispatch: React.Dispatch + dispatch: Dispatch } export function TipDropLocation(props: TipDropLocationProps): JSX.Element { @@ -56,7 +57,7 @@ export function TipDropLocation(props: TipDropLocationProps): JSX.Element { const [ selectedTipDropLocation, setSelectedTipDropLocation, - ] = React.useState(state.dropTipLocation) + ] = useState(state.dropTipLocation) const handleClickSave = (): void => { if (selectedTipDropLocation.cutoutId !== state.dropTipLocation.cutoutId) { diff --git a/app/src/organisms/ODD/QuickTransferFlow/TipManagement/index.tsx b/app/src/organisms/ODD/QuickTransferFlow/TipManagement/index.tsx index 03f33c965f2..4a87e67c2c7 100644 --- a/app/src/organisms/ODD/QuickTransferFlow/TipManagement/index.tsx +++ b/app/src/organisms/ODD/QuickTransferFlow/TipManagement/index.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState, useEffect } from 'react' import { useTranslation } from 'react-i18next' import { ALIGN_CENTER, @@ -21,6 +21,7 @@ import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics' import { ChangeTip } from './ChangeTip' import { TipDropLocation } from './TipDropLocation' +import type { Dispatch } from 'react' import type { QuickTransferSummaryAction, QuickTransferSummaryState, @@ -28,18 +29,16 @@ import type { interface TipManagementProps { state: QuickTransferSummaryState - dispatch: React.Dispatch + dispatch: Dispatch } export function TipManagement(props: TipManagementProps): JSX.Element | null { const { state, dispatch } = props const { t } = useTranslation(['quick_transfer', 'shared']) const { trackEventWithRobotSerial } = useTrackEventWithRobotSerial() - const [selectedSetting, setSelectedSetting] = React.useState( - null - ) + const [selectedSetting, setSelectedSetting] = useState(null) - React.useEffect(() => { + useEffect(() => { trackEventWithRobotSerial({ name: ANALYTICS_QUICK_TRANSFER_TIP_MANAGEMENT_TAB, properties: {}, diff --git a/app/src/organisms/ODD/QuickTransferFlow/VolumeEntry.tsx b/app/src/organisms/ODD/QuickTransferFlow/VolumeEntry.tsx index 0a6526676d6..58bf2f570e7 100644 --- a/app/src/organisms/ODD/QuickTransferFlow/VolumeEntry.tsx +++ b/app/src/organisms/ODD/QuickTransferFlow/VolumeEntry.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState, useRef } from 'react' import { useTranslation } from 'react-i18next' import { @@ -14,6 +14,7 @@ import { NumericalKeyboard } from '/app/atoms/SoftwareKeyboard' import { getVolumeRange } from './utils' import { CONSOLIDATE, DISTRIBUTE } from './constants' +import type { ComponentProps, Dispatch } from 'react' import type { SmallButton } from '/app/atoms/buttons' import type { QuickTransferWizardState, @@ -23,17 +24,17 @@ import type { interface VolumeEntryProps { onNext: () => void onBack: () => void - exitButtonProps: React.ComponentProps + exitButtonProps: ComponentProps state: QuickTransferWizardState - dispatch: React.Dispatch + dispatch: Dispatch } export function VolumeEntry(props: VolumeEntryProps): JSX.Element { const { onNext, onBack, exitButtonProps, state, dispatch } = props const { i18n, t } = useTranslation(['quick_transfer', 'shared']) - const keyboardRef = React.useRef(null) + const keyboardRef = useRef(null) - const [volume, setVolume] = React.useState( + const [volume, setVolume] = useState( state.volume ? state.volume.toString() : '' ) const volumeRange = getVolumeRange(state) diff --git a/app/src/organisms/ODD/QuickTransferFlow/index.tsx b/app/src/organisms/ODD/QuickTransferFlow/index.tsx index f7d94a46000..fb0a76b6f47 100644 --- a/app/src/organisms/ODD/QuickTransferFlow/index.tsx +++ b/app/src/organisms/ODD/QuickTransferFlow/index.tsx @@ -1,10 +1,10 @@ -import * as React from 'react' +import { useState, useReducer } from 'react' import { useNavigate } from 'react-router-dom' import { useTranslation } from 'react-i18next' import { - useConditionalConfirm, - StepMeter, POSITION_STICKY, + StepMeter, + useConditionalConfirm, } from '@opentrons/components' import { ANALYTICS_QUICK_TRANSFER_EXIT_EARLY } from '/app/redux/analytics' import { useTrackEventWithRobotSerial } from '/app/redux-resources/analytics' @@ -20,6 +20,7 @@ import { VolumeEntry } from './VolumeEntry' import { SummaryAndSettings } from './SummaryAndSettings' import { quickTransferWizardReducer } from './reducers' +import type { ComponentProps } from 'react' import type { SmallButton } from '/app/atoms/buttons' import type { QuickTransferWizardState } from './types' @@ -30,13 +31,13 @@ export const QuickTransferFlow = (): JSX.Element => { const navigate = useNavigate() const { i18n, t } = useTranslation(['quick_transfer', 'shared']) const { trackEventWithRobotSerial } = useTrackEventWithRobotSerial() - const [state, dispatch] = React.useReducer( + const [state, dispatch] = useReducer( quickTransferWizardReducer, initialQuickTransferState ) - const [currentStep, setCurrentStep] = React.useState(0) + const [currentStep, setCurrentStep] = useState(0) - const [analyticsStartTime] = React.useState(new Date()) + const [analyticsStartTime] = useState(new Date()) const { confirm: confirmExit, @@ -52,7 +53,7 @@ export const QuickTransferFlow = (): JSX.Element => { navigate('/quick-transfer') }, true) - const exitButtonProps: React.ComponentProps = { + const exitButtonProps: ComponentProps = { buttonType: 'tertiaryLowLight', buttonText: i18n.format(t('shared:exit'), 'capitalize'), onClick: confirmExit, diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/LanguageSetting.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/LanguageSetting.tsx index a935a5571ad..49f58e26993 100644 --- a/app/src/organisms/ODD/RobotSettingsDashboard/LanguageSetting.tsx +++ b/app/src/organisms/ODD/RobotSettingsDashboard/LanguageSetting.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { Fragment } from 'react' import { useTranslation } from 'react-i18next' import { useDispatch, useSelector } from 'react-redux' import styled from 'styled-components' @@ -17,6 +17,7 @@ import { LANGUAGES } from '/app/i18n' import { ChildNavigation } from '/app/organisms/ODD/ChildNavigation' import { getAppLanguage, updateConfigValue } from '/app/redux/config' +import type { ChangeEvent } from 'react' import type { Dispatch } from '/app/redux/types' import type { SetSettingOption } from './types' @@ -49,7 +50,7 @@ export function LanguageSetting({ const appLanguage = useSelector(getAppLanguage) - const handleChange = (event: React.ChangeEvent): void => { + const handleChange = (event: ChangeEvent): void => { dispatch(updateConfigValue('language.appLanguage', event.target.value)) } @@ -68,7 +69,7 @@ export function LanguageSetting({ padding={`${SPACING.spacing16} ${SPACING.spacing40} ${SPACING.spacing40} ${SPACING.spacing40}`} > {LANGUAGES.map(lng => ( - + - + ))} diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/RobotSettingsJoinOtherNetwork.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/RobotSettingsJoinOtherNetwork.tsx index fed06e4572c..f3645066924 100644 --- a/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/RobotSettingsJoinOtherNetwork.tsx +++ b/app/src/organisms/ODD/RobotSettingsDashboard/NetworkSettings/RobotSettingsJoinOtherNetwork.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState } from 'react' import { useTranslation } from 'react-i18next' import { DIRECTION_COLUMN, Flex } from '@opentrons/components' @@ -6,11 +6,12 @@ import { DIRECTION_COLUMN, Flex } from '@opentrons/components' import { ChildNavigation } from '/app/organisms/ODD/ChildNavigation' import { SetWifiSsid } from '../../NetworkSettings' +import type { Dispatch, SetStateAction } from 'react' import type { SetSettingOption } from '../types' interface RobotSettingsJoinOtherNetworkProps { setCurrentOption: SetSettingOption - setSelectedSsid: React.Dispatch> + setSelectedSsid: Dispatch> } /** @@ -22,8 +23,8 @@ export function RobotSettingsJoinOtherNetwork({ }: RobotSettingsJoinOtherNetworkProps): JSX.Element { const { i18n, t } = useTranslation('device_settings') - const [inputSsid, setInputSsid] = React.useState('') - const [errorMessage, setErrorMessage] = React.useState(null) + const [inputSsid, setInputSsid] = useState('') + const [errorMessage, setErrorMessage] = useState(null) const handleContinue = (): void => { if (inputSsid.length >= 2 && inputSsid.length <= 32) { diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/TouchScreenSleep.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/TouchScreenSleep.tsx index ea3d879088f..cb123b261be 100644 --- a/app/src/organisms/ODD/RobotSettingsDashboard/TouchScreenSleep.tsx +++ b/app/src/organisms/ODD/RobotSettingsDashboard/TouchScreenSleep.tsx @@ -1,12 +1,12 @@ -import * as React from 'react' +import { useEffect, useRef } from 'react' import { useDispatch, useSelector } from 'react-redux' import { useTranslation } from 'react-i18next' import { DIRECTION_COLUMN, Flex, - SPACING, RadioButton, + SPACING, } from '@opentrons/components' import { ChildNavigation } from '/app/organisms/ODD/ChildNavigation' @@ -16,6 +16,7 @@ import { } from '/app/redux/config' import { SLEEP_NEVER_MS } from '/app/local-resources/config' +import type { ChangeEvent } from 'react' import type { Dispatch } from '/app/redux/types' import type { SetSettingOption } from './types' @@ -31,7 +32,7 @@ export function TouchScreenSleep({ const { t } = useTranslation(['device_settings']) const { sleepMs } = useSelector(getOnDeviceDisplaySettings) ?? SLEEP_NEVER_MS const dispatch = useDispatch() - const screenRef = React.useRef(null) + const screenRef = useRef(null) // Note (kj:02/10/2023) value's unit is ms const settingsButtons = [ @@ -44,7 +45,7 @@ export function TouchScreenSleep({ { label: t('one_hour'), value: SLEEP_TIME_MS * 60 }, ] - const handleChange = (event: React.ChangeEvent): void => { + const handleChange = (event: ChangeEvent): void => { dispatch( updateConfigValue( 'onDeviceDisplaySettings.sleepMs', @@ -53,7 +54,7 @@ export function TouchScreenSleep({ ) } - React.useEffect(() => { + useEffect(() => { if (screenRef.current != null) screenRef.current.scrollIntoView() }, []) diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/UpdateChannel.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/UpdateChannel.tsx index c9668e8a079..642aeae4af3 100644 --- a/app/src/organisms/ODD/RobotSettingsDashboard/UpdateChannel.tsx +++ b/app/src/organisms/ODD/RobotSettingsDashboard/UpdateChannel.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { Fragment } from 'react' import { useTranslation } from 'react-i18next' import { useDispatch, useSelector } from 'react-redux' import styled from 'styled-components' @@ -22,6 +22,7 @@ import { updateConfigValue, } from '/app/redux/config' +import type { ChangeEvent } from 'react' import type { Dispatch } from '/app/redux/types' interface LabelProps { @@ -59,7 +60,7 @@ export function UpdateChannel({ ? channelOptions.filter(option => option.value !== 'alpha') : channelOptions - const handleChange = (event: React.ChangeEvent): void => { + const handleChange = (event: ChangeEvent): void => { dispatch(updateConfigValue('update.channel', event.target.value)) } @@ -87,7 +88,7 @@ export function UpdateChannel({ marginTop={SPACING.spacing24} > {modifiedChannelOptions.map(radio => ( - + ) : null} - + ))} diff --git a/app/src/organisms/PipetteWizardFlows/ChoosePipette.tsx b/app/src/organisms/PipetteWizardFlows/ChoosePipette.tsx index f8d31f1adec..1a0b45001c2 100644 --- a/app/src/organisms/PipetteWizardFlows/ChoosePipette.tsx +++ b/app/src/organisms/PipetteWizardFlows/ChoosePipette.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState } from 'react' import { createPortal } from 'react-dom' import { useSelector } from 'react-redux' import { css } from 'styled-components' @@ -46,6 +46,7 @@ import { ExitModal } from './ExitModal' import { FLOWS } from './constants' import { getIsGantryEmpty } from './utils' +import type { Dispatch, SetStateAction, ReactNode } from 'react' import type { StyleProps } from '@opentrons/components' import type { PipetteMount } from '@opentrons/shared-data' import type { SelectablePipettes } from './types' @@ -108,7 +109,7 @@ const SELECTED_OPTIONS_STYLE = css` interface ChoosePipetteProps { proceed: () => void selectedPipette: SelectablePipettes - setSelectedPipette: React.Dispatch> + setSelectedPipette: Dispatch> exit: () => void mount: PipetteMount } @@ -117,10 +118,9 @@ export const ChoosePipette = (props: ChoosePipetteProps): JSX.Element => { const isOnDevice = useSelector(getIsOnDevice) const { t } = useTranslation(['pipette_wizard_flows', 'shared']) const attachedPipettesByMount = useAttachedPipettesFromInstrumentsQuery() - const [ - showExitConfirmation, - setShowExitConfirmation, - ] = React.useState(false) + const [showExitConfirmation, setShowExitConfirmation] = useState( + false + ) const bothMounts = getIsGantryEmpty(attachedPipettesByMount) ? t('ninety_six_channel', { @@ -281,7 +281,7 @@ export const ChoosePipette = (props: ChoosePipetteProps): JSX.Element => { interface PipetteMountOptionProps extends StyleProps { isSelected: boolean onClick: () => void - children: React.ReactNode + children: ReactNode } function PipetteMountOption(props: PipetteMountOptionProps): JSX.Element { const { isSelected, onClick, children, ...styleProps } = props diff --git a/app/src/organisms/PipetteWizardFlows/DetachPipette.tsx b/app/src/organisms/PipetteWizardFlows/DetachPipette.tsx index 46e5f92e389..9d83f3d3e75 100644 --- a/app/src/organisms/PipetteWizardFlows/DetachPipette.tsx +++ b/app/src/organisms/PipetteWizardFlows/DetachPipette.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState, useMemo } from 'react' import { useTranslation } from 'react-i18next' import { css } from 'styled-components' import { RIGHT, WEIGHT_OF_96_CHANNEL } from '@opentrons/shared-data' @@ -27,12 +27,14 @@ import { Skeleton } from '/app/atoms/Skeleton' import { SmallButton } from '/app/atoms/buttons' import { BODY_STYLE, SECTIONS } from './constants' import { getPipetteAnimations, getPipetteAnimations96 } from './utils' -import type { PipetteWizardStepProps } from './types' + +import type { Dispatch, ReactNode, SetStateAction } from 'react' import type { PipetteData } from '@opentrons/api-client' +import type { PipetteWizardStepProps } from './types' interface DetachPipetteProps extends PipetteWizardStepProps { isFetching: boolean - setFetching: React.Dispatch> + setFetching: Dispatch> } const BACKGROUND_SIZE = '47rem' @@ -82,7 +84,7 @@ export const DetachPipette = (props: DetachPipetteProps): JSX.Element => { flowType, section: SECTIONS.DETACH_PIPETTE, } - const memoizedAttachedPipettes = React.useMemo(() => attachedPipettes, []) + const memoizedAttachedPipettes = useMemo(() => attachedPipettes, []) const is96ChannelPipette = memoizedAttachedPipettes[mount]?.instrumentName === 'p1000_96' const pipetteName = @@ -121,10 +123,9 @@ export const DetachPipette = (props: DetachPipetteProps): JSX.Element => { }) } - const [ - showPipetteStillAttached, - setShowPipetteStillAttached, - ] = React.useState(false) + const [showPipetteStillAttached, setShowPipetteStillAttached] = useState( + false + ) const handleOnClick = (): void => { setFetching(true) @@ -142,7 +143,7 @@ export const DetachPipette = (props: DetachPipetteProps): JSX.Element => { } const channel = memoizedAttachedPipettes[mount]?.data.channels - let bodyText: React.ReactNode =
+ let bodyText: ReactNode =
if (isFetching) { bodyText = ( <> diff --git a/app/src/organisms/PipetteWizardFlows/Results.tsx b/app/src/organisms/PipetteWizardFlows/Results.tsx index 96ed9098ac9..4ede1cb6828 100644 --- a/app/src/organisms/PipetteWizardFlows/Results.tsx +++ b/app/src/organisms/PipetteWizardFlows/Results.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState } from 'react' import { css } from 'styled-components' import { useTranslation } from 'react-i18next' import { @@ -22,6 +22,7 @@ import { usePipetteNameSpecs } from '/app/local-resources/instruments' import { CheckPipetteButton } from './CheckPipetteButton' import { FLOWS } from './constants' +import type { Dispatch, SetStateAction } from 'react' import type { LoadedPipette, MotorAxes, @@ -34,7 +35,7 @@ interface ResultsProps extends PipetteWizardStepProps { currentStepIndex: number totalStepCount: number isFetching: boolean - setFetching: React.Dispatch> + setFetching: Dispatch> hasCalData: boolean requiredPipette?: LoadedPipette nextMount?: string @@ -78,7 +79,7 @@ export const Results = (props: ResultsProps): JSX.Element => { usePipetteNameSpecs(requiredPipette?.pipetteName as PipetteName) ?.displayName ?? null - const [numberOfTryAgains, setNumberOfTryAgains] = React.useState(0) + const [numberOfTryAgains, setNumberOfTryAgains] = useState(0) let header: string = 'unknown results screen' let iconColor: string = COLORS.green50 let isSuccess: boolean = true diff --git a/app/src/organisms/TakeoverModal/MaintenanceRunStatusProvider.tsx b/app/src/organisms/TakeoverModal/MaintenanceRunStatusProvider.tsx index 6ba2707752b..293340a9d85 100644 --- a/app/src/organisms/TakeoverModal/MaintenanceRunStatusProvider.tsx +++ b/app/src/organisms/TakeoverModal/MaintenanceRunStatusProvider.tsx @@ -1,7 +1,8 @@ -import * as React from 'react' - +import { useState, useEffect, useMemo, createContext } from 'react' import { useNotifyCurrentMaintenanceRun } from '/app/resources/maintenance_runs' +import type { ReactNode } from 'react' + interface MaintenanceRunIds { currentRunId: string | null oddRunId: string | null @@ -12,19 +13,19 @@ export interface MaintenanceRunStatus { setOddRunIds: (state: MaintenanceRunIds) => void } -export const MaintenanceRunContext = React.createContext({ +export const MaintenanceRunContext = createContext({ getRunIds: () => ({ currentRunId: null, oddRunId: null }), setOddRunIds: () => {}, }) interface MaintenanceRunProviderProps { - children?: React.ReactNode + children?: ReactNode } export function MaintenanceRunStatusProvider( props: MaintenanceRunProviderProps ): JSX.Element { - const [oddRunIds, setOddRunIds] = React.useState({ + const [oddRunIds, setOddRunIds] = useState({ currentRunId: null, oddRunId: null, }) @@ -33,14 +34,14 @@ export function MaintenanceRunStatusProvider( refetchInterval: 5000, }).data?.data.id - React.useEffect(() => { + useEffect(() => { setOddRunIds(prevState => ({ ...prevState, currentRunId: currentRunIdQueryResult ?? null, })) }, [currentRunIdQueryResult]) - const maintenanceRunStatus = React.useMemo( + const maintenanceRunStatus = useMemo( () => ({ getRunIds: () => oddRunIds, setOddRunIds, diff --git a/app/src/organisms/TakeoverModal/MaintenanceRunTakeover.tsx b/app/src/organisms/TakeoverModal/MaintenanceRunTakeover.tsx index b4cef390203..bb2b380cef1 100644 --- a/app/src/organisms/TakeoverModal/MaintenanceRunTakeover.tsx +++ b/app/src/organisms/TakeoverModal/MaintenanceRunTakeover.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState, useEffect } from 'react' import { useTranslation } from 'react-i18next' import { useDeleteMaintenanceRunMutation } from '@opentrons/react-api-client' @@ -7,8 +7,10 @@ import { TakeoverModal } from './TakeoverModal' import { MaintenanceRunStatusProvider } from './MaintenanceRunStatusProvider' import { useMaintenanceRunTakeover } from './useMaintenanceRunTakeover' +import type { ReactNode } from 'react' + interface MaintenanceRunTakeoverProps { - children: React.ReactNode + children: ReactNode } export function MaintenanceRunTakeover({ @@ -22,18 +24,18 @@ export function MaintenanceRunTakeover({ } interface MaintenanceRunTakeoverModalProps { - children: React.ReactNode + children: ReactNode } export function MaintenanceRunTakeoverModal( props: MaintenanceRunTakeoverModalProps ): JSX.Element { const { i18n, t } = useTranslation(['shared', 'branded']) - const [isLoading, setIsLoading] = React.useState(false) + const [isLoading, setIsLoading] = useState(false) const [ showConfirmTerminateModal, setShowConfirmTerminateModal, - ] = React.useState(false) + ] = useState(false) const { oddRunId, currentRunId } = useMaintenanceRunTakeover().getRunIds() const isMaintenanceRunCurrent = currentRunId != null @@ -50,7 +52,7 @@ export function MaintenanceRunTakeoverModal( } } - React.useEffect(() => { + useEffect(() => { if (currentRunId == null) { setIsLoading(false) setShowConfirmTerminateModal(false) diff --git a/app/src/organisms/ToasterOven/ToasterOven.tsx b/app/src/organisms/ToasterOven/ToasterOven.tsx index 4f29be519ae..c3130793750 100644 --- a/app/src/organisms/ToasterOven/ToasterOven.tsx +++ b/app/src/organisms/ToasterOven/ToasterOven.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState } from 'react' import { useSelector } from 'react-redux' import { v4 as uuidv4 } from 'uuid' @@ -17,6 +17,7 @@ import { import { getIsOnDevice } from '/app/redux/config' import { ToasterContext } from './ToasterContext' +import type { ReactNode } from 'react' import type { SnackbarProps } from '@opentrons/components' import type { ToastProps, @@ -25,7 +26,7 @@ import type { import type { MakeSnackbarOptions, MakeToastOptions } from './ToasterContext' interface ToasterOvenProps { - children: React.ReactNode + children: ReactNode } /** @@ -34,8 +35,8 @@ interface ToasterOvenProps { * @returns */ export function ToasterOven({ children }: ToasterOvenProps): JSX.Element { - const [toasts, setToasts] = React.useState([]) - const [snackbar, setSnackbar] = React.useState(null) + const [toasts, setToasts] = useState([]) + const [snackbar, setSnackbar] = useState(null) const isOnDevice = useSelector(getIsOnDevice) ?? null const displayType: 'desktop' | 'odd' = diff --git a/app/src/organisms/WellSelection/Selection384Wells.tsx b/app/src/organisms/WellSelection/Selection384Wells.tsx index d0fcddef752..94e2eaf9e74 100644 --- a/app/src/organisms/WellSelection/Selection384Wells.tsx +++ b/app/src/organisms/WellSelection/Selection384Wells.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState, useEffect } from 'react' import { useTranslation } from 'react-i18next' import flatten from 'lodash/flatten' @@ -15,6 +15,7 @@ import { import { IconButton } from '/app/atoms/buttons/IconButton' +import type { Dispatch, SetStateAction, ReactNode } from 'react' import type { WellGroup } from '@opentrons/components' import type { LabwareDefinition2, @@ -26,7 +27,7 @@ interface Selection384WellsProps { channels: PipetteChannels definition: LabwareDefinition2 deselectWells: (wells: string[]) => void - labwareRender: React.ReactNode + labwareRender: ReactNode selectWells: (wellGroup: WellGroup) => unknown } @@ -43,18 +44,18 @@ export function Selection384Wells({ labwareRender, selectWells, }: Selection384WellsProps): JSX.Element { - const [selectBy, setSelectBy] = React.useState<'columns' | 'wells'>('columns') + const [selectBy, setSelectBy] = useState<'columns' | 'wells'>('columns') - const [lastSelectedIndex, setLastSelectedIndex] = React.useState< - number | null - >(null) + const [lastSelectedIndex, setLastSelectedIndex] = useState( + null + ) - const [startingWellState, setStartingWellState] = React.useState< + const [startingWellState, setStartingWellState] = useState< Record >({ A1: false, A2: false, B1: false, B2: false }) // to reset last selected index and starting well state on page-level selected well reset - React.useEffect(() => { + useEffect(() => { if (Object.keys(allSelectedWells).length === 0) { setLastSelectedIndex(null) if (channels === 96) { @@ -180,8 +181,8 @@ export function Selection384Wells({ interface SelectByProps { selectBy: 'columns' | 'wells' - setSelectBy: React.Dispatch> - setLastSelectedIndex: React.Dispatch> + setSelectBy: Dispatch> + setLastSelectedIndex: Dispatch> } function SelectBy({ @@ -244,8 +245,8 @@ function StartingWell({ deselectWells: (wells: string[]) => void selectWells: (wellGroup: WellGroup) => void startingWellState: Record - setStartingWellState: React.Dispatch< - React.SetStateAction> + setStartingWellState: Dispatch< + SetStateAction> > wells: string[] }): JSX.Element { @@ -255,7 +256,7 @@ function StartingWell({ channels === 8 ? ['A1', 'B1'] : ['A1', 'A2', 'B1', 'B2'] // on mount, select A1 well group for 96-channel - React.useEffect(() => { + useEffect(() => { // deselect all wells on mount; clears well selection when navigating back within quick transfer flow // otherwise, selected wells and lastSelectedIndex pointer will be out of sync deselectWells(wells) diff --git a/app/src/organisms/WellSelection/SelectionRect.tsx b/app/src/organisms/WellSelection/SelectionRect.tsx index 7c9d1ac0357..6d241d5f0c0 100644 --- a/app/src/organisms/WellSelection/SelectionRect.tsx +++ b/app/src/organisms/WellSelection/SelectionRect.tsx @@ -1,19 +1,20 @@ -import * as React from 'react' +import { useState, useRef, useCallback, useEffect } from 'react' import { Flex, JUSTIFY_CENTER } from '@opentrons/components' +import type { MouseEventHandler, ReactNode, TouchEventHandler } from 'react' import type { DragRect, GenericRect } from './types' interface SelectionRectProps { onSelectionMove?: (rect: GenericRect) => void onSelectionDone?: (rect: GenericRect) => void - children?: React.ReactNode + children?: ReactNode } export function SelectionRect(props: SelectionRectProps): JSX.Element { const { onSelectionMove, onSelectionDone, children } = props - const [positions, setPositions] = React.useState(null) - const parentRef = React.useRef(null) + const [positions, setPositions] = useState(null) + const parentRef = useRef(null) const getRect = (args: DragRect): GenericRect => { const { xStart, yStart, xDynamic, yDynamic } = args @@ -25,7 +26,7 @@ export function SelectionRect(props: SelectionRectProps): JSX.Element { } } - const handleDrag = React.useCallback( + const handleDrag = useCallback( (e: TouchEvent | MouseEvent): void => { let xDynamic: number let yDynamic: number @@ -55,7 +56,7 @@ export function SelectionRect(props: SelectionRectProps): JSX.Element { [onSelectionMove] ) - const handleDragEnd = React.useCallback( + const handleDragEnd = useCallback( (e: TouchEvent | MouseEvent): void => { if (!(e instanceof TouchEvent) && !(e instanceof MouseEvent)) { return @@ -70,7 +71,7 @@ export function SelectionRect(props: SelectionRectProps): JSX.Element { [onSelectionDone, positions] ) - const handleTouchStart: React.TouchEventHandler = e => { + const handleTouchStart: TouchEventHandler = e => { const touch = e.touches[0] setPositions({ xStart: touch.clientX, @@ -80,7 +81,7 @@ export function SelectionRect(props: SelectionRectProps): JSX.Element { }) } - const handleMouseDown: React.MouseEventHandler = e => { + const handleMouseDown: MouseEventHandler = e => { setPositions({ xStart: e.clientX, xDynamic: e.clientX, @@ -89,7 +90,7 @@ export function SelectionRect(props: SelectionRectProps): JSX.Element { }) } - React.useEffect(() => { + useEffect(() => { document.addEventListener('touchmove', handleDrag) document.addEventListener('touchend', handleDragEnd) document.addEventListener('mousemove', handleDrag) diff --git a/app/src/pages/ODD/ConnectViaWifi/JoinOtherNetwork.tsx b/app/src/pages/ODD/ConnectViaWifi/JoinOtherNetwork.tsx index 4abd146238a..3366f9180b0 100644 --- a/app/src/pages/ODD/ConnectViaWifi/JoinOtherNetwork.tsx +++ b/app/src/pages/ODD/ConnectViaWifi/JoinOtherNetwork.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState } from 'react' import { useTranslation } from 'react-i18next' import { Flex, DIRECTION_COLUMN } from '@opentrons/components' @@ -6,11 +6,12 @@ import { Flex, DIRECTION_COLUMN } from '@opentrons/components' import { SetWifiSsid } from '/app/organisms/ODD/NetworkSettings' import { RobotSetupHeader } from '/app/organisms/ODD/RobotSetupHeader' +import type { Dispatch, SetStateAction } from 'react' import type { WifiScreenOption } from './' interface JoinOtherNetworkProps { setCurrentOption: (option: WifiScreenOption) => void - setSelectedSsid: React.Dispatch> + setSelectedSsid: Dispatch> } export function JoinOtherNetwork({ @@ -19,8 +20,8 @@ export function JoinOtherNetwork({ }: JoinOtherNetworkProps): JSX.Element { const { i18n, t } = useTranslation('device_settings') - const [inputSsid, setInputSsid] = React.useState('') - const [errorMessage, setErrorMessage] = React.useState(null) + const [inputSsid, setInputSsid] = useState('') + const [errorMessage, setErrorMessage] = useState(null) const handleContinue = (): void => { if (inputSsid.length >= 2 && inputSsid.length <= 32) { diff --git a/app/src/pages/ODD/DeckConfiguration/index.tsx b/app/src/pages/ODD/DeckConfiguration/index.tsx index 2de5de02c46..71b8b5905bc 100644 --- a/app/src/pages/ODD/DeckConfiguration/index.tsx +++ b/app/src/pages/ODD/DeckConfiguration/index.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState } from 'react' import { createPortal } from 'react-dom' import { useTranslation } from 'react-i18next' import { useNavigate } from 'react-router-dom' @@ -20,6 +20,7 @@ import { useNotifyDeckConfigurationQuery, } from '/app/resources/deck_configuration' +import type { ComponentProps } from 'react' import type { SmallButton } from '/app/atoms/buttons' export function DeckConfigurationEditor(): JSX.Element { @@ -32,7 +33,7 @@ export function DeckConfigurationEditor(): JSX.Element { const [ showSetupInstructionsModal, setShowSetupInstructionsModal, - ] = React.useState(false) + ] = useState(false) const isOnDevice = true const { @@ -41,10 +42,9 @@ export function DeckConfigurationEditor(): JSX.Element { addFixtureModal, } = useDeckConfigurationEditingTools(isOnDevice) - const [ - showDiscardChangeModal, - setShowDiscardChangeModal, - ] = React.useState(false) + const [showDiscardChangeModal, setShowDiscardChangeModal] = useState( + false + ) const deckConfig = useNotifyDeckConfigurationQuery().data ?? [] @@ -52,7 +52,7 @@ export function DeckConfigurationEditor(): JSX.Element { navigate(-1) } - const secondaryButtonProps: React.ComponentProps = { + const secondaryButtonProps: ComponentProps = { onClick: () => { setShowSetupInstructionsModal(true) }, diff --git a/app/src/pages/ODD/InstrumentDetail/InstrumentDetailOverflowMenu.tsx b/app/src/pages/ODD/InstrumentDetail/InstrumentDetailOverflowMenu.tsx index 96ea37d14d3..c49ef3d4f34 100644 --- a/app/src/pages/ODD/InstrumentDetail/InstrumentDetailOverflowMenu.tsx +++ b/app/src/pages/ODD/InstrumentDetail/InstrumentDetailOverflowMenu.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState } from 'react' import NiceModal, { useModal } from '@ebay/nice-modal-react' import { useTranslation } from 'react-i18next' import { createPortal } from 'react-dom' @@ -26,6 +26,7 @@ import { FLOWS } from '/app/organisms/PipetteWizardFlows/constants' import { GRIPPER_FLOW_TYPES } from '/app/organisms/GripperWizardFlows/constants' import { getTopPortalEl } from '/app/App/portal' +import type { ComponentProps, MouseEventHandler } from 'react' import type { PipetteData, GripperData, @@ -55,13 +56,13 @@ const InstrumentDetailsOverflowMenu = NiceModal.create( const { instrument, host, enableDTWiz } = props const { t } = useTranslation('robot_controls') const modal = useModal() - const [wizardProps, setWizardProps] = React.useState< - | React.ComponentProps - | React.ComponentProps + const [wizardProps, setWizardProps] = useState< + | ComponentProps + | ComponentProps | null >(null) const sharedGripperWizardProps: Pick< - React.ComponentProps, + ComponentProps, 'attachedGripper' | 'closeFlow' > = { attachedGripper: instrument, @@ -75,7 +76,7 @@ const InstrumentDetailsOverflowMenu = NiceModal.create( instrument.mount !== 'extension' && instrument.data?.channels === 96 - const handleRecalibrate: React.MouseEventHandler = () => { + const handleRecalibrate: MouseEventHandler = () => { if (instrument?.ok) { setWizardProps( instrument.mount === 'extension' diff --git a/app/src/pages/ODD/ProtocolDashboard/PinnedProtocol.tsx b/app/src/pages/ODD/ProtocolDashboard/PinnedProtocol.tsx index 2620bd6de52..27db6210d68 100644 --- a/app/src/pages/ODD/ProtocolDashboard/PinnedProtocol.tsx +++ b/app/src/pages/ODD/ProtocolDashboard/PinnedProtocol.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useEffect } from 'react' import { useTranslation } from 'react-i18next' import { useNavigate } from 'react-router-dom' import styled, { css } from 'styled-components' @@ -23,6 +23,7 @@ import { LongPressModal } from './LongPressModal' import { formatTimeWithUtcLabel } from '/app/resources/runs' import { useUpdatedLastRunTime } from './hooks' +import type { Dispatch, SetStateAction } from 'react' import type { UseLongPressResult } from '@opentrons/components' import type { ProtocolResource } from '@opentrons/shared-data' @@ -63,7 +64,7 @@ const cardStyleBySize: { interface PinnedProtocolProps { protocol: ProtocolResource - longPress: React.Dispatch> + longPress: Dispatch> setShowDeleteConfirmationModal: (showDeleteConfirmationModal: boolean) => void setTargetProtocolId: (targetProtocolId: string) => void cardSize?: CardSizeType @@ -98,7 +99,7 @@ export function PinnedProtocol(props: PinnedProtocolProps): JSX.Element { navigate(`/protocols/${protocolId}`) } } - React.useEffect(() => { + useEffect(() => { if (longpress.isLongPressed) { longPress(true) } diff --git a/app/src/pages/ODD/ProtocolSetup/index.tsx b/app/src/pages/ODD/ProtocolSetup/index.tsx index 03a03626a55..553eec5aadd 100644 --- a/app/src/pages/ODD/ProtocolSetup/index.tsx +++ b/app/src/pages/ODD/ProtocolSetup/index.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useEffect, useState } from 'react' import last from 'lodash/last' import { useSelector } from 'react-redux' import { useTranslation } from 'react-i18next' @@ -82,7 +82,14 @@ import { useProtocolAnalysisErrors, } from '/app/resources/runs' import { useScrollPosition } from '/app/local-resources/dom-utils' +import { + getLabwareSetupItemGroups, + getProtocolUsesGripper, + useRequiredProtocolHardwareFromAnalysis, + useMissingProtocolHardwareFromAnalysis, +} from '/app/transformations/commands' +import type { Dispatch, SetStateAction } from 'react' import type { Run } from '@opentrons/api-client' import type { CutoutFixtureId, CutoutId } from '@opentrons/shared-data' import type { OnDeviceRouteParams } from '/app/App/types' @@ -92,19 +99,13 @@ import type { ProtocolHardware, ProtocolFixture, } from '/app/transformations/commands' -import { - getLabwareSetupItemGroups, - getProtocolUsesGripper, - useRequiredProtocolHardwareFromAnalysis, - useMissingProtocolHardwareFromAnalysis, -} from '/app/transformations/commands' const FETCH_DURATION_MS = 5000 const ANALYSIS_POLL_MS = 5000 interface PrepareToRunProps { runId: string - setSetupScreen: React.Dispatch> + setSetupScreen: Dispatch> confirmAttachment: () => void confirmStepsComplete: () => void play: () => void @@ -147,7 +148,7 @@ function PrepareToRun({ const [ isPollingForCompletedAnalysis, setIsPollingForCompletedAnalysis, - ] = React.useState(mostRecentAnalysisSummary?.status !== 'completed') + ] = useState(mostRecentAnalysisSummary?.status !== 'completed') const { data: mostRecentAnalysis = null, @@ -165,7 +166,7 @@ function PrepareToRun({ navigate('/protocols') } - React.useEffect(() => { + useEffect(() => { if (mostRecentAnalysis?.status === 'completed') { setIsPollingForCompletedAnalysis(false) } else { @@ -229,10 +230,9 @@ function PrepareToRun({ parameter.type === 'csv_file' || parameter.value !== parameter.default ) - const [ - showConfirmCancelModal, - setShowConfirmCancelModal, - ] = React.useState(false) + const [showConfirmCancelModal, setShowConfirmCancelModal] = useState( + false + ) const deckConfigCompatibility = useDeckConfigurationCompatibility( robotType, @@ -670,7 +670,7 @@ export function ProtocolSetup(): JSX.Element { const [ showAnalysisFailedModal, setShowAnalysisFailedModal, - ] = React.useState(true) + ] = useState(true) const robotType = useRobotType(robotName) const attachedModules = useAttachedModules({ @@ -684,7 +684,7 @@ export function ProtocolSetup(): JSX.Element { const [ isPollingForCompletedAnalysis, setIsPollingForCompletedAnalysis, - ] = React.useState(mostRecentAnalysisSummary?.status !== 'completed') + ] = useState(mostRecentAnalysisSummary?.status !== 'completed') const { data: mostRecentAnalysis = null, @@ -699,7 +699,7 @@ export function ProtocolSetup(): JSX.Element { const areLiquidsInProtocol = (mostRecentAnalysis?.liquids?.length ?? 0) > 0 - React.useEffect(() => { + useEffect(() => { if (mostRecentAnalysis?.status === 'completed') { setIsPollingForCompletedAnalysis(false) } else { @@ -754,14 +754,14 @@ export function ProtocolSetup(): JSX.Element { handleProceedToRunClick, !configBypassHeaterShakerAttachmentConfirmation ) - const [cutoutId, setCutoutId] = React.useState(null) - const [providedFixtureOptions, setProvidedFixtureOptions] = React.useState< + const [cutoutId, setCutoutId] = useState(null) + const [providedFixtureOptions, setProvidedFixtureOptions] = useState< CutoutFixtureId[] >([]) // TODO(jh 10-31-24): Refactor the below to utilize useMissingStepsModal. - const [labwareConfirmed, setLabwareConfirmed] = React.useState(false) - const [liquidsConfirmed, setLiquidsConfirmed] = React.useState(false) - const [offsetsConfirmed, setOffsetsConfirmed] = React.useState(false) + const [labwareConfirmed, setLabwareConfirmed] = useState(false) + const [liquidsConfirmed, setLiquidsConfirmed] = useState(false) + const [offsetsConfirmed, setOffsetsConfirmed] = useState(false) const missingSteps = [ !offsetsConfirmed ? t('applied_labware_offsets') : null, !labwareConfirmed ? t('labware_placement') : null, @@ -779,9 +779,7 @@ export function ProtocolSetup(): JSX.Element { const isHeaterShakerInProtocol = useIsHeaterShakerInProtocol() // orchestrate setup subpages/components - const [setupScreen, setSetupScreen] = React.useState( - 'prepare to run' - ) + const [setupScreen, setSetupScreen] = useState('prepare to run') const setupComponentByScreen = { 'prepare to run': ( > + longPress: Dispatch> setShowDeleteConfirmationModal: (showDeleteConfirmationModal: boolean) => void setTargetTransferId: (targetProtocolId: string) => void cardSize?: CardSizeType @@ -83,7 +84,7 @@ export function PinnedTransfer(props: { navigate(`/quick-transfer/${transferId}`) } } - React.useEffect(() => { + useEffect(() => { if (longpress.isLongPressed) { longPress(true) } diff --git a/app/src/pages/ODD/QuickTransferDashboard/QuickTransferCard.tsx b/app/src/pages/ODD/QuickTransferDashboard/QuickTransferCard.tsx index a0f99a4367e..fe4a939d543 100644 --- a/app/src/pages/ODD/QuickTransferDashboard/QuickTransferCard.tsx +++ b/app/src/pages/ODD/QuickTransferDashboard/QuickTransferCard.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useEffect, useState } from 'react' import { useNavigate } from 'react-router-dom' import { Trans, useTranslation } from 'react-i18next' import { useQueryClient } from 'react-query' @@ -36,6 +36,7 @@ import { OddModal } from '/app/molecules/OddModal' import { LongPressModal } from './LongPressModal' import { formatTimeWithUtcLabel } from '/app/resources/runs' +import type { Dispatch, SetStateAction } from 'react' import type { UseLongPressResult } from '@opentrons/components' import type { ProtocolResource } from '@opentrons/shared-data' import type { OddModalHeaderBaseProps } from '/app/molecules/OddModal/types' @@ -44,7 +45,7 @@ const REFETCH_INTERVAL = 5000 export function QuickTransferCard(props: { quickTransfer: ProtocolResource - longPress: React.Dispatch> + longPress: Dispatch> setShowDeleteConfirmationModal: (showDeleteConfirmationModal: boolean) => void setTargetTransferId: (targetTransferId: string) => void }): JSX.Element { @@ -55,11 +56,11 @@ export function QuickTransferCard(props: { setTargetTransferId, } = props const navigate = useNavigate() - const [showIcon, setShowIcon] = React.useState(false) + const [showIcon, setShowIcon] = useState(false) const [ showFailedAnalysisModal, setShowFailedAnalysisModal, - ] = React.useState(false) + ] = useState(false) const { t, i18n } = useTranslation(['quick_transfer', 'branded']) const transferName = quickTransfer.metadata.protocolName ?? quickTransfer.files[0].name @@ -113,7 +114,7 @@ export function QuickTransferCard(props: { } } - React.useEffect(() => { + useEffect(() => { if (longpress.isLongPressed) { longPress(true) setTargetTransferId(quickTransfer.id) diff --git a/app/src/resources/deck_configuration/hooks.tsx b/app/src/resources/deck_configuration/hooks.tsx index 79a2e80124b..935c81a4cb2 100644 --- a/app/src/resources/deck_configuration/hooks.tsx +++ b/app/src/resources/deck_configuration/hooks.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import { useState } from 'react' import { getInitialAndMovedLabwareInSlots } from '@opentrons/components' import { FLEX_ROBOT_TYPE, @@ -15,6 +15,7 @@ import { SINGLE_SLOT_FIXTURES, } from '@opentrons/shared-data' +import type { ReactNode } from 'react' import type { CompletedProtocolAnalysis, CutoutConfigProtocolSpec, @@ -118,7 +119,7 @@ interface DeckConfigurationEditingTools { cutoutId: CutoutId, cutoutFixtureId: CutoutFixtureId ) => void - addFixtureModal: React.ReactNode + addFixtureModal: ReactNode } export function useDeckConfigurationEditingTools( isOnDevice: boolean @@ -129,9 +130,7 @@ export function useDeckConfigurationEditingTools( refetchInterval: DECK_CONFIG_REFETCH_INTERVAL, }).data ?? [] const { updateDeckConfiguration } = useUpdateDeckConfigurationMutation() - const [targetCutoutId, setTargetCutoutId] = React.useState( - null - ) + const [targetCutoutId, setTargetCutoutId] = useState(null) const addFixtureToCutout = (cutoutId: CutoutId): void => { setTargetCutoutId(cutoutId)