🎀 UI Migration Wrap-up

.github/workflows/prettier.yml

@@ -7,6 +7,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - run: npx prettier@3.0.3 --check www
+      - run: npx prettier@3.1.0 --check www
 
 

.gitignore

@@ -4,6 +4,7 @@
 node_modules/
 platforms/
 plugins/
+dist/
 www/lib/
 package-hooks/
 .DS_Store

.prettierignore

@@ -1,6 +1,5 @@
-# Ignore www/dist, manual_lib, json
+# Ignore www/dist, json
 www/dist
-www/manual_lib
 www/json
 
 # Ignore all HTML files:

jest.config.js

@@ -2,10 +2,10 @@ module.exports = {
   testEnvironment: 'jsdom',
   testPathIgnorePatterns: [
     "/node_modules/",
+    "/dist/",
     "/platforms/",
     "/plugins/",
     "/lib/",
-    "/manual_lib/"
   ],
   preset: 'react-native',
   transform: {

package.cordovabuild.json

@@ -28,7 +28,6 @@
     "@types/luxon": "^3.3.0",
     "@types/react": "^18.2.20",
     "babel-loader": "^9.1.2",
-    "babel-plugin-angularjs-annotate": "^0.10.0",
     "babel-plugin-optional-require": "^0.3.1",
     "concurrently": "^8.0.1",
     "cordova": "^11.1.0",
@@ -106,15 +105,7 @@
     "@react-navigation/native": "^6.1.7",
     "@react-navigation/stack": "^6.3.17",
     "@shopify/flash-list": "^1.3.1",
-    "@types/leaflet": "1.9.4",
-    "angular": "1.6.7",
-    "angular-animate": "1.6.7",
-    "angular-local-storage": "^0.7.1",
-    "angular-sanitize": "1.6.7",
-    "angular-simple-logger": "^0.1.7",
-    "angular-translate": "^2.18.1",
-    "angular-translate-loader-static-files": "^2.18.1",
-    "angular-ui-router": "0.2.13",
+    "@types/leaflet": "^1.9.4",
     "animate.css": "^3.5.2",
     "bottleneck": "^2.19.5",
     "chart.js": "^4.3.0",
@@ -146,25 +137,19 @@
     "enketo-transformer": "^4.0.0",
     "fast-xml-parser": "^4.2.2",
     "fs-extra": "^9.0.1",
-    "humanize-duration": "3.31.0",
-    "i18next": "^22.5.0",
+    "humanize-duration": "^3.31.0",
+    "i18next": "^23.7.6",
     "install": "^0.13.0",
-    "ionic-datepicker": "1.2.1",
-    "ionic-toast": "^0.4.1",
-    "jquery": "^3.1.0",
     "klaw-sync": "^6.0.0",
     "leaflet": "^1.9.4",
     "luxon": "^3.3.0",
-    "moment": "^2.29.4",
-    "moment-timezone": "^0.5.43",
-    "ng-i18next": "^1.0.7",
     "npm": "^9.6.3",
     "phonegap-plugin-barcodescanner": "git+https://github.com/phonegap/phonegap-plugin-barcodescanner#v8.1.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.*",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.*",
-    "react-i18next": "^12.3.1",
+    "react-i18next": "^13.5.0",
     "react-native-paper": "^5.8.0",
     "react-native-paper-dates": "^0.18.12",
     "react-native-safe-area-context": "^4.6.3",

package.serve.json

@@ -29,7 +29,6 @@
     "@types/react": "^18.2.20",
     "babel-jest": "^29.7.0",
     "babel-loader": "^9.1.2",
-    "babel-plugin-angularjs-annotate": "^0.10.0",
     "babel-plugin-optional-require": "^0.3.1",
     "concurrently": "^8.0.1",
     "cordova": "^11.1.0",
@@ -50,23 +49,15 @@
     "url-loader": "^4.1.1",
     "webpack": "^5.0.1",
     "webpack-cli": "^5.0.1",
-    "prettier": "3.0.3"
+    "prettier": "3.1.0"
   },
   "dependencies": {
     "@messageformat/core": "^3.2.0",
     "@react-navigation/native": "^6.1.7",
     "@react-navigation/stack": "^6.3.17",
     "@shopify/flash-list": "^1.3.1",
     "@types/jest": "^29.5.5",
-    "@types/leaflet": "1.9.4",
-    "angular": "1.6.7",
-    "angular-animate": "1.6.7",
-    "angular-local-storage": "^0.7.1",
-    "angular-sanitize": "1.6.7",
-    "angular-simple-logger": "^0.1.7",
-    "angular-translate": "^2.18.1",
-    "angular-translate-loader-static-files": "^2.18.1",
-    "angular-ui-router": "0.2.13",
+    "@types/leaflet": "^1.9.4",
     "animate.css": "^3.5.2",
     "bottleneck": "^2.19.5",
     "chart.js": "^4.3.0",
@@ -77,24 +68,18 @@
     "enketo-transformer": "^4.0.0",
     "fast-xml-parser": "^4.2.2",
     "fs-extra": "^9.0.1",
-    "humanize-duration": "3.31.0",
-    "i18next": "^22.5.0",
+    "humanize-duration": "^3.31.0",
+    "i18next": "^23.7.6",
     "install": "^0.13.0",
-    "ionic-datepicker": "1.2.1",
-    "ionic-toast": "^0.4.1",
-    "jquery": "^3.1.0",
     "klaw-sync": "^6.0.0",
     "leaflet": "^1.9.4",
     "luxon": "^3.3.0",
-    "moment": "^2.29.4",
-    "moment-timezone": "^0.5.43",
-    "ng-i18next": "^1.0.7",
     "npm": "^9.6.3",
     "prop-types": "^15.8.1",
     "react": "^18.2.*",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.*",
-    "react-i18next": "^12.3.1",
+    "react-i18next": "^13.5.0",
     "react-native-paper": "^5.8.0",
     "react-native-paper-dates": "^0.18.12",
     "react-native-safe-area-context": "^4.6.3",

tsconfig.json

@@ -4,13 +4,15 @@
     "sourceMap": true,
     "module": "es6",
     "target": "es5",
+    "strictNullChecks": true,
     "downlevelIteration": true,
     "esModuleInterop": true,
     "resolveJsonModule": true,
     "jsx": "react",
     "allowJs": true,
-    "moduleResolution": "node"
+    "moduleResolution": "node",
+    "typeRoots": ["node_modules/@types", "www/js/types"],
   },
   "include": ["www/**/*"],
-  "exclude": ["**/www/manual_lib/*", "**/node_modules/*", "**/dist/*"],
+  "exclude": ["**/node_modules/*", "**/dist/*"],
 }

webpack.config.js

@@ -13,7 +13,6 @@ module.exports = {
       {
         test: /\.(scss|css)$/,
         include: [path.resolve(__dirname, 'www/css'),
-                  path.resolve(__dirname, 'www/manual_lib'),
                   path.resolve(__dirname, 'node_modules/enketo-core'),
                   path.resolve(__dirname, 'node_modules/leaflet')],
         use: ['style-loader', 'css-loader', 'sass-loader'],
@@ -57,11 +56,8 @@ module.exports = {
     ],
   },
   plugins: [
-    // to load jQuery and moment globally
+    // to load Leaflet globally
     new webpack.ProvidePlugin({
-      $: 'jquery',
-      jQuery: 'jquery',
-      moment: 'moment',
       L: 'leaflet',
     }),
     new webpack.DefinePlugin({

webpack.prod.js

@@ -7,23 +7,6 @@ module.exports = merge(common, {
   devtool: 'source-map',
   module: {
     rules: [
-      /* In production, Webpack minifies JS files and randomizes variable names.
-          This causes problems with AngularJS unless you use explicit annotations,
-          which we don't.
-          https://docs.angularjs.org/error/$injector/strictdi
-          (The syntax we use is like the 'bad' example: implicit annotations)
-          So rather than change every file in our codebase, I'm adding this
-          babel plugin which basically preprocesses our 'bad' code into 'good' code.
-        Only needed on production because minification doesn't happen on dev. */
-      {
-        test: /\.(js)$/,
-        include: path.resolve(__dirname, 'www'),
-        loader: 'babel-loader',
-        options: {
-          presets: ['@babel/preset-env'],
-          plugins: ["angularjs-annotate"],
-        },
-      },
       {
         test: /\.(js|jsx|ts|tsx)$/,
         loader: 'babel-loader',

www/__mocks__/globalMocks.ts

@@ -8,7 +8,7 @@ export const mockLogger = () => {
   };
 };
 
-let alerts = [];
+let alerts: string[] = [];
 
 export const mockAlert = () => {
   window['alert'] = (message) => {

www/__mocks__/timelineHelperMocks.ts

@@ -1,4 +1,4 @@
-import { MetaData, BEMData, ServerResponse } from '../js/types/serverData';
+import { LocalDt, MetaData, BEMData, ServerResponse } from '../js/types/serverData';
 import {
   CompositeTrip,
   ConfirmedPlace,
@@ -15,7 +15,7 @@ const mockMetaData: MetaData = {
   platform: 'test',
   time_zone: 'America/Los_Angeles',
   write_fmt_time: '1969-07-16T07:01:49.000Z',
-  write_local_dt: null,
+  write_local_dt: null as any,
   origin_key: '1',
 };
 
@@ -24,9 +24,9 @@ export const mockLabelOptions: LabelOptions = {
   PURPOSE: null,
   REPLACED_MODE: null,
   translations: null,
-};
+} as unknown as LabelOptions;
 
-const mockConfirmedPlaceData: ConfirmedPlace = {
+const mockConfirmedPlaceData = {
   source: 'DwellSegmentationTimeFilter',
   key: null,
   origin_key: null,
@@ -46,34 +46,30 @@ const mockConfirmedPlaceData: ConfirmedPlace = {
   raw_places: [null, null],
   enter_ts: 1437578093.881,
   exit_ts: 1437578093.881,
-};
+} as unknown as ConfirmedPlace;
+
 // using parse/stringify to deep copy & populate data
 let tempMetaData = JSON.parse(JSON.stringify(mockMetaData));
 tempMetaData.write_ts = 2;
 tempMetaData.origin_key = '2';
 export const mockMetaDataTwo = tempMetaData;
 
-export const mockUnprocessedTrip: UnprocessedTrip = {
+export const mockUnprocessedTrip = {
   _id: { $oid: 'mockUnprocessedTrip' },
   additions: [],
   confidence_threshold: 0.0,
   distance: 1.0,
   duration: 3.0,
   end_fmt_time: '',
   end_loc: { type: 'Point', coordinates: [] },
-  end_local_dt: null,
-  expectation: null,
   inferred_labels: [],
   key: 'mockUnprocessedTrip',
   locations: [],
   origin_key: '',
   source: '',
-  start_local_dt: null,
   start_ts: 0.1,
   start_loc: { type: 'Point', coordinates: [] },
-  starting_trip: null,
-  user_input: null,
-};
+} as unknown as UnprocessedTrip;
 
 export const mockCompData: ServerResponse<CompositeTrip> = {
   phone_data: [
@@ -152,7 +148,8 @@ export const mockCompData: ServerResponse<CompositeTrip> = {
       metadata: mockMetaData,
     },
   ],
-};
+} as unknown as ServerResponse<CompositeTrip>;
+
 // Setup for second mockData
 let newPhoneData = JSON.parse(JSON.stringify(mockCompData.phone_data[0]));
 newPhoneData.data._id.$oid = 'mockDataTwo';
@@ -188,18 +185,10 @@ export const mockTransitions: Array<BEMData<TripTransition>> = [
 
 const mockFilterLocation: FilteredLocation = {
   accuracy: 0.1,
-  altitude: 100,
-  elapsedRealtimeNanos: 10000,
-  filter: 'time',
-  fmt_time: '',
-  heading: 1.0,
   latitude: 1.0,
-  loc: null,
-  local_dt: null,
   longitude: -1.0,
-  sensed_speed: 0,
   ts: 100,
-};
+} as FilteredLocation;
 let mockFilterLocationTwo = JSON.parse(JSON.stringify(mockFilterLocation));
 mockFilterLocationTwo.ts = 900;
 mockFilterLocationTwo.longitude = 200;
@@ -216,38 +205,31 @@ export const mockFilterLocations: Array<BEMData<FilteredLocation>> = [
   },
 ];
 
-export const mockConfigModeOfStudy: AppConfig = {
-  server: null,
+export const mockConfigModeOfStudy = {
   survey_info: {
     'trip-labels': 'MULTILABEL',
-    surveys: null,
   },
   intro: {
     mode_studied: 'sample_study',
   },
-};
-export const mockConfigNoModeOfStudy: AppConfig = {
-  server: null,
+} as AppConfig;
+export const mockConfigNoModeOfStudy = {
   survey_info: {
     'trip-labels': 'MULTILABEL',
-    surveys: null,
   },
   intro: {},
-};
-export const mockConfigEnketo: AppConfig = {
-  server: null,
+} as AppConfig;
+export const mockConfigEnketo = {
   survey_info: {
     'trip-labels': 'ENKETO',
     surveys: {
       TripConfirmSurvey: {
         compatibleWith: 1.2,
-        formPath: null,
-        labelTemplate: null,
-        version: null,
       },
     },
   },
-};
+  intro: {},
+} as unknown as AppConfig;
 
 // Used by jest.mocks() to return a various mocked objects.
 export const fakeStartTsOne = -14576291;