trying to fix my branch to be up to date

README.md

@@ -16,7 +16,7 @@ Updating the UI only
 ---
 [![osx-serve-install](https://github.com/e-mission/e-mission-phone/workflows/osx-serve-install/badge.svg)](https://github.com/e-mission/e-mission-phone/actions?query=workflow%3Aosx-serve-install)
 
-If you want to make only UI changes, (as opposed to modifying the existing plugins, adding new plugins, etc), you can use the **new and improved** (as of June 2018) e-mission dev app. 
+If you want to make only UI changes, (as opposed to modifying the existing plugins, adding new plugins, etc), you can use the **new and improved** (as of June 2018) [e-mission dev app](https://github.com/e-mission/e-mission-devapp/) and install the most recent version from [releases](https://github.com/e-mission/e-mission-devapp/releases). 
 
 ### Installing (one-time)
 

package.cordovabuild.json

@@ -7,10 +7,37 @@
     "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": {
-    "cordova": "11.1.0",
+    "@babel/core": "^7.21.3",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
+    "@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",
-    "bower": "1.8.14"
+    "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",
+    "css-loader": "^6.7.4",
+    "exports-loader": "^4.0.0",
+    "expose-loader": "^4.1.0",
+    "file-loader": "^6.2.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-loader": "^9.4.2",
+    "typescript": "^5.0.3",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.0.1",
+    "webpack-cli": "^5.0.1"
   },
   "cordova": {
     "platforms": [
@@ -66,6 +93,21 @@
     }
   },
   "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",
+    "angular-nvd3": "^1.0.7",
+    "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",
+    "animate.css": "^3.5.2",
+    "bottleneck": "^2.19.5",
     "cordova-android": "11.0.0",
     "cordova-ios": "6.2.0",
     "cordova-plugin-advanced-http": "3.3.1",
@@ -87,9 +129,35 @@
     "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",
+    "core-js": "^2.5.7",
+    "enketo-core": "^6.1.7",
+    "fast-xml-parser": "^4.2.2",
     "fs-extra": "^9.0.1",
+    "i18next": "^22.5.0",
+    "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",
+    "messageformat": "^2.3.0",
+    "moment": "^2.29.4",
+    "moment-timezone": "^0.5.43",
+    "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",
-    "@havesource/cordova-plugin-push": "git+https://github.com/havesource/cordova-plugin-push.git#4.0.0-dev.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.6.3",
+    "react-native-screens": "^3.22.0",
+    "react-native-vector-icons": "^9.2.0",
+    "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"

setup/setup_serve.sh

@@ -12,3 +12,5 @@ npm install
 
 echo "Pulling the plugin-specific UIs"
 npm run setup-serve
+
+npx cordova prepare

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,34 +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: /\.(js|jsx)$/,
-        exclude: /node_modules[/\\](?!react-native-vector-icons)/,
-        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 to load html files
-      {
-        test: /\.html$/i,
-        loader: 'file-loader'
-      }
     ],
   },
   plugins: [
@@ -52,13 +62,13 @@ 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: {

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;
-}