Migrate Provider and Mutation components to latest ReasonReact. (#58)

bsconfig.json

@@ -1,8 +1,9 @@
 {
   "name": "reason-urql",
   "reason": {
-    "react-jsx": 2
+    "react-jsx": 3
   },
+  "bsc-flags": ["-bs-super-errors"],
   "sources": [
     {
       "dir": "src",

examples/3-mutation/bsconfig.json

@@ -1,8 +1,9 @@
 {
   "name": "3-mutation",
   "reason": {
-    "react-jsx": 2
+    "react-jsx": 3
   },
+  "bsc-flags": ["-bs-super-errors"],
   "sources": [
     {
       "dir": "src",
@@ -11,7 +12,7 @@
   ],
   "package-specs": [
     {
-      "module": "commonjs",
+      "module": "es6",
       "in-source": true
     }
   ],

examples/3-mutation/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "bs-css": "^8.0.2",
-    "reason-react": ">=0.3.4",
+    "reason-react": "0.7.0",
     "reason-urql": "link:../../"
   },
   "devDependencies": {

examples/3-mutation/src/Dog.re

@@ -1,55 +1,104 @@
-module Styles = {
-  open Css;
+open ReasonUrql;
 
-  type colors = {halo: string};
+module Mutations = {
+  let likeDog = {|
+    mutation likeDog($key: ID!) {
+      likeDog(key: $key) {
+        likes
+      }
+    }
+  |};
 
-  let colors = {halo: "222"};
+  let patDog = {|
+    mutation patDog($key: ID!) {
+      patDog(key: $key) {
+        pats
+      }
+    }
+  |};
 
-  let wrapper =
-    style([
-      justifySelf(center),
-      fontFamily("'Space Mono', monospace"),
-      padding(px(12)),
-    ]);
+  let treatDog = {|
+    mutation treatDog($key: ID!) {
+      treatDog(key: $key) {
+        treats
+      }
+    }
+  |};
 
-  let image =
-    style([
-      height(px(200)),
-      width(px(200)),
-      unsafe("object-fit", "cover"),
-      borderRadius(pct(50.)),
-      border(px(3), solid, hex(colors.halo)),
-      boxShadows([
-        boxShadow(~x=zero, ~y=zero, ~spread=px(3), rgba(0, 0, 0, 0.5)),
-        boxShadow(~x=zero, ~y=zero, ~spread=px(6), rgba(0, 0, 0, 0.25)),
-      ]),
-    ]);
-
-  let title = style([fontSize(rem(1.)), margin(px(0))]);
+  let bellyscratchDog = {|
+    mutation bellyscratchDog($key: ID!) {
+      bellyscratchDog(key: $key) {
+        bellyscratches
+      }
+    }
+  |};
 };
 
-let str = ReasonReact.string;
-
-let component = ReasonReact.statelessComponent("Dog");
-
+[@react.component]
 let make =
     (
+      ~id: string,
       ~name: string,
       ~imageUrl: string,
       ~likes: int,
       ~pats: int,
       ~treats: int,
       ~bellyscratches: int,
-      ~className: string,
-      _children,
+      ~description: string,
     ) => {
-  ...component,
-  render: _self => {
-    <div className={Css.merge([Styles.wrapper, className])}>
-      <img src=imageUrl alt=name className=Styles.image />
-      <h3 className=Styles.title>
-        {j|$name 👍$likes ✋$pats 🍖$treats 🐾$bellyscratches|j}->str
-      </h3>
-    </div>;
-  },
+  let payload =
+    React.useMemo1(
+      () => {
+        let variables = Js.Dict.empty();
+        Js.Dict.set(variables, "key", Js.Json.string(id));
+        Js.Json.object_(variables);
+      },
+      [|id|],
+    );
+
+  let (_, executeMutation) = Hooks.useMutation(~query=Mutations.treatDog);
+
+  <div className=DogStyles.container>
+    <img src=imageUrl alt=name className=DogStyles.image />
+    <h3 className=DogStyles.title> {j|$name|j}->React.string </h3>
+    <div className=DogStyles.buttons>
+      <Mutation query=Mutations.likeDog>
+        ...{({executeMutation}) =>
+          <EmojiButton
+            emoji={j|👍|j}
+            count={string_of_int(likes)}
+            hex="48a9dc"
+            onClick={_ => executeMutation(Some(payload)) |> ignore}
+          />
+        }
+      </Mutation>
+      <Mutation query=Mutations.patDog>
+        ...{({executeMutation}) =>
+          <EmojiButton
+            emoji={j|✋|j}
+            count={string_of_int(pats)}
+            hex="db4d3f"
+            onClick={_ => executeMutation(Some(payload)) |> ignore}
+          />
+        }
+      </Mutation>
+      <EmojiButton
+        emoji={j|🍖|j}
+        count={string_of_int(treats)}
+        hex="7b16ff"
+        onClick={_ => executeMutation(Some(payload)) |> ignore}
+      />
+      <Mutation query=Mutations.bellyscratchDog>
+        ...{({executeMutation}) =>
+          <EmojiButton
+            emoji={j|🐾|j}
+            count={string_of_int(bellyscratches)}
+            hex="1bda2a"
+            onClick={_ => executeMutation(Some(payload)) |> ignore}
+          />
+        }
+      </Mutation>
+    </div>
+    <div> description->React.string </div>
+  </div>;
 };

examples/3-mutation/src/DogStyles.re

@@ -0,0 +1,25 @@
+open Css;
+
+let container =
+  style([
+    justifySelf(center),
+    fontFamily("'Space Mono', monospace"),
+    padding(px(12)),
+  ]);
+
+let image =
+  style([
+    height(px(200)),
+    width(px(200)),
+    unsafe("object-fit", "cover"),
+    borderRadius(pct(50.)),
+    border(px(3), solid, hex("222")),
+    boxShadows([
+      boxShadow(~x=zero, ~y=zero, ~spread=px(3), rgba(0, 0, 0, 0.5)),
+      boxShadow(~x=zero, ~y=zero, ~spread=px(6), rgba(0, 0, 0, 0.25)),
+    ]),
+  ]);
+
+let title = style([fontSize(rem(1.)), margin(px(0))]);
+
+let buttons = style([display(flexBox), alignItems(center)]);

examples/3-mutation/src/EmojiButton.re

@@ -0,0 +1,13 @@
+[@react.component]
+let make =
+    (
+      ~emoji: string,
+      ~count: string,
+      ~hex: string,
+      ~onClick: ReactEvent.Mouse.t => unit,
+    ) => {
+  <button className={hex |> EmojiButtonStyles.emojiButton} onClick>
+    <span className=EmojiButtonStyles.text> count->React.string </span>
+    <span className=EmojiButtonStyles.text> emoji->React.string </span>
+  </button>;
+};

examples/3-mutation/src/EmojiButtonStyles.re

@@ -0,0 +1,17 @@
+open Css;
+
+let emojiButton = color =>
+  style([
+    borderRadius(pct(50.)),
+    padding(px(5)),
+    border(px(2), solid, hex(color)),
+    display(flexBox),
+    alignItems(center),
+    justifyContent(spaceEvenly),
+    margin(px(5)),
+    selector(":hover", [backgroundColor(hex(color)), cursor(`pointer)]),
+    selector(":first-child", [marginLeft(px(0))]),
+  ]);
+
+let text =
+  style([paddingLeft(px(2)), paddingRight(px(2)), fontSize(rem(1.))]);