Removes URL hash (fragment) for part 1 of a challenge

Author: loic-brtd

src/components/challenges/PartsTimeline.js

@@ -3,6 +3,7 @@ import cn from 'classnames';
 
 import * as css from './PartsTimeline.module.css';
 import { Link } from 'gatsby';
+import { buildPartHash } from '../../utils';
 
 const PartsTimeline = ({
   className,
@@ -21,7 +22,7 @@ const PartsTimeline = ({
                 [css.seen]: index <= currentPartIndex,
                 [css.last]: index === currentPartIndex
               })}>
-              <Link to={`#part-${index + 1}`} onClick={onSelection}>
+              <Link to={buildPartHash(index)} onClick={onSelection}>
                 {part.title}
               </Link>
             </li>
@@ -31,15 +32,15 @@ const PartsTimeline = ({
       <div className={css.navigation}>
         {currentPartIndex > 0 && (
           <Link
-            to={`#part-${currentPartIndex}`}
+            to={buildPartHash(currentPartIndex - 1)}
             className={css.navButton}
             onClick={onSelection}>
             Previous
           </Link>
         )}
         {currentPartIndex < parts.length - 1 && (
           <Link
-            to={`#part-${currentPartIndex + 2}`}
+            to={buildPartHash(currentPartIndex + 1)}
             className={css.navButton}
             onClick={onSelection}>
             Next

src/components/tracks/OverviewTimeline.js

@@ -3,6 +3,7 @@ import cn from 'classnames';
 import { Link } from 'gatsby';
 
 import { usePersistScrollPosition } from '../../hooks';
+import { buildPartHash } from '../../utils';
 
 import * as css from './OverviewTimeline.module.css';
 
@@ -29,7 +30,7 @@ const usePaths = (chapters, track, trackPosition) => {
   const nextVideo = flatTrack[currentIndex + 1];
   const computePath = (video) => {
     if (video) {
-      const hash = video.isMultiPart ? `#part-${video.partIndex + 1}` : '';
+      const hash = video.isMultiPart ? buildPartHash(video.partIndex) : '';
       return {
         ...video,
         path: `/tracks/${track.slug}/${video.slug}${hash}`
@@ -137,7 +138,9 @@ const ChapterSection = memo(
                       [css.last]: isLastVideo && partIndex === currentPartIndex
                     })}>
                     <Link
-                      to={`${trackPath}/${video.slug}#part-${partIndex + 1}`}
+                      to={`${trackPath}/${video.slug}${buildPartHash(
+                        partIndex
+                      )}`}
                       onClick={onSelection}>
                       {video.title} - {part.title}
                     </Link>

src/hooks/index.js

@@ -139,21 +139,27 @@ export const useIsFirstRender = () => {
 };
 
 /**
- * If the current URL (and hash value) corresponds to a part from a multi-part
- * coding challenge (within a challenge page or a track page), this hook returns
- * the zero-based index of this part, else it returns 0.
+ * If the current URL hash value (fragment) matches a part number (from a
+ * multi-part coding challenge), this hook returns the zero-based index of this
+ * part.
  *
- * The hash value should look like `#part-3`. If the part number if larger than
- * the `totalParts` parameter, the returned index corresponds to the last part
- * of the challenge (`totalParts - 1`).
+ * If the hash value doesn't match the format `#part-{partNumber}` where
+ * `0 <= partNumber <= partsCount`, this hook returns 0.
+ *
+ * @param partsCount {number} total number of parts of the challenge (1 if
+ * the challenge is not multi-part)
  *
- * @param totalParts {number} total number of parts of the challenge (1 if the
- * challenge is not multi-part)
- * 
  * @returns {number} challenge part index
+ *
+ * @example
+ * with hash "#part-1", useChallengePartIndex(3) === 0
+ * with hash "#part-3", useChallengePartIndex(3) === 2
+ * with hash "#part-8", useChallengePartIndex(2) === 0;
+ * with hash "#part-abc", useChallengePartIndex(3) === 0
  */
-export const useChallengePartIndex = (totalParts) => {
+export const useChallengePartIndex = (partsCount) => {
   const { hash } = useLocation();
   const [match, partNumberStr] = hash.match(/#part-([1-9][0-9]*)/) || [false];
-  return match ? Math.min(parseInt(partNumberStr), totalParts) - 1 : 0;
+  const partIndex = match ? parseInt(partNumberStr) - 1 : 0;
+  return partIndex < partsCount ? partIndex : 0;
 };

src/utils/index.js

@@ -77,3 +77,17 @@ export const randomElement = (array) => {
   const index = Math.floor(Math.random() * array.length);
   return array[index];
 };
+
+/**
+ * Creates a URL hash value (fragment) refering to a specific part of a
+ * multi-part coding challenge. Part 1 of a challenge has no hash value.
+ *
+ * @param partIndex {number} Zero-based part index
+ *
+ * @example
+ * buildPartHash(0) === ""
+ * buildPartHash(1) === "#part-2"
+ */
+export const buildPartHash = (partIndex) => {
+  return partIndex > 0 ? `#part-${partIndex + 1}` : '';
+};