Testing redux-devtools extension

Author: ajnsit

Diff for: examples/Test/Hello.purs

@@ -3,22 +3,25 @@ module Test.Hello where
 import Prelude
 
 import Concur.Core (Widget)
+import Concur.Core.DevTools (connectDevTools, sendToDevTools)
 import Concur.React (HTML)
 import Concur.React.DOM (button, text, div')
 import Concur.React.Props (onClick)
-import Effect.Class (liftEffect)
-import Effect.Console (log)
 import Control.Monad.State.Class (get, put)
 import Control.Monad.State.Trans (StateT, runStateT)
 import Control.Monad.Trans.Class (lift)
 import Data.Tuple (snd)
+import Effect.Class (liftEffect)
+import Effect.Console (log)
 
 helloWidget :: Widget HTML Int
 helloWidget = snd <$> runStateT helloWidgetS 0
 
 helloWidgetS :: forall a. StateT Int (Widget HTML) a
 helloWidgetS = do
+  conn <- liftEffect connectDevTools
   count <- get
+  liftEffect $ sendToDevTools conn "Increment" count
   e <- lift $ div'
     [ but "Say Hello!"
     , but $ "For the " <> show count <> " time, hello sailor!"

Diff for: src/Concur/Core/DevTools.js

@@ -0,0 +1,38 @@
+"use strict";
+
+function hasDevTools() {
+  return (process.env.NODE_ENV === 'development' && window.__REDUX_DEVTOOLS_EXTENSION__);
+}
+
+exports.connectDevTools = function() {
+  if(hasDevTools()) {
+    return window.__REDUX_DEVTOOLS_EXTENSION__.connect();
+  } else {
+    // ??
+    return null;
+  }
+};
+
+exports.disconnectDevTools = function() {
+  if(hasDevTools()) {
+    return window.__REDUX_DEVTOOLS_EXTENSION__.disconnect();
+  } else {
+    // ??
+    return null;
+  }
+};
+
+exports.sendToDevTools = function(connection) {
+  return function(action) {
+    return function(state) {
+      return function() {
+        if(hasDevTools()) {
+          return window.__REDUX_DEVTOOLS_EXTENSION__.send(action, state);
+        } else {
+          // ??
+          return null;
+        }
+      };
+    };
+  };
+};

Diff for: src/Concur/Core/DevTools.purs

@@ -0,0 +1,9 @@
+module Concur.Core.DevTools where
+
+import Data.Unit (Unit)
+import Effect (Effect)
+
+data DevToolsConnection
+foreign import connectDevTools :: Effect DevToolsConnection
+foreign import disconnectDevTools :: Effect Unit
+foreign import sendToDevTools :: forall action state. DevToolsConnection -> action -> state -> Effect Unit