Merge pull request #1126 from e-mission/service_rewrite_2023

🎀 Final change of the service rewrite

.github/workflows/code-coverage.yml

@@ -0,0 +1,35 @@
+name: code coverage
+on:
+  pull_request:
+    types:
+      - opened
+      - reopened
+      - synchronize
+      - ready_for_review
+
+jobs:
+  run-codecov:
+    if: github.event.pull_request.draft == false
+    runs-on: macos-latest
+    steps:
+      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
+      - uses: actions/checkout@v2
+
+      - name: Setup the serve environment
+        shell: bash -l {0}
+        run: |
+          bash setup/setup_serve.sh
+
+      - name: Run Jest tests
+        shell: bash -l {0}
+        run: |
+          source setup/activate_serve.sh
+          npx jest
+
+      - name: Upload coverage reports to Codecov
+        uses: codecov/codecov-action@v3
+        with:
+          files: ./coverage/coverage-final.json
+          flags: unit
+          fail_ci_if_error: ${{ github.repository == 'e-mission/e-mission-phone' }}
+

.github/workflows/prettier.yml

@@ -0,0 +1,12 @@
+name: prettier
+on: 
+  pull_request:
+
+jobs:
+  run-prettier:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - run: npx prettier@3.1.0 --check www
+
+

.github/workflows/serve-install.yml

@@ -59,11 +59,6 @@ jobs:
         echo "ionic version"
         npx ionic --version
 
-    - name: Run Jest tests
-      shell: bash -l {0}
-      run: |
-        npx jest
-
 # TODO: figure out how to check that a server started correctly
 #    - name: Try starting it
 #      run: npx run serve

.gitignore

@@ -4,6 +4,7 @@
 node_modules/
 platforms/
 plugins/
+dist/
 www/lib/
 package-hooks/
 .DS_Store
@@ -16,3 +17,4 @@ app-settings.json
 www/dist/
 config.xml
 package.json
+coverage/

.prettierignore

@@ -0,0 +1,12 @@
+# Ignore www/dist, json
+www/dist
+www/json
+
+# Ignore all HTML files:
+**/*.html
+
+# This is the pattern to check only www directory
+# Ignore all
+/*
+# but don't ignore all the files in www directory
+!/www

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "bracketSameLine": true,
+  "endOfLine": "lf",
+  "semi": true
+}

babel.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  presets: ['@babel/preset-env', '@babel/preset-typescript', '@babel/preset-react'],
+  plugins: ['@babel/plugin-transform-flow-strip-types'],
+}

codecov.yml

@@ -0,0 +1,8 @@
+comment:                  
+  layout: " diff, flags, files"
+  behavior: default
+  require_changes: false 
+  require_base: false      
+  require_head: true      
+  hide_project_coverage: false 
+

jest.config.js

@@ -0,0 +1,21 @@
+module.exports = {
+  testEnvironment: 'jsdom',
+  testPathIgnorePatterns: [
+    "/node_modules/",
+    "/dist/",
+    "/platforms/",
+    "/plugins/",
+    "/lib/",
+  ],
+  preset: 'react-native',
+  transform: {
+    "^.+\\.(ts|tsx|js|jsx)$": "babel-jest"
+  },
+  transformIgnorePatterns: [
+    "node_modules/(?!((enketo-transformer/dist/enketo-transformer/web)|(jest-)?react-native(-.*)?|@react-native(-community)?)/)",
+  ],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  moduleDirectories: ["node_modules", "src"],
+  globals: {"__DEV__": false},
+  collectCoverage: true,
+};

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",
@@ -102,17 +101,11 @@
   },
   "dependencies": {
     "@havesource/cordova-plugin-push": "git+https://github.com/havesource/cordova-plugin-push.git#4.0.0-dev.0",
+    "@messageformat/core": "^3.2.0",
     "@react-navigation/native": "^6.1.7",
     "@react-navigation/stack": "^6.3.17",
     "@shopify/flash-list": "^1.3.1",
-    "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",
@@ -141,27 +134,22 @@
     "cordova-plugin-x-socialsharing": "6.0.4",
     "core-js": "^2.5.7",
     "enketo-core": "^6.1.7",
+    "enketo-transformer": "^4.0.0",
     "fast-xml-parser": "^4.2.2",
     "fs-extra": "^9.0.1",
-    "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",
-    "messageformat": "^2.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

@@ -18,15 +18,17 @@
     "@babel/core": "^7.21.3",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
+    "@babel/plugin-transform-flow-strip-types": "^7.22.5",
     "@babel/preset-env": "^7.21.4",
     "@babel/preset-flow": "^7.21.4",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.4",
     "@ionic/cli": "6.20.8",
+    "@testing-library/react-native": "^12.3.0",
     "@types/luxon": "^3.3.0",
     "@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",
@@ -35,58 +37,49 @@
     "expose-loader": "^4.1.0",
     "file-loader": "^6.2.0",
     "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "phonegap": "9.0.0+cordova.9.0.0",
     "process": "^0.11.10",
     "sass": "^1.62.1",
     "sass-loader": "^13.3.1",
     "style-loader": "^3.3.3",
-    "ts-jest": "^29.1.1",
     "ts-loader": "^9.4.2",
+    "ts-node": "^10.9.1",
     "typescript": "^5.0.3",
     "url-loader": "^4.1.1",
     "webpack": "^5.0.1",
-    "webpack-cli": "^5.0.1"
+    "webpack-cli": "^5.0.1",
+    "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",
-    "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",
     "chartjs-adapter-luxon": "^1.3.1",
     "chartjs-plugin-annotation": "^3.0.1",
     "core-js": "^2.5.7",
     "enketo-core": "^6.1.7",
+    "enketo-transformer": "^4.0.0",
     "fast-xml-parser": "^4.2.2",
     "fs-extra": "^9.0.1",
-    "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",
-    "messageformat": "^2.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({
@@ -79,7 +75,12 @@ module.exports = {
       /* Enketo expects its per-app configuration to be available as 'enketo-config',
         so we have to alias it here.
       https://github.com/enketo/enketo-core#global-configuration */
-      'enketo/config': path.resolve(__dirname, 'www/js/config/enketo-config')
+      'enketo/config': path.resolve(__dirname, 'www/js/config/enketo-config'),
+      /* enketo-transformer has 'libxslt' as an optional peer dependency.
+        We don't need it since we are only doing client-side transformations via
+          enketo-transformer/web (https://github.com/enketo/enketo-transformer#web).
+        So, we can tell webpack it's ok to ignore libxslt by aliasing it to false. */
+      'libxslt': false,
     },
     extensions: ['.web.js', '.jsx', '.tsx', '.ts', '.js'],
   },

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',