move counter to its own section

Author: jchavarri

client/src/App.re

@@ -58,6 +58,8 @@ module Handlers = {
           {(authors => <PageAuthorExcerpts authors />)}
         </Client.FetchRender>
       };
+
+    let counter = _req => <PageCounter />;
   };
   module Api = {
     // Api routes should never be loaded from React app, show the backing page in case it happens

server/lib/handlers.ml

@@ -95,6 +95,8 @@ module Handlers = struct
           page_with_payload
             (Shared.PageAuthorExcerpts_j.string_of_payload authors)
             [ Shared.PageAuthorExcerpts.make ~authors ]
+
+    let counter _req = respond' @@ basic_page [ Shared.PageCounter.make () ]
   end
 
   module Api = struct

shared/PageCounter.re

@@ -0,0 +1,27 @@
+open Bridge;
+
+[@react.component]
+let make = () => {
+  let (count, setCount) = React.useState(() => 0);
+  React.useEffect1(
+    () => {
+      let timer =
+        Js.Global.setTimeout(() => {setCount(count => count + 1)}, 1000);
+      Some(() => Js.Global.clearTimeout(timer));
+    },
+    [|count|],
+  );
+
+  <PageContainer>
+    <>
+      <h1 key="header"> {React.string("Counter")} </h1>
+      <p key="desc">
+        {React.string(
+           "The HTML (including counter value) comes first from the OCaml native server"
+           ++ " then is updated by React after hydration",
+         )}
+      </p>
+      <p key="counter"> {React.string(string_of_int(count))} </p>
+    </>
+  </PageContainer>;
+};

shared/PageExcerpts.re

@@ -2,25 +2,8 @@ open Bridge;
 
 [@react.component]
 let make = (~excerpts: list(Excerpt_t.t)) => {
-  let (count, setCount) = React.useState(() => 0);
-  React.useEffect1(
-    () => {
-      let timer =
-        Js.Global.setTimeout(() => {setCount(count => count + 1)}, 1000);
-      Some(() => Js.Global.clearTimeout(timer));
-    },
-    [|count|],
-  );
-
   let children = [
     <h1 key="header"> {React.string("Excerpts")} </h1>,
-    <p key="desc">
-      {React.string(
-         "The HTML (including counter value) comes first from the OCaml native server"
-         ++ " then is updated by React after hydration",
-       )}
-    </p>,
-    <p key="counter"> {React.string(string_of_int(count))} </p>,
     ...List.mapi(
          (_i, e) => <Excerpt key={string_of_int(_i)} e />,
          excerpts,

shared/PageWelcome.re

@@ -20,7 +20,7 @@ let make = () => {
        |> React.list}
     </Dom.Ul>
     <h2> {React.string("Excerpts")} </h2>
-    <Dom.Ul cls="list-disc list-inside">
+    <Dom.Ul cls="list-disc list-inside mb-8">
       {List.mapi(
          (_i, x) => <li key={string_of_int(_i)}> x </li>,
          [
@@ -33,5 +33,16 @@ let make = () => {
        )
        |> React.list}
     </Dom.Ul>
+    <h2> {React.string("Other examples")} </h2>
+    <Dom.Ul cls="list-disc list-inside mb-8">
+      <>
+        <li>
+          <Link
+            url={Routes.sprintf(Router.PageRoutes.counter())}
+            txt="Counter"
+          />
+        </li>
+      </>
+    </Dom.Ul>
   </PageContainer>;
 };

shared/router.ml

@@ -19,6 +19,8 @@ module type T = sig
     val excerpts_by_author : string -> request -> response
 
     val authors_with_excerpts : request -> response
+
+    val counter : request -> response
   end
 
   module Api : sig
@@ -30,7 +32,11 @@ module type T = sig
   end
 end
 
-module PageRoutes = struct let authors_with_excerpts () = s "authors" /? nil end
+module PageRoutes = struct
+  let authors_with_excerpts () = s "authors" /? nil
+
+  let counter () = s "counter" /? nil
+end
 
 module ApiRoutes = struct
   let authors_with_excerpts () = s "api" / s "authors" /? nil
@@ -52,6 +58,7 @@ module Make (Handlers : T) = struct
       ( `GET,
         (s "excerpts" / s "author" / str /? nil) @--> Pages.excerpts_by_author );
       `GET, PageRoutes.authors_with_excerpts () @--> Pages.authors_with_excerpts;
+      `GET, PageRoutes.counter () @--> Pages.counter;
       `GET, ApiRoutes.authors_with_excerpts () @--> Api.authors_with_excerpts;
       `GET, ApiRoutes.excerpts_by_author () @--> Api.excerpts_by_author;
       `POST, ApiRoutes.add_excerpt () @--> Api.add_excerpt;