Merge pull request #1380 from loic-brtd/1319-hash-based-challenge-parts-navigation

shiffman · web-flow · commit d03f21830872 · 2024-02-03T08:22:52.000-05:00
Hash-based challenge parts navigation
diff --git a/src/components/challenges/PartsTimeline.js b/src/components/challenges/PartsTimeline.js
@@ -1,17 +1,16 @@
-import React, { memo, useState } from 'react';
+import React, { memo } from 'react';
 import cn from 'classnames';
 
 import * as css from './PartsTimeline.module.css';
 import { Link } from 'gatsby';
+import { buildPartHash } from '../../utils';
 
-const PartsTimeline = ({ className, parts, onPartChange }) => {
-  const [currentPartIndex, setCurrentPartIndex] = useState(0);
-
-  const updatePartIndex = (index) => {
-    onPartChange(parts[index]);
-    setCurrentPartIndex(index);
-  };
-
+const PartsTimeline = ({
+  className,
+  parts,
+  currentPartIndex,
+  onSelection = () => {}
+}) => {
   return (
     <div className={cn(css.root, className)}>
       <div className={css.partsTimeline}>
@@ -23,12 +22,7 @@ const PartsTimeline = ({ className, parts, onPartChange }) => {
                 [css.seen]: index <= currentPartIndex,
                 [css.last]: index === currentPartIndex
               })}>
-              <Link
-                to="#"
-                onClick={(event) => {
-                  event.preventDefault();
-                  updatePartIndex(index);
-                }}>
+              <Link to={buildPartHash(index)} onClick={onSelection}>
                 {part.title}
               </Link>
             </li>
@@ -38,23 +32,17 @@ const PartsTimeline = ({ className, parts, onPartChange }) => {
       <div className={css.navigation}>
         {currentPartIndex > 0 && (
           <Link
-            to="#"
+            to={buildPartHash(currentPartIndex - 1)}
             className={css.navButton}
-            onClick={(event) => {
-              event.preventDefault();
-              updatePartIndex(currentPartIndex - 1);
-            }}>
+            onClick={onSelection}>
             Previous
           </Link>
         )}
         {currentPartIndex < parts.length - 1 && (
           <Link
-            to="#"
+            to={buildPartHash(currentPartIndex + 1)}
             className={css.navButton}
-            onClick={(event) => {
-              event.preventDefault();
-              updatePartIndex(currentPartIndex + 1);
-            }}>
+            onClick={onSelection}>
             Next
           </Link>
         )}
diff --git a/src/components/challenges/VideoSection.js b/src/components/challenges/VideoSection.js
@@ -9,6 +9,7 @@ import PartsTimeline from './PartsTimeline';
 import NebulaVideoRow from '../NebulaVideoRow';
 
 import { filteredPath } from '../../utils';
+import { useChallengePartIndex } from '../../hooks';
 
 import * as css from './VideoSection.module.css';
 
@@ -23,9 +24,8 @@ const VideoSection = ({ challenge }) => {
   const hasMultiParts = challenge.parts?.length > 0;
   const [showTimestamps, setShowTimestamps] = useState(!hasMultiParts);
 
-  const [activePart, setActivePart] = useState(
-    challenge.parts?.[0] ?? challenge
-  );
+  const activePartIndex = useChallengePartIndex(challenge.parts?.length || 1);
+  const activePart = challenge.parts?.[activePartIndex] ?? challenge;
   const { videoId, nebulaSlug, timestamps } = activePart;
   const hasTimestamps = timestamps?.length > 0;
   const hasTimeline = hasMultiParts || hasTimestamps;
@@ -147,10 +147,8 @@ const VideoSection = ({ challenge }) => {
                       [css.hide]: showTimestamps
                     })}
                     parts={challenge.parts}
-                    onPartChange={(part) => {
-                      setActivePart(part);
-                      setShowTimeline(false);
-                    }}
+                    currentPartIndex={activePartIndex}
+                    onSelection={() => setShowTimeline(false)}
                   />
                 )}
                 {hasTimestamps && (
diff --git a/src/components/tracks/OverviewTimeline.js b/src/components/tracks/OverviewTimeline.js
@@ -2,7 +2,8 @@ import React, { memo, useState } from 'react';
 import cn from 'classnames';
 import { Link } from 'gatsby';
 
-import { useChallengePartIndex, usePersistScrollPosition } from '../../hooks';
+import { usePersistScrollPosition } from '../../hooks';
+import { buildPartHash } from '../../utils';
 
 import * as css from './OverviewTimeline.module.css';
 
@@ -14,20 +15,35 @@ const usePaths = (chapters, track, trackPosition) => {
         ? video.parts.map((_, partIndex) => ({ slug: video.slug, partIndex }))
         : [{ slug: video.slug, partIndex: 0 }]
     );
-  const partIndex = useChallengePartIndex();
   const currentVideo =
     chapters[trackPosition.chapterIndex].videos[trackPosition.videoIndex];
   const currentIndex = flatTrack.findIndex(
-    (video) => video.slug === currentVideo.slug && video.partIndex === partIndex
+    (video) =>
+      video.slug === currentVideo.slug &&
+      video.partIndex === trackPosition.partIndex
   );
   const prevVideo = flatTrack[currentIndex - 1];
   const nextVideo = flatTrack[currentIndex + 1];
-  const computePath = (video) =>
-    video ? { ...video, path: `/tracks/${track.slug}/${video.slug}` } : null;
+  const computePath = (video) => {
+    if (video) {
+      const hash = buildPartHash(video.partIndex);
+      return {
+        ...video,
+        path: `/tracks/${track.slug}/${video.slug}${hash}`
+      };
+    }
+    return null;
+  };
   return [computePath(prevVideo), computePath(nextVideo)];
 };
 
-const OverviewTimeline = ({ className, chapters, track, trackPosition }) => {
+const OverviewTimeline = ({
+  className,
+  chapters,
+  track,
+  trackPosition,
+  onSelection = () => {}
+}) => {
   const [previousVideo, nextVideo] = usePaths(chapters, track, trackPosition);
 
   const timelineRef = usePersistScrollPosition(track.slug, 'tracks');
@@ -42,6 +58,7 @@ const OverviewTimeline = ({ className, chapters, track, trackPosition }) => {
             chapters={chapters}
             track={track}
             trackPosition={trackPosition}
+            onSelection={onSelection}
           />
         ))}
       </div>
@@ -50,15 +67,15 @@ const OverviewTimeline = ({ className, chapters, track, trackPosition }) => {
           <Link
             className={css.navButton}
             to={previousVideo.path}
-            state={{ challengePartIndex: previousVideo.partIndex }}>
+            onClick={onSelection}>
             Previous
           </Link>
         )}
         {nextVideo !== null && (
           <Link
             className={css.navButton}
             to={nextVideo.path}
-            state={{ challengePartIndex: nextVideo.partIndex }}>
+            onClick={onSelection}>
             Next
           </Link>
         )}
@@ -68,14 +85,13 @@ const OverviewTimeline = ({ className, chapters, track, trackPosition }) => {
 };
 
 const ChapterSection = memo(
-  ({ chapter, chapterIndex, chapters, track, trackPosition }) => {
+  ({ chapter, chapterIndex, chapters, track, trackPosition, onSelection }) => {
     const hasSeenChapter = chapterIndex < trackPosition.chapterIndex;
     const isThisChapter = chapterIndex === trackPosition.chapterIndex;
     const trackPath = `/tracks/${track.slug}`;
     const [collapsed, setCollapsed] = useState(false);
 
     const { videoIndex: currentVideoIndex } = trackPosition;
-    const currentPartIndex = useChallengePartIndex();
 
     return (
       <ul className={css.chapterList}>
@@ -105,6 +121,7 @@ const ChapterSection = memo(
 
             return isMultiPart ? (
               video.parts.map((part, partIndex) => {
+                const currentPartIndex = trackPosition.partIndex;
                 const hasSeenPart =
                   hasSeenVideo &&
                   (videoIndex < currentVideoIndex ||
@@ -117,8 +134,10 @@ const ChapterSection = memo(
                       [css.last]: isLastVideo && partIndex === currentPartIndex
                     })}>
                     <Link
-                      to={`${trackPath}/${video.slug}`}
-                      state={{ challengePartIndex: partIndex }}>
+                      to={`${trackPath}/${video.slug}${buildPartHash(
+                        partIndex
+                      )}`}
+                      onClick={onSelection}>
                       {video.title} - {part.title}
                     </Link>
                   </li>
@@ -131,7 +150,9 @@ const ChapterSection = memo(
                   [css.seen]: hasSeenVideo,
                   [css.last]: isLastVideo
                 })}>
-                <Link to={`${trackPath}/${video.slug}`}>{video.title}</Link>
+                <Link to={`${trackPath}/${video.slug}`} onClick={onSelection}>
+                  {video.title}
+                </Link>
               </li>
             );
           })}
diff --git a/src/components/tracks/VideoSection.js b/src/components/tracks/VideoSection.js
@@ -35,7 +35,8 @@ const VideoSection = ({ track, video, trackPosition, mainTitle }) => {
 
   const { title, topics, languages } = video;
 
-  const partIndex = useChallengePartIndex();
+  const partIndex = useChallengePartIndex(video.parts?.length || 1);
+  trackPosition = { ...trackPosition, partIndex };
   const part = video.parts?.[partIndex];
   const videoId = part?.videoId ?? video.videoId;
   const nebulaSlug = part?.nebulaSlug ?? video.nebulaSlug;
@@ -179,6 +180,7 @@ const VideoSection = ({ track, video, trackPosition, mainTitle }) => {
                   chapters={chapters}
                   track={track}
                   trackPosition={trackPosition}
+                  onSelection={() => setShowTimeline(false)}
                 />
               )}
             </div>
diff --git a/src/hooks/index.js b/src/hooks/index.js
@@ -139,13 +139,27 @@ export const useIsFirstRender = () => {
 };
 
 /**
- * Returns the challenge part index (0 if the challenge is not multi-part)
- * which has been stored in the `location.state` object using the `Link.state`
- * property.
+ * 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.
+ *
+ * If the hash value doesn't match the format `#part-{partNumber}` where
+ * `1 <= partNumber <= partsCount`, this hook returns 0.
+ *
+ * @param partsCount {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 = () => {
-  const { state } = useLocation();
-  return state?.challengePartIndex ?? 0;
+export const useChallengePartIndex = (partsCount) => {
+  const { hash } = useLocation();
+  const [match, partNumberStr] = hash.match(/#part-([1-9][0-9]*)/) || [false];
+  const partIndex = match ? parseInt(partNumberStr) - 1 : 0;
+  return partIndex < partsCount ? partIndex : 0;
 };
diff --git a/src/utils/index.js b/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}` : '';
+};
