Minor imports fixes

src/Index.tsx

@@ -12,7 +12,7 @@ import { lazyLoadStreamDeck, startStreamDeckConnection } from 'app/stream-deck/s
 import { streamDeckEnabled } from 'app/stream-deck/util/local-storage';
 import { infoLog } from 'app/utils/log';
 import { scheduleMemoryMeasurement } from 'app/utils/measure-memory';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import idbReady from 'safari-14-idb-fix';
 import { StorageBroken, storageTest } from './StorageTest';
@@ -42,7 +42,7 @@ scheduleMemoryMeasurement();
 const i18nPromise = initi18n();
 
 (async () => {
-  const root = ReactDOM.createRoot(document.getElementById('app')!);
+  const root = createRoot(document.getElementById('app')!);
 
   // idbReady works around a bug in Safari 14 where IndexedDB doesn't initialize sometimes
   await idbReady();

src/app/App.tsx

@@ -1,7 +1,7 @@
 import { settingSelector } from 'app/dim-api/selectors';
 import { RootState } from 'app/store/types';
 import clsx from 'clsx';
-import React, { Suspense } from 'react';
+import { Suspense, lazy } from 'react';
 import { useSelector } from 'react-redux';
 import { Navigate, Route, Routes, useLocation } from 'react-router';
 import styles from './App.m.scss';
@@ -24,13 +24,11 @@ import Privacy from './shell/Privacy';
 import ScrollToTop from './shell/ScrollToTop';
 import SneakyUpdates from './shell/SneakyUpdates';
 
-const WhatsNew = React.lazy(
-  () => import(/* webpackChunkName: "whatsNew" */ './whats-new/WhatsNew')
-);
-const SettingsPage = React.lazy(
+const WhatsNew = lazy(() => import(/* webpackChunkName: "whatsNew" */ './whats-new/WhatsNew'));
+const SettingsPage = lazy(
   () => import(/* webpackChunkName: "settings" */ './settings/SettingsPage')
 );
-const SearchHistory = React.lazy(
+const SearchHistory = lazy(
   () => import(/* webpackChunkName: "searchHistory" */ './search/SearchHistory')
 );
 

src/app/character-tile/StoreHeading.tsx

@@ -3,7 +3,7 @@ import { isD1Store } from 'app/inventory/stores-helpers';
 import LoadoutPopup from 'app/loadout/loadout-menu/LoadoutPopup';
 import clsx from 'clsx';
 import React, { useCallback, useRef, useState } from 'react';
-import ReactDOM from 'react-dom';
+import { createPortal } from 'react-dom';
 import ClickOutside from '../dim-ui/ClickOutside';
 import { DimStore } from '../inventory/store-types';
 import { AppIcon, kebabIcon } from '../shell/icons';
@@ -86,7 +86,7 @@ export default function StoreHeading({ store, selectedStore, loadoutMenuRef, onT
     );
 
     loadoutMenu = loadoutMenuRef
-      ? ReactDOM.createPortal(menuContents, loadoutMenuRef.current!)
+      ? createPortal(menuContents, loadoutMenuRef.current!)
       : menuContents;
   }
 

src/app/destiny1/loadout-builder/D1LoadoutBuilder.tsx

@@ -14,7 +14,7 @@ import { DestinyClass } from 'bungie-api-ts/destiny2';
 import { ItemCategoryHashes } from 'data/d2/generated-enums';
 import { produce } from 'immer';
 import _ from 'lodash';
-import React from 'react';
+import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import CharacterSelect from '../../dim-ui/CharacterSelect';
 import CollapsibleTitle from '../../dim-ui/CollapsibleTitle';
@@ -121,7 +121,7 @@ const initialState: State = {
   },
 };
 
-class D1LoadoutBuilder extends React.Component<Props, State> {
+class D1LoadoutBuilder extends Component<Props, State> {
   state: State = initialState;
 
   private cancelToken: { cancelled: boolean } = {

src/app/dim-ui/BungieImage.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React from 'react';
+import React, { memo } from 'react';
 
 /**
  * A relative path to a Bungie.net image asset.
@@ -13,7 +13,7 @@ export type BungieImageProps = Omit<React.ImgHTMLAttributes<HTMLImageElement>, '
 /**
  * An image tag that links its src to bungie.net. Other props pass through to the underlying image.
  */
-export default React.memo(function BungieImage(props: BungieImageProps) {
+export default memo(function BungieImage(props: BungieImageProps) {
   const { src, ...otherProps } = props;
   return (
     <img

src/app/dim-ui/ClickOutside.tsx

@@ -1,8 +1,15 @@
 import { useEventBusListener } from 'app/utils/hooks';
 import { EventBus } from 'app/utils/observable';
-import React, { useCallback, useContext, useEffect, useRef } from 'react';
+import React, {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+} from 'react';
 
-export const ClickOutsideContext = React.createContext(new EventBus<React.MouseEvent>());
+export const ClickOutsideContext = createContext(new EventBus<React.MouseEvent>());
 
 type Props = React.HTMLAttributes<HTMLDivElement> & {
   children: React.ReactNode;
@@ -18,7 +25,7 @@ type Props = React.HTMLAttributes<HTMLDivElement> & {
  * React DOM hierarchy rather than the real one. This is important for things like sheets
  * spawned through portals from the item popup.
  */
-export default React.forwardRef<HTMLDivElement, Props>(function ClickOutside(
+export default forwardRef<HTMLDivElement, Props>(function ClickOutside(
   { onClickOutside, children, extraRef, onClick, ...other },
   ref
 ) {

src/app/dim-ui/ConfirmButton.tsx

@@ -1,6 +1,6 @@
 import { t } from 'app/i18next-t';
 import clsx from 'clsx';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import styles from './ConfirmButton.m.scss';
 
 /**
@@ -30,8 +30,8 @@ export function ConfirmButton({
   const [contentHeight, setContentHeight] = useState(0);
   const [containerHeight, setContainerHeight] = useState(0);
 
-  const containerRef = React.useRef<HTMLButtonElement>(null);
-  const childrenRef = React.useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLButtonElement>(null);
+  const childrenRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     setContentHeight(childrenRef.current?.offsetHeight || 0);

src/app/dim-ui/CustomStatTotal.tsx

@@ -4,7 +4,7 @@ import { armorStats } from 'app/search/d2-known-values';
 import { useSetting } from 'app/settings/hooks';
 import { DestinyClass, DestinyStatDefinition } from 'bungie-api-ts/destiny2';
 import clsx from 'clsx';
-import React, { ReactElement, ReactNode } from 'react';
+import React, { ReactElement, ReactNode, cloneElement } from 'react';
 import styles from './CustomStatTotal.m.scss';
 
 export type StatHashListsKeyedByDestinyClass = Record<number, number[]>;
@@ -111,6 +111,6 @@ function toggleArrayElement<T>(element: T, arr: T[]) {
 /** places a divider between each element of arr */
 function addDividers<T extends React.ReactNode>(arr: T[], divider: ReactElement): ReactNode[] {
   return arr
-    .flatMap((e, index) => [e, React.cloneElement(divider, { key: `divider-${index}` })])
+    .flatMap((e, index) => [e, cloneElement(divider, { key: `divider-${index}` })])
     .slice(0, -1);
 }

src/app/dim-ui/CustomStatWeights.tsx

@@ -4,7 +4,7 @@ import BungieImage from 'app/dim-ui/BungieImage';
 import { useD2Definitions } from 'app/manifest/selectors';
 import { armorStats } from 'app/search/d2-known-values';
 import clsx from 'clsx';
-import React, { ReactElement, ReactNode } from 'react';
+import React, { ReactElement, ReactNode, cloneElement } from 'react';
 import { useSelector } from 'react-redux';
 import styles from './CustomStatWeights.m.scss';
 
@@ -70,8 +70,5 @@ export function CustomStatWeightsDisplay({
 
 /** places a divider between each element of arr */
 function addDividers<T extends React.ReactNode>(arr: T[], divider: ReactElement): ReactNode[] {
-  return arr.flatMap((e, i) => [
-    i ? React.cloneElement(divider, { key: `divider-${i}` }) : null,
-    e,
-  ]);
+  return arr.flatMap((e, i) => [i ? cloneElement(divider, { key: `divider-${i}` }) : null, e]);
 }

src/app/dim-ui/ErrorBoundary.tsx

@@ -1,6 +1,6 @@
 import ErrorPanel from 'app/shell/ErrorPanel';
 import { errorLog } from 'app/utils/log';
-import React from 'react';
+import React, { Component } from 'react';
 import { reportException } from '../utils/exceptions';
 
 interface Props {
@@ -12,7 +12,7 @@ interface State {
   error?: Error;
 }
 
-export default class ErrorBoundary extends React.Component<Props, State> {
+export default class ErrorBoundary extends Component<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = {};

src/app/dim-ui/PressTip.tsx

@@ -2,17 +2,16 @@ import { Placement } from '@popperjs/core';
 import { tempContainer } from 'app/utils/temp-container';
 import clsx from 'clsx';
 import _ from 'lodash';
-import {
+import React, {
   MutableRefObject,
-  default as React,
   createContext,
   useCallback,
   useContext,
   useEffect,
   useRef,
   useState,
 } from 'react';
-import ReactDOM from 'react-dom';
+import { createPortal } from 'react-dom';
 import styles from './PressTip.m.scss';
 import { usePopper } from './usePopper';
 
@@ -116,7 +115,7 @@ function Control({
     <Component ref={triggerRef} className={clsx(styles.control, className)} {...rest}>
       {children}
       {open &&
-        ReactDOM.createPortal(
+        createPortal(
           <div
             className={clsx(styles.tooltip, customization.className, {
               [styles.wideTooltip]: wide,

src/app/dim-ui/destiny-symbols/SymbolsPicker.tsx

@@ -3,8 +3,16 @@ import { SearchInput } from 'app/search/SearchInput';
 import { tempContainer } from 'app/utils/temp-container';
 import clsx from 'clsx';
 import { FontGlyphs } from 'data/d2/d2-font-glyphs';
-import React, { HTMLProps, useCallback, useContext, useEffect, useRef, useState } from 'react';
-import ReactDOM from 'react-dom';
+import React, {
+  HTMLProps,
+  memo,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { createPortal } from 'react-dom';
 import { useSelector } from 'react-redux';
 import ClickOutside from '../ClickOutside';
 import { PressTipRoot } from '../PressTip';
@@ -42,7 +50,7 @@ export function WithSymbolsPicker<T extends HTMLTextAreaElement | HTMLInputEleme
   );
 }
 
-const SymbolsWindow = React.memo(function ({
+const SymbolsWindow = memo(function ({
   onChooseGlyph,
 }: {
   onChooseGlyph: (unicode: string) => void;
@@ -153,7 +161,7 @@ function SymbolsPickerButton<T extends HTMLTextAreaElement | HTMLInputElement>({
         <span>{symbolsIcon}</span>
       </button>
       {open &&
-        ReactDOM.createPortal(
+        createPortal(
           <div ref={tooltipContents} style={{ zIndex: 20 }}>
             <ClickOutside onClickOutside={() => setOpen(false)}>
               <SymbolsWindow onChooseGlyph={onChooseGlyph} />

src/app/dim-ui/useConfirm.tsx

@@ -1,7 +1,7 @@
 import { isWindows } from 'app/utils/browsers';
 import { t } from 'i18next';
 import { useCallback } from 'react';
-import { Buttons, Title, default as useDialog } from './useDialog';
+import useDialog, { Buttons, Title } from './useDialog';
 
 export interface ConfirmOpts {
   okLabel?: React.ReactNode;

src/app/inventory-page/HeaderShadowDiv.tsx

@@ -1,9 +1,9 @@
 import { useSetCSSVarToHeight } from 'app/utils/hooks';
-import React, { useRef } from 'react';
+import React, { memo, useRef } from 'react';
 import styles from './HeaderShadowDiv.m.scss';
 
 // Also sets `--store-header-height` to the height of `children`
-export default React.memo(({ children, ...divProps }: React.HTMLAttributes<HTMLDivElement>) => {
+export default memo(({ children, ...divProps }: React.HTMLAttributes<HTMLDivElement>) => {
   const ref = useRef<HTMLDivElement>(null);
   useSetCSSVarToHeight(ref, '--store-header-height');
   return (

src/app/inventory/store/d2-item-factory.ts

@@ -1,7 +1,6 @@
 import { CustomStatDef } from '@destinyitemmanager/dim-api-types';
 import { D2Categories } from 'app/destiny2/d2-bucket-categories';
 import { t } from 'app/i18next-t';
-import { isTrialsPassage, isWinsObjective } from 'app/inventory/store/objectives';
 import {
   D2ItemTiers,
   THE_FORBIDDEN_BUCKET,
@@ -53,7 +52,7 @@ import { buildCraftedInfo } from './crafted';
 import { buildDeepsightInfo } from './deepsight';
 import { createItemIndex } from './item-index';
 import { buildMasterwork } from './masterwork';
-import { buildObjectives } from './objectives';
+import { buildObjectives, isTrialsPassage, isWinsObjective } from './objectives';
 import { buildPatternInfo } from './patterns';
 import { buildSockets } from './sockets';
 import { buildStats } from './stats';

src/app/item-actions/ItemActionsDropdown.tsx

@@ -17,7 +17,7 @@ import { useIsPhonePortrait } from 'app/shell/selectors';
 import { useThunkDispatch } from 'app/store/thunk-dispatch';
 import { stripSockets } from 'app/strip-sockets/strip-sockets-actions';
 import _ from 'lodash';
-import React from 'react';
+import { memo } from 'react';
 import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router';
 import { TagCommand, itemTagSelectorList } from '../inventory/dim-item-info';
@@ -40,7 +40,7 @@ import styles from './ItemActionsDropdown.m.scss';
 /**
  * Various actions that can be performed on an item
  */
-export default React.memo(function ItemActionsDropdown({
+export default memo(function ItemActionsDropdown({
   searchActive,
   filteredItems,
   searchQuery,

src/app/item-feed/ItemFeedPage.tsx

@@ -3,10 +3,10 @@ import ShowPageLoading from 'app/dim-ui/ShowPageLoading';
 import { t } from 'app/i18next-t';
 import { useLoadStores } from 'app/inventory/store/hooks';
 import { usePageTitle } from 'app/utils/hooks';
-import React, { Suspense } from 'react';
+import { Suspense, lazy } from 'react';
 import styles from './ItemFeedPage.m.scss';
 
-const ItemFeed = React.lazy(() => import(/* webpackChunkName: "item-feed" */ './ItemFeed'));
+const ItemFeed = lazy(() => import(/* webpackChunkName: "item-feed" */ './ItemFeed'));
 
 /**
  * The Item Feed in a full page for mobile.

src/app/item-feed/ItemFeedSidebar.tsx

@@ -3,10 +3,10 @@ import { t } from 'app/i18next-t';
 import { useSetting } from 'app/settings/hooks';
 import { AppIcon, collapseIcon, faCaretUp } from 'app/shell/icons';
 import clsx from 'clsx';
-import React, { Suspense, useEffect } from 'react';
+import { Suspense, lazy, useEffect } from 'react';
 import styles from './ItemFeedSidebar.m.scss';
 
-const ItemFeed = React.lazy(() => import(/* webpackChunkName: "item-feed" */ './ItemFeed'));
+const ItemFeed = lazy(() => import(/* webpackChunkName: "item-feed" */ './ItemFeed'));
 
 /**
  * The Item Feed in an expandable sidebar to be placed on the inventory screen.

src/app/loadout-builder/filter/TierSelect.tsx

@@ -6,15 +6,15 @@ import { AppIcon, dragHandleIcon } from 'app/shell/icons';
 import { DestinyStatDefinition } from 'bungie-api-ts/destiny2';
 import clsx from 'clsx';
 import _ from 'lodash';
-import React from 'react';
+import React, { memo } from 'react';
 import { ArmorStatHashes, MinMaxIgnored, StatFilters, StatRanges } from '../types';
 import { statTierWithHalf } from '../utils';
 import styles from './TierSelect.m.scss';
 
 const IGNORE = 'ignore';
 const INCLUDE = 'include';
 
-const MinMaxSelect = React.memo(MinMaxSelectInner);
+const MinMaxSelect = memo(MinMaxSelectInner);
 
 /**
  * A selector that allows for choosing minimum and maximum stat ranges, plus reordering the stat priority.

src/app/loadout-drawer/LoadoutDrawerContainer.tsx

@@ -9,17 +9,17 @@ import { useD2Definitions } from 'app/manifest/selectors';
 import { showNotification } from 'app/notifications/notifications';
 import { useEventBusListener } from 'app/utils/hooks';
 import { DestinyClass } from 'bungie-api-ts/destiny2';
-import React, { Suspense, useCallback, useEffect, useState } from 'react';
+import { Suspense, lazy, useCallback, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useLocation, useNavigate } from 'react-router';
 import { addItem$, editLoadout$ } from './loadout-events';
 import { Loadout } from './loadout-types';
 import { convertToLoadoutItem, newLoadout, pickBackingStore } from './loadout-utils';
 
-const LoadoutDrawer = React.lazy(
+const LoadoutDrawer = lazy(
   () => import(/* webpackChunkName: "loadout-drawer" */ './LoadoutDrawer')
 );
-const D1LoadoutDrawer = React.lazy(
+const D1LoadoutDrawer = lazy(
   () =>
     import(
       /* webpackChunkName: "d1-loadout-drawer" */ 'app/destiny1/loadout-drawer/D1LoadoutDrawer'

src/app/organizer/EnabledColumnsSelector.tsx

@@ -1,6 +1,6 @@
 import { t } from 'app/i18next-t';
 import { DestinyClass } from 'bungie-api-ts/destiny2';
-import React from 'react';
+import { memo } from 'react';
 import { getColumnSelectionId } from './Columns';
 import DropDown, { DropDownItem } from './DropDown';
 import { ColumnDefinition } from './table-types';
@@ -15,7 +15,7 @@ import { ColumnDefinition } from './table-types';
  * TODO: Convert to including drag and drop functionality so that columns can be reordered.
  */
 // TODO: Save to settings
-export default React.memo(function EnabledColumnsSelector({
+export default memo(function EnabledColumnsSelector({
   columns,
   enabledColumns,
   forClass,