Doctor Finder Search Inputs&

Active.png

Awaiting Click.png

Error Encountered.png

Errored.png

Finding User.png

Has Input.png

No Input.png

No Results.png

Searching.png

SketchSystems.spec

Doctor Finder Search Inputs&
  Search Box
    # To avoid complicating the statechart, i did not split has and no input out, but you can imagine an unfocused field with a query still in it, very much like Has Input
    Unfocused
      gainFocus -> Focused
    Focused
      loseFocus -> Unfocused
      No Input*
        type -> Has Input
      Has Input
        clear -> No Input
        submit -> Searching
        type -> Has Input
        selectSuggestion -> Searching
    # The three dots are an animated svg
    Searching
      # This event will also trigger the results to show in the results area
      finished -> Unfocused
      notFound -> No Results
      errored -> Errored
    Errored
      gainFocus -> Has Input
    # This would be reflected in the search results area and revert the field to Has Input
    No Results
      gainFocus -> Has Input
  Geolocator
    Awaiting Click
      hover -> Active
    Active
      click -> Finding User
      loseHover -> Awaiting Click
    # The three dots are an animated svg
    Finding User
      found -> Searching
      gotError -> Error Encountered
    Error Encountered
      timeout -> Awaiting Click

SketchSystems_prototype.js

function render(model){
  if (model.active_states[0].image_url && model.active_states[1].image_url) {
    return (
        <div>
          <img src={model.active_states[1].image_url}></img>
          <img src={model.active_states[0].image_url}></img>
        </div>
      )
  } else {
    return `No image available for ${model.active_states[1].name} and ${model.active_states[0].name}`
  }
}

Unfocused.png