Improve type safety and inference of useSubscription.

teamwalnut · Jun 19, 2019 · 8a8c98d · 8a8c98d
1 parent a4f4514
commit 8a8c98d
Show file tree

Hide file tree

Showing 18 changed files with 238 additions and 395 deletions.
diff --git a/examples/5-subscription/bsconfig.json b/examples/5-subscription/bsconfig.json
@@ -3,6 +3,7 @@
   "reason": {
     "react-jsx": 3
   },
+  "bsc-flags": ["-bs-super-errors"],
   "sources": [
     {
       "dir": "src/app",

diff --git a/examples/5-subscription/package.json b/examples/5-subscription/package.json
@@ -8,6 +8,7 @@
   "scripts": {
     "start": "bsb -make-world -w",
     "clean": "bsb -clean-world",
+    "build": "bsb -make-world",
     "webpack": "webpack-dev-server --hot",
     "server": "node src/server/index.js",
     "start:demo": "run-p server webpack"

diff --git a/examples/5-subscription/public/index.html b/examples/5-subscription/public/index.html
@@ -8,14 +8,6 @@
         margin: 0;
       }
     </style>
-    <link
-      href="https://fonts.googleapis.com/css?family=PT+Serif+Caption"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Marck+Script"
-      rel="stylesheet"
-    />
   </head>
   <body>
     <div id="root"></div>

diff --git a/examples/5-subscription/src/app/App.re b/examples/5-subscription/src/app/App.re
@@ -1,31 +1,11 @@
-module Styles = {
-  open Css;
-
-  let page =
-    style([
-      display(flexBox),
-      flexDirection(column),
-      position(absolute),
-      top(px(0)),
-      bottom(px(0)),
-      left(px(0)),
-      right(px(0)),
-      padding(px(20)),
-    ]);
-
-  let side =
-    style([
-      display(flexBox),
-      flexDirection(column),
-      alignItems(center),
-      flexBasis(pct(50.)),
-      firstChild([justifyContent(flexEnd)]),
-    ]);
-};
-
 [@react.component]
 let make = () =>
-  <div className=Styles.page>
-    <section className=Styles.side> <Logo /> </section>
-    <section className=Styles.side> <Messages /> </section>
+  <div className=AppStyles.page>
+    <svg
+      viewBox="0 0 1000 1000"
+      height="1000"
+      width="1000"
+      style={ReactDOMRe.Style.make(~border="1px solid blue", ())}>
+      <Messages />
+    </svg>
   </div>;
diff --git a/examples/5-subscription/src/app/AppStyles.re b/examples/5-subscription/src/app/AppStyles.re
@@ -0,0 +1,14 @@
+open Css;
+
+let page =
+  style([
+    display(flexBox),
+    flexDirection(column),
+    alignItems(center),
+    justifyContent(center),
+    position(absolute),
+    top(px(0)),
+    bottom(px(0)),
+    left(px(0)),
+    right(px(0)),
+  ]);
diff --git a/examples/5-subscription/src/app/Logo.re b/examples/5-subscription/src/app/Logo.re
diff --git a/examples/5-subscription/src/app/Messages.re b/examples/5-subscription/src/app/Messages.re
@@ -1,80 +1,61 @@
 open ReasonUrql;
+open Hooks;
 
-module SubscribeHPMessages = [%graphql
+module SubscribeRandomInt = [%graphql
   {|
-  subscription subscribeMessages {
-    newMessage {
-      id
-      message
-    }
+  subscription subscribeNumbers {
+    newNumber @bsDecoder(fn: "string_of_int")
   }
 |}
 ];
 
-module Styles = {
-  open Css;
-
-  let wrapper =
-    style([
-      display(flexBox),
-      flexDirection(column),
-      alignItems(center),
-      justifyContent(center),
-    ]);
-
-  let fadeIn =
-    keyframes([
-      (0, [transform(translateY(px(20))), opacity(0.)]),
-      (100, [transform(translateY(px(0))), opacity(1.)]),
-    ]);
+let handler = (~prevSubscriptions, ~subscription) => {
+  Js.log2(prevSubscriptions, subscription);
+  switch (prevSubscriptions) {
+  | Some(subs) => Array.append(subs, [|subscription|])
+  | None => [|subscription|]
+  };
+};
 
-  let message =
-    style([
-      background(linearGradient(turn(0.25), [(0, red), (100, orange)])),
-      listStyle(none, `outside, none),
-      padding(px(5)),
-      margin(px(10)),
-      borderRadius(px(5)),
-      fontSize(rem(2.)),
-      fontFamily("'PT Serif Caption', serif"),
-      width(pct(50.)),
-      display(flexBox),
-      alignItems(center),
-      justifyContent(center),
-      animation(~duration=500, ~fillMode=both, fadeIn),
-    ]);
+[@bs.scope "Math"] [@bs.val] external random: unit => float = "random";
+[@bs.scope "Math"] [@bs.val] external floor: float => int = "floor";
+[@bs.send] external toString: (int, int) => string = "toString";
 
-  let gradientBlock =
-    style([
-      display(block),
-      padding(px(10)),
-      background(white),
-      borderRadius(px(5)),
-    ]);
+let getRandomInt = (max: int) => {
+  floor(random() *. float_of_int(max));
 };
 
-let str = React.string;
+let getRandomHex = () => {
+  let encode = random() *. float_of_int(16777215) |> floor;
+  let hex = encode->toString(16);
+  {j|#$hex|j};
+};
 
-let subscription = SubscribeHPMessages.make();
-let query = subscription##query;
+Js.log(getRandomHex());
 
 [@react.component]
-let make = () =>
-  <Subscription query variables=None handler=None>
-    ...{
-         ({response}) =>
-           switch (response) {
-           | Fetching => <div> "Loading"->str </div>
-           | Data(d) =>
-             <div className=Styles.wrapper>
-               <div key=d##newMessage##id className=Styles.message>
-                 <span className=Styles.gradientBlock>
-                   d##newMessage##message->str
-                 </span>
-               </div>
-             </div>
-           | Error(_e) => <div> "Error"->str </div>
-           | NotFound => <div> "Not Found"->str </div>
-           }
-       }
-  </Subscription>;
+let make = () => {
+  let {response} =
+    useSubscriptionWithHandler(SubscribeRandomInt.make(), handler);
+
+  switch (response) {
+  | Fetching => <text> "Loading"->React.string </text>
+  | Data(d) =>
+    Array.mapi(
+      (index, datum) =>
+        <circle
+          cx={
+            datum##newNumber;
+          }
+          cy={index !== 0 ? d[index - 1]##newNumber : datum##newNumber}
+          stroke={getRandomHex()}
+          fill="none"
+          r={getRandomInt(30) |> string_of_int}
+        />,
+      d,
+    )
+    |> React.array
+  | Error(_e) => <text> "Error"->React.string </text>
+  | NotFound => <text> "Not Found"->React.string </text>
+  };
+};
diff --git a/examples/5-subscription/src/server/schema.js b/examples/5-subscription/src/server/schema.js
@@ -66,8 +66,8 @@ function getRandomInt(max) {
   return Math.floor(Math.random() * Math.floor(max));
 }
 
-setInterval(() =>
+setInterval(() => {
   pubsub.publish("newNumber", {
     newNumber: getRandomInt(1000)
-  })
-);
+  });
+}, 2000);