Merge pull request #92 from GoogleChromeLabs/news-nuxt-routes

News Sites - dispatch a custom event on route change

apps/news-site/news-site-next-app-router/src/partials/layout/layout.jsx

@@ -18,6 +18,13 @@ export default function Layout({ children, id }) {
     const { alerts, links, config } = useDataContext();
     const hero = config?.ads?.[id].hero;
 
+    useEffect(() => {
+        const url = location.pathname;
+        requestIdleCallback(() => {
+            window.dispatchEvent(new CustomEvent("route-change-complete", { detail: { url } }));
+        });
+    }, [location.pathname]);
+
     useEffect(() => {
         setShowMessage(alerts[id].message);
     }, [alerts, id]);

apps/news-site/news-site-next-pages-router/src/partials/layout/layout.jsx

@@ -12,23 +12,18 @@ import { useDataContext } from "@/context/data-context";
 import { Message } from "@/components/molecules/message/message";
 
 import styles from "news-site-css/dist/layout.module.css";
-import { useRouter } from "next/router";
 
 export default function Layout({ children, id }) {
     const [showMessage, setShowMessage] = useState(false);
     const { alerts, links, config } = useDataContext();
-    const router = useRouter();
     const hero = config?.ads?.[id].hero;
 
-    function handleRouteChangeComplete(url) {
-        window.dispatchEvent(new CustomEvent("route-change-complete", { detail: { url } }));
-    }
-
     useEffect(() => {
-        router.events.on("routeChangeComplete", handleRouteChangeComplete);
-
-        return () => router.events.off("routeChangeComplete", handleRouteChangeComplete);
-    }, []);
+        const url = location.pathname;
+        requestIdleCallback(() => {
+            window.dispatchEvent(new CustomEvent("route-change-complete", { detail: { url } }));
+        });
+    }, [location.pathname]);
 
     useEffect(() => {
         setShowMessage(alerts[id].message);

apps/news-site/news-site-next/src/partials/layout/layout.jsx

@@ -12,23 +12,18 @@ import { useDataContext } from "@/context/data-context";
 import { Message } from "@/components/molecules/message/message";
 
 import styles from "news-site-css/dist/layout.module.css";
-import { useRouter } from "next/router";
 
 export default function Layout({ children, id }) {
     const [showMessage, setShowMessage] = useState(false);
     const { alerts, links, config } = useDataContext();
-    const router = useRouter();
     const hero = config?.ads?.[id].hero;
 
-    function handleRouteChangeComplete(url) {
-        window.dispatchEvent(new CustomEvent("route-change-complete", { detail: { url } }));
-    }
-
     useEffect(() => {
-        router.events.on("routeChangeComplete", handleRouteChangeComplete);
-
-        return () => router.events.off("routeChangeComplete", handleRouteChangeComplete);
-    }, []);
+        const url = location.hash;
+        requestIdleCallback(() => {
+            window.dispatchEvent(new CustomEvent("route-change-complete", { detail: { url } }));
+        });
+    }, [location.hash]);
 
     useEffect(() => {
         setShowMessage(alerts[id].message);

apps/news-site/news-site-nuxt-pages-router/partials/Layout.vue

@@ -10,13 +10,18 @@ const id = ref(route.name === "index" ? "home" : route.name);
 const data = inject("data");
 const { alerts, links } = data.value;
 
-function updateShowMessage() {
+function handleOnChange() {
+    const url = route.path;
+    requestIdleCallback(() => {
+        window.dispatchEvent(new CustomEvent("route-change-complete", { detail: { url } }));
+    });
+
     showMessage.value = alerts[id]?.message ? true : false;
     id.value = route.name === "index" ? "home" : route.name;
 }
 
-onMounted(updateShowMessage);
-watch(() => route.path, updateShowMessage);
+onMounted(handleOnChange);
+watch(() => route.path, handleOnChange);
 
 const closeMessage = () => {
     showMessage.value = false;

apps/news-site/news-site-nuxt/partials/Layout.vue

@@ -9,12 +9,17 @@ const route = useRoute();
 const data = inject("data");
 const { alerts, links } = data.value;
 
-function updateShowMessage() {
+function handleOnChange() {
+    const url = route.path;
+    requestIdleCallback(() => {
+        window.dispatchEvent(new CustomEvent("route-change-complete", { detail: { url } }));
+    });
+
     showMessage.value = alerts[route.name]?.message ? true : false;
 }
 
-onMounted(updateShowMessage);
-watch(() => route.path, updateShowMessage);
+onMounted(handleOnChange);
+watch(() => route.path, handleOnChange);
 
 const closeMessage = () => {
     showMessage.value = false;