feat(client): ts-migrate editor component (#42285)

* class component to functional component

* rename Editor to .tsx

* add @types and no-verify changes

* init ts with no-verify

* refactor: files -> challengeFiles

* prop-types built from GraphQL

* Editor: halfway through 💪

* editor: almost done 🚀

* post-meeting changes with errors

* fix: remove chord keybindings

* Revert "refactor: files -> challengeFiles"

* fix tests type, fix editor bug

* fix linting issues

* re-add Loadable

* kebab-case editor

* remove Range import

* format package and prop-types

* update Show and prop-types

* fix: editor background color

Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>

client/package-lock.json

@@ -21661,4 +21661,4 @@
       "integrity": "sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw=="
     }
   }
-}
+}

client/package.json

@@ -160,4 +160,4 @@
     "webpack": "5.40.0",
     "webpack-cli": "4.7.2"
   }
-}
+}

client/src/redux/prop-types.ts

@@ -143,11 +143,30 @@ export type CurrentCertType = {
 };
 
 export type MarkdownRemarkType = {
-  html: string;
+  fields: [{ component: string; nodeIdentity: string; slug: string }];
+  fileAbsolutePath: string;
   frontmatter: {
-    title: string;
     block: string;
+    isBeta: boolean;
     superBlock: string;
+    title: string;
+  };
+  headings: [
+    {
+      depth: number;
+      value: string;
+      id: string;
+    }
+  ];
+  html: string;
+  htmlAst: Record<string, unknown>;
+  id: string;
+  rawMarkdownBody: string;
+  timeToRead: number;
+  wordCount: {
+    paragraphs: number;
+    sentences: number;
+    words: number;
   };
 };
 export type ChallengeNodeType = {
@@ -162,7 +181,7 @@ export type ChallengeNodeType = {
     blockName: string;
     tests: TestType[];
   };
-  files: ChallengeFilesType;
+  files: ChallengeFileType;
   forumTopicId: number;
   guideUrl: string;
   head: string[];
@@ -226,6 +245,8 @@ export type DimensionsType = {
 export type TestType = {
   text: string;
   testString: string;
+  pass?: boolean;
+  err?: string;
 };
 
 export type UserType = {
@@ -283,24 +304,24 @@ export type CompletedChallenge = {
   githubLink?: string;
   challengeType?: number;
   completedDate: number;
-  challengeFiles: ChallengeFileType[];
+  challengeFiles: ChallengeFileType[] | null;
 };
 // TODO: renames: files => challengeFiles; key => fileKey; #42489
-export type ChallengeFileType = {
+export type ChallengeFileType =
-  contents: string;
+  | {
-  editableContents?: string;
+      [T in FileKeyTypes]:
-  editableRegionBoundaries?: number[] | null;
+        | ({
-  error?: string | null;
+            editableContents: string;
-  ext: ExtTypes;
+            editableRegionBoundaries: number[];
-  head?: string[];
+            error?: string | null;
-  history?: string[];
+            history: string[];
-  fileKey: FileKeyTypes;
+            path: string;
-  name: string;
+            seed: string;
-  path: string;
+            seedEditableRegionBoundaries?: number[];
-  seed?: string;
+          } & FileKeyChallengeType)
-  seedEditableRegionBoundaries?: number[];
+        | null;
-  tail?: string;
+    }
-};
+  | Record<string, never>;
 
 export type ExtTypes = 'js' | 'html' | 'css' | 'jsx';
 export type FileKeyTypes = 'indexjs' | 'indexhtml' | 'indexcss';
@@ -335,28 +356,57 @@ export type PortfolioType = {
   description?: string;
 };
 
+export type FileKeyChallengeType = {
+  contents: string;
+  ext: ExtTypes;
+  head: string;
+  id: string;
+  key: FileKeyTypes;
+  name: string;
+  tail: string;
+};
+
 // This looks redundant - same as ChallengeNodeType above?
+// TODO: @moT01 Yes, it is an almost duplicate because @ojeytonwilliams
+// does not allow us to add 'Type' at the end...
+// The below is more accurate, because it was built based on graphql's
+// interpretation of what we have. The props commented out are what we
+// think are on the node, but actually do not exist.
 export type ChallengeNode = {
   block: string;
+  challengeFiles: ChallengeFileType;
   challengeOrder: number;
   challengeType: number;
   dashedName: string;
   description: string;
-  challengeFiles: ChallengeFileType;
   fields: {
     slug: string;
     blockName: string;
+    tests: TestType[];
   };
   forumTopicId: number;
-  guideUrl: string;
+  // guideUrl: string;
-  head: string[];
+  // head: string[];
   helpCategory: string;
+  id: string;
   instructions: string;
-  isComingSoon: boolean;
+  internal?: {
-  removeComments: boolean;
+    content: string;
-  isLocked: boolean;
+    contentDigest: string;
-  isPrivate: boolean;
+    description: string;
+    fieldOwners: string[];
+    ignoreType: boolean | null;
+    mediaType: string;
+    owner: string;
+    type: string;
+  };
   order: number;
+  question: {
+    answers: string[];
+    solution: number;
+    text: string;
+  } | null;
+  removeComments: boolean;
   required: [
     {
       link: string;
@@ -364,11 +414,21 @@ export type ChallengeNode = {
       src: string;
     }
   ];
-  superOrder: number;
+  solutions: {
+    [T in FileKeyTypes]: FileKeyChallengeType;
+  };
+  sourceInstanceName: string;
   superBlock: string;
-  tail: string[];
+  superOrder: number;
+  template: string;
+  tests: TestType[];
   time: string;
   title: string;
   translationPending: boolean;
+  videoId?: string;
   videoUrl?: string;
+  // isComingSoon: boolean;
+  // isLocked: boolean;
+  // isPrivate: boolean;
+  // tail: string[];
 };

client/src/templates/Challenges/classic/MultifileEditor.js

@@ -17,7 +17,7 @@ import {
   updateFile
 } from '../redux';
 import './editor.css';
-import Editor from './Editor';
+import Editor from './editor';
 
 const propTypes = {
   canFocus: PropTypes.bool,

client/src/templates/Challenges/classic/Show.tsx

@@ -30,7 +30,7 @@ import { challengeTypes } from '../../../../utils/challengeTypes';
 import { isContained } from '../../../utils/is-contained';
 import {
   ChallengeNodeType,
-  ChallengeFilesType,
+  ChallengeFileType,
   ChallengeMetaType,
   TestType,
   ResizePropsType
@@ -77,10 +77,10 @@ const mapDispatchToProps = (dispatch: Dispatch) =>
 interface ShowClassicProps {
   cancelTests: () => void;
   challengeMounted: (arg0: string) => void;
-  createFiles: (arg0: ChallengeFilesType) => void;
+  createFiles: (arg0: ChallengeFileType) => void;
   data: { challengeNode: ChallengeNodeType };
   executeChallenge: () => void;
-  files: ChallengeFilesType;
+  files: ChallengeFileType;
   initConsole: (arg0: string) => void;
   initTests: (tests: TestType[]) => void;
   output: string[];
@@ -329,7 +329,7 @@ class ShowClassic extends Component<ShowClassicProps, ShowClassicState> {
     const { files } = this.props;
     return Object.values(files).some(
       file =>
-        file.editableRegionBoundaries &&
+        file?.editableRegionBoundaries &&
         file.editableRegionBoundaries.length === 2
     );
   }