data structures - The Elm / functional way of passing props to components -


i'm new elm , functional programming. i'm building expense tracking app has model this:

initialmodel =     { expensetransactions =         [ { date = date.fromstring "2016/10/23"           , transactions =               [ { id = 1                   , amount = 17.54                   , description = "stuff"                   , category = 3                   }                 , { id = 2                   , amount = 15.0                   , description = "things"                   , category = 4                   }               ]           }       ],       expensecategories =         dict.fromlist [ ( 1, "rent" ), ( 2, "groceries" ), ( 3, "eating out" ) ]     } 

in view, i'm using renderexpensestable function, in turn calls renderexpensesforoneday function, in turns calls renderexpensesrow function.

what want keep storing transaction's category number, , reference name view doing expensecategories[transaction.category] in other languages. (i if stored category string "groceries" problem moot, reason want store category number in model , reference separately user able edit category names, , don't want have update every single transaction in model every time happens, have if stored category string.)

i've realised have pass expensecategories view method down through each level (renderexpensestable, renderexpensesforoneday, etc.).

renderexpenserow : expensetransaction -> list string -> html msg renderexpenserow transaction categories =     -- ... row stuff ...  renderexpensesforoneday : expensesforoneday -> list string -> html msg renderexpensesforoneday day categories =     let         daytransactions =             list.map2 renderexpenserow day.transactions categories     in         -- ... yada yada ...         daytransactions  renderexpensestable : list expensesforoneday -> list string -> html msg renderexpensestable days categories =     let         rendereddays =             list.map2 renderexpensesforoneday days (dict.values categories)     in         div [ class "expenses-table" ] rendereddays 

this doesn't work, , think it's because shouldn't trying use list.map2 this. succeeding map before tried pass in categories, , attempt pass them in along other stuff (like props in react).

what's ideal "elm way" kind of thing? if can't access model directly, , don't have react-style props, how should deal situations there 2 different bits of model want reference expensetransactions , expensecategories?

why not store separate categories structure in selfsame model?

something like:

type model =    model { expensetransactions: tl         , expensecategories: dict.fromlist [ ( 1, "rent" ), ( 2, "groceries" ), ( 3, "eating out" ) ] } 

finally view functions take mega model:

viewwhatever : model -> html msg viewwhatever = ... 

i still don't how pass model through. each render function connects next via list.map, , since takes lists arguments, how model passed through

you can modify render functions take model first argument. example:

renderexpensesforoneday : model -> expensesforoneday -> list string -> html msg ...  renderexpensestable : model -> list expensesforoneday -> list string -> html msg ...       list.map2 (renderexpensesforoneday model) days (dict.values categories) 

note above how in last sentence pass curried function (renderexpensesforoneday model) list.map2.


Comments

Popular posts from this blog

java - SSE Emitter : Manage timeouts and complete() -

jquery - uncaught exception: DataTables Editor - remote hosting of code not allowed -

java - How to resolve error - package com.squareup.okhttp3 doesn't exist? -