Gitropolis: Nx Angular edition

Gitropolis is a sample GitHub explorer implemented in an Nx Angular workspace.

yarn create nx-workspace gitropolis-nx-angular --package-manager=yarn --preset=angular --app-name=gitropolis-app --npm-scope=gitropolis --style=css --no-nx-cloud

yarn add @angular/material
nx generate @angular/material:ng-add --theme=purple-green --typography --animations

Clean up AppComponent:

1. Remove NxWelcomeComponent.
2. Delete app.component.spec.ts.
3. Remove BrowserModule from AppComponent.imports.

Generate Angular Material table component

ng generate @schematics/angular:module repositories
ng generate @angular/material:table repositories --changeDetection=OnPush --skip-tests

Add Octokit REST:

yarn add @octokit/rest

import { InjectionToken } from '@angular/core';
import { Octokit } from '@octokit/rest';

export const octokitToken = new InjectionToken<Octokit>('octokitToken', {
  providedIn: 'root',
  factory: () =>
    new Octokit({
      auth: prompt('Enter your GitHub Personal Access Token (PAT)'),
    }),
});

octokit.token.ts

Add NgRx ComponentStore:

yarn add @ngrx/component-store

import { Inject, Injectable } from '@angular/core';
import { ComponentStore } from '@ngrx/component-store';
import { Octokit } from '@octokit/rest';
import { defer } from 'rxjs';

import { octokitToken } from '../octokit.token';

interface 仓库State {}

@Injectable()
export class 仓库Store extends ComponentStore<仓库State> {
  authenticated仓库$ = this.select(
    defer(() => this.octokit.rest.repos.listForAuthenticatedUser()),
    (response) => response.data
  );

  constructor(@Inject(octokitToken) private octokit: Octokit) {
    super(initialState);
  }
}

const initialState: 仓库State = {};

repositories.store.ts