add transfer data modal

dist/index.js

@@ -4448,6 +4448,8 @@
     generalFileOptions = new ListState();
     chatFileOptions = new ListState();
     selectedPaths = new ListState();
+    transferChannel = new State("");
+    transferKey = new State("");
     // guards
     hasNoPathsSelected = createProxyState(
       [this.selectedPaths],
@@ -4475,13 +4477,22 @@
         });
       }
     };
+    getTransferData = () => {
+      const transferData = this.fileTransferModel.generateTransferData();
+      this.transferChannel.value = transferData.channel;
+      this.transferKey.value = transferData.key;
+    };
     // view
     showDirectionSelectionModal = () => {
       this.presentedModal.value = 0 /* DirectionSelection */;
+      this.getOptions();
     };
     showFileSelectionModal = () => {
       this.presentedModal.value = 1 /* FileSelection */;
-      this.getOptions();
+    };
+    showTransferDataModal = () => {
+      this.presentedModal.value = 2 /* TransferDataDisplay */;
+      this.getTransferData();
     };
     hideModal = () => {
       this.presentedModal.value = void 0;
@@ -4495,7 +4506,7 @@
 
   // src/View/Modals/dataTransferModal.tsx
   function DataTransferModalWrapper(fileTransferViewModel2) {
-    return /* @__PURE__ */ createElement("div", null, DirectionSelectionModal(fileTransferViewModel2), FileSelectionModal(fileTransferViewModel2));
+    return /* @__PURE__ */ createElement("div", null, DirectionSelectionModal(fileTransferViewModel2), FileSelectionModal(fileTransferViewModel2), TransferDataDisplayModal(fileTransferViewModel2));
   }
   function DirectionSelectionModal(fileTransferViewModel2) {
     const isPresented = createProxyState(
@@ -4519,6 +4530,9 @@
     };
     function OptionEntry(fileOption, fileTransferViewModel3) {
       const isSelected = new State(false);
+      if (fileTransferViewModel3.selectedPaths.value.has(fileOption.path)) {
+        isSelected.value = true;
+      }
       isSelected.subscribeSilent((isSelected2) => {
         if (isSelected2 == true) {
           fileTransferViewModel3.selectedPaths.add(fileOption.path);
@@ -4564,13 +4578,32 @@
       "button",
       {
         class: "primary flex",
-        "on:click": fileTransferViewModel2.hideModal,
+        "on:click": fileTransferViewModel2.showTransferDataModal,
         "toggle:disabled": fileTransferViewModel2.hasNoPathsSelected
       },
       translations.general.continueButton,
       /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward")
     ))));
   }
+  function TransferDataDisplayModal(fileTransferViewModel2) {
+    const isPresented = createProxyState(
+      [fileTransferViewModel2.presentedModal],
+      () => fileTransferViewModel2.presentedModal.value == 2 /* TransferDataDisplay */
+    );
+    return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isPresented }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, translations.dataTransferModal.transferDataHeadline), /* @__PURE__ */ createElement("div", { class: "flex-column gap content-margin-bottom" }, /* @__PURE__ */ createElement("div", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "forum"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", { class: "secondary" }, translations.dataTransferModal.transferChannelHeadline), /* @__PURE__ */ createElement(
+      "b",
+      {
+        "subscribe:innerText": fileTransferViewModel2.transferChannel
+      }
+    ))), /* @__PURE__ */ createElement("div", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "key"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", { class: "secondary" }, translations.dataTransferModal.transferKeyHeadline), /* @__PURE__ */ createElement("b", { "subscribe:innerText": fileTransferViewModel2.transferKey }))))), /* @__PURE__ */ createElement("div", { class: "flex-row width-100" }, /* @__PURE__ */ createElement(
+      "button",
+      {
+        class: "flex",
+        "on:click": fileTransferViewModel2.showFileSelectionModal
+      },
+      translations.general.backButton
+    ), /* @__PURE__ */ createElement("button", { class: "primary flex" }, translations.general.continueButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward")))));
+  }
 
   // src/Model/Global/fileTransferModel.ts
   var FileTransferModel = class {
@@ -4580,10 +4613,12 @@
     transferData;
     // general
     generateTransferData = () => {
-      return {
+      const transferData = {
         channel: generateRandomToken(2),
         key: generateRandomToken(3)
       };
+      this.transferData = transferData;
+      return transferData;
     };
     prepareToReceive = (transferData) => {
       this.connectionModel.addChannel(transferData.channel);
@@ -4601,7 +4636,10 @@
         this.transferData.key
       );
       const parsed = parse(decrypted);
-      const isFileData = checkMatchesObjectStructure(parsed, FileDataReference);
+      const isFileData = checkMatchesObjectStructure(
+        parsed,
+        FileDataReference
+      );
       if (isFileData == false) return;
       const fileData = parsed;
       this.storageModel.write(fileData.path, fileData.body);

src/Model/Global/fileTransferModel.ts

@@ -17,10 +17,12 @@ export default class FileTransferModel {
 
   // general
   generateTransferData = (): TransferData => {
-    return {
+    const transferData: TransferData = {
       channel: generateRandomToken(2),
       key: generateRandomToken(3),
     };
+    this.transferData = transferData;
+    return transferData;
   };
 
   prepareToReceive = (transferData: TransferData) => {
@@ -43,7 +45,10 @@ export default class FileTransferModel {
     );
 
     const parsed: any = parse(decrypted);
-    const isFileData: boolean = checkMatchesObjectStructure(parsed, FileDataReference);
+    const isFileData: boolean = checkMatchesObjectStructure(
+      parsed,
+      FileDataReference
+    );
     if (isFileData == false) return;
 
     const fileData: FileData = parsed;

src/View/Modals/dataTransferModal.tsx

@@ -15,6 +15,7 @@ export function DataTransferModalWrapper(
     <div>
       {DirectionSelectionModal(fileTransferViewModel)}
       {FileSelectionModal(fileTransferViewModel)}
+      {TransferDataDisplayModal(fileTransferViewModel)}
     </div>
   );
 }
@@ -75,6 +76,9 @@ function FileSelectionModal(fileTransferViewModel: FileTransferViewModel) {
     fileTransferViewModel: FileTransferViewModel
   ) {
     const isSelected = new React.State(false);
+    if (fileTransferViewModel.selectedPaths.value.has(fileOption.path)) {
+      isSelected.value = true;
+    }
     isSelected.subscribeSilent((isSelected) => {
       if (isSelected == true) {
         fileTransferViewModel.selectedPaths.add(fileOption.path);
@@ -144,7 +148,7 @@ function FileSelectionModal(fileTransferViewModel: FileTransferViewModel) {
           </button>
           <button
             class="primary flex"
-            on:click={fileTransferViewModel.hideModal}
+            on:click={fileTransferViewModel.showTransferDataModal}
             toggle:disabled={fileTransferViewModel.hasNoPathsSelected}
           >
             {translations.general.continueButton}
@@ -155,3 +159,59 @@ function FileSelectionModal(fileTransferViewModel: FileTransferViewModel) {
     </div>
   );
 }
+
+function TransferDataDisplayModal(
+  fileTransferViewModel: FileTransferViewModel
+) {
+  const isPresented = React.createProxyState(
+    [fileTransferViewModel.presentedModal],
+    () =>
+      fileTransferViewModel.presentedModal.value ==
+      FileTransferModal.TransferDataDisplay
+  );
+
+  return (
+    <div class="modal" toggle:open={isPresented}>
+      <div>
+        <main>
+          <h2>{translations.dataTransferModal.transferDataHeadline}</h2>
+
+          <div class="flex-column gap content-margin-bottom">
+            <div class="tile">
+              <span class="icon">forum</span>
+              <div>
+                <span class="secondary">
+                  {translations.dataTransferModal.transferChannelHeadline}
+                </span>
+                <b
+                  subscribe:innerText={fileTransferViewModel.transferChannel}
+                ></b>
+              </div>
+            </div>
+            <div class="tile">
+              <span class="icon">key</span>
+              <div>
+                <span class="secondary">
+                  {translations.dataTransferModal.transferKeyHeadline}
+                </span>
+                <b subscribe:innerText={fileTransferViewModel.transferKey}></b>
+              </div>
+            </div>
+          </div>
+        </main>
+        <div class="flex-row width-100">
+          <button
+            class="flex"
+            on:click={fileTransferViewModel.showFileSelectionModal}
+          >
+            {translations.general.backButton}
+          </button>
+          <button class="primary flex">
+            {translations.general.continueButton}
+            <span class="icon">arrow_forward</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/ViewModel/Global/fileTransferViewModel.ts

@@ -1,12 +1,14 @@
 import * as React from "bloatless-react";
 
+import FileTransferModel, {
+  TransferData,
+} from "../../Model/Global/fileTransferModel";
 import StorageModel, {
   StorageModelSubPath,
 } from "../../Model/Global/storageModel";
 
 import ChatListModel from "../../Model/Chat/chatListModel";
 import ChatModel from "../../Model/Chat/chatModel";
-import FileTransferModel from "../../Model/Global/fileTransferModel";
 import { translations } from "../../View/translations";
 
 export default class FileTransferViewModel {
@@ -22,6 +24,9 @@ export default class FileTransferViewModel {
   chatFileOptions: React.ListState<FileTransferOption> = new React.ListState();
   selectedPaths: React.ListState<string[]> = new React.ListState();
 
+  transferChannel: React.State<string> = new React.State("");
+  transferKey: React.State<string> = new React.State("");
+
   // guards
   hasNoPathsSelected: React.State<boolean> = React.createProxyState(
     [this.selectedPaths],
@@ -53,14 +58,26 @@ export default class FileTransferViewModel {
     }
   };
 
+  getTransferData = (): void => {
+    const transferData: TransferData =
+      this.fileTransferModel.generateTransferData();
+    this.transferChannel.value = transferData.channel;
+    this.transferKey.value = transferData.key;
+  };
+
   // view
   showDirectionSelectionModal = (): void => {
     this.presentedModal.value = FileTransferModal.DirectionSelection;
+    this.getOptions();
   };
 
   showFileSelectionModal = (): void => {
     this.presentedModal.value = FileTransferModal.FileSelection;
-    this.getOptions();
+  };
+
+  showTransferDataModal = (): void => {
+    this.presentedModal.value = FileTransferModal.TransferDataDisplay;
+    this.getTransferData();
   };
 
   hideModal = (): void => {