Remove "sort-comp" exceptions (#1583)

## Summary:
The only thing this PR does is it removes `sort-comp` ESLint exceptions and fixes the sort order. See: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/sort-comp.md

I didn't do:
- `interactive-graph.tsx` since I didn't want to cause merge conflicts for that team
- Components that will get deleted in [my other PR](#1577)

Author: handeyeco

Reviewers: jeremywiebe

Required Reviewers:

Approved By: jeremywiebe

Checks: ✅ codecov/project, ✅ codecov/patch, ✅ Upload Coverage (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ gerald

Pull Request URL: #1583

.changeset/swift-suits-rest.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": patch
+"@khanacademy/perseus-editor": patch
+---
+
+Remove sort-comp exceptions and reorder components

packages/perseus-editor/src/components/hover-behavior.ts

@@ -1,4 +1,3 @@
-/* eslint-disable react/sort-comp */
 /**
  * Add hover behavior to another component.
  *
@@ -70,6 +69,11 @@ type Props = {
 };
 
 export default class HoverBehavior extends React.Component<Props, State> {
+    // @ts-expect-error - TS2564 - Property 'focusFlag' has no initializer and is not definitely assigned in the constructor.
+    focusFlag: boolean;
+    // @ts-expect-error - TS2564 - Property 'waitingForClick' has no initializer and is not definitely assigned in the constructor.
+    waitingForClick: boolean;
+
     static defaultProps: {
         shouldUpdate: () => boolean;
         startHovered: boolean;
@@ -87,11 +91,6 @@ export default class HoverBehavior extends React.Component<Props, State> {
         };
     }
 
-    // @ts-expect-error - TS2564 - Property 'focusFlag' has no initializer and is not definitely assigned in the constructor.
-    focusFlag: boolean;
-    // @ts-expect-error - TS2564 - Property 'waitingForClick' has no initializer and is not definitely assigned in the constructor.
-    waitingForClick: boolean;
-
     handleClick: (e: React.MouseEvent) => void = (e: React.MouseEvent) => {
         if (!this.props.disabled) {
             if (this.props.shouldUpdate()) {

packages/perseus-editor/src/components/json-editor.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable @babel/no-invalid-this */
 /* eslint-disable react/no-unsafe */
-/* eslint-disable react/sort-comp */
 import createReactClass from "create-react-class";
 import * as React from "react";
 import _ from "underscore";
@@ -25,21 +24,6 @@ const JsonEditor: any = createReactClass({
         }
     },
 
-    render: function () {
-        const classes =
-            "perseus-json-editor " + (this.state.valid ? "valid" : "invalid");
-
-        return (
-            <textarea
-                className={classes}
-                value={this.state.currentValue}
-                onChange={this.handleChange}
-                onKeyDown={this.handleKeyDown}
-                onBlur={this.handleBlur}
-            />
-        );
-    },
-
     handleKeyDown: function (e) {
         // This handler allows the tab character to be entered by pressing
         // tab, instead of jumping to the next (non-existant) field
@@ -116,6 +100,21 @@ const JsonEditor: any = createReactClass({
             });
         }
     },
+
+    render: function () {
+        const classes =
+            "perseus-json-editor " + (this.state.valid ? "valid" : "invalid");
+
+        return (
+            <textarea
+                className={classes}
+                value={this.state.currentValue}
+                onChange={this.handleChange}
+                onKeyDown={this.handleKeyDown}
+                onBlur={this.handleBlur}
+            />
+        );
+    },
 });
 
 export default JsonEditor;

packages/perseus-editor/src/stateful-editor-page.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable react/no-unsafe, react/sort-comp */
+/* eslint-disable react/no-unsafe */
 import createReactClass from "create-react-class";
 import PropTypes from "prop-types";
 import * as React from "react";
@@ -26,11 +26,6 @@ const StatefulEditorPage = createReactClass({
         };
     },
 
-    render: function () {
-        const Component = this.props.componentClass;
-        return <Component {...this.state} />;
-    },
-
     getInitialState: function () {
         return _({}).extend(_.omit(this.props, "componentClass"), {
             onChange: this.handleChange,
@@ -42,10 +37,6 @@ const StatefulEditorPage = createReactClass({
         this._isMounted = true;
     },
 
-    componentWillUnmount: function () {
-        this._isMounted = false;
-    },
-
     // getInitialState isn't called if the react component is re-rendered
     // in-place on the dom, in which case this is called instead, so we
     // need to update the state here.
@@ -63,6 +54,10 @@ const StatefulEditorPage = createReactClass({
         );
     },
 
+    componentWillUnmount: function () {
+        this._isMounted = false;
+    },
+
     getSaveWarnings: function () {
         // eslint-disable-next-line react/no-string-refs
         return this.refs.editor.getSaveWarnings();
@@ -83,6 +78,11 @@ const StatefulEditorPage = createReactClass({
         // eslint-disable-next-line react/no-string-refs
         return this.refs.editor.scorePreview();
     },
+
+    render: function () {
+        const Component = this.props.componentClass;
+        return <Component {...this.state} />;
+    },
 });
 
 export default StatefulEditorPage;