MobX-USA-Congress

MobX SDK for USA Congress API, which is based on MobX-RESTful.

Model

1. Congress
2. Member
3. Hearing
4. Summary

Usage

Installation

npm i mobx-usa-congress

Some Node.js tips about the upstream mobx-restful you should know: https://github.com/idea2app/MobX-RESTful?tab=readme-ov-file#usage

tsconfig.json

{
    "compilerOptions": {
        "target": "ES6",
        "moduleResolution": "Node",
        "useDefineForClassFields": true,
        "experimentalDecorators": false,
        "jsx": "react-jsx"
    }
}

model/Congress.ts

import { githubClient, CongressModel } from 'mobx-usa-congress';

// Any possible way to pass USA Congress API token
// from local files or back-end servers to Web pages
const token = new URLSearchParams(location.search).get('token');

congressClient.use(({ request }, next) => {
    if (token)
        request.headers = {
            authorization: `Bearer ${token}`,
            ...request.headers
        };
    return next();
});

export const congressStore = new CongressModel();

page/Congress.tsx

Use WebCell as an Example

import { Session } from 'mobx-usa-congress';
import { component, observer } from 'web-cell';

import { congressStore } from '../model/Congress';

@component({ tagName: 'congress-page' })
@observer
export class CongressPage extends HTMLElement {
    connectedCallback() {
        congressStore.getThisYearOne();
    }

    renderSession = ({
        type,
        number,
        chamber,
        startDate,
        endDate
    }: Session) => (
        <li key={chamber}>
            <code>{type}</code> #{number} {chamber} (
            <time dateTime={startDate}>
                {new Date(startDate).toLocaleString()}
            </time>{' '}
            ~{' '}
            <time dateTime={endDate}>{new Date(endDate).toLocaleString()}</time>
            )
        </li>
    );

    render() {
        const { thisYearOne } = congressStore;

        return (
            <main>
                <h1>USA Congress</h1>

                <section>
                    <h2>
                        {thisYearOne?.name} ({thisYearOne?.startYear} ~{' '}
                        {thisYearOne?.endYear})
                    </h2>
                    <h3>sessions</h3>
                    <ul>{thisYearOne?.sessions.map(this.renderSession)}</ul>
                </section>
            </main>
        );
    }
}