fix(client): add better navigation for navigating back to blocks (freeCodeCamp#64027)

Co-authored-by: Huyen Nguyen <[email protected]>

Author: Sembauke

client/src/templates/Introduction/components/block-header.test.tsx

@@ -34,6 +34,7 @@ describe('<BlockHeader />', () => {
         {...defaultProps}
         accordion={true}
         blockUrl='/learn/test-block'
+        onLinkClick={() => {}}
       />
     );
 

client/src/templates/Introduction/components/block-header.tsx

@@ -10,7 +10,7 @@ import CheckMark from './check-mark';
 import BlockLabel from './block-label';
 import BlockIntros from './block-intros';
 
-interface BlockHeaderProps {
+interface BaseBlockHeaderProps {
   blockDashed: string;
   blockTitle: string;
   blockLabel: BlockLabelType | null;
@@ -22,9 +22,19 @@ interface BlockHeaderProps {
   percentageCompleted: number;
   blockIntroArr?: string[];
   accordion?: boolean;
-  blockUrl?: string;
 }
 
+interface BlockHeaderButtonProps extends BaseBlockHeaderProps {
+  blockUrl?: never;
+  onLinkClick?: never;
+}
+
+interface BlockHeaderLinkProps extends BaseBlockHeaderProps {
+  blockUrl: string;
+  onLinkClick: () => void;
+}
+
+type BlockHeaderProps = BlockHeaderButtonProps | BlockHeaderLinkProps;
 function BlockHeader({
   blockDashed,
   blockTitle,
@@ -37,7 +47,8 @@ function BlockHeader({
   percentageCompleted,
   blockIntroArr,
   accordion,
-  blockUrl
+  blockUrl,
+  onLinkClick
 }: BlockHeaderProps): JSX.Element {
   const InnerBlockHeader = () => (
     <>
@@ -68,7 +79,7 @@ function BlockHeader({
     <>
       <h3 className='block-grid-title'>
         {accordion && blockUrl ? (
-          <Link className='block-header' to={blockUrl}>
+          <Link className='block-header' to={blockUrl} onClick={onLinkClick}>
             <InnerBlockHeader />
           </Link>
         ) : (

client/src/templates/Introduction/components/block.tsx

@@ -82,7 +82,7 @@ export class Block extends Component<BlockProps> {
     super(props);
 
     this.handleBlockClick = this.handleBlockClick.bind(this);
-    this.handleBlockHover = this.handleBlockHover.bind(this);
+    this.handleChallengeClick = this.handleChallengeClick.bind(this);
   }
 
   handleBlockClick = (): void => {
@@ -91,13 +91,8 @@ export class Block extends Component<BlockProps> {
     toggleBlock(block);
   };
 
-  /*
-   * This function handles the block hover event.
-   * It also updates the URL hash to reflect the current block.
-   */
-  handleBlockHover = (): void => {
+  handleChallengeClick = (): void => {
     const { block } = this.props;
-    // Convert block to dashed format
     const dashedBlock = block
       .toLowerCase()
       .replace(/\s+/g, '-')
@@ -181,11 +176,7 @@ export class Block extends Component<BlockProps> {
      */
     const LegacyChallengeListBlock = (
       <Element name={block}>
-        <div
-          className={`block ${isExpanded ? 'open' : ''}`}
-          onMouseOver={this.handleBlockHover}
-          onFocus={this.handleBlockHover}
-        >
+        <div className={`block ${isExpanded ? 'open' : ''}`}>
           <div className='block-header'>
             <h3 className='big-block-title'>{blockTitle}</h3>
             {blockLabel && <BlockLabel blockLabel={blockLabel} />}
@@ -224,7 +215,12 @@ export class Block extends Component<BlockProps> {
               </span>
             </div>
           </button>
-          {isExpanded && <ChallengesList challenges={extendedChallenges} />}
+          {isExpanded && (
+            <ChallengesList
+              challenges={extendedChallenges}
+              onChallengeClick={this.handleChallengeClick}
+            />
+          )}
         </div>
       </Element>
     );
@@ -236,11 +232,7 @@ export class Block extends Component<BlockProps> {
      */
     const ProjectListBlock = (
       <Element name={block}>
-        <div
-          className='block'
-          onMouseOver={this.handleBlockHover}
-          onFocus={this.handleBlockHover}
-        >
+        <div className='block'>
           <div className='block-header'>
             <h3 className='big-block-title'>{blockTitle}</h3>
             {blockLabel && <BlockLabel blockLabel={blockLabel} />}
@@ -255,7 +247,10 @@ export class Block extends Component<BlockProps> {
               </div>
             )}
           </div>
-          <ChallengesList challenges={extendedChallenges} />
+          <ChallengesList
+            challenges={extendedChallenges}
+            onChallengeClick={this.handleChallengeClick}
+          />
         </div>
       </Element>
     );
@@ -267,11 +262,7 @@ export class Block extends Component<BlockProps> {
      */
     const LegacyChallengeGridBlock = (
       <Element name={block}>
-        <div
-          className={`block block-grid ${isExpanded ? 'open' : ''}`}
-          onMouseOver={this.handleBlockHover}
-          onFocus={this.handleBlockHover}
-        >
+        <div className={`block block-grid ${isExpanded ? 'open' : ''}`}>
           <BlockHeader
             blockDashed={block}
             blockTitle={blockTitle}
@@ -305,6 +296,7 @@ export class Block extends Component<BlockProps> {
                   challenges={extendedChallenges}
                   isProjectBlock={isProjectBlock}
                   blockTitle={blockTitle}
+                  onChallengeClick={this.handleChallengeClick}
                 />
               </div>
             </>
@@ -353,6 +345,7 @@ export class Block extends Component<BlockProps> {
                   challenges={extendedChallenges}
                   blockTitle={blockTitle}
                   jumpLink={!accordion}
+                  onChallengeClick={this.handleChallengeClick}
                 />
               </div>
             </>
@@ -368,11 +361,7 @@ export class Block extends Component<BlockProps> {
      */
     const LegacyLinkBlock = (
       <Element name={block}>
-        <div
-          className='block block-grid grid-project-block'
-          onMouseOver={this.handleBlockHover}
-          onFocus={this.handleBlockHover}
-        >
+        <div className='block block-grid grid-project-block'>
           <div className='tags-wrapper'>
             <span className='cert-tag' aria-hidden='true'>
               {t('misc.certification-project')}
@@ -394,9 +383,7 @@ export class Block extends Component<BlockProps> {
             <h3 className='block-grid-title'>
               <Link
                 className='block-header'
-                onClick={() => {
-                  this.handleBlockClick();
-                }}
+                onClick={this.handleChallengeClick}
                 to={link}
               >
                 <CheckMark isCompleted={isBlockCompleted} />
@@ -423,8 +410,6 @@ export class Block extends Component<BlockProps> {
         </Element>
         <div
           className={`block block-grid block-grid-no-border challenge-grid-block ${isExpanded ? 'open' : ''}`}
-          onMouseOver={this.handleBlockHover}
-          onFocus={this.handleBlockHover}
         >
           <BlockHeader
             blockDashed={block}
@@ -461,9 +446,13 @@ export class Block extends Component<BlockProps> {
                     blockTitle={blockTitle}
                     isProjectBlock={isProjectBlock}
                     jumpLink={false}
+                    onChallengeClick={this.handleChallengeClick}
                   />
                 ) : (
-                  <ChallengesList challenges={extendedChallenges} />
+                  <ChallengesList
+                    challenges={extendedChallenges}
+                    onChallengeClick={this.handleChallengeClick}
+                  />
                 )}
               </div>
             </div>
@@ -477,8 +466,6 @@ export class Block extends Component<BlockProps> {
         </Element>
         <div
           className={`block block-grid challenge-grid-block ${isExpanded ? 'open' : ''}`}
-          onMouseOver={this.handleBlockHover}
-          onFocus={this.handleBlockHover}
         >
           <BlockHeader
             blockDashed={block}
@@ -516,9 +503,13 @@ export class Block extends Component<BlockProps> {
                     challenges={extendedChallenges}
                     blockTitle={blockTitle}
                     isProjectBlock={isProjectBlock}
+                    onChallengeClick={this.handleChallengeClick}
                   />
                 ) : (
-                  <ChallengesList challenges={extendedChallenges} />
+                  <ChallengesList
+                    challenges={extendedChallenges}
+                    onChallengeClick={this.handleChallengeClick}
+                  />
                 )}
               </div>
             </div>
@@ -539,6 +530,7 @@ export class Block extends Component<BlockProps> {
           completedCount={completedCount}
           courseCompletionStatus={courseCompletionStatus()}
           handleClick={this.handleBlockClick}
+          onLinkClick={this.handleChallengeClick}
           isCompleted={isBlockCompleted}
           isExpanded={isExpanded}
           percentageCompleted={percentageCompleted}