message: Functionalize lock button
diff: -import React from 'react';
  +import React, { useState } from 'react';
  import { DimItem } from '../inventory/item-types';
  import { t } from 'app/i18next-t';
  import styles from './LockButton.m.scss';
  import clsx from 'clsx';
  import { lockIcon, unlockedIcon, AppIcon, trackedIcon, unTrackedIcon } from '../shell/icons';
  import { setItemLockState } from 'app/inventory/item-move-service';
  -import reduxStore from '../store/store';
  import { touchItem } from 'app/inventory/actions';
  +import { useDispatch } from 'react-redux';
  interface Props {
  item: DimItem;
  type: 'lock' | 'track';
  }
  -interface State {
  - locking: boolean;
  +export default function LockButton({ type, item }: Props) {
  + const [locking, setLocking] = useState(false);
  + const dispatch = useDispatch();
  +
  + const lockUnlock = async () => {
  + if (locking) {
  + return;
  }
  -export default class LockButton extends React.Component<Props, State> {
  - state: State = { locking: false };
  + setLocking(true);
  - render() {
  - const { type, item } = this.props;
  - const { locking } = this.state;
  + let state = false;
  + if (type === 'lock') {
  + state = !item.locked;
  + } else if (type === 'track') {
  + state = !item.tracked;
  + }
  +
  + try {
  + await setItemLockState(item, state, type);
  + if (type === 'lock') {
  + item.locked = state;
  + } else if (type === 'track') {
  + item.tracked = state;
  + }
  + } finally {
  + setLocking(false);
  + dispatch(touchItem(item.id));
  + }
  + };
  const data = { itemType: item.typeName };
  @@ -45,38 +65,8 @@ export default class LockButton extends React.Component<Props, State> {
  : unTrackedIcon;
  return (
  - <div onClick={this.lockUnlock} title={title}>
  + <div onClick={lockUnlock} title={title}>
  <AppIcon className={clsx({ [styles.inProgress]: locking })} icon={icon} />
  </div>
  );
  }
  -
  - private lockUnlock = async () => {
  - const { item, type } = this.props;
  - const { locking } = this.state;
  - if (locking) {
  - return;
  - }
  -
  - this.setState({ locking: true });
  -
  - let state = false;
  - if (type === 'lock') {
  - state = !item.locked;
  - } else if (type === 'track') {
  - state = !item.tracked;
  - }
  -
  - try {
  - await setItemLockState(item, state, type);
  - if (type === 'lock') {
  - item.locked = state;
  - } else if (type === 'track') {
  - item.tracked = state;
  - }
  - } finally {
  - this.setState({ locking: false });
  - reduxStore.dispatch(touchItem(item.id));
  - }
  - };
  -}
  