From d848cd7fb390e97f1461e8074c4bdba33228eb18 Mon Sep 17 00:00:00 2001
From: Erick Bernal Amparano <erick082016@gmail.com>
Date: Mon, 29 Apr 2024 16:39:54 -0700
Subject: [PATCH 1/2] feat: add useRoute hook for Js

---
 src/App.jsx              | 17 +++++++++--------
 src/hooks/js/useRoute.js | 20 ++++++++++++++++++++
 2 files changed, 29 insertions(+), 8 deletions(-)
 create mode 100644 src/hooks/js/useRoute.js

diff --git a/src/App.jsx b/src/App.jsx
index ae9c212..f0dd502 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,19 +1,20 @@
-import { useBattery } from "./hooks/js/useBattery";
+import { useBattery } from "./hooks/js/useBattery"
 import { useIsTouchDevice } from "./hooks/js/useIsTouchDevice"
+import { useRoute } from "./hooks/js/useRoute"
 
 function AppJs() {
-  const battery = useBattery();
-  const isTouchDevice = useIsTouchDevice();
+  const battery = useBattery()
+  const isTouchDevice = useIsTouchDevice()
+  const route = useRoute()
 
   return (
     <div>
       <p>Battery level:{battery.level * 100}</p>
       <p>{battery.charging ? "Battery charging" : "Battery not charging"}</p>
-
-      {isTouchDevice ? 'It is a touch device' : 'It is not a touch device'}
-
+      <p>Current route: {route.route}</p>
+      {isTouchDevice ? "It is a touch device" : "It is not a touch device"}
     </div>
-  );
+  )
 }
 
-export default AppJs;
+export default AppJs
diff --git a/src/hooks/js/useRoute.js b/src/hooks/js/useRoute.js
new file mode 100644
index 0000000..0205395
--- /dev/null
+++ b/src/hooks/js/useRoute.js
@@ -0,0 +1,20 @@
+import { useEffect, useState } from "react"
+
+export const useRoute = () => {
+  const [route, setRoute] = useState(window.location.pathname)
+
+  useEffect(() => {
+    const handleRouteChange = () => setRoute(window.location.pathname)
+
+    window.addEventListener("popstate", handleRouteChange)
+
+    return () => window.removeEventListener("popstate", handleRouteChange)
+  }, [])
+
+  const navigate = to => {
+    window.history.pushState({}, "", to)
+    setRoute(to)
+  }
+
+  return { route, navigate }
+}

From 1d7b74eecdc42379bc0f023aff2628ae7f5bef0c Mon Sep 17 00:00:00 2001
From: Erick Bernal Amparano <erick082016@gmail.com>
Date: Mon, 29 Apr 2024 16:40:03 -0700
Subject: [PATCH 2/2] feat: add useRoute hook for Ts

---
 src/App.tsx              | 17 ++++++++++-------
 src/hooks/ts/useRoute.ts | 25 +++++++++++++++++++++++++
 2 files changed, 35 insertions(+), 7 deletions(-)
 create mode 100644 src/hooks/ts/useRoute.ts

diff --git a/src/App.tsx b/src/App.tsx
index 7afbdd7..bac615b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,18 +1,21 @@
-import { useBattery } from "./hooks/ts/useBattery";
-import { useIsTouchDevice } from "./hooks/ts/useIsTouchDevice";
+import { useBattery } from "./hooks/ts/useBattery"
+import { useIsTouchDevice } from "./hooks/ts/useIsTouchDevice"
+import { useRoute } from "./hooks/ts/useRoute"
 
 function AppTs() {
-  const battery = useBattery();
-  const isTouchDevice = useIsTouchDevice();
+  const battery = useBattery()
+  const isTouchDevice = useIsTouchDevice()
+  const route = useRoute()
 
   return (
     <div>
       <p>Battery level:{battery.level && battery.level * 100}</p>
       <p>{battery.charging ? "Battery charging" : "Battery not charging"}</p>
+      <p>Current route: {route.route}</p>
 
-      {isTouchDevice ? 'It is a touch device' : 'It is not a touch device'}
+      {isTouchDevice ? "It is a touch device" : "It is not a touch device"}
     </div>
-  );
+  )
 }
 
-export default AppTs;
+export default AppTs
diff --git a/src/hooks/ts/useRoute.ts b/src/hooks/ts/useRoute.ts
new file mode 100644
index 0000000..8f51691
--- /dev/null
+++ b/src/hooks/ts/useRoute.ts
@@ -0,0 +1,25 @@
+import { useEffect, useState } from "react"
+
+interface UseRouteOutput {
+  route: string
+  navigate: (newRoute: string) => void
+}
+
+export const useRoute = (): UseRouteOutput => {
+  const [route, setRoute] = useState<string>(window.location.pathname)
+
+  useEffect(() => {
+    const handlePopState = () => setRoute(window.location.pathname)
+
+    window.addEventListener("popstate", handlePopState)
+
+    return () => window.removeEventListener("popstate", handlePopState)
+  }, [])
+
+  const navigate = (newRoute: string) => {
+    window.history.pushState({}, "", newRoute)
+    setRoute(newRoute)
+  }
+
+  return { route, navigate }
+}