Kh/update to reason react 4

bsconfig.json

@@ -1,19 +1,20 @@
 {
   "name": "reason-scripts",
-  "sources": [
-    "src"
-  ],
+  "sources": ["src"],
   "bs-dependencies": [
     "reason-react",
-    "bs-jest",
+    "@glennsl/bs-jest",
     "bs-fetch", // add this
-    "bs-json" // and this too
+    "@glennsl/bs-json" // and this too
   ],
   "reason": {
     "react-jsx": 2
   },
-  "bsc-flags": [
-    "-bs-super-errors"
-  ],
-  "refmt": 3
+  "bsc-flags": ["-bs-super-errors"],
+  "refmt": 3,
+  "package-specs": {
+    "module": "es6",
+    "in-source": true
+  },
+  "suffix": ".bs.js"
 }

package.json

@@ -3,11 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@glennsl/bs-json": "^2.0.0",
     "bs-fetch": "github:buckletypes/bs-fetch",
     "bs-json": "github:buckletypes/bs-json",
     "react": "^16.1.0",
     "react-dom": "^16.1.0",
-    "reason-scripts": "^0.7.0"
+    "reason-scripts": "^0.9.0"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -17,7 +18,7 @@
     "prepare": "npm link bs-platform"
   },
   "devDependencies": {
-    "bs-jest": "^0.2.0",
-    "reason-react": "^0.2.4"
+    "@glennsl/bs-jest": "^0.4.2",
+    "reason-react": "^0.4.2"
   }
 }

src/App.re

@@ -0,0 +1,58 @@
+type state = {repoData: option(array(RepoData.repo))};
+
+type action =
+  | FetchRepos
+  | ReposFailedToFetch(string)
+  | Loaded(array(RepoData.repo));
+
+let component = ReasonReact.reducerComponent("App");
+
+let make = _children => {
+  ...component,
+  initialState: () => {repoData: None},
+  reducer: (action, _state) =>
+    switch (action) {
+    | FetchRepos =>
+      ReasonReact.SideEffects(
+        (
+          self =>
+            RepoData.fetchRepos()
+            |> Js.Promise.then_(repoData => {
+                 self.send(Loaded(repoData));
+                 Js.Promise.resolve();
+               })
+            |> Js.Promise.catch(err =>
+                 Js.Promise.resolve(
+                   self.send(
+                     ReposFailedToFetch(
+                       "An error occurred: " ++ Js.String.make(err),
+                     ),
+                   ),
+                 )
+               )
+            |> ignore
+        ),
+      )
+    | Loaded(loadedRepo) => ReasonReact.Update({repoData: Some(loadedRepo)})
+    | ReposFailedToFetch(error) =>
+      ReasonReact.SideEffects((_self => Js.log(error)))
+    },
+  didMount: self => self.send(FetchRepos),
+  render: self => {
+    let repoItems =
+      switch (self.state.repoData) {
+      | Some(repos) =>
+        ReasonReact.array(
+          Array.map(
+            (repo: RepoData.repo) => <RepoItem key=repo.full_name repo />,
+            repos,
+          ),
+        )
+      | None => ReasonReact.string("Loading")
+      };
+    <div className="App">
+      <h1> (ReasonReact.string("Reason Projects")) </h1>
+      repoItems
+    </div>;
+  },
+};

src/RepoData.re

@@ -1,15 +1,14 @@
-
 type repo = {
   full_name: string,
   stargazers_count: int,
-  html_url: string
+  html_url: string,
 };
 
-let parseRepoJson = (json: Js.Json.t): repo => 
+let parseRepoJson = json =>
   Json.Decode.{
     full_name: field("full_name", string, json),
     stargazers_count: field("stargazers_count", int, json),
-    html_url: field("html_url", string, json)
+    html_url: field("html_url", string, json),
   };
 
 let parseReposResponseJson = json =>
@@ -20,9 +19,8 @@ let reposUrl = "https://api.github.com/search/repositories?q=topic%3Areasonml&ty
 let fetchRepos = () =>
   Js.Promise.(
     Bs_fetch.fetch(reposUrl)
-      |> then_(Bs_fetch.Response.text)
-      |> then_(
-        jsonText =>
-          resolve(parseReposResponseJson(Js.Json.parseExn(jsonText)))
-      )
+    |> then_(Bs_fetch.Response.text)
+    |> then_(jsonText =>
+         resolve(parseReposResponseJson(Js.Json.parseExn(jsonText)))
+       )
   );

src/RepoItem.re

@@ -1,13 +1,12 @@
 let component = ReasonReact.statelessComponent("RepoItem");
 
-let make = (~repo: RepoData.repo, _children) =>
-  {
-    ...component,
-    render: _self =>
-      <div className="RepoItem">
-        <a href=repo.html_url>
-          <h2>{ReasonReact.stringToElement(repo.full_name)}</h2>
-        </a>
-        {ReasonReact.stringToElement(string_of_int(repo.stargazers_count) ++ " stars")}
-      </div>
-  };
+let make = (~repo: RepoData.repo, _children) => {
+  ...component,
+  render: _self =>
+    <div className="RepoItem">
+      <a href=repo.html_url>
+        <h2> (ReasonReact.string(repo.full_name)) </h2>
+      </a>
+      (ReasonReact.string(string_of_int(repo.stargazers_count) ++ " stars"))
+    </div>,
+};