 TODO:
 
 - [x] (0:30)  basic structure and plan
-- [ ] (0:15?) (0:22) sorted file use by last_edited timestamp
-- [ ] (0:30?) display items a little more readably
+- [x] (0:15?) (0:22) sorted file use by last_edited timestamp
+- [x] (0:30?) (0:24) display items a little more readably
 - [ ] (1:00?) get use of file by person to actually cause update of use
 - [ ] (1:00?) make even more readable, e.g., file type icons, layout
 - [ ] (0:30?) search

        if @_sorted_file_use_list?
            return @_sorted_file_use_list
        v = []
        @state.file_use.map (val,_) =>
            v.push(val.toJS())
        v.sort (a,b)->misc.cmp(b.last_edited, a.last_edited)
        @_sorted_file_use_list = v
        return v

        </div>

FileUseController = rclass
    displayName: 'FileUseController'
    propTypes: ->
        flux        : rtypes.object
        file_use    : rtypes.object
        user_map    : rtypes.object
        project_map : rtypes.object

    render: ->
        if not @props.file_use? or not @props.flux? or not @props.user_map? or not @props.project_map?
            return <Loading/>
        file_use_list = @props.flux.getStore('file_use').get_sorted_file_use_list()
        <FileUseViewer file_use_list={file_use_list} user_map={@props.user_map} project_map={@props.project_map} />

render = (flux) ->
    <FluxComponent flux={flux} connectToStores={['file_use', 'users', 'projects']} >
        <FileUseController />
    </FluxComponent>

