wip: PRs

Author: honzikec

angular-ngrx-scss/src/app/file-viewer/file-explorer/file-explorer.component.html

@@ -2,18 +2,18 @@
   <div class="container grid grid-cols-12 subpage">
     <section class="col-span-9 col-sm-span-12">
       <app-file-explorer-nav
-        [owner]="owner"
-        [name]="repoName"
+        [owner]="repo.ownerName"
+        [name]="repo.repoName"
         [branch]="repo.activeBranch"
-        [path]="path"
-        [showCrumbs]="!!path"
+        [path]="repo.path"
+        [showCrumbs]="!!repo.path"
       ></app-file-explorer-nav>
 
       <app-file-explorer-container
         [repoPage]="repo.tree"
         [branch]="repo.activeBranch"
-        [owner]="owner"
-        [name]="repoName"
+        [owner]="repo.ownerName"
+        [name]="repo.repoName"
       ></app-file-explorer-container>
     </section>
 

angular-ngrx-scss/src/app/file-viewer/file-explorer/file-explorer.component.ts

@@ -13,7 +13,7 @@ import { map, takeWhile, tap } from 'rxjs';
   templateUrl: './file-explorer.component.html',
   styleUrls: ['./file-explorer.component.scss'],
 })
-export class FileExplorerComponent implements OnInit, OnDestroy {
+export class FileExplorerComponent implements OnDestroy {
   owner = '';
   repoName = '';
   path = '';
@@ -38,28 +38,6 @@ export class FileExplorerComponent implements OnInit, OnDestroy {
 
   constructor(private route: ActivatedRoute, private store: Store) {}
 
-  ngOnInit() {
-    this.route.paramMap
-      .pipe(
-        takeWhile(() => this.componentActive),
-        tap((params) => {
-          this.owner = params.get('owner') as string;
-          this.repoName = params.get('repo') as string;
-          this.branch = params.get('branch') as string;
-          this.path = params.get('path') as string;
-          this.store.dispatch(
-            fetchRepository({
-              owner: this.owner,
-              repoName: this.repoName,
-              path: this.path,
-              branch: this.branch,
-            }),
-          );
-        }),
-      )
-      .subscribe();
-  }
-
   ngOnDestroy(): void {
     this.componentActive = false;
   }

angular-ngrx-scss/src/app/pull-requests/components/pull-requests-header/pull-requests-header.component.html

@@ -22,6 +22,7 @@
       name="Label"
       description="Select label"
       [isRepo]="true"
+      [items]="(labels$ | async) ?? []"
     ></app-filter-dropdown>
     <app-filter-dropdown
       name="Sort"

angular-ngrx-scss/src/app/repository/components/repo-header/repo-navigation/repo-navigation.component.html

@@ -24,7 +24,7 @@
         </span>
       </li>
       <li
-        [routerLink]="[basePath, 'pull-requests']"
+        [routerLink]="[basePath, 'pulls']"
         routerLinkActive="tab--active"
         class="tab tab--inactive"
         #prLink="routerLinkActive"

angular-ngrx-scss/src/app/repository/components/repository-details/repository-details.component.ts

@@ -1,8 +1,44 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Subject, takeUntil, takeWhile, tap } from 'rxjs';
+import { fetchRepository } from '../../../state/repository';
+import { ActivatedRoute } from '@angular/router';
+import { Store } from '@ngrx/store';
 
 @Component({
   selector: 'app-repository-details',
   templateUrl: './repository-details.component.html',
   styleUrls: ['./repository-details.component.scss'],
 })
-export class RepositoryDetailsComponent {}
+export class RepositoryDetailsComponent implements OnInit, OnDestroy {
+  private destroyed$ = new Subject<void>();
+
+  constructor(private route: ActivatedRoute, private store: Store) {}
+
+  ngOnInit() {
+    this.route.paramMap
+      .pipe(
+        takeUntil(this.destroyed$),
+        tap((params) => {
+          const owner = params.get('owner') as string;
+          const repoName = params.get('repo') as string;
+          const branch = params.get('branch') as string;
+          const path = params.get('path') as string;
+
+          this.store.dispatch(
+            fetchRepository({
+              owner: owner,
+              repoName: repoName,
+              path: path,
+              branch: branch,
+            }),
+          );
+        }),
+      )
+      .subscribe();
+  }
+
+  ngOnDestroy() {
+    this.destroyed$.next();
+    this.destroyed$.complete();
+  }
+}

angular-ngrx-scss/src/app/repository/repository-routing.module.ts

@@ -25,7 +25,7 @@ const routes: Routes = [
           import('../issues/issues.module').then((m) => m.IssuesModule),
       },
       {
-        path: 'pull-requests',
+        path: 'pulls',
         loadChildren: () =>
           import('../pull-requests/pull-requests.module').then(
             (m) => m.PullRequestsModule,

angular-ngrx-scss/src/app/repository/services/repository.service.ts

@@ -8,6 +8,7 @@ import {
   IssueLabel,
   Milestone,
   PullRequestAPIResponse,
+  PullRequestLabel,
   ReadmeApiResponse,
   RepoApiResponse,
   RepoContentsApiResponse,

angular-ngrx-scss/src/app/state/repository/repository.effects.ts

@@ -66,6 +66,7 @@ export class RepositoryEffects {
         ).pipe(
           map(([info, prList, contents, readme, milestones, labels]) => {
             const allData: RepositoryState = {
+              path: path ?? '',
               description: info.description,
               forkCount: info.forks_count,
               issueCount: info.open_issues_count,

angular-ngrx-scss/src/app/state/repository/repository.reducer.ts

@@ -7,6 +7,7 @@ export const initialRepositoryState: RepositoryState = {
   forkCount: 0,
   issueCount: 0,
   ownerName: '',
+  path: '',
   prCount: 0,
   readme: '',
   repoName: '',

angular-ngrx-scss/src/app/state/repository/repository.state.ts

@@ -2,6 +2,7 @@ import { Issue } from 'src/app/repository/services/repository.interfaces';
 import { UserApiResponse } from '../user';
 
 export interface RepositoryState {
+  path: string;
   description: string;
   forkCount: number;
   issueCount: number;