Merge pull request #88 from vankeisb/feature/fix-model-undef-check

Fix model undef check, update README

Author: vankeisb

doc/quickstart.md

@@ -12,19 +12,19 @@ You'll need to setup the project before you get to actual coding.
 You need a React project in order to start using tea-cup.
 In order to keep things simple, we'll use the infamous `create-react-app` :
 
-    npx create-react-app my-app --typescript
+    yarn create react-app my-app --template typescript
     cd my-app
 
 ### Add tea-cup to your dependencies
 
-    npm install react-tea-cup --save
+    yarn add -D react-tea-cup tea-cup-core
 
 ### Run the dev server
 
 We'll start the dev server, and let it recompile everything 
 when we save files :
 
-    npm start
+    yarn start
 
 This should also open your default browser to http://localhost:3000
 and show you the default generated app.
@@ -37,7 +37,8 @@ favourite editor, and replace its contents with this :
 ```typescript jsx
 import React from 'react';
 // bare minimum to use tea-cup
-import { Dispatcher, Cmd, Program, Sub } from 'react-tea-cup';
+import { Program } from 'react-tea-cup';
+import { Cmd, Dispatcher, Sub } from 'tea-cup-core';
 
 // a Model can be anything. Here, it's simply a number...
 type Model = number;
@@ -115,185 +116,186 @@ and Cmds.
 Replace the contents of `App.tsx` with the following, code :
 
 ```typescript jsx
-import {Http, Cmd, Task, Result, Dispatcher, Decode, Decoder, Maybe, nothing, Sub, Program, just} from "react-tea-cup";
+import {Http, Cmd, Task, Result, Dispatcher, Decode, Decoder, Maybe, nothing, Sub, just} from "tea-cup-core";
+import {Program} from "react-tea-cup";
 import * as React from 'react'
 
 
 interface Model {
-  // name of the repo
-  readonly repo: string
-  // use Maybe of Result to model state :
-  // * nothing : loading commits
-  // * just(error) : last fetch has failed, we have the error
-  // * just(commit[]) : last fetch succeeded, we havbe the commits
-  readonly commits: Maybe<Result<Error,ReadonlyArray<Commit>>>
+    // name of the repo
+    readonly repo: string
+    // use Maybe of Result to model state :
+    // * nothing : loading commits
+    // * just(error) : last fetch has failed, we have the error
+    // * just(commit[]) : last fetch succeeded, we havbe the commits
+    readonly commits: Maybe<Result<Error,ReadonlyArray<Commit>>>
 }
-    
+
 interface Commit {
-  readonly sha: string
-  readonly author: string
+    readonly sha: string
+    readonly author: string
 }
-  
 
-type Msg 
-  // repo name changed 
-  = { type: "repo-changed", value: string }
-  // trigger a fetch of commits
-  | { type: "fetch" }
-  // got fetch response, or an error
-  | { type: "got-commits", commits: Result<Error,ReadonlyArray<Commit>> }
+
+type Msg
+// repo name changed 
+    = { type: "repo-changed", value: string }
+    // trigger a fetch of commits
+    | { type: "fetch" }
+    // got fetch response, or an error
+    | { type: "got-commits", commits: Result<Error,ReadonlyArray<Commit>> }
 
 
 function init(repo: string): [Model, Cmd<Msg>] {
-  return [
-    {
-      repo: repo, // store initial repo name
-      commits: nothing // initial state is "loading"
-    },
-    fetchCommits(repo) // initial fetch
-  ]
+    return [
+        {
+            repo: repo, // store initial repo name
+            commits: nothing // initial state is "loading"
+        },
+        fetchCommits(repo) // initial fetch
+    ]
 }
 
 function view(dispatch: Dispatcher<Msg>, model: Model) {
-  return (
-    <>
-      <h1>
-        Fetch data using Http module
-      </h1>
-      <input
-        type="text"
-        value={model.repo}
-        onChange={e => {
-          // update repo name on input change
-          const value = (e.target as HTMLInputElement).value;
-          dispatch({
-            type: "repo-changed",
-            value: value
-          })
-        }}/>
-      <button
-        disabled={
-          // disable the button if we are fetching
-          model.commits.type === "Nothing"
-        }
-        onClick={() => 
-          // fetch commits on click
-          dispatch({ type: "fetch" })
-        }      
-      >
-        Fetch commits
-      </button>
-      <hr/>
-      { 
-        model.commits
-          // commits are present : map the result
-          .map(commitsResult => 
-            // use Result.match to map the result 
-            // depending if it's ok, or an error
-            commitsResult.match(
-              // all good, we have commits, build the vdom
-              commits => 
-                <ul>
-                  { commits.map(commit => 
-                      <li key={commit.sha}>
-                        {commit.sha} - {commit.author}
-                      </li>
-                  )}
-                </ul>,
-              // in case there's an error, show it
-              error =>                     
-                <p>Fetch error : {error.message}</p>
-            )          
-          )
-          // commits == nothing, we are currently fetching
-          .withDefault(
-            <p>Fetching...</p>
-          )
-      }
-    </>
-  )
+    return (
+        <>
+            <h1>
+                Fetch data using Http module
+            </h1>
+            <input
+                type="text"
+                value={model.repo}
+                onChange={e => {
+                    // update repo name on input change
+                    const value = (e.target as HTMLInputElement).value;
+                    dispatch({
+                        type: "repo-changed",
+                        value: value
+                    })
+                }}/>
+            <button
+                disabled={
+                    // disable the button if we are fetching
+                    model.commits.type === "Nothing"
+                }
+                onClick={() =>
+                    // fetch commits on click
+                    dispatch({ type: "fetch" })
+                }
+            >
+                Fetch commits
+            </button>
+            <hr/>
+            {
+                model.commits
+                    // commits are present : map the result
+                    .map(commitsResult =>
+                        // use Result.match to map the result 
+                        // depending if it's ok, or an error
+                        commitsResult.match(
+                            // all good, we have commits, build the vdom
+                            commits =>
+                                <ul>
+                                    { commits.map(commit =>
+                                        <li key={commit.sha}>
+                                            {commit.sha} - {commit.author}
+                                        </li>
+                                    )}
+                                </ul>,
+                            // in case there's an error, show it
+                            error =>
+                                <p>Fetch error : {error.message}</p>
+                        )
+                    )
+                    // commits == nothing, we are currently fetching
+                    .withDefault(
+                        <p>Fetching...</p>
+                    )
+            }
+        </>
+    )
 }
 
 function update(msg:Msg, model:Model): [Model, Cmd<Msg>] {
-  switch (msg.type) {
-    case "repo-changed":
-      // just change the repo in Model
-      return [
-        { ...model, repo: msg.value },
-        Cmd.none()
-      ]
-    case "fetch":
-      // indicate that we are fetching (set commits to nothing)
-      // and trigger thje fetch
-      return [
-        { ...model, commits: nothing },
-        fetchCommits(model.repo)
-      ]
-    case "got-commits":
-      // got the fetch response, assign it to 
-      // the Model
-      return [
-        { ...model, commits: just(msg.commits) },
-        Cmd.none()
-      ]
-  }
+    switch (msg.type) {
+        case "repo-changed":
+            // just change the repo in Model
+            return [
+                { ...model, repo: msg.value },
+                Cmd.none()
+            ]
+        case "fetch":
+            // indicate that we are fetching (set commits to nothing)
+            // and trigger thje fetch
+            return [
+                { ...model, commits: nothing },
+                fetchCommits(model.repo)
+            ]
+        case "got-commits":
+            // got the fetch response, assign it to 
+            // the Model
+            return [
+                { ...model, commits: just(msg.commits) },
+                Cmd.none()
+            ]
+    }
 }
 
 // no subs in this example
 function subscriptions(model:Model): Sub<Msg> {
-  return Sub.none()
+    return Sub.none()
 }
 
 // create and return a Cmd that fetches commits 
 // for the passed repo
 function fetchCommits(repo: string): Cmd<Msg> {
-  // create a Task that fetches the commits or fails with an Error
-  const fetchTask: Task<Error,ReadonlyArray<Commit>> =
-    Http.jsonBody(
-      // create a fetch Task
-      Http.fetch(`https://api.github.com/repos/${repo}/commits`),
-      // decode the response with this decoder
-      Decode.array(commitDecoder)
-    );
-
-  // Msg creator function
-  function gotCommits(r:Result<Error,ReadonlyArray<Commit>>): Msg {
-    return {
-      type: "got-commits",
-      commits: r
+    // create a Task that fetches the commits or fails with an Error
+    const fetchTask: Task<Error,ReadonlyArray<Commit>> =
+        Http.jsonBody(
+            // create a fetch Task
+            Http.fetch(`https://api.github.com/repos/${repo}/commits`),
+            // decode the response with this decoder
+            Decode.array(commitDecoder)
+        );
+
+    // Msg creator function
+    function gotCommits(r:Result<Error,ReadonlyArray<Commit>>): Msg {
+        return {
+            type: "got-commits",
+            commits: r
+        }
     }
-  }
-    
-  // "perform" the Task, and indicate which message
-  // needs to be used for handling the response
-  return Task.attempt(fetchTask,gotCommits);
+
+    // "perform" the Task, and indicate which message
+    // needs to be used for handling the response
+    return Task.attempt(fetchTask,gotCommits);
 }
 
 
 // create a Msg to handle the response of the fetch 
 
 // A decoder for Commit objects
 const commitDecoder: Decoder<Commit> =
-  Decode.map2(
-    (sha:string, author:string) => {
-        return {
-            sha: sha,
-            author: author
-        }
-    },
-    Decode.field("sha", Decode.str),
-    Decode.at(["commit", "author","name"], Decode.str)
-  );
+    Decode.map2(
+        (sha:string, author:string) => {
+            return {
+                sha: sha,
+                author: author
+            }
+        },
+        Decode.field("sha", Decode.str),
+        Decode.at(["commit", "author","name"], Decode.str)
+    );
 
 
 // wire the program
 const App = () => (
-  <Program
-    init={() => init("Microsoft/TypeScript")}
-    view={view}
-    update={update}
-    subscriptions={subscriptions}
-  />
+    <Program
+        init={() => init("Microsoft/TypeScript")}
+        view={view}
+        update={update}
+        subscriptions={subscriptions}
+    />
 );
 
 export default App;

tea-cup/src/TeaCup/Program.ts

@@ -153,7 +153,7 @@ export class Program<Model, Msg> extends Component<ProgramProps<Model, Msg>, nev
   }
 
   render(): ReactNode {
-    if (this.currentModel && this.bd) {
+    if (this.currentModel !== undefined && this.bd) {
       return this.props.view(this.bd, this.currentModel);
     }
     return null;