promises and passing app state around

Author: davidpodhola

fable/library.fs

@@ -5,6 +5,7 @@ open Fable.Core
 open Fable.Core.JsInterop
 open Fable.Import
 open Types
+open Fable.PowerPack
 
 module Util =
     let load<'T> key =
@@ -21,11 +22,8 @@ module Impl =
         console.log(person)
         person.age
 
-    [<Emit("Module.ccall('callback', 'void', ['string'], [$0]);")>]
-    let callback(s:string) : unit = jsNative
-
-    let loadPerson() : unit = 
-        console.log( "loadPerson function called" )
-        { name="Jack Sparrow"; age=29; phones=[ "555 123 456"; "123 456 789" ] } |> toJson |> callback
-        
-    let render(person:Person) = UI.render(person)
+    let loadPerson() = 
+        promise {
+            console.log( "loadPerson function called" )
+            return { name="Jack Sparrow"; age=29; phones=[ "555 123 456"; "123 456 789" ] }
+        }

fable/library.fsproj

@@ -56,8 +56,8 @@
   </ItemGroup>
   <ItemGroup>
     <Compile Include="types.fs" />
-    <Compile Include="ui.fs" />
     <Compile Include="library.fs" />
+    <Compile Include="ui.fs" />
   </ItemGroup>
   <Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" Condition="Exists('$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props')" />
   <Choose>

fable/types.fs

@@ -25,20 +25,8 @@ module Types =
     type [<Pojo>] Props = {  
         state : IState
     }
-        with 
-            override this.ToString() =
-                toJson this    
-
-            member this.toString() =
-                toJson this
 
     type [<Pojo>] State = {  
         state : IState
         person : Person Option
     }        
-        with 
-            override this.ToString() =
-                toJson this    
-
-            member this.toString() =
-                toJson this

fable/ui.fs

@@ -5,8 +5,13 @@ open Fable.Core
 open Fable.Core.JsInterop
 open Fable.Import
 open Types
+open Library
+open Fable.PowerPack
 
 module UI =
+
+    let run(what:JS.Promise<'T>) = what |> Promise.iter( ignore )
+
     module R = Fable.Helpers.React
     open R.Props
 
@@ -20,7 +25,15 @@ module UI =
         member this.componentDidMount () =
             let processedState : State = processState(this.state |> toJson) |> ofJson
             printfn "New state %A" processedState
-            this.setState( processedState )            
+            this.setState( processedState )
+
+            match processedState.state with
+            | IState.Loading -> 
+                promise {
+                    let! person = Library.Impl.loadPerson()
+                    this.setState( { state=IState.Loaded; person=Some(person) } )
+                } |> run
+            | _ -> ()
 
         member this.render () =
             printfn "Will render state %A" this.state
@@ -56,8 +69,8 @@ module UI =
             let content = [header;personEdit;footer] |> List.concat
             R.div [] content
 
-    let render(person:Person) = 
+    let render() = 
         ReactDom.render(
             R.com<Form,Props, State> {state=IState.Initial} [],
             Browser.document.getElementsByClassName("app").[0]
-        )
+        )        

src/main.rs

@@ -60,13 +60,8 @@ struct State {
     person : Option<Person>
 }
 
-fn render_ui(person:&Person) -> Option<String> {
-    Some(eval_s(&format!("FableLib.Impl.render({})", json!(person).to_string())))
-}
-
-
-fn load_person() -> () {
-    eval_s("FableLib.Impl.loadPerson()");
+fn render_ui() -> String {
+    eval_s("FableLib.render()")
 }
 
 fn parse_person(data : &str) -> Person {
@@ -88,24 +83,17 @@ fn convert_from_js( data : *mut c_char ) -> String {
     }    
 }
 
-#[no_mangle]
-pub fn callback( data : *mut c_char ) -> () {
-    let received = convert_from_js(data);
-    println!( "Called back from Fable with {:?}", received );
-    let person = Some(received).map( |p| parse_person(&p) ).unwrap();
-    println!("loaded {:?}; the person'name is {}",person, person.name);
-    println!("Fable reports the age to be {}", get_sent_person_age(&person) );
-    render_ui( &person );
-}
-
 #[no_mangle]
 pub fn process_state( data : *mut c_char ) -> *mut c_char {
     let received = convert_from_js(data);
     println!( "Processing...{:?}", received );
     let state : State = serde_json::from_str(&received).unwrap();
     println!( "Got {:?}", state );
     let result = 
-        if state.state == STATE_INITIAL { State { state : STATE_LOADING, .. state } }
+        if state.state == STATE_INITIAL { 
+            println!("Loading person from Fable...");    
+            State { state : STATE_LOADING, .. state } 
+        }
         else { state };
     println!( "Will return {:?}", result );
     CString::new(json!(result).to_string()).unwrap().into_raw()
@@ -114,8 +102,7 @@ pub fn process_state( data : *mut c_char ) -> *mut c_char {
 #[no_mangle]
 pub fn app() {
     println!("Rust code in main() started...");
-    println!("Loading person from Fable...");
-    load_person();
+    render_ui();
     println!("... and we are done!");
 }
 

webpack.config.js

@@ -3,7 +3,7 @@ var webpack = require("webpack");
 
 var cfg = {
   devtool: "source-map",
-  entry: "./temp/library.js",
+  entry: "./temp/ui.js",
   output: {
     path: path.join(__dirname, "public"),
     filename: "bundle.js",