Merge pull request #124 from e-picsa/core/code-linting

Core/code linting

.eslintrc.json

@@ -19,19 +19,20 @@
             ]
           }
         ],
+        "@angular-eslint/component-selector": ["warn"],
+        "@angular-eslint/component-class-suffix": ["warn"],
+        "@typescript-eslint/no-explicit-any": "off",
+        "@typescript-eslint/no-loss-of-precision": ["warn"],
         "@typescript-eslint/no-non-null-assertion": "warn",
-        "no-unused-vars": "off",
         "@typescript-eslint/no-unused-vars": ["warn"],
         "no-loss-of-precision": "off",
-        "@typescript-eslint/no-loss-of-precision": ["warn"],
-        "@angular-eslint/component-selector": ["warn"],
-        "@angular-eslint/component-class-suffix": ["warn"],
-        "no-prototype-builtins": "off"
+        "no-prototype-builtins": "off",
+        "no-unused-vars": "off"
       }
     },
     {
       "files": ["*.ts", "*.tsx"],
-      "extends": ["plugin:@nrwl/nx/typescript"],
+      "extends": ["plugin:@nrwl/nx/typescript", "prettier"],
       "rules": {}
     },
     {

.github/workflows/build-test.yml

@@ -17,8 +17,7 @@ jobs:
           node-version: '18'
           cache: 'yarn'
       - run: yarn install --immutable
-      # TODO - Ensure lint and tests pass
-      # - run: yarn lint
+      - run: yarn lint
       # - run: yarn nx test
       # Ensure can also build
       - run: yarn nx build

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged

.prettierrc

@@ -1,3 +1,4 @@
 {
-  "singleQuote": true
+  "singleQuote": true,
+  "printWidth": 120
 }

.yarnrc.yml

@@ -1,3 +1,9 @@
+logFilters:
+  - code: YN0060
+    level: discard
+  - code: YN0002
+    level: discard
+
 yarnPath: .yarn/releases/yarn-3.2.1.cjs
 nodeLinker: node-modules
 # Avoid throwing error installing enketo/leaflet-draw (will not match checksum)

apps/picsa-apps/content-dashboard-e2e/.eslintrc.json

@@ -4,7 +4,10 @@
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
-      "rules": {}
+      "rules": {
+        "@angular-eslint/component-selector": ["off"],
+        "@angular-eslint/component-class-suffix": ["off"]
+      }
     }
   ]
 }

apps/picsa-apps/content-dashboard/src/app/components/data-table/custom/data-table-station.ts

@@ -12,13 +12,9 @@ import { IChartSummary_V2 } from '@picsa/models';
 /* custom table built on top of generic to specifically define fields
   
 */
+// eslint-disable-next-line @angular-eslint/component-class-suffix
 export class PicsaDataTableStation extends PicsaDataTable {
-  tableColumns: (keyof IChartSummary_V2)[] = [
-    'Year',
-    'StartDate',
-    'Length',
-    'Rainfall',
-  ];
+  tableColumns: (keyof IChartSummary_V2)[] = ['Year', 'StartDate', 'Length', 'Rainfall'];
   @Input() set data(data: IChartSummary_V2[]) {
     if (data && data.length > 0) {
       this.tableData.data = data;

apps/picsa-apps/content-dashboard/src/app/components/data-table/data-table.ts

@@ -7,12 +7,13 @@ import { MatPaginator } from '@angular/material/paginator';
   // Note - should add to libs as general component if needed elsewhere
   selector: 'picsa-data-table',
   templateUrl: './data-table.html',
-  styleUrls: ['./data-table.scss']
+  styleUrls: ['./data-table.scss'],
 })
 /* Render a table based on json array of data in a simple way (subset of mat-table)
    See https://material.angular.io/components/table/overview for full implementation
   
 */
+// eslint-disable-next-line @angular-eslint/component-class-suffix
 export class PicsaDataTable implements OnInit {
   tableData = new MatTableDataSource([]);
   tableColumns: string[] = [];

apps/picsa-apps/content-dashboard/src/app/layout/header/header.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'station-data-header',
-  templateUrl: './header.html'
+  templateUrl: './header.html',
 })
+// eslint-disable-next-line @angular-eslint/component-class-suffix
 export class StationDataHeader {}

apps/picsa-apps/content-dashboard/src/app/layout/sidebar/sidebar.ts

@@ -3,6 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'station-data-sidebar',
   templateUrl: './sidebar.html',
-  styleUrls: ['./sidebar.scss']
+  styleUrls: ['./sidebar.scss'],
 })
+// eslint-disable-next-line @angular-eslint/component-class-suffix
 export class StationDataSidebar {}

apps/picsa-apps/content-dashboard/src/app/pages/data-upload/data-upload.page.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { transferArrayItem, CdkDragDrop } from '@angular/cdk/drag-drop';
 import { NgxFileDropEntry, FileSystemFileEntry } from 'ngx-file-drop';
 import { Papa, PapaParseConfig } from 'ngx-papaparse';
@@ -8,9 +8,10 @@ import { IChartSummary_V2 } from '@picsa/models';
 @Component({
   selector: 'dashboard-data-upload',
   templateUrl: './data-upload.page.html',
-  styleUrls: ['./data-upload.page.scss']
+  styleUrls: ['./data-upload.page.scss'],
 })
-export class DataUpload implements OnInit {
+// eslint-disable-next-line @angular-eslint/component-class-suffix
+export class DataUpload {
   files: NgxFileDropEntry[];
   csvFile: File;
   csvData: IParsedField[] = [];
@@ -23,8 +24,6 @@ export class DataUpload implements OnInit {
 
   constructor(private papa: Papa, private http: HttpClient) {}
 
-  ngOnInit() {}
-
   public fileDropped(files: NgxFileDropEntry[]) {
     console.log('files dropped', files);
     this.files = files;
@@ -69,8 +68,8 @@ export class DataUpload implements OnInit {
       json: this.csvMappedData,
       keys: {
         x: 'Year',
-        value: ['Rainfall']
-      }
+        value: ['Rainfall'],
+      },
     };
   }
 
@@ -83,19 +82,9 @@ export class DataUpload implements OnInit {
       // move existing out (limit 1 per container)
       if (event.container.data.length > 0) {
         // empty container, transfer existing item out first
-        transferArrayItem(
-          event.container.data,
-          this.csvFields,
-          0,
-          this.csvFields.length - 1
-        );
+        transferArrayItem(event.container.data, this.csvFields, 0, this.csvFields.length - 1);
       }
-      transferArrayItem(
-        event.previousContainer.data,
-        event.container.data,
-        event.previousIndex,
-        event.currentIndex
-      );
+      transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
       // prepare data preview
       this.mapCSVData();
     }
@@ -110,20 +99,12 @@ export class DataUpload implements OnInit {
   private async generateDataMappings() {
     this.siteDataMapping.forEach((el, i) => {
       // do field mapping each time as original this.csvFields directly altered on match
-      const csvFields = this.csvFields.map(field => field.toLowerCase());
-      const matchString = el.field
-        .toString()
-        .substr(0, 4)
-        .toLowerCase();
-      const matchField = csvFields.find(f => f.includes(matchString));
+      const csvFields = this.csvFields.map((field) => field.toLowerCase());
+      const matchString = el.field.toString().substr(0, 4).toLowerCase();
+      const matchField = csvFields.find((f) => f.includes(matchString));
       // if match found remove from csvFields array and populate mapping array
       if (matchField) {
-        transferArrayItem(
-          this.csvFields,
-          this.siteDataMapping[i].mappedField,
-          csvFields.indexOf(matchField),
-          0
-        );
+        transferArrayItem(this.csvFields, this.siteDataMapping[i].mappedField, csvFields.indexOf(matchField), 0);
       }
     });
     console.log('site mapping', this.siteDataMapping);
@@ -133,16 +114,16 @@ export class DataUpload implements OnInit {
   mapCSVData() {
     // get the names of fields that have been mapped
     const map: any = {};
-    this.siteDataMapping.forEach(mapping => {
+    this.siteDataMapping.forEach((mapping) => {
       map[mapping.field] = mapping.mappedField[0];
     });
     // map data where exists
-    this.csvMappedData = this.csvData.map(el => {
+    this.csvMappedData = this.csvData.map((el) => {
       const summary: IChartSummary_V2 = {
         Year: map.Year ? Number(el[map.Year]) : null,
         StartDate: map.StartDate ? new Date(el[map.StartDate]) : null,
         Length: map.Length ? Number(el[map.Length]) : null,
-        Rainfall: map.Rainfall ? Number(el[map.Rainfall]) : null
+        Rainfall: map.Rainfall ? Number(el[map.Rainfall]) : null,
       };
       // check for invalid dates
       if (isNaN(summary.StartDate.getDate())) {
@@ -160,25 +141,22 @@ export class DataUpload implements OnInit {
   private async generateCSVData(csv: string | File, preview = false) {
     const data = await this.parseCSV(csv, {
       preview: preview ? 5 : 0,
-      header: true
+      header: true,
     });
     this.csvFields = Object.keys(data[0]);
     this.csvData = data;
   }
 
   // promise wrapper for papa.parse callback
   // also includes 'header' which formats as json array instead of data row array
-  private parseCSV(
-    csv: string | File,
-    config?: PapaParseConfig
-  ): Promise<any[]> {
+  private parseCSV(csv: string | File, config?: PapaParseConfig): Promise<any[]> {
     console.log('parsing csv');
     return new Promise((resolve, reject) => {
       this.papa.parse(csv, {
         header: true,
         complete: (results, file) => resolve(results.data),
-        error: err => reject(err),
-        ...config
+        error: (err) => reject(err),
+        ...config,
       });
     });
   }
@@ -208,28 +186,26 @@ const SITE_DATA_FIELDS: ISiteDataField[] = [
     field: 'Year',
     description:
       'The year in which the season started. If the season spans multiple years, e.g. "2009-2010", simply put "2009"',
-    dataType: 'number'
+    dataType: 'number',
   },
   {
     field: 'Length',
     description: 'The total number of days the season lasted, e.g. 102',
-    dataType: 'number'
+    dataType: 'number',
   },
   {
     field: 'Rainfall',
-    description:
-      'The total amount of rain, in mm, that fell during the season, e.g. 890',
-    dataType: 'number'
+    description: 'The total amount of rain, in mm, that fell during the season, e.g. 890',
+    dataType: 'number',
   },
   {
     field: 'StartDate',
-    description:
-      'The date when the season started, e.g. "04-Mar-2010" or "25/8/11"',
-    dataType: 'date'
-  }
+    description: 'The date when the season started, e.g. "04-Mar-2010" or "25/8/11"',
+    dataType: 'date',
+  },
 ];
 
-const SITE_DATA_MAPPINGS: ISiteDataMapping[] = SITE_DATA_FIELDS.map(field => ({
+const SITE_DATA_MAPPINGS: ISiteDataMapping[] = SITE_DATA_FIELDS.map((field) => ({
   ...field,
-  mappedField: []
+  mappedField: [],
 }));

apps/picsa-apps/content-dashboard/src/app/pages/home/home.page.ts

@@ -6,6 +6,7 @@ import { PicsaChartComponent } from '@picsa/shared/features/charts/chart';
   templateUrl: './home.page.html',
   styleUrls: ['./home.page.scss'],
 })
+// eslint-disable-next-line @angular-eslint/component-class-suffix
 export class HomePage implements AfterViewInit {
   @ViewChild('chart', { static: true }) chart: PicsaChartComponent;
   sampleData = {

apps/picsa-apps/content-dashboard/src/app/pages/map/map.page.ts

@@ -1,12 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'station-data-map',
   templateUrl: './map.page.html',
-  styleUrls: ['./map.page.scss']
+  styleUrls: ['./map.page.scss'],
 })
-export class MapPage implements OnInit {
-  constructor() {}
-
-  ngOnInit() {}
-}
+// eslint-disable-next-line @angular-eslint/component-class-suffix
+export class MapPage {}

apps/picsa-apps/extension-app-e2e/.eslintrc.json

@@ -4,7 +4,10 @@
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
-      "rules": {}
+      "rules": {
+        "@angular-eslint/component-selector": ["off"],
+        "@angular-eslint/component-class-suffix": ["off"]
+      }
     }
   ]
 }

apps/picsa-apps/extension-app/src/app/components/whatsapp-group/whatsapp-group.ts

@@ -3,12 +3,10 @@ import { Component, Input } from '@angular/core';
 @Component({
   selector: 'whatsapp-group',
   templateUrl: 'whatsapp-group.html',
-  styleUrls: ['./whatsapp-group.scss']
+  styleUrls: ['./whatsapp-group.scss'],
 })
 export class WhatsappGroupComponent {
-  @Input('group') group: IWhatsAppGroup;
-
-  constructor() {}
+  @Input() group: IWhatsAppGroup;
 }
 
 export interface IWhatsAppGroup {

apps/picsa-apps/extension-app/src/app/pages/discussions/discussions.page.ts

@@ -4,15 +4,14 @@ import { IWhatsAppGroup } from '../../components/whatsapp-group/whatsapp-group';
 @Component({
   selector: 'app-discussions',
   templateUrl: './discussions.page.html',
-  styleUrls: ['./discussions.page.scss']
+  styleUrls: ['./discussions.page.scss'],
 })
 export class DiscussionsPage {
   groups: IWhatsAppGroup[] = [
     {
       label: 'App Feedback',
       description: 'Give your suggestions or ask for help using the PICSA app',
-      link: 'https://chat.whatsapp.com/8wEc1tjLRqI7XyU4Lv5OLk'
-    }
+      link: 'https://chat.whatsapp.com/8wEc1tjLRqI7XyU4Lv5OLk',
+    },
   ];
-  constructor() {}
 }

apps/picsa-apps/extension-app/src/app/pages/error/error.page.ts

@@ -1,20 +1,13 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-error',
   templateUrl: './error.page.html',
-  styleUrls: ['./error.page.scss']
+  styleUrls: ['./error.page.scss'],
 })
-export class ErrorPage implements OnInit {
+export class ErrorPage {
   reloading: boolean;
   errorMessage: string;
-  constructor() {}
-
-  ngOnInit(): void {
-    //Called after the constructor, initializing input properties, and the first call to ngOnChanges.
-    //Add 'implements OnInit' to the class.
-    // this.errorMessage = this.ngRedux.getState().platform.error;
-  }
 
   reloadPage() {
     this.reloading = true;