feat(client): ts-migrate .../Challenges/components/PrismFormatted.js (#42667)

* migrate

* add mistakenly deleted displayName

* add static displayName declaration

* remove extra space

Co-authored-by: Parth Parth <thecodingaviator@users.noreply.github.com>
Co-authored-by: Mrugesh Mohapatra <1884376+raisedadead@users.noreply.github.com>

client/package-lock.json

@@ -4110,6 +4110,12 @@
       "resolved": "https://registry.npmjs.org/@types/parse5/-/parse5-5.0.3.tgz",
       "integrity": "sha512-kUNnecmtkunAoQ3CnjmMkzNU/gtxG8guhi+Fk2U/kOpIKjIMKnXGp4IJCgQJrXSgMsWYimYG4TGjz/UzbGEBTw=="
     },
+    "@types/prismjs": {
+      "version": "1.16.5",
+      "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.16.5.tgz",
+      "integrity": "sha512-nSU7U6FQDJJCraFNwaHmH5YDsd/VA9rTnJ7B7AGFdn+m+VSt3FjLWN7+AbqxZ67dbFazqtrDFUto3HK4ljrHIg==",
+      "dev": true
+    },
     "@types/prop-types": {
       "version": "15.7.3",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",

client/package.json

@@ -135,6 +135,7 @@
     "@types/jest": "26.0.23",
     "@types/loadable__component": "5.13.3",
     "@types/lodash-es": "4.17.4",
+    "@types/prismjs": "^1.16.5",
     "@types/react-dom": "17.0.8",
     "@types/react-helmet": "6.1.1",
     "@types/react-instantsearch-dom": "6.10.1",

client/src/templates/Challenges/components/Challenge-Description.tsx

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 
-import PrismFormatted from './PrismFormatted';
+import PrismFormatted from './prism-formatted';
 import './challenge-description.css';
 
 type Challenge = {

client/src/templates/Challenges/components/prism-formatted.tsx

@@ -1,26 +1,27 @@
 import React, { Component } from 'react';
 import Prism from 'prismjs';
-import PropTypes from 'prop-types';
 
-const propTypes = {
-  className: PropTypes.string,
-  text: PropTypes.string.isRequired
-};
+interface PrismFormattedProps {
+  className?: string;
+  text: string;
+}
 
-class PrismFormatted extends Component {
-  componentDidMount() {
+class PrismFormatted extends Component<PrismFormattedProps> {
+  static displayName: string;
+  instructionsRef: React.RefObject<HTMLInputElement>;
+  componentDidMount(): void {
     // Just in case 'current' has not been created, though it should have been.
     if (this.instructionsRef.current) {
       Prism.highlightAllUnder(this.instructionsRef.current);
     }
   }
 
-  constructor(props) {
+  constructor(props: PrismFormattedProps | Readonly<PrismFormattedProps>) {
     super(props);
     this.instructionsRef = React.createRef();
   }
 
-  render() {
+  render(): JSX.Element {
     const { text, className } = this.props;
     return (
       <div
@@ -33,6 +34,5 @@ class PrismFormatted extends Component {
 }
 
 PrismFormatted.displayName = 'PrismFormatted';
-PrismFormatted.propTypes = propTypes;
 
 export default PrismFormatted;

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

@@ -12,7 +12,7 @@ import { withTranslation } from 'react-i18next';
 import type { Dispatch } from 'redux';
 
 // Local Utilities
-import PrismFormatted from '../components/PrismFormatted';
+import PrismFormatted from '../components/prism-formatted';
 import {
   ChallengeNodeType,
   ChallengeMetaType