feat: add smooth scroll on schedule page and speakers page

components/Schedule/Table/Block/index.jsx

@@ -1,11 +1,11 @@
 import styles from "./style.module.css";
 import Image from "next/image";
 import Link from "next/link";
-import { useEffect } from "react";
 
 function BlockItem({
   id,
   coffeeBreak,
+  date,
   startTime,
   endTime,
   activityType,
@@ -21,7 +21,7 @@ function BlockItem({
 
   const block = (
     <div
-      id={`B${id}`}
+      id={`${id}`}
       className={`mx-2 h-full border-t-2 border-white p-2 ${styles.gridBlock}`}
     >
       {coffeeBreak && (
@@ -44,13 +44,28 @@ function BlockItem({
       <ul
         className={`${styles.authors} flex font-iregular text-sm text-gray-400`}
       >
-        {author && (
-          <li className={styles.listElem}>
-            <Link href={`speakers?speaker=${author}`} className={styles.author}>
-              {author}
-            </Link>
-          </li>
-        )}
+        {author &&
+          author.split(" & ").map((uniqueAuthor, uniqueAuthorIndex) => (
+            <li key={uniqueAuthor} className={styles.listElem}>
+              <Link
+                href={{
+                  pathname: "speakers",
+                  query: {
+                    speaker: uniqueAuthor,
+                    date,
+                  },
+                }}
+                className={styles.author}
+              >
+                {uniqueAuthor}
+              </Link>
+
+              {/* Separates each author name with a ' & ' */}
+              {uniqueAuthorIndex < author.split(" & ").length - 1 && (
+                <span>&nbsp;&amp;&nbsp;</span>
+              )}
+            </li>
+          ))}
       </ul>
 
       {description && (
@@ -127,6 +142,7 @@ export default function Block({ date, detailed, elems }) {
           id={`${date}-${elem.id}`}
           focused={elem.focused}
           detailed={detailed}
+          date={date}
           {...elem.activity}
         />
       ))}

components/Schedule/Table/index.jsx

@@ -2,6 +2,7 @@ import Block from "./Block";
 import { isSelected } from "../Day/Filters";
 
 import schedule from "/data/schedule.json";
+import { useEffect } from "react";
 
 function filterElem(filters) {
   return function (elem) {
@@ -62,6 +63,23 @@ export default function Table({
   filters,
   detailed,
 }) {
+  useEffect(() => {
+    if (!(typeof window === "undefined")) {
+      const targetElement = document?.getElementById(hash);
+      if (!targetElement) return;
+
+      const elementPosition = targetElement.getBoundingClientRect().top;
+
+      const scroll = () => {
+        window.scrollTo({
+          top: elementPosition,
+        });
+      };
+
+      requestAnimationFrame(scroll);
+    }
+  }, [hash]);
+
   const obj = schedule.find((obj) => obj.date == date);
 
   if (obj === undefined || obj.activities === undefined) {

layout/Speakers/components/Schedule/Table/Block/index.jsx

@@ -25,7 +25,7 @@ export default function Block({
   const [showSpeaker, setShowSpeaker] = useState(true);
 
   return (
-    <div key={id} className="border-t-2 border-white py-4 text-white">
+    <div id={name} key={id} className="border-t-2 border-white py-4 text-white">
       <div className="mb-2 flex">
         <div className="w-[210px]">
           <Image

layout/Speakers/components/Schedule/index.jsx

@@ -1,4 +1,5 @@
 import { useState, useEffect } from "react";
+import { useRouter } from "next/router";
 
 import Day from "./Day";
 import Table from "./Table";
@@ -61,6 +62,8 @@ function addDate(date, days) {
 }
 
 export default function Schedule(props) {
+  const router = useRouter();
+
   const min_date = "2023/2/14";
   const max_date = "2023/2/17";
 
@@ -93,6 +96,33 @@ export default function Schedule(props) {
     };
   }, []);
 
+  // change date based on URL query params
+  // and scroll to selected speaker
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    const { date, speaker } = router.query;
+    if (date) {
+      updateDate(date);
+    }
+
+    if (speaker) {
+      const targetElement = document?.getElementById(speaker);
+      if (!targetElement) return;
+
+      const elementPosition = targetElement.getBoundingClientRect().top;
+
+      const scroll = () => {
+        window.scrollTo({
+          top: elementPosition,
+          behavior: "smooth",
+        });
+      };
+
+      requestAnimationFrame(scroll);
+    }
+  }, [router.query, date]);
+
   const previous_day = () => {
     const new_date = addDate(date, -1);
     if (!isAfter(min_date, new_date) && !isAfter(new_date, max_date))

styles/globals.css

@@ -6,6 +6,7 @@
 html {
   overflow-x: hidden;
   height: 100%;
+  scroll-behavior: smooth;
 }
 
 body {