message: Switch Progress to a hooks component
diff: import { t } from 'app/i18next-t';
  -import React from 'react';
  +import React, { useState, useEffect } from 'react';
  import _ from 'lodash';
  import { DestinyAccount } from '../accounts/destiny-account.service';
  import './progress.scss';
  @@ -43,11 +43,6 @@ interface StoreProps {
  type Props = ProvidedProps & StoreProps;
  -interface State {
  - progress?: ProgressProfile;
  - selectedStoreId?: string;
  -}
  -
  function mapStateToProps(state: RootState): StoreProps {
  return {
  isPhonePortrait: state.shell.isPhonePortrait,
  @@ -76,35 +71,28 @@ const goToSection = (e: React.MouseEvent) => {
  }
  };
  -class Progress extends React.Component<Props, State> {
  - state: State = {};
  - private subscriptions = new Subscriptions();
  +function Progress({ account, defs, stores, isPhonePortrait, buckets }: Props) {
  + const [selectedStoreId, setSelectedStoreId] = useState<string | undefined>(undefined);
  + const [progress, setProgress] = useState<ProgressProfile | undefined>(undefined);
  - componentDidMount() {
  - if (!this.props.defs) {
  + useEffect(() => {
  + if (!defs) {
  getDefinitions();
  }
  + }, [defs]);
  - D2StoresService.getStoresStream(this.props.account);
  + useEffect(() => {
  + D2StoresService.getStoresStream(account);
  - this.subscriptions.add(
  + const subscriptions = new Subscriptions();
  + subscriptions.add(
  refresh$.subscribe(reloadProgress),
  refresh$.subscribe(() => queueAction(() => D2StoresService.reloadStores())),
  - getProgressStream(this.props.account).subscribe((progress) => {
  - this.setState({
  - progress
  - });
  - })
  + getProgressStream(account).subscribe(setProgress)
  );
  - }
  -
  - componentWillUnmount() {
  - this.subscriptions.unsubscribe();
  - }
  + return () => subscriptions.unsubscribe();
  + }, [account]);
  - render() {
  - const { defs, stores, isPhonePortrait, buckets } = this.props;
  - const { progress, selectedStoreId } = this.state;
  if (!defs || !progress || !stores.length) {
  return (
  <div className="progress-page dim-page">
  @@ -175,7 +163,7 @@ class Progress extends React.Component<Props, State> {
  vertical={!isPhonePortrait}
  isPhonePortrait={isPhonePortrait}
  selectedStore={selectedStore}
  - onCharacterChanged={this.onCharacterChanged}
  + onCharacterChanged={setSelectedStoreId}
  />
  )}
  {!isPhonePortrait && (
  @@ -250,6 +238,7 @@ class Progress extends React.Component<Props, State> {
  />
  </ErrorBoundary>
  </section>
  + <hr />
  <section id="factions">
  <CollapsibleTitle title={t('Progress.Factions')} sectionId="progress-factions">
  @@ -270,9 +259,4 @@ class Progress extends React.Component<Props, State> {
  );
  }
  - private onCharacterChanged = (storeId: string) => {
  - this.setState({ selectedStoreId: storeId });
  - };
  -}
  -
  export default connect<StoreProps>(mapStateToProps)(Progress);
  