From f2562110322a42287b38ecdedbeaec6a96855cd6 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <muhammed@freecodecamp.org>
Date: Mon, 10 Jul 2023 16:46:43 +0300
Subject: [PATCH] feat(client): make checkmark a React component for the block
 (#50928)

---
 .../Introduction/components/block.tsx         | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/client/src/templates/Introduction/components/block.tsx b/client/src/templates/Introduction/components/block.tsx
index 1a64364850b..aadd06f1706 100644
--- a/client/src/templates/Introduction/components/block.tsx
+++ b/client/src/templates/Introduction/components/block.tsx
@@ -71,6 +71,14 @@ export const BlockIntros = ({ intros }: { intros: string[] }): JSX.Element => {
   );
 };
 
+function CheckMark({ isCompleted }: { isCompleted: boolean }): JSX.Element {
+  return isCompleted ? (
+    <GreenPass hushScreenReaderText />
+  ) : (
+    <GreenNotCompleted hushScreenReaderText />
+  );
+}
+
 class Block extends Component<BlockProps> {
   static displayName: string;
   constructor(props: BlockProps) {
@@ -85,14 +93,6 @@ class Block extends Component<BlockProps> {
     toggleBlock(blockDashedName);
   }
 
-  renderCheckMark(isCompleted: boolean): JSX.Element {
-    return isCompleted ? (
-      <GreenPass hushScreenReaderText />
-    ) : (
-      <GreenNotCompleted hushScreenReaderText />
-    );
-  }
-
   render(): JSX.Element {
     const {
       blockDashedName,
@@ -185,7 +185,7 @@ class Block extends Component<BlockProps> {
                 <span className='sr-only'>{blockTitle}</span>
               </div>
               <div className='map-title-completed course-title'>
-                {this.renderCheckMark(isBlockCompleted)}
+                <CheckMark isCompleted={isBlockCompleted} />
                 <span
                   aria-hidden='true'
                   className='map-completed-count'
@@ -264,7 +264,7 @@ class Block extends Component<BlockProps> {
                 }}
               >
                 <span className='block-header-button-text map-title'>
-                  {this.renderCheckMark(isBlockCompleted)}
+                  <CheckMark isCompleted={isBlockCompleted} />
                   <span>
                     {blockTitle}
                     <span className='sr-only'>
@@ -331,7 +331,7 @@ class Block extends Component<BlockProps> {
                 }}
                 to={challengesWithCompleted[0].fields.slug}
               >
-                {this.renderCheckMark(isBlockCompleted)}
+                <CheckMark isCompleted={isBlockCompleted} />
                 {blockTitle}{' '}
                 <span className='sr-only'>
                   {t('misc.certification-project')}