EventBasedUi.js

//# Dispatch Event
// An event is sent when something happens - the user clicks a button, or a websocket receives a new message.
// The UI can dispatch 
// Event has: name and data

function onButtonClick() {
  let queryText = document.getElementById('queryText').value
  console.log('queryText', queryText)
  dispatchEvent({ name: 'START_SEARCH' , payload: queryText });
}

//# Event Handling
//In response to an event, an application must decide what action to take. This is known as event handling.
//Event handler functions compute side effects, or a declarative description data structure that says how the world should change.

//On startup, register handlers for each type of event
//In dispatch, capture events, then 

let eventHandlers = {};
function registerEvent(name, handler) {
  eventHandlers[name] = handler
}
function dispatchEvent(event) {
  eventHandlers[event.name](event.payload)
}

registerEvent('START_SEARCH', (searchText) => {
  dispatchAction({name:'SEARCH_STARTED', payload: searchText})
  //get something from an api
  searchService(searchText).then(results => {
    dispatchAction({name:'SEARCH_SUCCESSFUL', payload: results})
    console.log('dispatchActionCOMPLETE')
  }).catch(err => {
        console.log('dispatchActionFAIL', err)
    dispatchAction({name:'SEARCH_FAILED', payload: err})
  })
})

function searchService(text) { 
  return new Promise(function(resolve, reject) {
    text.length > 3
      ? resolve(['Search'])
      : reject('Type a longer search')
  }
})}
  
// some logic occurs - then sends something to update state
//object saying how to update state
//state modified with reducer

function dispatchAction(action) {
  console.log('action dispatched', action)
  reduce(action.name, action.payload);
}
function reducer(actions, initialState) {
 let state = initialState;
 return (name, payload) => {
   console.log('start state', name, state)
   state = actions[name](state, payload)
   console.log('end state', state)
 }
}
let initialState = {
  isSearching: false,
  query: '',
  searchResults: [],
  searchError: ''
}
let reduce = reducer({
  SEARCH_STARTED: (state, payload) => {
    let {isSearching, query, searchResults, searchError} = state;
    isSearching = true;
    query = payload
    return {isSearching, query, searchResults, searchError};
  },
  SEARCH_SUCCESSFUL: (state, payload) => {
    let {isSearching, query, searchResults, searchError} = state;
    isSearching = false
    searchResults = payload
    searchError = ''
    return {isSearching, query, searchResults, searchError};
  },
  SEARCH_FAILED: (state, payload) => {
    let {isSearching, query, searchResults, searchError} = state;
    isSearching = false
    searchResults = []
    searchError = payload
    return {isSearching, query, searchResults, searchError};
  }
}, initialState)

//Query:
//App State is an Observable. This provides a way to:
//* Push changes on App State change
//* Create 'views' based off the base state

//View:
//One or more components that accept state or a 'view' off the main state

//Refrences:
//  https://github.com/Day8/re-frame