From 3c36bda9ab807d9c5711dc3adf212b3d40768594 Mon Sep 17 00:00:00 2001
From: Sem Bauke <46919888+Sembauke@users.noreply.github.com>
Date: Thu, 27 May 2021 17:50:08 +0200
Subject: [PATCH] feat: change challenge desc to ts (#42270)

* feat: change challenge desc to ts

* Apply suggestions from code review

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* fix: add return type on function

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
---
 .../components/Challenge-Description.js       | 31 -----------------
 .../components/Challenge-Description.tsx      | 33 +++++++++++++++++++
 2 files changed, 33 insertions(+), 31 deletions(-)
 delete mode 100644 client/src/templates/Challenges/components/Challenge-Description.js
 create mode 100644 client/src/templates/Challenges/components/Challenge-Description.tsx

diff --git a/client/src/templates/Challenges/components/Challenge-Description.js b/client/src/templates/Challenges/components/Challenge-Description.js
deleted file mode 100644
index 36e335a702..0000000000
--- a/client/src/templates/Challenges/components/Challenge-Description.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
-
-import PrismFormatted from './PrismFormatted';
-import './challenge-description.css';
-
-const propTypes = {
-  block: PropTypes.string,
-  description: PropTypes.string,
-  instructions: PropTypes.string
-};
-
-function ChallengeDescription({ description, instructions, block }) {
-  return (
-    <div className={`challenge-instructions${block ? ' ' + block : ''}`}>
-      {description && <PrismFormatted text={description} />}
-      {instructions && (
-        <Fragment>
-          <hr />
-          <PrismFormatted text={instructions} />
-        </Fragment>
-      )}
-      <hr />
-    </div>
-  );
-}
-
-ChallengeDescription.displayName = 'ChallengeDescription';
-ChallengeDescription.propTypes = propTypes;
-
-export default ChallengeDescription;
diff --git a/client/src/templates/Challenges/components/Challenge-Description.tsx b/client/src/templates/Challenges/components/Challenge-Description.tsx
new file mode 100644
index 0000000000..6364299769
--- /dev/null
+++ b/client/src/templates/Challenges/components/Challenge-Description.tsx
@@ -0,0 +1,33 @@
+import React, { Fragment } from 'react';
+
+import PrismFormatted from './PrismFormatted';
+import './challenge-description.css';
+
+type Challenge = {
+  block: string;
+  description: string;
+  instructions: string;
+};
+
+function ChallengeDescription(challenge: Challenge): JSX.Element {
+  return (
+    <div
+      className={`challenge-instructions${
+        challenge.block ? ' ' + challenge.block : ''
+      }`}
+    >
+      {challenge.description && <PrismFormatted text={challenge.description} />}
+      {challenge.instructions && (
+        <Fragment>
+          <hr />
+          <PrismFormatted text={challenge.instructions} />
+        </Fragment>
+      )}
+      <hr />
+    </div>
+  );
+}
+
+ChallengeDescription.displayName = 'ChallengeDescription';
+
+export default ChallengeDescription;