Remove string refs from measurer.tsx, molecule.tsx, and sorter.tsx

.changeset/silly-trains-double.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": patch
+"@khanacademy/perseus-editor": patch
+---
+
+Remove string refs from measurer.tsx, molecule.tsx, and sorter.tsx

packages/perseus/src/widgets/measurer/measurer.tsx

@@ -4,7 +4,6 @@ import {
 } from "@khanacademy/perseus-core";
 import $ from "jquery";
 import * as React from "react";
-import ReactDOM from "react-dom";
 import _ from "underscore";
 
 import SvgImage from "../../components/svg-image";
@@ -64,6 +63,7 @@ class Measurer extends React.Component<Props> implements Widget {
     state = {};
     ruler;
     protractor;
+    graphieDiv = React.createRef<HTMLDivElement>();
 
     componentDidMount() {
         this.setupGraphie();
@@ -92,12 +92,12 @@ class Measurer extends React.Component<Props> implements Widget {
     }
 
     setupGraphie() {
-        // eslint-disable-next-line react/no-string-refs
-        const graphieDiv = ReactDOM.findDOMNode(this.refs.graphieDiv);
-        // @ts-expect-error - TS2769 - No overload matches this call. | TS2339 - Property 'empty' does not exist on type 'JQueryStatic'.
+        const graphieDiv = this.graphieDiv.current;
+        if (!graphieDiv) {
+            return;
+        }
         $(graphieDiv).empty();
-        // @ts-expect-error - Argument of type 'Element | Text | null' is not assignable to parameter of type 'HTMLElement'.
-        const graphie = (this.graphie = GraphUtils.createGraphie(graphieDiv));
+        const graphie = GraphUtils.createGraphie(graphieDiv);
 
         const scale: Coord = [40, 40];
         const range: [Interval, Interval] = [
@@ -179,8 +179,7 @@ class Measurer extends React.Component<Props> implements Widget {
                         />
                     </div>
                 )}
-                {/* eslint-disable-next-line react/no-string-refs */}
-                <div className="graphie" ref="graphieDiv" />
+                <div className="graphie" ref={this.graphieDiv} />
             </div>
         );
     }

packages/perseus/src/widgets/molecule/molecule.tsx

@@ -34,6 +34,8 @@ class Molecule extends React.Component<Props, MoleculeState> {
 
     state: MoleculeState = {parsedSmiles: null, error: null};
 
+    canvasRef = React.createRef<HTMLCanvasElement>();
+
     // TODO(jangmi, CP-3288): Remove usage of `UNSAFE_componentWillMount`
     UNSAFE_componentWillMount() {
         this.stateFromSmiles(this.props.smiles);
@@ -96,12 +98,17 @@ class Molecule extends React.Component<Props, MoleculeState> {
             return;
         }
         const items = layout(this.state.parsedSmiles, this.props.rotationAngle);
-        // eslint-disable-next-line react/no-string-refs
-        const canvas = this.refs.canvas;
+        const canvas = this.canvasRef.current;
+        if (!canvas) {
+            return;
+        }
         const translation = this.setCanvasBounds(canvas, items);
-        // @ts-expect-error - TS2339 - Property 'getContext' does not exist on type 'ReactInstance'.
         const ctx = canvas.getContext("2d");
-        // @ts-expect-error - TS2339 - Property 'width' does not exist on type 'ReactInstance'. | TS2339 - Property 'height' does not exist on type 'ReactInstance'.
+
+        if (!ctx) {
+            return;
+        }
+
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         ctx.save();
         ctx.translate(translation[0], translation[1]);
@@ -116,8 +123,7 @@ class Molecule extends React.Component<Props, MoleculeState> {
             <canvas
                 className="molecule-canvas"
                 id={this.props.widgetId + "-molecule"}
-                // eslint-disable-next-line react/no-string-refs
-                ref="canvas"
+                ref={this.canvasRef}
             >
                 {this.context.strings.molecularDrawing({
                     content: this.props.smiles || "",

packages/perseus/src/widgets/sorter/sorter.tsx

@@ -43,6 +43,8 @@ class Sorter extends React.Component<Props> implements Widget {
         linterContext: linterContextDefault,
     };
 
+    sortableRef = React.createRef<Sortable>();
+
     componentDidMount() {
         this._isMounted = true;
         this.props.dependencies.analytics.onAnalyticsEvent({
@@ -78,10 +80,9 @@ class Sorter extends React.Component<Props> implements Widget {
      * This is to help keep the two in sync for now.
      */
     _getOptionsFromSortable(): string[] {
-        // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error - TS2339 - Property 'getOptions' does not exist on type 'ReactInstance'.
-        const options = this.refs.sortable.getOptions();
-        return options;
+        const options = this.sortableRef.current?.getOptions();
+        // Need to spread the options because it's readonly.
+        return options ? [...options] : [];
     }
 
     getPromptJSON(): SorterPromptJSON {
@@ -92,9 +93,7 @@ class Sorter extends React.Component<Props> implements Widget {
         option,
         index,
     ) => {
-        // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error - TS2339 - Property 'moveOptionToIndex' does not exist on type 'ReactInstance'.
-        this.refs.sortable.moveOptionToIndex(option, index);
+        this.sortableRef.current?.moveOptionToIndex(option, index);
     };
 
     /**
@@ -123,8 +122,7 @@ class Sorter extends React.Component<Props> implements Widget {
                     padding={this.props.padding}
                     onChange={this.handleChange}
                     linterContext={this.props.linterContext}
-                    // eslint-disable-next-line react/no-string-refs
-                    ref="sortable"
+                    ref={this.sortableRef}
                 />
             </div>
         );