[Angular-Apollo-Tailwind] Add filters milestones on PRs

angular-apollo-tailwind/src/app/gql/models/repo-pulls.ts

@@ -1,4 +1,4 @@
-import { Label, PageInfo } from '../github.schema';
+import { Label, Milestone, PageInfo } from '../github.schema';
 
 export interface RepoPullRequests {
   pageInfo: PageInfo;
@@ -21,6 +21,13 @@ export interface RepoPullRequest {
   labelCount: number;
 }
 
+export interface RepoPullRequestDetails {
+  openPullRequests: RepoPullRequests;
+  closedPullRequests: RepoPullRequests;
+  milestones: Milestone[];
+  labels: Label[];
+}
+
 export enum PULL_REQUESTS_TYPE {
   ISSUE = 'issue',
   PULL_REQUEST = 'pull',

angular-apollo-tailwind/src/app/gql/queries/repo-pulls.query.gql

@@ -10,6 +10,22 @@ query RepoPullRequests(
 ) {
   repository(owner: $owner, name: $name) {
     id
+    milestones(first: 100, states: [OPEN]) {
+      nodes {
+        id
+        closed
+        description
+        number
+        title
+      }
+      pageInfo {
+        startCursor
+        endCursor
+        hasNextPage
+        hasPreviousPage
+      }
+      totalCount
+    }
     openPullRequests: pullRequests(
       first: $first
       last: $last

angular-apollo-tailwind/src/app/pull-requests/components/pull-requests-filters/pull-requests-filters.component.html

@@ -38,14 +38,14 @@
       buttonClassName="filterButton"
       (setFilter)="handleLabelClick($event)"
     ></app-filter-dropdown>
-    <!-- <app-filter-dropdown
+    <app-filter-dropdown
       name="Milestones"
       description="Filter by milestone"
       [current]="currentMilestone"
       [items]="milestoneOptions"
       buttonClassName="filterButton"
       (setFilter)="handleMilestoneClick($event)"
-    ></app-filter-dropdown> -->
+    ></app-filter-dropdown>
     <app-filter-dropdown
       name="Sort"
       description="Sort by"

angular-apollo-tailwind/src/app/pull-requests/components/pull-requests-filters/pull-requests-filters.component.ts

@@ -52,7 +52,7 @@ export class PullRequestFiltersComponent {
   @Input() openCount = 0;
   @Input() closedCount = 0;
   @Input() currentMilestone: string | null = null;
-  @Input() set milestones(val: Milestone[]) {
+  @Input() set milestones(val: Milestone[] | null | undefined) {
     if (val) {
       const a = val as Milestone[];
       const b = [{ title: 'PullRequest with no milestone', id: '' }, ...a];

angular-apollo-tailwind/src/app/pull-requests/parse-pull-requests.ts

@@ -1,4 +1,10 @@
-import { Label, RepoPullRequest, RepoPullRequestsQuery } from '../gql';
+import {
+  Label,
+  Milestone,
+  RepoPullRequest,
+  RepoPullRequestDetails,
+  RepoPullRequestsQuery,
+} from '../gql';
 
 export const parsePullRequests = (connection: any) => {
   if (!connection) {
@@ -58,11 +64,34 @@ export const parsePullRequests = (connection: any) => {
   return { pullRequests, totalCount, pageInfo };
 };
 
-export const parsePullRequestsQuery = (data: RepoPullRequestsQuery) => {
+const parseMilestones = (milestones: any) => {
+  const nodes = milestones.nodes;
+  return nodes.reduce((milestones: Milestone[], milestone: Milestone) => {
+    if (!milestone) {
+      return milestones;
+    }
+
+    return [
+      ...milestones,
+      {
+        id: milestone.id,
+        closed: milestone.closed,
+        title: milestone.title,
+        number: milestone.number,
+        description: milestone.description,
+      },
+    ];
+  }, []);
+};
+
+export const parsePullRequestsQuery = (
+  data: RepoPullRequestsQuery,
+): RepoPullRequestDetails => {
   const openPullRequests = parsePullRequests(data.repository?.openPullRequests);
   const closedPullRequests = parsePullRequests(
     data.repository?.closedPullRequests,
   );
+  const milestones = parseMilestones(data.repository?.milestones);
 
   const labelMap = [
     ...closedPullRequests.pullRequests,
@@ -82,6 +111,7 @@ export const parsePullRequestsQuery = (data: RepoPullRequestsQuery) => {
   return {
     openPullRequests,
     closedPullRequests,
+    milestones,
     labels: Object.values(labelMap) as Label[],
   };
 };

angular-apollo-tailwind/src/app/pull-requests/pull-requests.component.html

@@ -25,7 +25,7 @@
         [openCount]="(openPullRequestsCount$ | async)!"
         [closedCount]="(closedPullRequestsCount$ | async)!"
         [currentMilestone]="milestone$ | async"
-        [milestones]="(milestones$ | async)!"
+        [milestones]="milestones$ | async"
         [currentLabel]="label$ | async"
         [labels]="(labels$ | async)!"
         [sort]="sort$ | async"

angular-apollo-tailwind/src/app/pull-requests/pull-requests.component.ts

@@ -17,6 +17,9 @@ export class PullRequestsComponent implements OnInit {
     this.pullRequestsStore.openPullRequestsCount$;
   readonly closedPullRequestsCount$ =
     this.pullRequestsStore.closedPullRequestsCount$;
+  readonly pageInfo$ = this.pullRequestsStore.pageInfo$;
+
+  // Filter store selectors
   readonly label$ = this.pullRequestsStore.label$;
   readonly labels$ = this.pullRequestsStore.labels$;
   readonly milestone$ = this.pullRequestsStore.milestone$;
@@ -25,7 +28,6 @@ export class PullRequestsComponent implements OnInit {
   readonly type$ = this.pullRequestsStore.type$;
   readonly sort$ = this.pullRequestsStore.sort$;
   readonly hasActiveFilters$ = this.pullRequestsStore.hasActiveFilters$;
-  readonly pageInfo$ = this.pullRequestsStore.pageInfo$;
 
   constructor(private pullRequestsStore: PullRequestsStore) {}
 
@@ -35,6 +37,7 @@ export class PullRequestsComponent implements OnInit {
 
   setMilestone(milestone: string) {
     this.pullRequestsStore.setMilestone(milestone);
+    this.pullRequestsStore.getPullRequests$();
   }
 
   setLabel(label: string) {

angular-apollo-tailwind/src/app/pull-requests/pull-requests.store.ts

@@ -248,9 +248,14 @@ export class PullRequestsStore extends ComponentStore<FilterState> {
               .valueChanges.pipe(
                 tapResponse(
                   (res) => {
-                    const { openPullRequests, closedPullRequests, labels } =
-                      parsePullRequestsQuery(res.data);
-
+                    const {
+                      openPullRequests,
+                      closedPullRequests,
+                      milestones,
+                      labels,
+                    } = parsePullRequestsQuery(res.data);
+
+                    this.setMilestones(milestones);
                     this.setLabels(labels);
                     this.setOpenPullRequests(openPullRequests);
                     this.setClosedPullRequests(closedPullRequests);

angular-apollo-tailwind/src/environments/environment.ts

@@ -12,9 +12,9 @@
 
 export const environment = {
   production: false,
-  apiUrl: 'https://api.starter.dev',
+  apiUrl: '',
   graphApiUrl: 'https://api.github.com/graphql',
-  redirectUrl: 'http://localhost:4200/redirect',
+  redirectUrl: 'https://localhost:4200/redirect',
 };
 
 /*