Merge pull request #29 from AwkwardLiSFan/7-automate-deployment

feat: automate deployment

.github/workflows/deploy.yml

@@ -0,0 +1,39 @@
+name: Deploy
+run-name: Deploy to AWS
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+    - name: Configure AWS Credentials
+      uses: aws-actions/configure-aws-credentials@v1
+      with:
+        aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+        aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+        aws-region: ${{ secrets.AWS_REGION }}
+
+    - name: Checkout
+      uses: actions/checkout@v2
+
+    - name: Setup Node
+      uses: actions/setup-node@v2
+      with:
+        node-version: 16
+
+    - name: Install dependencies
+      run: npm install
+
+    - name: Build
+      run: ng run user-interface:ngsscbuild:production
+
+    - name: Deploy
+      run:
+        aws s3 sync ./dist/user-interface ${{ secrets.S3_BUCKET }} --region ${{ secrets.AWS_DEFAULT_REGION }} --delete
+        echo "Invalidating Old Distribution"
+        aws cloudfront create-invalidation --distribution-id ${{ secrets.DISTRIBUTION_ID }} --paths '/*'
+        echo "Deployed Successfully"

README.md

@@ -10,10 +10,10 @@ While the official website states a general waiting time of 8-12 weeks, individu
 
 As of the time of writing this, the main sources of information about ACS skills assessments are the [ACS Skills Assessment for PR Facebook group](https://www.facebook.com/groups/acs4pr) and the [AusVisa subreddit](https://www.reddit.com/r/AusVisa/).
 
-There is no single source of truth that collects timelines from the applicants, with the most active updates being user posts on the Facebook group where applicants often tend to post their outcomes along with the time taken. 
-
 However, there is no consistent format to this data, as some may choose to omit crucial details such as the ANZSCO code they applied under, or the chosen stream. It is also not convenient to always scroll through a large number of posts seeking help or discussing other aspects of the process just to find the ones that shed light on waiting times.
 
+Other options include [ImmiTracker](https://myimmitracker.com/) or [TrackItt](https://www.trackitt.com/australia-immigration-trackers/skills-assessment), both of which necessitate signing up and creating a user profile. ImmiTracker's data on ACS skills assessments is also not as exhaustive as its base of users who post about General Skilled Migration (GSM) visa applications.
+
 ### Solution
 
 The idea for this application was conceived during the interminable wait between submitting my own skills assessment application and receiving a response. With this tracker, I wanted to create a web app that would convey critical information on current wait times based on aggregated user responses from those who have already received a result - either positive or negative. 

src/app/app.module.ts

@@ -14,6 +14,7 @@ import { ApplicationsTableComponent } from "./components/applications-table/appl
 import { AddEntryDialogComponent } from "./components/add-entry-dialog/add-entry-dialog.component";
 import { LayoutModule } from "@angular/cdk/layout";
 import { GraphQLModule } from "./graphql.module";
+import { StatisticsComponent } from "./components/statistics/statistics.component";
 
 @NgModule({
   declarations: [
@@ -23,6 +24,7 @@ import { GraphQLModule } from "./graphql.module";
     DialogComponent,
     ApplicationsTableComponent,
     AddEntryDialogComponent,
+    StatisticsComponent,
   ],
   imports: [
     BrowserModule,

src/app/components/add-entry-dialog/add-entry-dialog.component.ts

@@ -2,11 +2,11 @@ import { Component } from "@angular/core";
 import { FormBuilder, FormGroup, Validators } from "@angular/forms";
 import { MatDialogRef } from "@angular/material/dialog";
 import { MatSnackBar } from "@angular/material/snack-bar";
-import { DateTime } from "luxon";
 import {
   AddEntryGQL,
   AddEntryMutationVariables,
 } from "src/app/graphql/graphql-codegen-generated";
+import { ClockService } from "src/app/services/clock/clock.service";
 
 export const anzscoCodes: Map<number, string> = new Map<number, string>([
   [261311, "Analyst Programmer"],
@@ -100,7 +100,7 @@ export class AddEntryDialogComponent {
           this.form.controls["anzsco"].value.value,
         submitted_on: this.form.controls["dateSubmitted"].value,
         received_on: this.form.controls["dateReceived"].value,
-        days: this.findDateDiff(
+        days: ClockService.findDateDiff(
           this.form.controls["dateSubmitted"].value,
           this.form.controls["dateReceived"].value,
         ),
@@ -140,19 +140,4 @@ export class AddEntryDialogComponent {
   public close(): void {
     this.dialogRef.close();
   }
-
-  /**
-   * Finds difference in days given two dates
-   * @param
-   * startDate: initial date of application in ISOString format
-   * endDate: date of receiving result in ISOString format
-   * @returns
-   * Days between the two given dates as a number
-   */
-  private findDateDiff(startDate: string, endDate: string): number {
-    const start: DateTime = DateTime.fromISO(startDate);
-    const end: DateTime = DateTime.fromISO(endDate);
-
-    return end.diff(start, "days").toObject().days!;
-  }
 }

src/app/components/applications-table/applications-table.component.html

@@ -1,15 +1,15 @@
 <!-- Content  -->
 <div>
   <div class="button-container">
-    <button mat-button class="add-button" color="warn" (click)="addEntry()">
-      Log Details
+    <button mat-button class="add-button" (click)="addEntry()">
+      Add Entry
     </button>
   </div>
 
   <table
     class="applications-table"
     mat-table
-    [dataSource]="dataSource"
+    [dataSource]="tableData"
     matSort
     matSortActive="submitted_on"
     matSortDirection="desc"

src/app/components/applications-table/applications-table.component.scss

@@ -27,11 +27,12 @@
 
 .add-button {
   font-size: 22px;
-  border: 2px solid;
+  border: 2px solid #daec37;
   border-radius: 4px;
   font-weight: 600;
   width: 200px;
   height: 45px;
+  color: #daec37 !important;
   font-family: "Jetbrains", "Helvetica Neue", sans-serif !important;
 }
 

src/app/components/applications-table/applications-table.component.ts

@@ -1,34 +1,40 @@
-import { Component, NgZone, OnInit, ViewChild } from "@angular/core";
-import { MatDialog, MatDialogRef } from "@angular/material/dialog";
+import { Component, Input, OnInit, ViewChild } from "@angular/core";
+import { MatDialog } from "@angular/material/dialog";
 import { MatSort } from "@angular/material/sort";
 import { MatTableDataSource } from "@angular/material/table";
 import { MatPaginator } from "@angular/material/paginator";
 import { BreakpointObserver, BreakpointState } from "@angular/cdk/layout";
-import { GetAllEntriesGQL } from "src/app/graphql/graphql-codegen-generated";
-import { map } from "rxjs";
 import { AddEntryDialogComponent } from "../add-entry-dialog/add-entry-dialog.component";
-import { DialogComponent } from "src/app/common/dialog/dialog.component";
 
 @Component({
   selector: "app-applications-table",
   templateUrl: "./applications-table.component.html",
   styleUrls: ["./applications-table.component.scss"],
 })
 export class ApplicationsTableComponent implements OnInit {
+  // Receive table data as input from home component
+  tableData: MatTableDataSource<any>;
+  @Input()
+  get dataSource(): MatTableDataSource<any> | undefined {
+    return this.tableData;
+  }
+  set dataSource(value: MatTableDataSource<any>) {
+    this.tableData = value;
+    this.setTableEntries();
+  }
+
   // Table controls
   @ViewChild(MatSort, { static: false }) sort: MatSort;
   @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;
 
   // Table data
   public displayedColumns: Array<string> = [];
-  public dataSource: MatTableDataSource<any> = new MatTableDataSource();
 
   // Track screen size
   public resizeTable = false;
 
   constructor(
     public breakpointObserver: BreakpointObserver,
-    private getAllEntriesQuery: GetAllEntriesGQL,
     private dialog: MatDialog,
   ) {}
 
@@ -40,8 +46,6 @@ export class ApplicationsTableComponent implements OnInit {
           this.resizeTable = true;
         }
       });
-
-    this.fetchTableEntries();
   }
 
   /** Opens dialog to log a new entry in the table */
@@ -60,27 +64,20 @@ export class ApplicationsTableComponent implements OnInit {
   }
 
   /**
-   * Runs GraphQL query to fetch all table entries from the MongoDB Atlas Collection
+   * Initialise table with data
    */
-  private fetchTableEntries(): void {
-    this.getAllEntriesQuery
-      .fetch()
-      .pipe(map((response) => response.data.applications))
-      .subscribe((data) => {
-        this.dataSource = new MatTableDataSource(data);
-        this.dataSource.sort = this.sort;
-        this.dataSource.paginator = this.paginator;
-
-        this.displayedColumns = [
-          "anzsco_code",
-          "submitted_on",
-          "received_on",
-          "days",
-          "outcome",
-          "stream",
-          "location",
-          "comment",
-        ];
-      });
+  private setTableEntries(): void {
+    this.tableData.sort = this.sort;
+    this.tableData.paginator = this.paginator;
+    this.displayedColumns = [
+      "anzsco_code",
+      "submitted_on",
+      "received_on",
+      "days",
+      "outcome",
+      "stream",
+      "location",
+      "comment",
+    ];
   }
 }

src/app/components/statistics/statistics.component.html

@@ -0,0 +1,6 @@
+<div class="statistics-container">
+  <mat-card class="stats-card" *ngFor="let card of statsData">
+    <h1 style="margin-top: 0px">{{ card.header }}</h1>
+    <p class="card-text">{{ card.text }}</p>
+  </mat-card>
+</div>

src/app/components/statistics/statistics.component.scss

@@ -0,0 +1,49 @@
+.stats-card {
+  border-radius: 20px;
+  background-image: linear-gradient(
+    to top,
+    #ecf4d7 0%,
+    #ecf4d7 60%,
+    #daec37 83%
+  );
+  width: 300px;
+  height: 200px;
+  padding: 10px;
+  text-align: center;
+}
+
+.card-text {
+  font-size: 20px;
+  margin-top: 15%;
+}
+
+.statistics-container {
+  margin-top: 20px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+@media only screen and (max-width: 1100px) {
+  .statistics-container {
+    flex-direction: column;
+  }
+
+  .stats-card {
+    width: 250px;
+    height: 150px;
+    margin: 20px;
+    background-image: linear-gradient(
+      to top,
+      #ecf4d7 0%,
+      #ecf4d7 50%,
+      #daec37 83%
+    );
+  }
+
+  .card-text {
+    margin-top: 5%;
+    font-size: 14px;
+  }
+}

src/app/components/statistics/statistics.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { StatisticsComponent } from "./statistics.component";
+
+describe("StatisticsComponent", () => {
+  let component: StatisticsComponent;
+  let fixture: ComponentFixture<StatisticsComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [StatisticsComponent],
+    });
+    fixture = TestBed.createComponent(StatisticsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/statistics/statistics.component.ts

@@ -0,0 +1,12 @@
+import { Component, Input } from "@angular/core";
+import { StatisticsCard } from "src/app/pages/home/home.component";
+
+@Component({
+  selector: "app-statistics",
+  templateUrl: "./statistics.component.html",
+  styleUrls: ["./statistics.component.scss"],
+})
+export class StatisticsComponent {
+  @Input()
+  statsData: StatisticsCard[];
+}

src/app/modules/material/material.module.ts

@@ -6,6 +6,7 @@ import { MatTooltipModule } from "@angular/material/tooltip";
 import { MatIconModule } from "@angular/material/icon";
 import { MatSnackBarModule } from "@angular/material/snack-bar";
 import { MatDialogModule } from "@angular/material/dialog";
+import { MatCardModule } from "@angular/material/card";
 import { MatTableModule } from "@angular/material/table";
 import { MatPaginatorModule } from "@angular/material/paginator";
 import { MatButtonModule } from "@angular/material/button";
@@ -39,6 +40,7 @@ import {
     MatSnackBarModule,
     MatIconModule,
     MatTooltipModule,
+    MatCardModule,
   ],
   exports: [
     MatDialogModule,
@@ -56,6 +58,7 @@ import {
     MatSnackBarModule,
     MatIconModule,
     MatTooltipModule,
+    MatCardModule,
   ],
   providers: [
     {

src/app/pages/home/home.component.html

@@ -1,6 +1,10 @@
 <div class="app-container">
   <app-header></app-header>
+  <app-statistics [statsData]="statCards!"></app-statistics>
   <div class="table-container">
-    <app-applications-table class="applications-table"></app-applications-table>
+    <app-applications-table
+      class="applications-table"
+      [dataSource]="dataSource"
+    ></app-applications-table>
   </div>
 </div>

src/app/pages/home/home.component.scss

@@ -1,5 +1,4 @@
 .table-container {
-  margin-top: 20px;
   display: flex;
   flex-direction: column;
   justify-content: center;