feat: Add logging in AP [PT-187809710]

- Updates useInteractive to remove direct iframe-phone usage and switch to lara client api hooks.  This allows for use of lara client api log function.
- Log data imports, sensor pairing and acquisitions that happen in the AP
- Updated TypeScript to 5 to remove warnings caused by updated lara client api hooks.  This upgrade then caused some Promise resolves() to need to be updated.

package.json

@@ -113,7 +113,7 @@
     "tslint": "^6.0.0",
     "tslint-loader": "^3.6.0",
     "tslint-react": "^4.2.0",
-    "typescript": "^3.7.5",
+    "typescript": "^5.5.2",
     "url-loader": "^3.0.0",
     "wait-on": "^4.0.0",
     "webpack": "^4.41.5",
@@ -132,7 +132,6 @@
     "client-oauth2": "^4.2.5",
     "eventemitter3": "^4.0.0",
     "firebase": "^7.6.1",
-    "iframe-phone": "^1.2.0",
     "js-base64": "^2.5.1",
     "jsonwebtoken": "^8.5.1",
     "jsqr": "^1.2.0",

src/authoring-app/components/mobile-preview.tsx

@@ -21,6 +21,10 @@ const onUpload = () => null;
 export interface IMobilePreviewParams {
   experiment: IExperiment;
 }
+
+// throw log messages on the floor
+const log = () => undefined;
+
 export const MobilePreview = (params: IMobilePreviewParams) => {
   const { experiment } = params;
   return (
@@ -35,6 +39,7 @@ export const MobilePreview = (params: IMobilePreviewParams) => {
           onDataChange={saveActiveRunData}
           onBackBtnClick={exitExperiment}
           onUpload={onUpload}
+          log={log}
         />
       </div>
     :

src/global.d.ts

@@ -3,6 +3,5 @@ declare module "*.sass";
 declare module "*.scss";
 declare module "*.svg";
 declare module "react-json-editor-ajrm";
-declare module "iframe-phone";
 declare module "react-ace";
 

src/lara-app/components/app.tsx

@@ -18,7 +18,7 @@ interface IProps {
 export const AppComponent:React.FC<IProps> = () => {
   const [error, setError] = useState<any>();
   const {
-    connectedToLara, initInteractiveData, experiment, previewMode, firebaseJWT, runKey, phone, setHeight, setDataset
+    connectedToLara, initMessage, experiment, previewMode, firebaseJWT, runKey, setAuthoredState, setHeight, setDataset, log
   } = useInteractiveApi({setError});
 
   const renderMessage = (message: string) => <div className={css.message}>{message}</div>;
@@ -28,16 +28,16 @@ export const AppComponent:React.FC<IProps> = () => {
       return renderMessage(error.toString());
     }
 
-    if (!connectedToLara || !initInteractiveData) {
-      return renderMessage("Waiting to connect to LARA ...");
+    if (!connectedToLara || !initMessage) {
+      return renderMessage("Waiting to connect to Activity Player ...");
     }
 
-    if (initInteractiveData.mode === "authoring") {
+    if (initMessage.mode === "authoring") {
       return <LaraAuthoringComponent
         // TODO: Re-add authored state when S3 Authoring is ready.
         // authoredState={initInteractiveData.authoredState}
         experiment={experiment}
-        phone={phone} />;
+        setAuthoredState={setAuthoredState} />;
     }
 
     if (!experiment) {
@@ -65,9 +65,10 @@ export const AppComponent:React.FC<IProps> = () => {
         setDataset={setDataset}
         setError={setError}
         defaultSectionIndex={defaultSectionIndex}
-        reportMode={initInteractiveData.mode === "report"}
+        reportMode={initMessage.mode === "report"}
         previewMode={previewMode}
         setHeight={setHeight}
+        log={log}
       />
     );
   };

src/lara-app/components/authoring.tsx

@@ -1,13 +1,14 @@
 import React, { useState } from "react";
 import { Experiments } from "../../mobile-app/hooks/use-experiments";
-const experiments = require("../../data/experiments.json") as Experiments;
+import { IExperiment } from "../../shared/experiment-types";
 
 import css from "./authoring.module.scss";
-import { IExperiment } from "../../shared/experiment-types";
+
+const experiments = require("../../data/experiments.json") as Experiments;
 
 interface IProps {
   experiment?: IExperiment;
-  phone: any;
+  setAuthoredState: (state: IAuthoredState) => void;
 }
 
 export interface IAuthoredState {
@@ -20,10 +21,11 @@ export const AuthoringComponent = (props : IProps) => {
 
   const handleSelectExperiment = (e: React.ChangeEvent<HTMLSelectElement>) => {
     setExperimentId(e.target.value);
-    props.phone.post("authoredState", {
+    const authoredState: IAuthoredState = {
       version: "1.0",
       experimentId: e.target.value
-    } as IAuthoredState);
+    };
+    props.setAuthoredState(authoredState);
   };
 
   return (

src/lara-app/components/runtime.tsx

@@ -38,10 +38,11 @@ interface IProps {
   reportMode?: boolean;
   previewMode?: boolean;
   setHeight: (height: number) => void;
+  log: (action: string, data?: object | undefined) => void;
 }
 
 export const RuntimeComponent = ({
-  experiment, runKey, firebaseJWT, setError, defaultSectionIndex, reportMode, previewMode, setHeight, setDataset
+  experiment, runKey, firebaseJWT, setError, defaultSectionIndex, reportMode, previewMode, setHeight, setDataset, log
 } : IProps) => {
   const [experimentData, setExperimentData] = useState<IExperimentData|undefined>();
   const [queriedFirestore, setQueriedFirestore] = useState(false);
@@ -148,6 +149,7 @@ export const RuntimeComponent = ({
   }, [containerRef.current]);
 
   const handleUploadAgain = () => {
+    log("importData");
     setExperimentData(undefined);
     setDisplayQrAndMaybeRegenerateQR(true);
     displayingCode.current = true;
@@ -156,6 +158,7 @@ export const RuntimeComponent = ({
   const handleDownloadCSV = () => {
     // not stuttering here...
     if (experimentData?.experimentData) {
+      log("downloadCSV");
       downloadCSV(experiment, experimentData);
     }
   };
@@ -233,6 +236,7 @@ export const RuntimeComponent = ({
             config={config}
             defaultSectionIndex={defaultSectionIndex}
             onDataChange={handleSaveData}
+            log={log}
           />
         </div>
         {showQrContainer &&