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. Issue Comment
7. Pull Request
8. Discussion
9. Contributor
10. Check Run
11. Workflow Run

Usage

Installation

npm i mobx-github
Copy

tsconfig.json

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

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();
Copy

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>
        );
    }
}
Copy

User cases

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