[Functional Programming] Read and Transform Values from a State ADT’s State (get)

Many times we need to access and transform state, either in part or in full, to be used when calculating other state transitions. We will look at how we can leverage the get function on the State ADT to read and modify portions of our application state, putting the result in the Resultant portion. We will create two transactions: one to select a card from a list of cards and another to access the hint portion of our state.

The code below is just trying to get 'cards' and 'hint' props from an object with two fns.

const {prop, State, option,chain, find, propEq, isNumber, compose, safe} = require('crocks');
const  {get, modify} = State; 

const state = {
    cards: [
        {id: 'green-square', color: 'green', shape: 'square'},
        {id: 'orange-square', color: 'orange', shape: 'square'},
        {id: 'blue-square', color: 'blue', shape: 'triangle'}
    ],
    hint: {
        color: 'green',
        shape: 'square'
    }
}

// getState :: String ->  State Object (Maybe a)
const getState = key => get(prop(key))

const findById = id => find(propEq('id', id));

// getCard :: String -> State Object Card
const getCard = id => get(prop('cards'))
    .map(chain(findById(id)))
    .map(option({id: 'urk', color: '', shape: ''}))

const getCard2 = (id) => compose(option({}), chain(findById(id)), prop('cards'))    

const getHint = () => getState('hint').map(option({
    color: 'yay',
    shape: 'wow'
}));

const res = getCard('green-square') 
    .evalWith(state)  // { id: 'green-square', color: 'green', shape: 'square' }

const res1 = get(getCard2('green-square'))  //{ id: 'green-square', color: 'green', shape: 'square' } 
    .evalWith(state)

const res2 = getHint()
    .evalWith(state); // { color: 'green', shape: 'square' }
console.log(res)
console.log(res1)
console.log(res2)

The important thing to understand is the difference between  'getCard' & 'getCard2' functions. They have the same functionalities.

const getCard = id => get(prop('cards'))
    .map(chain(findById(id)))
    .map(option({id: 'urk', color: '', shape: ''}))

Once we use 'get', it creates a State instance, therefore we have to use instance method 'map' to access its value.

const getCard2 = (id) => compose(option({}), chain(findById(id)), prop('cards'))    

By the time we define 'getCard2', we haven't lift it into State with 'get' function. We can do normal fp. The reason using 'chian' in both functions is because prop('cards') return a Maybe, findById return a Maybe, would be a nested Maybe type, so using 'chain' to flatten it.