@adriansteffan/reactive 0.0.18 → 0.0.20

package/src/components/upload.tsx

@@ -1,10 +1,13 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useMutation } from '@tanstack/react-query';
 import { v4 as uuidv4 } from 'uuid';
 import { post } from '../utils/request';
 import { FileUpload, getParam, StudyEvent } from '../utils/common';
 import { BlobWriter, TextReader, ZipWriter } from '@zip.js/zip.js';
 
+import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';
+import { Capacitor } from '@capacitor/core';
+
 interface UploadPayload {
   sessionId: string;
   files: FileUpload[];
@@ -15,22 +18,175 @@ interface UploadResponse {
   message?: string;
 }
 
+
+interface FileBackend {
+  directoryExists(path: string): Promise<boolean>;
+  createDirectory(path: string): Promise<void>;
+  saveFile(filename: string, content: string, directory: string): Promise<void>;
+}
+
+const createElectronFileBackend = (): FileBackend => {
+  const electronAPI = (window as any).electronAPI;
+  
+  return {
+    directoryExists: async (path: string): Promise<boolean> => {
+      const result = await electronAPI.directoryExists(path);
+      return result.success && result.exists;
+    },
+    createDirectory: async (path: string): Promise<void> => {
+      await electronAPI.createDirectory(path);
+    },
+    saveFile: async (filename: string, content: string, directory: string): Promise<void> => {
+      await electronAPI.saveFile(filename, content, directory);
+    }
+  };
+};
+
+
+const createCapacitorFileBackend = (parentFolder?: string): FileBackend => {
+ 
+  const getPath = (path: string): string => {
+    if (!parentFolder) {
+      return path;
+    }
+    return path ? `${parentFolder}/${path}` : parentFolder;
+  };
+  
+  return {
+    directoryExists: async (path: string): Promise<boolean> => {
+      try {
+  
+        if (parentFolder) {
+          try {
+            await Filesystem.readdir({
+              path: parentFolder,
+              directory: Directory.Documents
+            });
+          } catch {
+            // Parent folder doesn't exist, so subpath doesn't exist either
+            return false;
+          }
+        }
+        
+        const fullPath = getPath(path);
+        const result = await Filesystem.readdir({
+          path: fullPath,
+          directory: Directory.Documents
+        });
+        return result.files.length >= 0; 
+      } catch {
+        return false;
+      }
+    },
+    
+    createDirectory: async (path: string): Promise<void> => {
+      try {
+       
+        if (parentFolder) {
+          try {
+            await Filesystem.mkdir({
+              path: parentFolder,
+              directory: Directory.Documents,
+              recursive: false
+            });
+          } catch (e) {
+            // Parent directory might already exist, that's fine
+          }
+        }
+        
+        const fullPath = getPath(path);
+        await Filesystem.mkdir({
+          path: fullPath,
+          directory: Directory.Documents,
+          recursive: true
+        });
+      } catch (e) {
+        console.error('Error creating directory:', e);
+        throw e;
+      }
+    },
+    
+    saveFile: async (filename: string, content: string, directory: string): Promise<void> => {
+      
+      const fullDirectory = getPath(directory);
+      
+      await Filesystem.writeFile({
+        path: `${fullDirectory}/${filename}`,
+        data: content,
+        directory: Directory.Documents,
+        encoding: 'utf8' as Encoding,
+      });
+    }
+  };
+};
+
+export type Platform = 'electron' | 'capacitor' | 'web';
+
+export const getPlatform = (): Platform => {
+  if ((window as any).electronAPI) {
+    return 'electron';
+  } else if (Capacitor.isNativePlatform()) {
+    return 'capacitor';
+  } else {
+    return 'web';
+  }
+};
+
+const getFileBackend = (parentDir?: string): { backend: FileBackend | null, type: Platform } => {
+  const platform = getPlatform();
+  
+  switch (platform) {
+    case 'electron':
+      return { backend: createElectronFileBackend(), type: platform };
+    case 'capacitor':
+      return { backend: createCapacitorFileBackend(parentDir), type: platform };
+    case 'web':
+      return { backend: null, type: platform };
+  }
+};
+
+// Function to generate a unique directory name
+const getUniqueDirectoryName = async (
+  backend: FileBackend,
+  baseSessionId: string
+): Promise<string> => {
+  let uniqueSessionID = baseSessionId;
+  
+  if (await backend.directoryExists(uniqueSessionID)) {
+    let counter = 1;
+    uniqueSessionID = `${baseSessionId}_${counter}`;
+    
+    while (await backend.directoryExists(uniqueSessionID)) {
+      counter++;
+      uniqueSessionID = `${baseSessionId}_${counter}`;
+    }
+  }
+  
+  return uniqueSessionID;
+};
+
 export default function Upload({
   data,
   next,
   sessionID,
   generateFiles,
   uploadRaw = true,
+  autoUpload = false,
+  androidFolderName,
 }: {
   data: StudyEvent[];
   next: () => void;
   sessionID?: string | null;
   generateFiles: (sessionID: string, data: StudyEvent[]) => FileUpload[];
   uploadRaw: boolean;
+  autoUpload: boolean;
+  androidFolderName?: string;
 }) {
   const [uploadState, setUploadState] = useState<'initial' | 'uploading' | 'success' | 'error'>(
     'initial',
   );
+  const uploadInitiatedRef = useRef(false);
+
   const shouldUpload = getParam('upload', true, 'boolean');
   const shouldDownload = getParam('download', false, 'boolean');
 
@@ -70,12 +226,19 @@ export default function Upload({
     document.body.removeChild(a);
     URL.revokeObjectURL(url);
   }, []);
-
-  const handleUpload = async () => {
+  
+  
+  const handleUpload = useCallback(async () => {
     setUploadState('uploading');
-
+  
+    if (uploadInitiatedRef.current) {
+      return;
+    }
+  
+    uploadInitiatedRef.current = true;
+  
     const sessionIDUpload = sessionID ?? uuidv4();
-
+  
     const files: FileUpload[] = generateFiles ? generateFiles(sessionIDUpload, data) : [];
     if (uploadRaw) {
       files.push({
@@ -84,32 +247,80 @@ export default function Upload({
         encoding: 'utf8',
       });
     }
-
+  
     try {
       const payload: UploadPayload = {
         sessionId: sessionIDUpload,
         files,
       };
-
+  
       if (shouldDownload) {
         await downloadFiles(files);
       }
-
+  
       if (!shouldUpload) {
         next();
         return;
       }
-
-      uploadData.mutate(payload);
+  
+      // Get the current platform and appropriate file backend
+      const { backend, type } = getFileBackend(androidFolderName);
+      
+      if (type === 'web') {
+        // Web API case
+        uploadData.mutate(payload);
+      } else if (backend) {
+        try {
+          // Get a unique directory name
+          const uniqueSessionID = await getUniqueDirectoryName(backend, sessionIDUpload);
+          
+          // Create the directory
+          await backend.createDirectory(uniqueSessionID);
+          
+          // Save all files
+          for (const file of files) {
+            await backend.saveFile(file.filename, file.content, uniqueSessionID);
+          }
+          
+          setUploadState('success');
+          next();
+        } catch (error) {
+          console.error(`Error saving files with ${type}:`, error);
+          setUploadState('error');
+        }
+      }
     } catch (error) {
       console.error('Error uploading:', error);
       setUploadState('error');
     }
-  };
+  }, [
+    sessionID,
+    generateFiles,
+    data,
+    uploadRaw,
+    shouldDownload,
+    shouldUpload,
+    downloadFiles,
+    next,
+    uploadData,
+  ]);
+
+  useEffect(() => {
+    if (autoUpload && !uploadInitiatedRef.current && handleUpload) {
+      handleUpload();
+    }
+  }, [autoUpload, handleUpload]);
+
+  // reset the duplicate prevention if there was an error uploading
+  useEffect(() => {
+    if (uploadState === 'error') {
+      uploadInitiatedRef.current = false;
+    }
+  }, [uploadState]);
 
   return (
-    <div className='flex flex-col items-center justify-center gap-4 p-6 text-xl mt-16'>
-      {uploadState == 'initial' && (
+    <div className='flex flex-col items-center justify-center gap-4 p-6 text-xl mt-16 px-10'>
+      {uploadState == 'initial' && !autoUpload && (
         <>
           <p className=''>
             Thank you for participating! Please click the button below to submit your data.

package/src/components/voicerecorder.tsx

@@ -271,7 +271,7 @@ export const VoiceRecorder = ({
   };
 
   return (
-    <div className='flex flex-col items-center space-y-4 p-4 bg-white'>
+    <div className='flex flex-col items-center space-y-4 p-4 bg-white px-8 '>
       {/* Recording button */}
       {!audioUrl && (
         <button

package/src/mod.tsx

@@ -4,11 +4,13 @@ import ProlificEnding from './components/prolificending';
 import MicCheck from './components/microphonecheck';
 import Quest from './components/quest';
 import Upload from './components/upload';
+import EnterFullscreen from './components/enterfullscreen';
+import ExitFullscreen from './components/exitfullscreen';
 import ExperimentProvider from './components/experimentprovider';
 import Experiment from './components/experiment';
-import { shuffle, BaseComponentProps, ExperimentConfig } from './utils/common';
+import { BaseComponentProps, ExperimentConfig } from './utils/common';
 
-export { Text, ProlificEnding, MicCheck, Quest, Upload, Experiment, ExperimentProvider, shuffle };
+export { Text, ProlificEnding, MicCheck, Quest, Upload, EnterFullscreen, ExitFullscreen, Experiment, ExperimentProvider};
 export type { BaseComponentProps, ExperimentConfig };
 export * from './utils/common';
 

package/src/utils/common.ts

@@ -11,6 +11,10 @@ export function shuffle(array: any[]) {
   return array;
 }
 
+export function isDesktop(){
+  return (window as any).electronAPI !== undefined
+}
+
 // Generic type for all data structures
 export interface StudyEvent {
   index: number;

package/template/.dockerignore

@@ -1,5 +1,8 @@
 node_modules
+dist-electron
 dist
 .git
 *.log
 data/
+android
+ios

package/template/README.md

@@ -2,11 +2,53 @@
 
 Built with [reactive](https://github.com/adriansteffan/reactive)
 
-## Setup
+## Prerequisites and Setup
 
-## Deployment / Production
+Regardless of what platform you target with your experiment, you will need a current version of [node.js](https://nodejs.org/en/download/) installed on your system for development.
 
-For deployment, you will need[docker](https://docs.docker.com/engine/install/)
+To install the needed dependencies, run the following in the root directory:
+
+```
+npm i && npm i --prefix backend
+```
+
+You can target multiple platforms at once, just follow the setup processes for all platforms you want to run you study on.
+
+## Target: Web (Online Experiment)
+
+This is the version of the experiment you should use if your testing devices have internet access and don't need any device-specific functionalities (e.g. sensors). The web version will work on all platforms! The specific targets serve as replacements in situations where a stable internet connection might not be given, or privacy directives prevent you from uploading data to a server (and/or you need device-specific functionality).
+
+### Development
+
+The web version of the experiment needs no additional setup for development.
+
+Run the app in development mode with
+
+```
+npm run dev:all
+```
+in the root directory.
+
+By default, open [http://localhost:5173](http://localhost:5173) to view it in the browser.
+The page will reload if you make edits.
+
+
+#### Buidling the frontend locally (to test)
+
+
+From the `frontend` directory, run
+
+```
+npm run build
+```
+
+the resulting output can be found in `frontend/dist/`
+
+
+### Deployment
+
+
+For deployment, you will need a server with an installation of [docker](https://docs.docker.com/engine/install/)
 
 
 To build the docker images, run 
@@ -17,7 +59,7 @@ docker compose build
 
 in the root directory. This might take a while.
 
-### Running the app
+#### Running the app
 
 After completing the setup, start the webapp with
 
@@ -34,69 +76,156 @@ docker compose down
 The server will be attached to the ports you specified in the .env files.
 Use Virtualhosts (Apache) or Server Blocks (Nginx) with reverse proxy to expose these to the outside. [This guide](https://gist.github.com/adriansteffan/48c9bda7237a8a7fcc5bb6987c8e1790) explains how to do this for our setup.
 
-### Updating
+#### Updating
 
-To update the app, simply stop the running containers, run a `git pull` and build the docker containers once more.
+To update the app, simply stop the running containers, run a `git pull` and build the docker containers once more, and start the containers again.
 
-## Development
+#### Where is my data stored?
 
-### Prerequisites
+The server will create a "data" directory in the root directory of the cloned repo,
 
-You will need a current version of [node.js](https://nodejs.org/en/download/) installed on your system.
 
-### Frontend
+## Target: Windows or MacOS
 
-#### Installation
+### Development
 
-From the root directory, run
+The desktop version of the experiment needs no additional setup for development.
+
+Run the app in the development mode with
 
 ```
-npm i && npm i --prefix backend
+npm run electron:dev
 ```
+in the root directory.
 
-#### Running
+### Packaging
 
-Run the app in the development mode with
+To build platform specific executables, run either
 
 ```
-npm run dev:all
+npm run package --mac
 ```
-in the root directory.
 
-By default, open [http://localhost:5173](http://localhost:5173) to view it in the browser.
-The page will reload if you make edits.
+or 
 
-#### Buidling the frontend locally (to test)
+```
+npm run package --win
+```
 
+There will be a directory called "release" that will contain your executables.
 
-From the `frontend` directory, run
+#### Where is my data stored?
+
+* Windows:
+    * On windows, a folder called "data" is created next the executable as soon as the first participant has completed the study
+
+* MacOS:
+    * Right click on the application and go to TODO > TODO > TODO, where a folder called "data" is created as soon as the first participant has completed the study
+
+
+
+## Target: Android
+
+For ease of use, it makes sense to run the web version for most of the development and only switch to the specific device emulators for implementing device-specific features and testing compatibility before packaging.
+
+### Setup
+
+To build and test an Adroid app containing your experiment, you will need an installation of 
+[Android Studio](https://developer.android.com/studio) and [Java 21 or later](https://www.oracle.com/de/java/technologies/downloads/)
+
+To set up the android project, run this command in the root directory:
+```
+npx cap add android
+````
+
+Next, find the [path to your local android sdk](https://stackoverflow.com/questions/25176594/android-sdk-location) and create a `local.properties` file in the `android` folder with the following content:
 
+```
+sdk.dir=SDK_PATH_HERE
+```
+
+For more information, refer to the [Capacitor documentation on Android](https://capacitorjs.com/docs/android)
+
+
+### Running
+
+Whenever you have made changes to the code and want to run it on the Android emulator, run:
 ```
 npm run build
+npx cap sync
+npx cap run android
 ```
 
-the resulting output can be found in `frontend/dist/`
+### Packaging
+
+From the root directory, run
+
+```
+npx cap open android
+```
 
+. Wait for Android Studio to install the project dependencies and then run Build > Generate APKs and Bundles > Generate APKs. Once your build is finished, there will be a popup guiding you to the location of the bundle's app that you can transfer to your Android device.
 
-### Backend
+#### Where is my data stored?
 
-#### Installing
+In the "Internal Storage" section of the file browser, you will find a "Documents" folder that will contain subfolders with your data as soon as the first participant has finished the experiment.
 
-Run 
+## Target: iOS
+
+For ease of use, it makes sense to run the web version for most of the development and only switch to the specific device emulators for implementing device-specific features and testing compatibility before packaging.
+
+### Setup
+
+To build an iOS app containing your experiment, you will need a machine running MacOS and an installation of [XCode](https://apps.apple.com/us/app/xcode/id497799835). Furthermore, you will need to install [CocoaPods](https://cocoapods.org/), which is most easily installed with [Homebrew](https://brew.sh/).
+
+To set up the iOS project, run 
+
+```
+npx cap add android
+```
+
+Then, go to `iso > App > App > Info.plist`
+
+And add these lines next to the other keys:
 
 ```
-npm install
+<key>UIFileSharingEnabled</key>
+<string>YES</string>
+<key>LSSupportsOpeningDocumentsInPlace</key>
+<string>YES</string>
 ```
 
-in the `backend` directory to install all needed dependencies.
+For more information, refer to the [Capacitor documentation on iOS](https://capacitorjs.com/docs/ios)
 
+### Running
 
-#### Running the backend
+Whenever you have made changes to the code and want to run it on the iOS emulator, run:
 
+```
+npm run build
+npx cap sync
+npx cap run ios
+```
+
+### Packaging
+
+Packaging iOS apps is quite an undertaking, which is why the process is not overly streamlined/documented yet. The best way to get your experiment on an iOS device right now is to run
+
+```
+npx cap run ios
+```
+
+which will open the finished project in XCode. From there, follow a guide on how to sign, bundle and install your app/experiment.
+
+#### Where is my data stored?
+
+After the first participant is run, a folder with the name of your app will appear under "My iPhone/iPad" in the files app, which contains your data.
 
-TODO
 
 
 ## Authors
 
-* **Adrian Steffan** - [adriansteffan](https://github.com/adriansteffan)
+* **Adrian Steffan** - [adriansteffan](https://github.com/adriansteffan)
+
+
+

package/template/capacitor.config.ts

@@ -0,0 +1,15 @@
+import type { CapacitorConfig } from '@capacitor/cli';
+
+const config: CapacitorConfig = {
+  appId: 'com.PROJECT_NAME.app',
+  appName: 'PROJECT_NAME',
+  webDir: 'dist',
+  server: {
+    hostname: 'localhost',
+    androidScheme: 'https',
+    cleartext: true,
+    allowNavigation: ['*']
+  }
+};
+
+export default config;