MobX-GitHub

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

Model

1. User
2. Organization
3. Repository
   1. Contributor
   2. Language
   3. Issue
4. Content - Git file tree traversal
   1. Directory traversal
   2. Recursive tree traversal
   3. File search by extension
   4. File search by pattern
5. Issue
6. Pull Request
7. Discussion
8. Contributor

Usage

Installation

npm i mobx-github

tsconfig.json

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

model/GitHub.ts

import { githubClient, UserModel } from 'mobx-github';

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

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

export const userStore = new UserModel();

page/GitHub.tsx

Use WebCell as an Example

import { component, observer } from 'web-cell';

import { userStore } from '../model/GitHub';

@component({ tagName: 'github-page' })
@observer
export class GitHubPage extends HTMLElement {
    connectedCallback() {
        userStore.getSession();
    }

    disconnectedCallback() {
        userStore.clear();
    }

    render() {
        const { namespaces } = userStore;

        return (
            <select>
                {namespaces.map(({ login }) => (
                    <option key={login}>{login}</option>
                ))}
            </select>
        );
    }
}

User cases

1. https://github.com/FreeCodeCamp-Chengdu/FreeCodeCamp-Chengdu.github.io
2. https://github.com/Open-Source-Bazaar/Open-Source-Bazaar.github.io