// has a value
const person = { age: 42 }
const age = person?.age

// is undefined
const person = { }
const age = person?.age

type alias Person = { age : Maybe Int }
-- has a value
let person = Person { age = Just 42 }
-- is nothing
let person = Person { age = Nothing }

const isHuman = peep => peep.type === 'Human'
const formatName = ({ firstName, lastName }) => `${firstName} ${lastName}`

const parseNames = json =>
  Promise.resolve(json)
  .then( JSON.parse )
  .then( peeps => peeps.filter( isHuman ) )
  .then( humans => humans.map( formatName ) ) 

isHuman peep =
  peep.type == "Human"

formatName {firstName, lastName} =
  firstName ++ " " ++ lastName

parseNames json =
  parseJSON
  |> Result.withDefault []
  |> List.filter isHuman
  |> List.map formatName

switch(result.status) {
  case "file upload progress":
    return updateProgressBar(result.amount)
  case "file upload failed":
    return showError(result.error)
  case "file upload success":
    return showSuccess(result.fileName)
  default:
    return showError("Unknown error.")
}

case result.status of
  FileUploadProgress amount ->
    updateProgressBar amount
  FileUploadFailed err ->
    showError err
  FileUploadSuccess fileName ->
    showSuccess filename
  _ ->
    showError "Unknown error."

ReactDOM.render(
  <h1>Hello, world!</h1>, document.getElementById('body')
)

type Msg = Bruh
type alias Model = {}

update _ model =
    model

view _ =
    h1 [][ text "Hello World!" ]

main =
    Browser.sandbox
        { init = (\ () -> {})
        , view = view
        , update = update
        }

const element = <h1>Hello world!</h1>;

let element = h1 [] [text "Hello World!"]

const name = 'Jesse';
<h1>Hello {name}</h1>

let name = "Jesse"
h1 [] [text "Hello " ++ name ]

const format = ({ first, last }) => `${first} ${last}`;

const user = { first: 'Jesse', last: 'Warden' };

<h1>Hello {format(user)}</h1>

format {first, last} = first ++ " " ++ last

user = { first = "Jesse", last = "Warden" }

h1 [] [text (format user) ] 

<img src={user.avatarUrl} />

img [ src user.avatarUrl ] []

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

let element =
  div [] [
    h1 [] [text "Hello!"]
    h2 [] [text "Good to see you here."]
  ]

const Welcome = props => <h1>Hello {props.name}</h1>

welcome props = h1 [] [text "Hello " ++ props.name]

const element = <Welcome name="Sara" />

let element = welcome { name = "Sara" }

const Greeting = ({ name }) => (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here, {name}!</h2>
  </div>
)

greeting {name} =
  div [] [
    h1 [] [text "Hello!"]
    , h2 [] [text "Good to see you here, " ++ name ++ "!"]
  ]

<button onClick={activateLasers}>Activate Lasers</button>

button [ onClick ActivateLasers ] [ text "Activate Lasers" ]

<button onClick={(e) => this.deleteRow(23, e)}>Delete Row</button>

type Msg = DeleteRow Int

button [ onClick (DeleteRow 23) ] [ text "Delete Row" ]

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};
  }

  handleClick = () => {
    this.setState(state => ({ isToggleOn: !state.isToggleOn }));
  }

  render = () => (
      {this.state.isToggleOn ? 'ON' : 'OFF'}
    )
  }
}

type alias Model = { isToggleOn : Bool }

initialModel = { isToggleOn = True }

type Msg = Toggle

update _ model =
  { model | isToggleOn = not model.isToggleOn }

toggle model =
    div 
      [ onClick Toggle ]
      [ if model.isToggleOn then
          text "ON"
        else
          text "OFF" ]

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

greeting props =
  let
    isLoggedIn = props.isLoggedIn
  in
  if isLoggedIn then
    userGreeting()
  else
    guestGreeting()

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li>{number}</li>
);

let numbers = [1, 2, 3, 4, 5]
let listItems =
  List.map
    (\number -> li [] [text (String.fromInt number)])
    numbers

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>    <li>{number}</li>  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
<NumberList numbers={numbers} />

numberList props =
  let
    numbers = props.numbers
  in
  List.map
    (\number -> li [] [text (String.fromInt number)])
    numbers

let numbers = [1, 2, 3, 4, 5]
numberList numbers

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
  }

  handleChange = event => {
    this.setState({value: event.target.value});
  }

  handleSubmit = event => {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

type Msg = TextChanged String | Submit

type alias Model = { value : String }

initialModel = { value = "" }

update msg model =
    case msg of
        TextChanged string ->
            { model | value = string }
        Submit ->
            let
                _ = Debug.log "A name was submitted: " model.value
            in
            model

view model =
    form [ onSubmit Submit ][
        label
            []
            [ text "Name:"
            , input
              [type_ "text", value model.value, onInput TextChanged ] []]
        , input [type_ "submit", value "Submit"][]
    ]

[
  {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
  {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
  {category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
  {category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
  {category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
  {category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
];

type alias Product = {
  category : String
  , price : String
  , stocked : Bool
  , name : String }

type alias Model = {
  products : List Product
}

initialModel =
[
  Product {category = "Sporting Goods", price = "$49.99", stocked = True, name = "Football"}
  , Product {category = "Sporting Goods", price = "$9.99", stocked = True, name = "Baseball"}
  , Product {category = "Sporting Goods", price = "$29.99", stocked = False, name = "Basketball"}
  , Product {category = "Electronics", price = "$99.99", stocked = True, name = "iPod Touch"}
  , Product {category = "Electronics", price = "$399.99", stocked = False, name = "iPhone 5"}
  , Product {category = "Electronics", price = "$199.99", stocked = True, name = "Nexus 7"}
]

type Msg = ToggleOnlyInStock Bool

label
        [ ]
        [ input [ type_ "checkbox", onClick (ToggleOnlyInStock not model.onlyInStock) ] []
        , text "Only show products in stock"]

update msg model =
  ...
  ToggleOnlyInStock toggle ->
    { model | onlyInStock = toggle }

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>
      </div>
    </Router>
  )
}

home =
  h2 [] [ text "Home" ]

about =
  h2 [] [ text "About" ]

users =
  h2 [] [ text "Users" ]

app =
  div [] [
    nav [] [
      ul [] [
        li [] [
          a [ href "/home" ] [ text "Home" ]
        ]
        , li [] [
          a [ href "/about" ] [ text "About" ]
        ]
        , li [] [
          a [ href "/users" ] [ text "Users" ]
        ]
      ]
    ]
  ]

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children; 
  }
}

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

case dataMaybe of
  Just data ->
    addProduct data
  Nothing ->
    -- Your UI or data must compensate somehow here.
    -- For now we just return all the products unchanged
    model.products

case result of
  Error err ->
    { model | result = ProductSaveFailed err }
  Ok data ->
    { mdoel | result = ProductSaveSuccess data }

-- in UI
case result of
  ProductSaveFailed err ->
    errorViewAndRetry err
  ProductSaveSuccess _ ->
    goToProductView

class Weather extends React.Component {
  constructor(props) {
    super(props);
    this.state = { temperature: undefined, loading: true };
  }

  componentDidMount = () => {
    this.setState({ loading: true })
    fetch("server.com/weather/temperature")
    .then( response => response.json() )
    .then( 
       ({ temperature }) => {
         this.setState({ temperature, loading: false, isError: false }) )
      }
    )
    .catch(
      error => {
        this.setState({ loading: false, isError: true, error: error.message })
      }
    )
  }

  render() {
    if(this.state.loading) {
      return <p>Loading...</p>
    } else if(this.state.isError === false) {
      return <p>Temperature: {this.state.temperature}</p>
    } else {
      return <p>Error: {this.state.error}</p>
    }
  }
}

type Msg = LoadWeather | GotWeather (Result Http.Error String)

type Model
    = Loading
    | Success String
    | Failure Http.Error

init : () -> (Model, Cmd Msg)
init _ =
  ( Loading
  , loadTemperature
  )

loadTemperature =
    Http.get
      { url = "server.com/weather/temperature"
      , expect = Http.expectJson GotWeather temperatureDecoder
      }

temperatureDecoder =
  field "temperature" string

update msg model =
    case msg of
        LoadWeather ->
            (Loading, loadTemperature)
        GotWeather result ->
            case result of
                Err err ->
                    ( Failure err, Cmd.none )
                Ok temperature ->
                    ( Success temperature, Cmd.none )

view model =
    case model of
        Loading ->
            p [][text "Loading..."]
        Success temperature ->
            p [][text ("Temperature: " ++ temperature) ]
        Failure _ ->
            p [][text "Failed to load temperature."]

// Action Creator
const addTodo = text => ({ type: 'ADD_TODO', text })

// Dispatch
const goSwimming = () => store.dispatch(addTodo('Go Swimming.'))

// trigger from button
<button onClick={goSwimming}>Add</button>

// update model
const todos = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return state.concat([{ text: action.text, completed: false }])
    default:
      return state
  }
}

-- Type for Todo
type alias Todo = { text : String, completed: Bool }

-- Message
type Msg = AddTodo String

-- trigger from button
button [ onClick (AddTodo "Go Swimming.")] [ text "Add" ]

-- update model
update msg model =
  case msg of
    AddTodo text ->
      { model | todos = List.append model.todos [Todo text, False] }
    ...