Angular: RxJS + Lodash for getting deeply nested data out of an Observable stream and into presentational components

api.service.js

// .js extension for syntax highlighting - all files are actually .ts
// A general service that makes an HTTP call to an API
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'

@Injectable()
export class ApiService {

    constructor (
        private http: HttpClient,
    ) { }

    get data$ () {
        return this.http.get('/some/api') // Returning an Observable
    }
}

my-list-item.component.js

// Presentational List Component
import { Component, OnInit, Input } from '@angular/core';

@Component({
    selector: 'my-list-item',
    template: `
        <p>{{ message }}</p> // "an orginal message string hamburgers"
        <p>{{ date | date }}</p> // "Oct 4, 2017"
    `,
    styleUrls: ['./something-cool-data.component.scss']
})
export class MyListItemComponent implements OnInit {
    public date // This just helpes to make the template a little bit cleaner
    public message

    @Input() set props(props) { // Just showing off a way to do some stuff in an @Input if you need, like data checking
        const { date, message }: { date: Date, message: string } = props
        Object.assign(this, {
            date,
            message
        })
    }
}

my-presentational-list.component.js

// Presentational List Component
import { Component, OnInit, Input } from '@angular/core';

@Component({
    selector: 'my-presentational-list',
    template: `
        <my-list-item *ngFor="let prop of props"
            [props]="item">
        </my-list-item>
    `,
    styleUrls: ['./something-cool-data.component.scss']
})
export class MyPresentationalListComponent implements OnInit {
    @Input() props
}

myselector.js

import { filter, flow, getOr, map, pick } from 'lodash/fp'

export {
    mySelector
}

// Assume we have a data structure like this:
interface MyCoolInterface {
    whateverIDontNeedIt: object[]
    id: string
    somethingElseIDonotCareAbout: whocares[]
    events: Event[] // We care about these
}

interface Event {
    type: 'tweet' | 'email' | 'snailMail' | 'chat'
    data: {
        blob: { // just to represent some deeply nested data
            id: string
            message: string
            dateTime: Date
            read: boolean
        }
    }
}

/*
    This is the data structure that will be fed into the presentational component
    example: https://runkit.com/jsonberry/59d5bdf05acdf30012d339c2
    [{
        dateTime: "2017-10-04T05:54:45.743Z"
        message: "an orginal message string hamburgers"
    }]
*/
function mySelector (data$): Observable {
    return data$.map(() => {  // This is still returning an Observable, but we have manipulated the output for presentation
        return transformData(data$) // The async pipe in the Data component is handling the Observable subscription and teardown
    }) // ---> IMPORTANT NOTE ---> this example is not fully fleshed out, when I have some more time I'll update it, but this is "basically" how it works
}      


/*
    The secret sauce for data transforming and getting deeply nested values
    
    Some reading on the techniques:
    https://medium.com/making-internets/why-using-chain-is-a-mistake-9bc1f80d51ba
    https://blog.pragmatists.com/higher-order-functions-in-lodash-3283b7625175
*/
const unreadChatMessages = obj => obj.type === 'chat' && !obj.data.blob.read
const formatDate = obj => ({ ...obj, dateTime: obj.dateTime.toISOString() })
const addHamburgers = obj => ({ ...obj, message: `${obj.message} hamburgers` })

const transformData = flow(
    getOr([], 'events'),
    filter(unreadChatMessages),
    map(
        flow(
            getOr({}, 'data.blob'), 
            pick(['message', 'dateTime']), 
            formatDate,
            addHamburgers
        )
    )
)

something-cool-data.js

// A data component, repsonsible for connecting to Angular services, and providing data to presentational components
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';

import { ApiService } from '../api.service'; // Our majesteic API service
import { mySelector } from './myselector'; // A magical place full of wonder and joy

@Component({
    selector: 'my-cool-data',
    template: `
        <my-presentional-list
            [props]="data$ | async"> // Using the async pipe helps with all the Observable cleanup mumbojumbo
        </my-presentional-list>
    `,
    styleUrls: ['./something-cool-data.component.scss']
})
export class MyCoolDataComponent implements OnInit {

    public data$: Observable<any>

    constructor (
        private apiService: ApiService
    ) { }

    ngOnInit () {
        this.data$ = this.apiService.data$
            .let(mySelector) // https://www.learnrxjs.io/operators/utility/let.html
    }                       // We'll use the `let` Observable method to pass the Observable stream through a transform

}