Add rescript example (#442)

* Add rescript build configurations

* Create rescript page components

* Add rescript deps

Author: yassa-tamer

.gitignore

@@ -47,3 +47,5 @@ client/app/libs/i18n/default.js
 /yarn-error.log
 yarn-debug.log*
 .yarn-integrity
+
+lib/bs

Procfile.dev

@@ -1,5 +1,6 @@
 # Procfile for development using HMR
 # You can run these commands in separate shells
+rescript: yarn res:dev
 redis: redis-server
 rails: bundle exec rails s -p 3000
 wp-client: HMR=true RAILS_ENV=development NODE_ENV=development bin/shakapacker-dev-server

app/controllers/pages_controller.rb

@@ -36,6 +36,8 @@ def no_router
 
   def simple; end
 
+  def rescript; end
+
   private
 
   def set_comments

app/views/pages/rescript.html.erb

@@ -0,0 +1 @@
+<%= react_component "RescriptPage" %>

bsconfig.json

@@ -0,0 +1,30 @@
+{
+  "name": "react-webpack-rails-tutorial",
+  "sources": [
+    {
+      "dir": "client/app/bundles/comments/src",
+      "subdirs": true
+    }
+  ],
+  "package-specs": [
+    {
+      "module": "es6",
+      "in-source": true
+    }
+  ],
+  "bsc-flags": [
+    "-bs-super-errors",
+    "-open JsonCombinators"
+  ],
+  "suffix": ".bs.mjs",
+  "bs-dependencies": [
+    "@rescript/react",
+    "@rescript/core",
+    "@glennsl/rescript-fetch",
+    "@glennsl/rescript-json-combinators"
+  ],
+  "jsx": {
+  "version": 4,
+    "mode": "automatic"
+  }
+}

client/app/bundles/comments/components/NavigationBar/NavigationBar.jsx

@@ -41,6 +41,9 @@ function NavigationBar(props) {
             >
               <a href={paths.ROUTER_PATH}>React Router Demo</a>
             </li>
+            <li className={classNames({ active: pathname === paths.RESCRIPT_PATH })}>
+              <a href={paths.RESCRIPT_PATH}>Rescript Demo</a>
+            </li>
             <li className={classNames({ active: pathname === paths.NO_ROUTER_PATH })}>
               <a href={paths.NO_ROUTER_PATH}>React Demo</a>
             </li>

client/app/bundles/comments/constants/paths.js

@@ -1,6 +1,7 @@
 export const ROUTER_PATH = '/';
 export const REACT_ROUTER_PATH = '/react-router';
 export const NO_ROUTER_PATH = '/no-router';
+export const RESCRIPT_PATH = '/rescript';
 export const SIMPLE_REACT_PATH = '/simple';
 export const STIMULUS_PATH = '/stimulus';
 export const RAILS_PATH = '/comments';

client/app/bundles/comments/src/Actions/Actions.bs.mjs

@@ -0,0 +1,51 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as Curry from "rescript/lib/es6/curry.js";
+import * as Axios from "axios";
+import * as Js_exn from "rescript/lib/es6/js_exn.js";
+import ReactOnRails from "react-on-rails";
+import * as Json$JsonCombinators from "@glennsl/rescript-json-combinators/src/Json.bs.mjs";
+import * as Json_Decode$JsonCombinators from "@glennsl/rescript-json-combinators/src/Json_Decode.bs.mjs";
+
+async function fetchComments(param) {
+  var response = await fetch("comments.json");
+  var jsonRes = await response.json();
+  var jsonComment = Json_Decode$JsonCombinators.object(function (field) {
+        return {
+                author: field.required("author", Json_Decode$JsonCombinators.string),
+                text: field.required("text", Json_Decode$JsonCombinators.string),
+                id: field.required("id", Json_Decode$JsonCombinators.$$int)
+              };
+      });
+  var jsonComments = Json_Decode$JsonCombinators.object(function (field) {
+        return {
+                comments: field.required("comments", Json_Decode$JsonCombinators.array(jsonComment))
+              };
+      });
+  var decodedRes = Json$JsonCombinators.decode(jsonRes, jsonComments);
+  if (decodedRes.TAG === /* Ok */0) {
+    return decodedRes._0.comments;
+  } else {
+    return Js_exn.raiseError(decodedRes._0);
+  }
+}
+
+async function storeComment(author, text) {
+  await Axios.post("comments.json", {
+        author: author,
+        text: text
+      }, {
+        responseType: "json",
+        headers: Curry._1(ReactOnRails.default.authenticityHeaders, undefined)
+      });
+}
+
+var Api = {
+  fetchComments: fetchComments,
+  storeComment: storeComment
+};
+
+export {
+  Api ,
+}
+/* axios Not a pure module */

client/app/bundles/comments/src/Actions/Actions.res

@@ -0,0 +1,91 @@
+// ReactOnRails binding
+type rorDefault = {
+  authenticityHeaders: unit => {.} 
+}
+type rorModule = {
+  default: rorDefault
+}
+@module("react-on-rails") external ror: rorModule = "default";
+
+type storeCommentData = {
+  author: string,
+  text: string
+}
+
+// axios binding
+type reqOptions = {
+  responseType: string,
+  headers: {.}
+}
+@module("axios") external post: (string, storeCommentData, reqOptions) => promise<unit> = "post";
+
+module Api = {
+  type comment = {
+    author: string,
+    text: string,
+    id: int
+  };
+  
+  type comments = array<comment>
+
+  type commentsRes = {
+    comments: comments
+  }
+
+  let fetchComments = async (): comments => {
+    open Json.Decode;
+
+    let response = await Fetch.get("comments.json")
+    let jsonRes = await response->Fetch.Response.json
+    
+    let jsonComment = Json.Decode.object(field => {
+      author: field.required(. "author", string),
+      text: field.required(. "text", string),
+      id: field.required(. "id", int)
+    })
+
+    let jsonComments = Json.Decode.object(field => {
+      comments: field.required(. "comments", array(jsonComment)),
+    })
+
+    switch jsonRes->Json.decode(jsonComments) {
+      | Ok(decodedRes) => decodedRes.comments
+      | Error(err) => Js.Exn.raiseError(err)
+    }
+  }
+
+  let storeComment = async (author: string, text: string) => {
+    let _ = await post(
+      "comments.json",
+      {
+        author: author,
+        text: text
+      },
+      {
+        responseType: "json",
+        headers:ror.default.authenticityHeaders()
+      }
+    )
+    
+    
+    // setIsSaving(_ => true)
+    // try {
+    //   let _ = await post(
+    //     "comments.json",
+    //     {
+    //       author: author,
+    //       text: text
+    //     },
+    //     {
+    //       responseType: "json",
+    //       headers:ror.default.authenticityHeaders()
+    //     }
+    //   )
+      // setIsSaving(_ => false)
+      // let comments = await fetchComments()
+      // setComments(_ => comments)
+    // } catch {
+    //   | _ => setError(_ => true)
+    // }
+  }
+}