add modal to select direction of file transfer

src/View/Modals/dataTransferModal.tsx

@@ -1,26 +1,113 @@
 import * as React from "bloatless-react";
 
 import FileTransferViewModel, {
+  FileTransferModal,
   FileTransferOption,
 } from "../../ViewModel/Global/fileTransferViewModel";
 
 import StorageModel from "../../Model/Global/storageModel";
 import { translations } from "../translations";
 
-export function DataTransferModal(
+export function DataTransferModalWrapper(
   fileTransferViewModel: FileTransferViewModel
 ) {
+  return (
+    <div>
+      {DirectionSelectionModal(fileTransferViewModel)}
+      {FileSelectionModal(fileTransferViewModel)}
+    </div>
+  );
+}
+
+function DirectionSelectionModal(fileTransferViewModel: FileTransferViewModel) {
+  const isPresented = React.createProxyState(
+    [fileTransferViewModel.presentedModal],
+    () =>
+      fileTransferViewModel.presentedModal.value ==
+      FileTransferModal.DirectionSelection
+  );
+
+  return (
+    <div class="modal" toggle:open={isPresented}>
+      <div>
+        <main>
+          <h2>{translations.dataTransferModal.transferDataHeadline}</h2>
+
+          <div class="flex-column gap content-margin-bottom">
+            <button
+              class="tile"
+              on:click={fileTransferViewModel.showFileSelectionModal}
+            >
+              <span class="icon">upload</span>
+              <div>
+                <b>{translations.dataTransferModal.fromThisDeviceButton}</b>
+              </div>
+              <span class="icon">arrow_forward</span>
+            </button>
+            <button class="tile">
+              <span class="icon">download</span>
+              <div>
+                <b>{translations.dataTransferModal.toThisDeviceButton}</b>
+              </div>
+              <span class="icon">arrow_forward</span>
+            </button>
+          </div>
+        </main>
+        <button on:click={fileTransferViewModel.hideModal}>
+          {translations.general.closeButton}
+          <span class="icon">close</span>
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function FileSelectionModal(fileTransferViewModel: FileTransferViewModel) {
+  // option
   const OptionConverter: React.StateItemConverter<FileTransferOption> = (
     fileOption: FileTransferOption
   ) => {
     return OptionEntry(fileOption, fileTransferViewModel);
   };
 
+  function OptionEntry(
+    fileOption: FileTransferOption,
+    fileTransferViewModel: FileTransferViewModel
+  ) {
+    const isSelected = new React.State(false);
+    isSelected.subscribeSilent((isSelected) => {
+      if (isSelected == true) {
+        fileTransferViewModel.selectedPaths.add(fileOption.path);
+      } else {
+        fileTransferViewModel.selectedPaths.remove(fileOption.path);
+      }
+    });
+    function toggle() {
+      isSelected.value = !isSelected.value;
+    }
+
+    return (
+      <button class="tile" toggle:selected={isSelected} on:click={toggle}>
+        <div>
+          <b class="ellipsis">{fileOption.label}</b>
+          <span class="secondary ellipsis">
+            {StorageModel.pathComponentsToString(...fileOption.path)}
+          </span>
+        </div>
+      </button>
+    );
+  }
+
+  // state
+  const isPresented = React.createProxyState(
+    [fileTransferViewModel.presentedModal],
+    () =>
+      fileTransferViewModel.presentedModal.value ==
+      FileTransferModal.FileSelection
+  );
+
   return (
-    <div
-      class="modal"
-      toggle:open={fileTransferViewModel.isShowingTransferModal}
-    >
+    <div class="modal" toggle:open={isPresented}>
       <div>
         <main>
           <h2>{translations.dataTransferModal.transferDataHeadline}</h2>
@@ -51,13 +138,14 @@ export function DataTransferModal(
         <div class="flex-row width-100">
           <button
             class="flex"
-            on:click={fileTransferViewModel.hideTransferModal}
+            on:click={fileTransferViewModel.showDirectionSelectionModal}
           >
-            {translations.general.cancelButton}
+            {translations.general.backButton}
           </button>
           <button
             class="primary flex"
-            on:click={fileTransferViewModel.hideTransferModal}
+            on:click={fileTransferViewModel.hideModal}
+            toggle:disabled={fileTransferViewModel.hasNoPathsSelected}
           >
             {translations.general.continueButton}
             <span class="icon">arrow_forward</span>
@@ -67,31 +155,3 @@ export function DataTransferModal(
     </div>
   );
 }
-
-function OptionEntry(
-  fileOption: FileTransferOption,
-  fileTransferViewModel: FileTransferViewModel
-) {
-  const isSelected = new React.State(false);
-  isSelected.subscribeSilent((isSelected) => {
-    if (isSelected == true) {
-      fileTransferViewModel.selectedPaths.add(fileOption.path);
-    } else {
-      fileTransferViewModel.selectedPaths.remove(fileOption.path);
-    }
-  });
-  function toggle() {
-    isSelected.value = !isSelected.value;
-  }
-
-  return (
-    <button class="tile" toggle:selected={isSelected} on:click={toggle}>
-      <div>
-        <b class="ellipsis">{fileOption.label}</b>
-        <span class="secondary ellipsis">
-          {StorageModel.pathComponentsToString(...fileOption.path)}
-        </span>
-      </div>
-    </button>
-  );
-}

src/View/homePage.tsx

@@ -120,7 +120,7 @@ export function HomePage(
 
       <button
         class="tile flex-no"
-        on:click={fileTransferViewModel.showTransferModal}
+        on:click={fileTransferViewModel.showDirectionSelectionModal}
       >
         <span class="icon">sync_alt</span>
         <div>

src/View/translations.ts

@@ -10,6 +10,7 @@ const englishTranslations = {
     abortButton: "Abort",
     cancelButton: "Cancel",
     closeButton: "Close",
+    backButton: "Back",
 
     continueButton: "Continue",
     confirmButton: "Confirm",

src/ViewModel/Global/fileTransferViewModel.ts

@@ -14,13 +14,20 @@ export default class FileTransferViewModel {
   chatListModel: ChatListModel;
 
   // state
-  isShowingTransferModal: React.State<boolean> = new React.State(false);
+  presentedModal: React.State<FileTransferModal | undefined> =
+    new React.State<any>(undefined);
 
   generalFileOptions: React.ListState<FileTransferOption> =
     new React.ListState();
   chatFileOptions: React.ListState<FileTransferOption> = new React.ListState();
   selectedPaths: React.ListState<string[]> = new React.ListState();
 
+  // guards
+  hasNoPathsSelected: React.State<boolean> = React.createProxyState(
+    [this.selectedPaths],
+    () => this.selectedPaths.value.size == 0
+  );
+
   // methods
   getOptions = (): void => {
     this.generalFileOptions.clear();
@@ -47,13 +54,17 @@ export default class FileTransferViewModel {
   };
 
   // view
-  showTransferModal = (): void => {
-    this.isShowingTransferModal.value = true;
+  showDirectionSelectionModal = (): void => {
+    this.presentedModal.value = FileTransferModal.DirectionSelection;
+  };
+
+  showFileSelectionModal = (): void => {
+    this.presentedModal.value = FileTransferModal.FileSelection;
     this.getOptions();
   };
 
-  hideTransferModal = (): void => {
-    this.isShowingTransferModal.value = false;
+  hideModal = (): void => {
+    this.presentedModal.value = undefined;
   };
 
   // init
@@ -71,7 +82,7 @@ export interface FileTransferOption {
   path: string[];
 }
 
-export enum FileTransferModals {
+export enum FileTransferModal {
   DirectionSelection,
 
   // sending
@@ -81,5 +92,5 @@ export enum FileTransferModals {
 
   // receiving
   TransferDataInput,
-  ReceptionDisplay
-}
+  ReceptionDisplay,
+}

src/index.tsx

@@ -11,7 +11,7 @@ import { ConnectionModal } from "./View/Modals/connectionModal";
 import ConnectionModel from "./Model/Global/connectionModel";
 import ConnectionViewModel from "./ViewModel/Global/connectionViewModel";
 import CoreViewModel from "./ViewModel/Global/coreViewModel";
-import { DataTransferModal } from "./View/Modals/dataTransferModal";
+import { DataTransferModalWrapper } from "./View/Modals/dataTransferModal";
 import FileTransferModel from "./Model/Global/fileTransferModel";
 import FileTransferViewModel from "./ViewModel/Global/fileTransferViewModel";
 import { HomePage } from "./View/homePage";
@@ -83,6 +83,6 @@ document
     ),
     ChatPageWrapper(chatListViewModel),
     ConnectionModal(connectionViewModel),
-    DataTransferModal(fileTransferViewModel),
+    DataTransferModalWrapper(fileTransferViewModel),
     StorageModal(storageViewModel)
   );