mobx-github

MobX-GitHub

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

Model

• User
• Organization
• Repository
  • Contributor
  • Language
  • Issue
• Content - Git file tree traversal
  • Directory traversal
  • Recursive tree traversal
  • File search by extension
  • File search by pattern
• Issue
• Issue Comment
• Pull Request
• Discussion
• Contributor
• Check Run
• Workflow Run

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

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