First working draft of hash-based navigation for challenge parts

Author: loic-brtd

src/components/challenges/PartsTimeline.js

@@ -1,17 +1,10 @@
-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';
 
-const PartsTimeline = ({ className, parts, onPartChange }) => {
-  const [currentPartIndex, setCurrentPartIndex] = useState(0);
-
-  const updatePartIndex = (index) => {
-    onPartChange(parts[index]);
-    setCurrentPartIndex(index);
-  };
-
+const PartsTimeline = ({ className, parts, currentPartIndex }) => {
   return (
     <div className={cn(css.root, className)}>
       <div className={css.partsTimeline}>
@@ -23,38 +16,19 @@ const PartsTimeline = ({ className, parts, onPartChange }) => {
                 [css.seen]: index <= currentPartIndex,
                 [css.last]: index === currentPartIndex
               })}>
-              <Link
-                to="#"
-                onClick={(event) => {
-                  event.preventDefault();
-                  updatePartIndex(index);
-                }}>
-                {part.title}
-              </Link>
+              <Link to={`#part-${index + 1}`}>{part.title}</Link>
             </li>
           ))}
         </ul>
       </div>
       <div className={css.navigation}>
         {currentPartIndex > 0 && (
-          <Link
-            to="#"
-            className={css.navButton}
-            onClick={(event) => {
-              event.preventDefault();
-              updatePartIndex(currentPartIndex - 1);
-            }}>
+          <Link to={`#part-${currentPartIndex}`} className={css.navButton}>
             Previous
           </Link>
         )}
         {currentPartIndex < parts.length - 1 && (
-          <Link
-            to="#"
-            className={css.navButton}
-            onClick={(event) => {
-              event.preventDefault();
-              updatePartIndex(currentPartIndex + 1);
-            }}>
+          <Link to={`#part-${currentPartIndex + 2}`} className={css.navButton}>
             Next
           </Link>
         )}

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,7 @@ const VideoSection = ({ challenge }) => {
                       [css.hide]: showTimestamps
                     })}
                     parts={challenge.parts}
-                    onPartChange={(part) => {
-                      setActivePart(part);
-                      setShowTimeline(false);
-                    }}
+                    currentPartIndex={activePartIndex}
                   />
                 )}
                 {hasTimestamps && (

src/components/tracks/OverviewTimeline.js

@@ -11,24 +11,43 @@ const usePaths = (chapters, track, trackPosition) => {
     .flatMap((chapter) => chapter.videos)
     .flatMap((video) =>
       video.parts?.length > 0
-        ? video.parts.map((_, partIndex) => ({ slug: video.slug, partIndex }))
-        : [{ slug: video.slug, partIndex: 0 }]
+        ? video.parts.map((_, partIndex) => ({
+            slug: video.slug,
+            partIndex,
+            isMultiPart: true
+          }))
+        : [{ slug: video.slug, partIndex: 0, isMultiPart: false }]
     );
-  const partIndex = useChallengePartIndex();
   const currentVideo =
     chapters[trackPosition.chapterIndex].videos[trackPosition.videoIndex];
+  const totalParts = flatTrack.filter(
+    (video) => video.slug === currentVideo.slug
+  ).length;
+  const partIndex = useChallengePartIndex(totalParts);
   const currentIndex = flatTrack.findIndex(
     (video) => video.slug === currentVideo.slug && video.partIndex === partIndex
   );
   const prevVideo = flatTrack[currentIndex - 1];
   const nextVideo = flatTrack[currentIndex + 1];
-  const computePath = (video) =>
-    video ? { ...video, path: `/tracks/${track.slug}/${video.slug}` } : null;
-  return [computePath(prevVideo), computePath(nextVideo)];
+  const computePath = (video) => {
+    if (video) {
+      const hash = video.isMultiPart ? `#part-${video.partIndex + 1}` : '';
+      return {
+        ...video,
+        path: `/tracks/${track.slug}/${video.slug}${hash}`
+      };
+    }
+    return null;
+  };
+  return [computePath(prevVideo), computePath(nextVideo), partIndex];
 };
 
 const OverviewTimeline = ({ className, chapters, track, trackPosition }) => {
-  const [previousVideo, nextVideo] = usePaths(chapters, track, trackPosition);
+  const [previousVideo, nextVideo, currentPartIndex] = usePaths(
+    chapters,
+    track,
+    trackPosition
+  );
 
   const timelineRef = usePersistScrollPosition(track.slug, 'tracks');
   return (
@@ -42,23 +61,18 @@ const OverviewTimeline = ({ className, chapters, track, trackPosition }) => {
             chapters={chapters}
             track={track}
             trackPosition={trackPosition}
+            currentPartIndex={currentPartIndex}
           />
         ))}
       </div>
       <div className={css.navigation}>
         {previousVideo !== null && (
-          <Link
-            className={css.navButton}
-            to={previousVideo.path}
-            state={{ challengePartIndex: previousVideo.partIndex }}>
+          <Link className={css.navButton} to={previousVideo.path}>
             Previous
           </Link>
         )}
         {nextVideo !== null && (
-          <Link
-            className={css.navButton}
-            to={nextVideo.path}
-            state={{ challengePartIndex: nextVideo.partIndex }}>
+          <Link className={css.navButton} to={nextVideo.path}>
             Next
           </Link>
         )}
@@ -68,14 +82,20 @@ const OverviewTimeline = ({ className, chapters, track, trackPosition }) => {
 };
 
 const ChapterSection = memo(
-  ({ chapter, chapterIndex, chapters, track, trackPosition }) => {
+  ({
+    chapter,
+    chapterIndex,
+    chapters,
+    track,
+    trackPosition,
+    currentPartIndex
+  }) => {
     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}>
@@ -117,8 +137,7 @@ const ChapterSection = memo(
                       [css.last]: isLastVideo && partIndex === currentPartIndex
                     })}>
                     <Link
-                      to={`${trackPath}/${video.slug}`}
-                      state={{ challengePartIndex: partIndex }}>
+                      to={`${trackPath}/${video.slug}#part-${partIndex + 1}`}>
                       {video.title} - {part.title}
                     </Link>
                   </li>

src/components/tracks/VideoSection.js

@@ -35,7 +35,8 @@ const VideoSection = ({ track, video, trackPosition, mainTitle }) => {
 
   const { title, topics, languages } = video;
 
-  const partIndex = useChallengePartIndex();
+  const totalParts = video.parts?.length ?? 1;
+  const partIndex = useChallengePartIndex(totalParts);
   const part = video.parts?.[partIndex];
   const videoId = part?.videoId ?? video.videoId;
   const nebulaSlug = part?.nebulaSlug ?? video.nebulaSlug;

src/hooks/index.js

@@ -143,9 +143,13 @@ export const useIsFirstRender = () => {
  * which has been stored in the `location.state` object using the `Link.state`
  * property.
  *
+ * @param totalParts {number} total number of parts of the challenge (1 if the
+ * challenge is not multi-part)
+ * 
  * @returns {number} challenge part index
  */
-export const useChallengePartIndex = () => {
-  const { state } = useLocation();
-  return state?.challengePartIndex ?? 0;
+export const useChallengePartIndex = (totalParts) => {
+  const { hash } = useLocation();
+  const [match, partNumberStr] = hash.match(/#part-([1-9][0-9]*)/) || [false];
+  return match ? Math.min(parseInt(partNumberStr), totalParts) - 1 : 0;
 };