From 5f9d507d708c14aa60fffde0ac941ea0986f68e6 Mon Sep 17 00:00:00 2001
From: Parth Parth <34807532+thecodingaviator@users.noreply.github.com>
Date: Fri, 2 Jul 2021 18:11:54 +0530
Subject: [PATCH] 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                      |  6 ++++++
 client/package.json                           |  1 +
 .../components/Challenge-Description.tsx      |  2 +-
 ...{PrismFormatted.js => prism-formatted.tsx} | 20 +++++++++----------
 .../src/templates/Challenges/video/Show.tsx   |  2 +-
 5 files changed, 19 insertions(+), 12 deletions(-)
 rename client/src/templates/Challenges/components/{PrismFormatted.js => prism-formatted.tsx} (63%)

diff --git a/client/package-lock.json b/client/package-lock.json
index 7d50c343e4..b36ffd19ce 100644
--- a/client/package-lock.json
+++ b/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",
diff --git a/client/package.json b/client/package.json
index f226a15b63..d99a4a5091 100644
--- a/client/package.json
+++ b/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",
diff --git a/client/src/templates/Challenges/components/Challenge-Description.tsx b/client/src/templates/Challenges/components/Challenge-Description.tsx
index 7aab8a5aec..60173e29c8 100644
--- a/client/src/templates/Challenges/components/Challenge-Description.tsx
+++ b/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 = {
diff --git a/client/src/templates/Challenges/components/PrismFormatted.js b/client/src/templates/Challenges/components/prism-formatted.tsx
similarity index 63%
rename from client/src/templates/Challenges/components/PrismFormatted.js
rename to client/src/templates/Challenges/components/prism-formatted.tsx
index 1cf60a2812..d9026c2a34 100644
--- a/client/src/templates/Challenges/components/PrismFormatted.js
+++ b/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;
diff --git a/client/src/templates/Challenges/video/Show.tsx b/client/src/templates/Challenges/video/Show.tsx
index 6bae5a5e36..4bcd0159a8 100644
--- a/client/src/templates/Challenges/video/Show.tsx
+++ b/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