diff --git a/components/ProjectModal.tsx b/components/ProjectModal.tsx index a9302c3..008c6f3 100644 --- a/components/ProjectModal.tsx +++ b/components/ProjectModal.tsx @@ -1,5 +1,5 @@ import type { NextPage } from "next"; -import { useEffect, useRef, useState, isValidElement } from "react"; +import { useEffect, useRef, useState, isValidElement, useCallback } from "react"; import { useRouter } from "next/router"; import styles from "../styles/ProjectModal.module.css"; import type { Project, Diary } from "../lib/content/types"; @@ -56,15 +56,25 @@ const ProjectModal: NextPage = () => { }; const setVisible = async (visible: boolean) => { - if (!visible) router.replace("#", undefined, {shallow: true}); + if (!visible) { + if (window) window.removeEventListener("hashchange", contentFromHash); + router.replace("#", undefined, {shallow: true}); + } else { + if (window) window.addEventListener("hashchange", contentFromHash); + } _setVisible(visible); }; - const onContentReady = () => { + const contentFromHash = () => { + if (!window) return; const selected = window.location.hash.split("/"); if (selected.length > 2) cmdContext.executeCommand(`project ${selected[2]}${selected[3] ? ` ${selected[3]}` : ""}`); }; + const onContentReady = () => { + contentFromHash(); + }; + updateCmdCallbacks({ setModalVisible: setVisible, setModalContent, setModalHTML: setHTMLContent }); updateModalCallbacks({ setVisible, setContent: setModalContent, setHtml: setHTMLContent, onContentReady }); diff --git a/pages/index.tsx b/pages/index.tsx index 08c10b3..062de7a 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -8,6 +8,7 @@ import ProjectModal from "../components/ProjectModal"; import REPL from "../components/REPL"; import styles from "../styles/Home.module.css"; import type { ContentList } from "../lib/content/types"; +import { useRouter } from "next/router"; const Home: NextPage<{ buildTime: string }> = ({ buildTime }) => { const inputRef = useRef(null);