Add ReadPrintFileContentsConcur (#250)

Author: Ebmtranceboy

README.md

@@ -135,6 +135,7 @@ Running a web-compatible recipe:
 |   | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/PositionsHalogenHooks/src/Main.purs)) | [PositionsHalogenHooks](recipes/PositionsHalogenHooks) | A Halogen port of the ["Random - Positions" Elm Example](https://elm-lang.org/examples/positions). |
 |   | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/PositionsReactHooks/src/Main.purs)) | [PositionsReactHooks](recipes/PositionsReactHooks) | A React port of the ["Random - Positions" Elm Example](https://elm-lang.org/examples/positions). |
 | :heavy_check_mark: |   | [RandomNumberGameNode](recipes/RandomNumberGameNode) | This recipe shows how to build a "guess the random number" game using a custom `AppM` monad via the `ReaderT` design pattern and `Aff`, storing the game state in a mutable variable via a `Ref`. |
+|   | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/ReadPrintFileContentsConcur/src/Main.purs) - [fixme](recipes/ReadPrintFileContentsConcur/tryFixMe.md)) | [ReadPrintFileContentsConcur](recipes/ReadPrintFileContentsConcur) | A Concur recipe to open a local file and display its content in a web page. |
 | :heavy_check_mark: |   | [ReadPrintFileContentsNode](recipes/ReadPrintFileContentsNode) | Reads a file's contents and prints it to the console. |
 |   | :heavy_check_mark: | [RoutingHashHalogenClassic](recipes/RoutingHashHalogenClassic) | This recipe shows how to use `purescript-routing` to do client-side hash-based routing in a Halogen-based single-page application (SPA). |
 |   | :heavy_check_mark: | [RoutingHashLog](recipes/RoutingHashLog) | This recipe demonstrates hash-based routing with `purescript-routing`. No web framework is used. |

recipes/ReadPrintFileContentsConcur/.gitignore

@@ -0,0 +1,15 @@
+/bower_components/
+/node_modules/
+/.pulp-cache/
+/output/
+/generated-docs/
+/.psc-package/
+/.psc*
+/.purs*
+/.psa*
+/.spago
+/.cache/
+/dist/
+/web-dist/
+/prod-dist/
+/prod/

recipes/ReadPrintFileContentsConcur/README.md

@@ -0,0 +1,15 @@
+# ReadPrintFileContentsConcur
+
+A Concur recipe to open a local file and display its content in a web page.
+
+## Expected Behavior:
+
+When the input button is clicked, and a text file is chosen, the content of the file should be displayed on the page.
+
+### Browser
+
+The browser will display the text content as a <pre> element.
+
+## NPM Dependencies
+* [react](https://www.npmjs.com/package/react)
+* [react-dom](https://www.npmjs.com/package/react-dom)

recipes/ReadPrintFileContentsConcur/spago.dhall

@@ -0,0 +1,6 @@
+{ name = "ReadPrintFileContentsConcur"
+, dependencies =
+  [ "concur-react", "console", "dom-filereader", "effect", "psci-support" ]
+, packages = ../../packages.dhall
+, sources = [ "recipes/ReadPrintFileContentsConcur/src/**/*.purs" ]
+}

recipes/ReadPrintFileContentsConcur/src/Main.purs

@@ -0,0 +1,49 @@
+module ReadPrintFileContentsConcur.Main where
+
+import Prelude
+
+import Concur.Core (Widget)
+import Concur.React (HTML)
+import Concur.React.DOM  as D
+import Concur.React.Props  as P
+import Concur.React.Run (runWidgetInDom)
+import Data.Maybe (Maybe(..), maybe)
+import Effect (Effect)
+import Effect.Aff.Class (liftAff)
+import Effect.Class (liftEffect)
+import Web.File.File (toBlob)
+import Web.File.FileList (FileList, item)
+import Web.File.FileReader.Aff (readAsText)
+import Web.HTML.HTMLInputElement (files, fromEventTarget)
+import React.SyntheticEvent (target, SyntheticEvent_, NativeEventTarget)
+import Unsafe.Coerce (unsafeCoerce)
+import Web.Event.Internal.Types (EventTarget)
+
+fileList :: EventTarget -> Effect (Maybe FileList)
+fileList tar = case fromEventTarget tar of
+  Just elem -> files elem
+  _         -> pure Nothing
+
+getContent :: forall t
+  . Widget HTML (SyntheticEvent_ ( target :: NativeEventTarget
+                                 | t
+                                 )
+                ) -> Widget HTML String
+getContent ev = do
+  nativeTarget <- liftEffect =<< target <$> ev
+  mfs <- liftEffect $ fileList $ unsafeCoerce nativeTarget
+  liftAff $ maybe (pure "") 
+                       readAsText
+                       $ (Just <<< toBlob) =<< item 0 =<< mfs
+
+textFileToScreenWidget ∷ Widget HTML String
+textFileToScreenWidget = do
+  content <- getContent $ D.input [ P._type "file"
+                                  , P.onChange
+                                  ]
+  D.pre' [D.text content]
+  
+main :: Effect Unit
+main = do
+  runWidgetInDom "app" textFileToScreenWidget 
+

recipes/ReadPrintFileContentsConcur/tryFixMe.md

@@ -0,0 +1,3 @@
+This file indicates that this recipe is temporarily broken in the Try Purescript web environment.
+
+Issue: https://github.com/JordanMartinez/purescript-cookbook/issues/204

recipes/ReadPrintFileContentsConcur/web/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <title>Read and Print File Contents with Concur</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script src="./index.js"></script>
+</body>
+
+</html>

recipes/ReadPrintFileContentsConcur/web/index.js

@@ -0,0 +1,2 @@
+"use strict";
+require("../../../output/ReadPrintFileContentsConcur.Main/index.js").main();