fix more connect fns

protocol-designer/src/components/DeckSetup/LabwareOverlays/EditLabwareOffDeck.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { connect } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 import { css } from 'styled-components'
 import {
@@ -23,7 +23,7 @@ import { NameThisLabware } from './NameThisLabware'
 import styles from './LabwareOverlays.css'
 
 import type { LabwareEntity } from '@opentrons/step-generation'
-import type { BaseState, ThunkDispatch } from '../../../types'
+import type { ThunkDispatch } from '../../../types'
 
 const NAME_LABWARE_OVERLAY_STYLE = css`
   z-index: 1;
@@ -58,30 +58,24 @@ const REGULAR_OVERLAY_STYLE = css`
   }
 `
 
-interface OP {
+interface Props {
   labwareEntity: LabwareEntity
 }
-interface SP {
-  isYetUnnamed: boolean
-}
-interface DP {
-  editLiquids: () => void
-  duplicateLabware: () => void
-  deleteLabware: () => void
-}
-
-type Props = OP & SP & DP
 
-const EditLabwareOffDeckComponent = (props: Props): JSX.Element => {
-  const {
-    labwareEntity,
-    isYetUnnamed,
-    editLiquids,
-    deleteLabware,
-    duplicateLabware,
-  } = props
+export const EditLabwareOffDeck = (props: Props): JSX.Element => {
+  const { labwareEntity } = props
   const { t } = useTranslation('deck')
+  const dispatch: ThunkDispatch<any> = useDispatch()
+  const allSavedLabware = useSelector(labwareIngredSelectors.getSavedLabware)
+  const hasName = allSavedLabware[labwareEntity.id]
   const { isTiprack } = labwareEntity.def.parameters
+
+  const isYetUnnamed = isTiprack && !hasName
+
+  const editLiquids = (): void => {
+    dispatch(openIngredientSelector(labwareEntity.id))
+  }
+
   if (isYetUnnamed && !isTiprack) {
     return (
       <div css={NAME_LABWARE_OVERLAY_STYLE}>
@@ -102,44 +96,27 @@ const EditLabwareOffDeckComponent = (props: Props): JSX.Element => {
         ) : (
           <div className={styles.button_spacer} />
         )}
-        <a className={styles.overlay_button} onClick={duplicateLabware}>
+        <a
+          className={styles.overlay_button}
+          onClick={() => dispatch(duplicateLabware(labwareEntity.id))}
+        >
           <Icon className={styles.overlay_icon} name="content-copy" />
           {t('overlay.edit.duplicate')}
         </a>
-        <a className={styles.overlay_button} onClick={deleteLabware}>
+        <a
+          className={styles.overlay_button}
+          onClick={() => {
+            window.confirm(
+              t('warning.cancelForSure', {
+                adapterName: getLabwareDisplayName(labwareEntity.def),
+              })
+            ) && dispatch(deleteContainer({ labwareId: labwareEntity.id }))
+          }}
+        >
           <Icon className={styles.overlay_icon} name="close" />
           {t('overlay.edit.delete')}
         </a>
       </div>
     )
   }
 }
-
-const mapStateToProps = (state: BaseState, ownProps: OP): SP => {
-  const { id } = ownProps.labwareEntity
-  const hasName = labwareIngredSelectors.getSavedLabware(state)[id]
-  return {
-    isYetUnnamed: !ownProps.labwareEntity.def.parameters.isTiprack && !hasName,
-  }
-}
-
-const mapDispatchToProps = (
-  dispatch: ThunkDispatch<any>,
-  ownProps: OP
-): DP => ({
-  editLiquids: () =>
-    dispatch(openIngredientSelector(ownProps.labwareEntity.id)),
-  duplicateLabware: () => dispatch(duplicateLabware(ownProps.labwareEntity.id)),
-  deleteLabware: () => {
-    window.confirm(
-      `Are you sure you want to permanently delete this ${getLabwareDisplayName(
-        ownProps.labwareEntity.def
-      )}?`
-    ) && dispatch(deleteContainer({ labwareId: ownProps.labwareEntity.id }))
-  },
-})
-
-export const EditLabwareOffDeck = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(EditLabwareOffDeckComponent)

protocol-designer/src/components/DeckSetup/LabwareOverlays/NameThisLabware.tsx

@@ -1,31 +1,32 @@
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { connect } from 'react-redux'
+import { useDispatch } from 'react-redux'
 import cx from 'classnames'
 import { Icon, useOnClickOutside } from '@opentrons/components'
 import { renameLabware } from '../../../labware-ingred/actions'
 import styles from './LabwareOverlays.css'
+
 import type { LabwareEntity } from '@opentrons/step-generation'
 import type { ThunkDispatch } from '../../../types'
 import type { LabwareOnDeck } from '../../../step-forms'
 
-interface OP {
+interface Props {
   labwareOnDeck: LabwareOnDeck | LabwareEntity
-  editLiquids: () => unknown
-}
-
-interface DP {
-  setLabwareName: (name: string | null | undefined) => unknown
+  editLiquids: () => void
 }
 
-type Props = OP & DP
-
-const NameThisLabwareComponent = (props: Props): JSX.Element => {
-  const [inputValue, setInputValue] = React.useState('')
+export const NameThisLabware = (props: Props): JSX.Element => {
+  const { labwareOnDeck } = props
+  const dispatch: ThunkDispatch<any> = useDispatch()
+  const [inputValue, setInputValue] = React.useState<string>('')
   const { t } = useTranslation('deck')
 
+  const setLabwareName = (name: string | null | undefined): void => {
+    dispatch(renameLabware({ labwareId: labwareOnDeck.id, name }))
+  }
+
   const saveNickname = (): void => {
-    props.setLabwareName(inputValue || null)
+    setLabwareName()
   }
   const wrapperRef: React.RefObject<HTMLDivElement> = useOnClickOutside({
     onClickOutside: saveNickname,
@@ -67,16 +68,3 @@ const NameThisLabwareComponent = (props: Props): JSX.Element => {
     </div>
   )
 }
-
-const mapDispatchToProps = (dispatch: ThunkDispatch<any>, ownProps: OP): DP => {
-  const { id } = ownProps.labwareOnDeck
-  return {
-    setLabwareName: (name: string | null | undefined) =>
-      dispatch(renameLabware({ labwareId: id, name })),
-  }
-}
-
-export const NameThisLabware = connect(
-  null,
-  mapDispatchToProps
-)(NameThisLabwareComponent)

protocol-designer/src/components/IngredientsList/LabwareDetailsCard/LabwareDetailsCard.tsx

@@ -1,28 +1,61 @@
 import * as React from 'react'
+import assert from 'assert'
+import { useDispatch, useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 import cx from 'classnames'
+import { getLabwareDisplayName } from '@opentrons/shared-data'
+import { selectors as stepFormSelectors } from '../../../step-forms'
+import { selectors as uiLabwareSelectors } from '../../../ui/labware'
+import { selectors as labwareIngredSelectors } from '../../../labware-ingred/selectors'
+import * as labwareIngredActions from '../../../labware-ingred/actions'
 import { PDTitledList, PDListItem } from '../../lists'
 import { EditableTextField } from '../../EditableTextField'
-import styles from './labwareDetailsCard.css'
+import type { ThunkDispatch } from '../../../types'
 
-export interface Props {
-  labwareDefDisplayName: string
-  nickname: string
-  renameLabware: (name: string) => unknown
-}
+import styles from './labwareDetailsCard.css'
 
-export function LabwareDetailsCard(props: Props): JSX.Element {
+export function LabwareDetailsCard(): JSX.Element {
   const { t } = useTranslation('form')
+  const dispatch: ThunkDispatch<any> = useDispatch()
+  const labwareNicknamesById = useSelector(
+    uiLabwareSelectors.getLabwareNicknamesById
+  )
+  const labwareId = useSelector(labwareIngredSelectors.getSelectedLabwareId)
+  const labwareEntities = useSelector(stepFormSelectors.getLabwareEntities)
+  const labwareDefDisplayName =
+    labwareId != null
+      ? getLabwareDisplayName(labwareEntities[labwareId].def)
+      : null
+
+  assert(
+    labwareId,
+    'Expected labware id to exist in connected labware details card'
+  )
+
+  const renameLabware = (name: string): void => {
+    assert(
+      labwareId,
+      'renameLabware in LabwareDetailsCard expected a labwareId'
+    )
+
+    if (labwareId) {
+      dispatch(
+        labwareIngredActions.renameLabware({
+          labwareId: labwareId,
+          name,
+        })
+      )
+    }
+  }
+
   return (
     <PDTitledList title="labware details" iconName="flask-outline">
       <PDListItem>
         <div className={styles.row}>
           <span className={cx(styles.label, styles.column_1_3)}>
             {t('generic.labware_type')}
           </span>
-          <span className={styles.column_2_3}>
-            {props.labwareDefDisplayName}
-          </span>
+          <span className={styles.column_2_3}>{labwareDefDisplayName}</span>
         </div>
       </PDListItem>
       <PDListItem border>
@@ -31,8 +64,8 @@ export function LabwareDetailsCard(props: Props): JSX.Element {
             {t('generic.nickname')}
           </span>
           <EditableTextField
-            value={props.nickname}
-            saveEdit={props.renameLabware}
+            value={labwareNicknamesById[labwareId] ?? 'Unnamed Labware'}
+            saveEdit={renameLabware}
           />
         </div>
       </PDListItem>