🏷️ Migration of Label Screen Components

package.cordovabuild.json

@@ -7,6 +7,9 @@
     "type": "git",
     "url": "git+https://github.com/e-mission/e-mission-phone.git"
   },
+  "scripts": {
+    "build": "npx webpack --config webpack.prod.js && npx cordova build"
+  },
   "devDependencies": {
     "@babel/core": "^7.21.3",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
@@ -17,6 +20,7 @@
     "@babel/preset-typescript": "^7.21.4",
     "@ionic/cli": "6.20.8",
     "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",
@@ -89,6 +93,10 @@
     }
   },
   "dependencies": {
+    "@havesource/cordova-plugin-push": "git+https://github.com/havesource/cordova-plugin-push.git#4.0.0-dev.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",
@@ -100,7 +108,6 @@
     "angular-ui-router": "0.2.13",
     "animate.css": "^3.5.2",
     "bottleneck": "^2.19.5",
-    "core-js": "^2.5.7",
     "cordova-android": "11.0.0",
     "cordova-ios": "6.2.0",
     "cordova-plugin-advanced-http": "3.3.1",
@@ -122,8 +129,7 @@
     "cordova-plugin-ionic-webview": "5.0.0",
     "cordova-plugin-local-notification-12": "github:e-mission/cordova-plugin-local-notification-12#v0.1.4-fix-android-action",
     "cordova-plugin-x-socialsharing": "6.0.4",
-    "phonegap-plugin-barcodescanner": "git+https://github.com/phonegap/phonegap-plugin-barcodescanner#v8.1.0",
-    "@havesource/cordova-plugin-push": "git+https://github.com/havesource/cordova-plugin-push.git#4.0.0-dev.0",
+    "core-js": "^2.5.7",
     "enketo-core": "^6.1.7",
     "fast-xml-parser": "^4.2.2",
     "fs-extra": "^9.0.1",
@@ -140,14 +146,16 @@
     "ng-i18next": "^1.0.7",
     "npm": "^9.6.3",
     "nvd3": "^1.8.6",
+    "phonegap-plugin-barcodescanner": "git+https://github.com/phonegap/phonegap-plugin-barcodescanner#v8.1.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.*",
     "react-dom": "^18.2.*",
     "react-i18next": "^12.3.1",
     "react-native-paper": "^5.8.0",
-    "react-native-safe-area-context": "^4.5.3",
+    "react-native-safe-area-context": "^4.6.3",
+    "react-native-screens": "^3.22.0",
     "react-native-vector-icons": "^9.2.0",
-    "react-native-web": "^0.19.*",
+    "react-native-web": "^0.18.10",
     "react-native-web-webview": "^1.0.2",
     "react-qr-code": "^2.0.11",
     "shelljs": "^0.8.5"

package.serve.json

@@ -9,7 +9,7 @@
   },
   "scripts": {
     "setup-serve": "./bin/download_settings_controls.js && ./bin/setup_autodeploy.js",
-    "serve": "webpack && concurrently -k \"phonegap --verbose serve\" \"webpack --watch\"",
+    "serve": "webpack --config webpack.dev.js && concurrently -k \"phonegap --verbose serve\" \"webpack --config webpack.dev.js --watch\"",
     "serve-only": "phonegap --verbose serve"
   },
   "devDependencies": {
@@ -41,6 +41,9 @@
     "webpack-cli": "^5.0.1"
   },
   "dependencies": {
+    "@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",
@@ -74,9 +77,10 @@
     "react-dom": "^18.2.*",
     "react-i18next": "^12.3.1",
     "react-native-paper": "^5.8.0",
-    "react-native-safe-area-context": "^4.5.3",
+    "react-native-safe-area-context": "^4.6.3",
+    "react-native-screens": "^3.22.0",
     "react-native-vector-icons": "^9.2.0",
-    "react-native-web": "^0.19.*",
+    "react-native-web": "^0.18.10",
     "react-native-web-webview": "^1.0.2",
     "react-qr-code": "^2.0.11",
     "shelljs": "^0.8.5"

tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist/",
+    "sourceMap": true,
+    "module": "es6",
+    "target": "es5",
+    "esModuleInterop": true,
+    "jsx": "react",
+    "allowJs": true,
+    "moduleResolution": "node"
+  },
+  "include": ["www/**/*"],
+  "exclude": ["**/www/manual_lib/*", "**/node_modules/*", "**/dist/*"],
+}

webpack.config.js

@@ -1,11 +1,8 @@
 const path = require('path')
-const glob = require('glob')
 const webpack = require('webpack')
 
 module.exports = {
-  mode: 'development',
   entry: './www/index.js',
-  devtool: 'inline-source-map',
   output: {
     path: path.resolve(__dirname, 'www/dist'),
     filename: 'bundle.js',
@@ -15,59 +12,47 @@ module.exports = {
       // to load CSS and SCSS (enketo-core only supplies SCSS)
       {
         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'],
       },
       // to resolve url() in CSS
       {
         test: /\.(png|jpg)$/,
-        loader: 'url-loader'
+        include: [path.resolve(__dirname, 'www/css'),
+                  path.resolve(__dirname, 'node_modules/react-native-paper'),
+                  path.resolve(__dirname, 'node_modules/@react-navigation/elements')],
+        use: 'url-loader',
       },
       // necessary for react-native-web to bundle JSX
       {
-        test: /\.jsx$/,
-        exclude: /node_modules\/(?!()\/).*/,
-        use: {
-          loader: 'babel-loader',
-          options: {
-            presets: ['@babel/preset-env', '@babel/preset-react'],
-          },
+        test: /\.(js|jsx|ts|tsx)$/,
+        include: [path.resolve(__dirname, 'www'),
+                  path.resolve(__dirname, 'node_modules/react-native-vector-icons')],
+        loader: 'babel-loader',
+        options: {
+          presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
+        },
+      },
+      // necessary to load TypeScript files
+      {
+        test: /\.(ts|tsx)?$/,
+        include: path.resolve(__dirname, 'www'),
+        loader: 'ts-loader',
+        options: {
+          transpileOnly: true,
+          experimentalWatchApi: true,
         },
       },
       // necessary for react-native-paper to load images, fonts, and vector graphics
       {
         test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/,
+        include: [path.resolve(__dirname, 'www'),
+                  path.resolve(__dirname, 'node_modules/react-native-vector-icons')],
         type: 'asset/resource',
       },
-      // necessary for react-native-paper to load icons
-      {
-        test: /\.js$/,
-        exclude: /node_modules[/\\](?!react-native-vector-icons)/,
-        use: {
-          loader: 'babel-loader',
-          options: {
-            // Disable reading babel configuration
-            babelrc: false,
-            configFile: false,
-
-            // The configuration for compilation
-            presets: [
-              ['@babel/preset-env', { useBuiltIns: 'usage' }],
-              '@babel/preset-react',
-              '@babel/preset-flow',
-              "@babel/preset-typescript"
-            ],
-            plugins: [
-              '@babel/plugin-proposal-class-properties',
-              '@babel/plugin-proposal-object-rest-spread'
-            ],
-          },
-        },
-      },
-      // necessary to load html files
-      {
-        test: /\.html$/i,
-        loader: 'file-loader'
-      }
     ],
   },
   plugins: [
@@ -77,20 +62,19 @@ module.exports = {
       jQuery: 'jquery',
       moment: 'moment',
       L: 'leaflet',
-    })
+    }),
+    new webpack.DefinePlugin({
+      // __DEV__ is needed by FlashList; it's set false for production so that certain debugging
+      // checks can be skipped and performance can be improved
+      __DEV__: process.env.NODE_ENV !== 'production' || true,
+    }),
   ],
-  devServer: {
-    historyApiFallback: true,
-    contentBase: './',
-    hot: true,
-  },
   // "react-native" must be aliased to "react-native-web"
   // https://necolas.github.io/react-native-web/docs/setup/#package-aliasing
   resolve: {
     alias: {
       'react-native$': 'react-native-web',
       'react-native-webview': 'react-native-web-webview',
-      'react-native-vector-icons': false,
       /* 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 */

webpack.dev.js

@@ -0,0 +1,12 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.config.js');
+
+module.exports = merge(common, {
+  mode: 'development',
+  devtool: 'inline-source-map',
+  devServer: {
+    historyApiFallback: true,
+    contentBase: './',
+    hot: true,
+  },
+});

webpack.prod.js

@@ -0,0 +1,29 @@
+const path = require('path')
+const common = require('./webpack.config.js');
+const { merge } = require('webpack-merge');
+
+module.exports = merge(common, {
+  mode: 'production',
+  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"],
+        },
+      },
+    ],
+  },
+});

www/css/main.diary.css

@@ -190,6 +190,12 @@ a.item-content {
   width: 230px;
 }
 
+.popover .scroll-content {
+  height: auto;
+  margin: 0 !important;
+  border-radius: 0 0 10px 10px !important;
+}
+
 .big-popover {
   height: 40%;
   width: 75%;
@@ -549,43 +555,3 @@ div.labelfilterlist {
   border-top-right-radius: 5px;
   border-bottom-right-radius: 5px;
 }
-
-enketo-notes-list, .notes-list {
-  width: 100%;
-  margin-bottom: 0px;
-}
-
-.notes-list {
-  padding: 0 12px 5px 12px;
-  text-align: center;
-}
-
-.notes-list-grid {
-  display: grid;
-  grid-template-columns: auto auto min-content;
-  grid-auto-rows: 30px;
-  align-items: center;
-  gap: 0 8px;
-  font-size: 12px;
-}
-
-.notes-list-grid > li {
-  display: contents;
-}
-
-/* the trash can should appear a bit larger */
-.notes-list-grid .icon {
-  font-size: 22px;
-}
-
-/* the note's label will be left-aligned */
-.notes-list-grid b {
-  text-align: left;
-  margin-left: 5px;
-}
-
-.notes-list-grid p {
-  font-size: inherit;
-  color: inherit;
-  margin: 0;
-}