🧹 Post-Migration Code Cleanup

package.cordovabuild.json

@@ -150,7 +150,7 @@
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.*",
     "react-i18next": "^13.5.0",
-    "react-native-paper": "^5.8.0",
+    "react-native-paper": "^5.11.0",
     "react-native-paper-dates": "^0.18.12",
     "react-native-safe-area-context": "^4.6.3",
     "react-native-screens": "^3.22.0",

package.serve.json

@@ -80,7 +80,7 @@
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.*",
     "react-i18next": "^13.5.0",
-    "react-native-paper": "^5.8.0",
+    "react-native-paper": "^5.11.0",
     "react-native-paper-dates": "^0.18.12",
     "react-native-safe-area-context": "^4.6.3",
     "react-native-screens": "^3.22.0",

www/__mocks__/fileSystemMocks.ts

@@ -4,7 +4,7 @@ export const mockFileSystem = () => {
     onerror: (e: any) => void;
     write: (obj: Blob) => void;
   };
-  window['resolveLocalFileSystemURL'] = function (parentDir, handleFS) {
+  window['resolveLocalFileSystemURL'] = (parentDir, handleFS) => {
     const fs = {
       filesystem: {
         root: {

www/__mocks__/pushNotificationMocks.ts

@@ -18,16 +18,10 @@ export const mockPushNotification = () => {
   };
 };
 
-export const clearNotifMock = function () {
+export function clearNotifMock() {
   notifSettings = {};
   onList = {};
   called = null;
-};
-
-export const getOnList = function () {
-  return onList;
-};
-
-export const getCalled = function () {
-  return called;
-};
+}
+export const getOnList = () => onList;
+export const getCalled = () => called;

www/__tests__/inputMatcher.test.ts

@@ -1,6 +1,7 @@
 import { mockBEMUserCache } from '../__mocks__/cordovaMocks';
 import { mockLogger } from '../__mocks__/globalMocks';
 import { unprocessedLabels, updateLocalUnprocessedInputs } from '../js/diary/timelineHelper';
+import * as logger from '../js/plugin/logger';
 import { EnketoUserInputEntry } from '../js/survey/enketo/enketoHelper';
 import {
   fmtTs,
@@ -148,11 +149,13 @@ describe('input-matcher', () => {
   });
 
   it('tests getNotDeletedCandidates called with 0 candidates', () => {
-    jest.spyOn(console, 'log');
+    jest.spyOn(logger, 'logDebug');
     const candidates = getNotDeletedCandidates([]);
 
     // check if the log printed collectly with
-    expect(console.log).toHaveBeenCalledWith('getNotDeletedCandidates called with 0 candidates');
+    expect(logger.logDebug).toHaveBeenCalledWith(
+      'getNotDeletedCandidates called with 0 candidates',
+    );
     expect(candidates).toStrictEqual([]);
   });
 

www/css/style.css → www/css/style.scss

@@ -1,3 +1,6 @@
+/* This file is in Sassy CSS (SCSS) because Enketo uses SCSS and we want to extend on their styles.
+  Webpack will just compile this to plain CSS anyway */
+
 @import 'leaflet/dist/leaflet.css';
 
 html {
@@ -7,6 +10,9 @@ html {
 /* Scoped styles for Enketo */
 /* if we don't contain them here, they will leak into the rest of the app */
 .enketo-plugin {
+  // Enketo's default theme uses orange; we can override with our own blue
+  $primary: #0080b9; // matches 'primary' in appTheme.ts
+  $brand-primary-color: darken($primary, 5%); // make it a bit darker for legibility in Enketo UI
   @import 'enketo-core/src/sass/formhub/formhub.scss';
   flex: 1;
   .question.non-select {

www/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { Provider as PaperProvider } from 'react-native-paper';
 
-import './css/style.css';
+import './css/style.scss';
 import 'chartjs-adapter-luxon';
 
 import initializedI18next from './js/i18nextInit';

www/js/App.tsx

@@ -19,6 +19,7 @@ import { initStoreDeviceSettings } from './splash/storeDeviceSettings';
 import { initRemoteNotifyHandler } from './splash/remoteNotifyHandler';
 import { withErrorBoundary } from './plugin/ErrorBoundary';
 import { initCustomDatasetHelper } from './metrics/customMetricsHelper';
+import AlertBar from './components/AlertBar';
 
 const defaultRoutes = (t) => [
   {
@@ -95,8 +96,6 @@ const App = () => {
     setPermissionsPopupVis,
   };
 
-  console.debug('onboardingState in App', onboardingState);
-
   let appContent;
   if (onboardingState == null) {
     // if onboarding state is not yet determined, show a loading spinner
@@ -133,6 +132,7 @@ const App = () => {
           <AppStatusModal permitVis={permissionsPopupVis} setPermitVis={setPermissionsPopupVis} />
         )}
       </AppContext.Provider>
+      <AlertBar />
     </>
   );
 };

www/js/appTheme.ts

@@ -18,6 +18,10 @@ const AppTheme = {
     surfaceVariant: '#e0f0ff', // lch(94% 50 250) - background of DataTable
     surfaceDisabled: '#c7e0f7', // lch(88% 15 250)
     onSurfaceDisabled: '#3a4955', // lch(30% 10 250)
+    // "inverse" colors - used for SnackBars / AlertBars
+    inversePrimary: '#90ceff', // lch(80% 35 250) - SnackBar colored text
+    inverseSurface: '#2e3133', // lch(20% 2 250) - SnackBar background
+    inverseOnSurface: '#edf1f6', // lch(95% 3 250) - SnackBar text
     elevation: {
       level0: 'transparent',
       level1: '#fafdff', // lch(99% 30 250)
@@ -85,7 +89,7 @@ const flavorOverrides = {
 
 /* This function is used to retrieve the theme for a given flavor.
   If no valid flavor is specified, it returns the default theme. */
-export const getTheme = (flavor?: keyof typeof flavorOverrides) => {
+export function getTheme(flavor?: keyof typeof flavorOverrides) {
   if (!flavor || !flavorOverrides[flavor]) return AppTheme;
   const typeStyle = flavorOverrides[flavor];
   const scopedElevation = { ...AppTheme.colors.elevation, ...typeStyle?.colors?.elevation };
@@ -94,4 +98,4 @@ export const getTheme = (flavor?: keyof typeof flavorOverrides) => {
     ...{ ...typeStyle.colors, elevation: scopedElevation },
   };
   return { ...AppTheme, colors: scopedColors };
-};
+}

www/js/appstatus/PermissionsControls.tsx

@@ -1,20 +1,26 @@
 //component to view and manage permission settings
-import React, { useContext, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { StyleSheet, ScrollView, View } from 'react-native';
 import { Button, Text } from 'react-native-paper';
 import { useTranslation } from 'react-i18next';
 import PermissionItem from './PermissionItem';
 import { refreshAllChecks } from '../usePermissionStatus';
 import ExplainPermissions from './ExplainPermissions';
-import AlertBar from '../control/AlertBar';
+import { AlertManager } from '../components/AlertBar';
 import { AppContext } from '../App';
 
 const PermissionsControls = ({ onAccept }) => {
   const { t } = useTranslation();
   const [explainVis, setExplainVis] = useState<boolean>(false);
   const { permissionStatus } = useContext(AppContext);
-  const { checkList, overallStatus, error, errorVis, setErrorVis, explanationList } =
-    permissionStatus;
+  const { checkList, overallStatus, error, explanationList } = permissionStatus;
+
+  useEffect(() => {
+    if (!error) return;
+    AlertManager.addMessage({
+      text: error,
+    });
+  }, [error]);
 
   return (
     <>
@@ -36,12 +42,6 @@ const PermissionsControls = ({ onAccept }) => {
           {t('control.button-accept')}
         </Button>
       </View>
-
-      <AlertBar
-        visible={errorVis}
-        setVisible={setErrorVis}
-        messageKey={'Error '}
-        messageAddition={error}></AlertBar>
     </>
   );
 };

www/js/components/AlertBar.tsx

@@ -0,0 +1,59 @@
+/* Provides a global context for alerts to show as SnackBars ('toasts') at the bottom of the screen.
+ Alerts can be added to the queue from anywhere by calling AlertManager.addMessage. */
+
+import React, { useState, useEffect } from 'react';
+import { Snackbar } from 'react-native-paper';
+import { Modal } from 'react-native';
+import { useTranslation } from 'react-i18next';
+import { ParseKeys } from 'i18next';
+
+type AlertMessage = {
+  msgKey?: ParseKeys<'translation'>;
+  text?: string;
+  duration?: number;
+};
+
+// public static AlertManager that can add messages from a global context
+export class AlertManager {
+  private static listener?: (msg: AlertMessage) => void;
+  static setListener(listener?: (msg: AlertMessage) => void) {
+    AlertManager.listener = listener;
+  }
+  static addMessage(msg: AlertMessage) {
+    AlertManager.listener?.(msg);
+  }
+}
+
+const AlertBar = () => {
+  const { t } = useTranslation();
+  const [messages, setMessages] = useState<AlertMessage[]>([]);
+  const onDismissSnackBar = () => setMessages(messages.slice(1));
+
+  // on init, attach a listener to AlertManager so messages can be added from a global context
+  useEffect(() => {
+    AlertManager.setListener((msg) => {
+      setMessages([...messages, msg]);
+    });
+    return () => AlertManager.setListener(undefined);
+  }, []);
+
+  if (!messages.length) return null;
+  const { msgKey, text } = messages[0];
+  const alertText = [msgKey && t(msgKey), text].filter((x) => x).join(' ');
+  return (
+    <Modal visible={true} onDismiss={onDismissSnackBar} transparent={true}>
+      <Snackbar
+        visible={true}
+        onDismiss={onDismissSnackBar}
+        duration={messages[0].duration}
+        action={{
+          label: t('join.close'),
+          onPress: onDismissSnackBar,
+        }}>
+        {alertText}
+      </Snackbar>
+    </Modal>
+  );
+};
+
+export default AlertBar;

www/js/components/DiaryButton.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import { StyleSheet } from 'react-native';
-import { Button, ButtonProps, useTheme } from 'react-native-paper';
+import { Button, ButtonProps, Icon, useTheme } from 'react-native-paper';
 import color from 'color';
-import { Icon } from './Icon';
 
 type Props = ButtonProps & { fillColor?: string; borderColor?: string };
 const DiaryButton = ({ children, fillColor, borderColor, icon, ...rest }: Props) => {
@@ -19,7 +18,7 @@ const DiaryButton = ({ children, fillColor, borderColor, icon, ...rest }: Props)
       contentStyle={s.buttonContent}
       {...rest}>
       <>
-        {icon && <Icon icon={icon} iconColor={textColor} size={18} style={s.icon} />}
+        {icon && <Icon source={icon} color={textColor} size={18} />}
         {children}
       </>
     </Button>
@@ -39,15 +38,14 @@ const s = StyleSheet.create({
     height: 25,
   },
   label: {
+    display: 'flex',
+    alignItems: 'center',
     marginHorizontal: 5,
     marginVertical: 0,
     fontSize: 13,
     fontWeight: '500',
     whiteSpace: 'nowrap',
-  },
-  icon: {
-    marginRight: 4,
-    verticalAlign: 'middle',
+    gap: 4,
   },
 });
 

www/js/components/LeafletView.tsx

@@ -164,7 +164,7 @@ const LeafletView = ({ geojson, opts, downscaleTiles, cacheHtml, ...otherProps }
 const startIcon = L.divIcon({ className: 'leaflet-div-icon-start', iconSize: [18, 18] });
 const stopIcon = L.divIcon({ className: 'leaflet-div-icon-stop', iconSize: [18, 18] });
 
-const pointToLayer = (feature, latlng) => {
+function pointToLayer(feature, latlng) {
   switch (feature.properties.feature_type) {
     case 'start_place':
       return L.marker(latlng, { icon: startIcon });
@@ -175,6 +175,6 @@ const pointToLayer = (feature, latlng) => {
       alert('Found unknown type in feature' + feature);
       return L.marker(latlng);
   }
-};
+}
 
 export default LeafletView;