MobX SDK for USA Congress API, which is based on MobX-RESTful.
npm i mobx-usa-congress{
"compilerOptions": {
"target": "ES6",
"moduleResolution": "Node",
"useDefineForClassFields": true,
"experimentalDecorators": false,
"jsx": "react-jsx"
}
}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();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>
);
}
}
