From 5914eccaaee90c54350df1b27999620cdabfdcab Mon Sep 17 00:00:00 2001
From: Manas Jayanth <3097018+ManasJayanth@users.noreply.github.com>
Date: Sun, 7 Jul 2024 15:34:56 +0530
Subject: [PATCH] Client side routing

---
 client/app.re      | 26 +++++++++++++++++++++++++-
 client/dune        |  2 +-
 lib/js/dune        |  4 +++-
 lib/native/Link.re | 11 +++++++++++
 lib/native/app.re  |  3 +++
 lib/native/dune    |  2 ++
 6 files changed, 45 insertions(+), 3 deletions(-)
 create mode 100644 lib/native/Link.re

diff --git a/client/app.re b/client/app.re
index 4b0c41c..3ad22fd 100644
--- a/client/app.re
+++ b/client/app.re
@@ -1,4 +1,28 @@
+let home = () => Routes.(nil); // '/'
+let hello = () => Routes.(s("hello") /? nil); // /hello
+
+let homeRoute = Routes.(home() @--> (() => print_endline("in home page")));
+let helloRoute = Routes.(hello() @--> (() => print_endline("in hello view")));
+
+let routes = Routes.one_of([homeRoute, helloRoute]);
+
+module Main = {
+  [@react.component]
+    let make = () => {
+      let target =
+        ReasonReactRouter.useUrl().path
+      |> String.concat("/");
+      switch (Routes.match'(routes, ~target)) {
+      | Routes.FullMatch(e) => e()
+      | Routes.MatchWithTrailingSlash(e) => e()
+      | Routes.NoMatch => ()
+      };
+      <Reason_india_website_js.App />;
+    }
+};
+
 switch (ReactDOM.querySelector("#root")) {
-| Some(el) => ignore @@ ReactDOM.Client.hydrateRoot(el, <Reason_india_website_js.App />)
+| Some(el) =>
+  ReactDOM.Client.createRoot(el)->ReactDOM.Client.render(<Main />)
 | None => ()
 };
diff --git a/client/dune b/client/dune
index 8c72561..8324997 100644
--- a/client/dune
+++ b/client/dune
@@ -1,7 +1,7 @@
 (melange.emit
  (alias client)
  (target app)
- (libraries melange reason_india_website_js reason-react)
+ (libraries routes melange reason_india_website_js reason-react)
  (preprocess
   (pps reason-react-ppx melange.ppx))
  (module_systems commonjs))
diff --git a/lib/js/dune b/lib/js/dune
index 6b526a2..e17bb87 100644
--- a/lib/js/dune
+++ b/lib/js/dune
@@ -3,6 +3,8 @@
  (modes melange)
  (libraries styled-ppx.css styled-ppx.emotion melange reason-react)
  (preprocess
-  (pps styled-ppx melange.ppx reason-react-ppx)))
+  (pps
+    server-reason-react.browser_ppx -js
+    styled-ppx melange.ppx reason-react-ppx)))
 
 (copy_files# "../native/*.re")
diff --git a/lib/native/Link.re b/lib/native/Link.re
new file mode 100644
index 0000000..9324d59
--- /dev/null
+++ b/lib/native/Link.re
@@ -0,0 +1,11 @@
+[@alert "-all--all+browser_only"];
+let%browser_only handleLinkAnchorOnClick = (href, e) => {
+  React.Event.Mouse.preventDefault(e);
+  ReasonReactRouter.push(href);
+};
+
+
+[@react.component]
+let make = (~href, ~children) => {
+  <a onClick={handleLinkAnchorOnClick(href)} href> {children} </a>;
+};
diff --git a/lib/native/app.re b/lib/native/app.re
index c6d7815..50f8c0b 100644
--- a/lib/native/app.re
+++ b/lib/native/app.re
@@ -16,9 +16,12 @@ module Container = [%styled.section
 
 [@react.component]
 let make = () => {
+  let hey = React.string("hey");
   let (count, setCount) = useState(0);
   <Container blah=`flex>
+    <Link href="/hello">{React.string("to hello")}</Link>
     <section className="centered">
+      <p>{switch(true) { | true => hey | false => React.string("false")}}</p>
       <section>
         {React.string(" clicked " ++ Int.to_string(count) ++ " times")}
       </section>
diff --git a/lib/native/dune b/lib/native/dune
index b12166d..f91cd1c 100644
--- a/lib/native/dune
+++ b/lib/native/dune
@@ -3,9 +3,11 @@
  (libraries
    styled-ppx.emotion_native
    styled-ppx.css_native
+   routes
    server-reason-react.react
    server-reason-react.reactDom)
  (preprocess
   (pps styled-ppx --native
+       server-reason-react.browser_ppx
        server-reason-react.melange_ppx
        server-reason-react.ppx)))