Use nextjs router to fix error (for real)

Author: varunsingh87

components/JottingsControls/jottingsControl.js

@@ -1,8 +1,7 @@
+import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { compareArrays } from "../../libs/arrayExtensions";
 import { getJottings, getLabels, getSharedJottings } from "../../libs/Datastore/requests";
-import { useInterval } from "../../libs/delay";
-import UrlService from "../../libs/UrlService";
 import { useWindowSize } from "../../libs/view";
 import LabelControl from "./labelControl";
 import LabelsControl from "./labelsControl";
@@ -16,18 +15,24 @@ export default function JottingsControl(props) {
 	const [tasks, setTasks] = useState(null);
 	const [labels, setLabels] = useState(null);
 
-	const { windowWidth } = useWindowSize();
-	const [activeList, setActiveList] = useState(windowWidth < 600 ? 'labels' : 'all');
+	const { width } = useWindowSize();
+	const [activeList, setActiveList] = useState(typeof width === 'undefined' || width < 800 ? 'labels' : 'all');
 
-	useEffect(() => {
-		let isCancelled = false;
-		console.log(window.location.hash.substring(1));
-		
-		if (!isCancelled)
-			setActiveList(window.location.hash.substring(1));
-
-		return () => { isCancelled = true };
-	}, [window?.location?.hash]);
+	const router = useRouter();
+
+    useEffect(() => {
+        const onHashChangeStart = (url) => {
+			const newHash = url.split('#')[1];
+            console.log(`Path changing to ${newHash}`);
+			setActiveList(newHash || 'labels');
+        };
+
+        router.events.on("hashChangeStart", onHashChangeStart);
+
+        return () => {
+            router.events.off("hashChangeStart", onHashChangeStart);
+        };
+    }, [router.events]);
 
 	const getJotsToShow = (response, jotType) => {
 		if (

components/JottingsControls/jottingsControl.module.css

@@ -3,6 +3,7 @@
 }
 
 .labelList, .ownNoteList, .ownTaskList {
+	display: none;
 	grid-row: 2;
 	grid-column: 2 / -1;
 }

components/JottingsControls/labelsControl.js

@@ -13,7 +13,7 @@ import { useWindowSize } from "../../libs/view";
  * @param props.notesState[0] The value of notes
  * @param props.notesState[1] The Dispatch to set a new value to the notes state
  */
-export default function LabelsControl({labelsState, active=true}) {
+export default function LabelsControl({labelsState, active}) {
     const [labels, setLabels] = labelsState;
 
 	return (

components/JottingsControls/notesControl.js

@@ -12,7 +12,7 @@ import jottingsControl from "./jottingsControl.module.css";
  * @param props.notesState[0] The value of notes
  * @param props.notesState[1] The Dispatch to set a new value to the notes state
  */
-export default function NotesControl({notesState, active=true}) {
+export default function NotesControl({notesState, active}) {
     const [notes, setNotes] = notesState;
 
 	return (

components/MobileNav/MobileNav.js

@@ -4,9 +4,9 @@ import Link from "next/link";
 export default function MobileNav() {
     return (
         <nav className={mobileNav.mobileNav}>
+            <Link href="#labels">Labels</Link>
             <Link href="#notes">Notes</Link>
             <Link href="#tasks">Tasks</Link>
-            <Link href="#labels">Labels</Link>
         </nav>
     );
 }

components/MobileNav/mobileNav.module.css

@@ -9,7 +9,7 @@
     padding: 1em;
 }
 
-@media screen and (min-width: 830px) {
+@media screen and (min-width: 800px) {
     .mobileNav {
         display: none;
     }

pages/Home/home.module.css

@@ -9,7 +9,7 @@
 	}
 }
 
-@media only screen and (min-width: 830px) {
+@media only screen and (min-width: 800px) {
 	.main {
 		grid-template-rows: auto 100px repeat(2, 200px) 30px;
 		grid-template-columns: 255px repeat(6, 175px);