finish data transfer

dist/index.js

@@ -1469,6 +1469,9 @@
   function allowDrag(event) {
     event.dataTransfer?.setData("text", "");
   }
+  function reload() {
+    window.location.reload();
+  }
 
   // src/ViewModel/Pages/taskViewModel.ts
   var TaskViewModel = class {
@@ -2607,6 +2610,7 @@
       confirmButton: "Confirm",
       saveButton: "Save",
       setButton: "Set",
+      reloadAppButton: "Reload App",
       fileVersionLabel: "Version",
       searchLabel: "Search"
     },
@@ -2638,7 +2642,7 @@
       setNameButtonAudioLabel: "set name",
       firstDayOfWeekLabel: "First day of week",
       manageStorageButton: "Manage storage",
-      transferDataButton: "Transfer Data",
+      transferDataButton: "Data Transfer",
       scrollToChatButton: "Chats",
       ///
       backToOverviewAudioLabel: "go back to overview",
@@ -2653,9 +2657,11 @@
       connectButtonAudioLabel: "connect"
     },
     dataTransferModal: {
-      transferDataHeadline: "Transfer Data",
+      transferDataHeadline: "Data Transfer",
       selectionDescription: "Select the data that you want to transfer.",
       dataEntryDescription: "Enter this data on the other device.",
+      dataEntryInputDescription: "Enter the data displayed on the other device.",
+      readyToReceiveDescription: "Click 'send' on the other device.",
       ///
       fromThisDeviceButton: "From this device",
       toThisDeviceButton: "To this device",
@@ -2669,8 +2675,9 @@
       transferKeyHeadline: "Transfer Encryption Key",
       sendButton: "Send",
       ///
-      sendingFiles: "Sending files...",
+      filesSentCount: (count) => `Files sent: ${count}.`,
-      filesSentCount: (count) => `Files sent: ${count}`
+      allFilesSent: "Done.",
+      filesReceivedCount: (count) => `Files received: ${count}.`
     },
     storage: {
       noItemSelected: "No item selected",
@@ -4454,26 +4461,54 @@
     selectedPaths = new ListState();
     transferChannel = new State("");
     transferKey = new State("");
-    filesSentCount = new State(0);
+    receivingTransferChannel = new State("");
+    receivingTransferKey = new State("");
     filePathsSent = new ListState();
-    didNotFinishSending = new State(true);
+    filesSentCount = createProxyState(
+      [this.filePathsSent],
+      () => this.filePathsSent.value.size
+    );
     filesSentText = createProxyState(
       [this.filesSentCount],
       () => translations.dataTransferModal.filesSentCount(this.filesSentCount.value)
     );
+    filePathsReceived = new ListState();
+    filesReceivedCount = createProxyState(
+      [this.filePathsReceived],
+      () => this.filePathsReceived.value.size
+    );
+    filesReceivedText = createProxyState(
+      [this.filesReceivedCount],
+      () => translations.dataTransferModal.filesReceivedCount(
+        this.filesReceivedCount.value
+      )
+    );
     // guards
     hasNoPathsSelected = createProxyState(
       [this.selectedPaths],
       () => this.selectedPaths.value.size == 0
     );
+    didNotFinishSending = new State(true);
+    cannotPrepareToReceive = createProxyState(
+      [this.receivingTransferChannel, this.receivingTransferKey],
+      () => this.receivingTransferChannel.value == "" || this.receivingTransferKey.value == ""
+    );
+    // handlers
+    handleReceivedFile = (path) => {
+      this.filePathsReceived.add(path);
+    };
     // methods
     getOptions = () => {
       this.generalFileOptions.clear();
       this.chatFileOptions.clear();
+      this.selectedPaths.clear();
       this.generalFileOptions.add(
         {
           label: translations.dataTransferModal.connectionData,
-          path: StorageModel.getPath("connection" /* ConnectionModel */, [])
+          path: StorageModel.getPath(
+            "connection" /* ConnectionModel */,
+            filePaths.connectionModel.previousAddresses
+          )
         },
         {
           label: translations.dataTransferModal.settingsData,
@@ -4508,18 +4543,28 @@
     initiateTransfer = () => {
       this.presentedModal.value = 3 /* TransferDisplay */;
       this.didNotFinishSending.value = true;
-      this.filesSentCount.value = 0;
       this.filePathsSent.clear();
       this.fileTransferModel.sendFiles(
         this.selectedPaths.value.values(),
         (path) => {
           console.log(path);
           this.filePathsSent.add(path);
-          this.filesSentCount.value++;
         }
       );
       this.didNotFinishSending.value = false;
     };
+    showTransferDataInputModal = () => {
+      this.presentedModal.value = 4 /* TransferDataInput */;
+    };
+    prepareReceivingData = () => {
+      this.presentedModal.value = 5 /* ReceptionDisplay */;
+      this.filePathsReceived.clear();
+      const transferData = {
+        channel: this.receivingTransferChannel.value,
+        key: this.receivingTransferKey.value
+      };
+      this.fileTransferModel.prepareToReceive(transferData);
+    };
     hideModal = () => {
       this.presentedModal.value = void 0;
     };
@@ -4527,6 +4572,9 @@
     constructor(fileTransferModel2, chatListModel2) {
       this.fileTransferModel = fileTransferModel2;
       this.chatListModel = chatListModel2;
+      this.fileTransferModel.fileHandlerManager.addHandler(
+        this.handleReceivedFile
+      );
     }
   };
 
@@ -4537,7 +4585,7 @@
 
   // src/View/Modals/dataTransferModal.tsx
   function DataTransferModalWrapper(fileTransferViewModel2) {
-    return /* @__PURE__ */ createElement("div", null, DirectionSelectionModal(fileTransferViewModel2), FileSelectionModal(fileTransferViewModel2), TransferDataDisplayModal(fileTransferViewModel2), TransferDisplayModal(fileTransferViewModel2));
+    return /* @__PURE__ */ createElement("div", null, DirectionSelectionModal(fileTransferViewModel2), FileSelectionModal(fileTransferViewModel2), TransferDataDisplayModal(fileTransferViewModel2), TransferDisplayModal(fileTransferViewModel2), TransferDataInputModal(fileTransferViewModel2), DataReceptionModal(fileTransferViewModel2));
   }
   function DirectionSelectionModal(fileTransferViewModel2) {
     const isPresented = createProxyState(
@@ -4553,7 +4601,16 @@
       /* @__PURE__ */ createElement("span", { class: "icon" }, "upload"),
       /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, translations.dataTransferModal.fromThisDeviceButton)),
       /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward")
-    ), /* @__PURE__ */ createElement("button", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "download"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, translations.dataTransferModal.toThisDeviceButton)), /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward")))), /* @__PURE__ */ createElement("button", { "on:click": fileTransferViewModel2.hideModal }, translations.general.closeButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "close"))));
+    ), /* @__PURE__ */ createElement(
+      "button",
+      {
+        class: "tile",
+        "on:click": fileTransferViewModel2.showTransferDataInputModal
+      },
+      /* @__PURE__ */ createElement("span", { class: "icon" }, "download"),
+      /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, translations.dataTransferModal.toThisDeviceButton)),
+      /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward")
+    ))), /* @__PURE__ */ createElement("button", { "on:click": fileTransferViewModel2.hideModal }, translations.general.closeButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "close"))));
   }
   function FileSelectionModal(fileTransferViewModel2) {
     const OptionConverter = (fileOption) => {
@@ -4648,13 +4705,20 @@
       [fileTransferViewModel2.presentedModal],
       () => fileTransferViewModel2.presentedModal.value == 3 /* TransferDisplay */
     );
-    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("p", null, translations.dataTransferModal.sendingFiles), /* @__PURE__ */ createElement(
+    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(
       "p",
       {
         class: "secondary",
         "subscribe:innerText": fileTransferViewModel2.filesSentText
       }
     ), /* @__PURE__ */ createElement(
+      "p",
+      {
+        class: "secondary",
+        "toggle:hidden": fileTransferViewModel2.didNotFinishSending
+      },
+      translations.dataTransferModal.allFilesSent
+    ), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement(
       "div",
       {
         class: "tile flex-column align-start",
@@ -4673,6 +4737,61 @@
       /* @__PURE__ */ createElement("span", { class: "icon" }, "close")
     )));
   }
+  function TransferDataInputModal(fileTransferViewModel2) {
+    const isPresented = createProxyState(
+      [fileTransferViewModel2.presentedModal],
+      () => fileTransferViewModel2.presentedModal.value == 4 /* TransferDataInput */
+    );
+    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("span", { class: "secondary" }, translations.dataTransferModal.dataEntryInputDescription), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-column gap content-margin-bottom" }, /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "forum"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", { class: "secondary" }, translations.dataTransferModal.transferChannelHeadline), /* @__PURE__ */ createElement(
+      "input",
+      {
+        "bind:value": fileTransferViewModel2.receivingTransferChannel
+      }
+    ))), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "key"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", { class: "secondary" }, translations.dataTransferModal.transferKeyHeadline), /* @__PURE__ */ createElement(
+      "input",
+      {
+        "bind:value": fileTransferViewModel2.receivingTransferKey
+      }
+    ))))), /* @__PURE__ */ createElement("div", { class: "flex-row width-100" }, /* @__PURE__ */ createElement(
+      "button",
+      {
+        class: "flex",
+        "on:click": fileTransferViewModel2.showDirectionSelectionModal
+      },
+      translations.general.backButton
+    ), /* @__PURE__ */ createElement(
+      "button",
+      {
+        class: "primary flex",
+        "on:click": fileTransferViewModel2.prepareReceivingData,
+        "toggle:disabled": fileTransferViewModel2.cannotPrepareToReceive
+      },
+      translations.general.continueButton,
+      /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward")
+    ))));
+  }
+  function DataReceptionModal(fileTransferViewModel2) {
+    const isPresented = createProxyState(
+      [fileTransferViewModel2.presentedModal],
+      () => fileTransferViewModel2.presentedModal.value == 5 /* ReceptionDisplay */
+    );
+    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("p", { class: "secondary" }, translations.dataTransferModal.readyToReceiveDescription), /* @__PURE__ */ createElement(
+      "p",
+      {
+        class: "secondary",
+        "subscribe:innerText": fileTransferViewModel2.filesReceivedText
+      }
+    ), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement(
+      "div",
+      {
+        class: "tile flex-column align-start",
+        "children:append": [
+          fileTransferViewModel2.filePathsReceived,
+          StringToTextSpan
+        ]
+      }
+    )), /* @__PURE__ */ createElement("button", { "on:click": reload }, translations.general.reloadAppButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "refresh"))));
+  }
 
   // src/Model/Global/fileTransferModel.ts
   var FileTransferModel = class {
@@ -4680,11 +4799,12 @@
     connectionModel;
     // data
     transferData;
+    fileHandlerManager = new HandlerManager();
     // general
     generateTransferData = () => {
       const transferData = {
-        channel: generateRandomToken(2),
+        channel: generateRandomToken(2).substring(0, 4),
-        key: generateRandomToken(3)
+        key: generateRandomToken(3).substring(0, 6)
       };
       this.transferData = transferData;
       return transferData;
@@ -4696,7 +4816,9 @@
     // handlers
     handleMessage = (data) => {
       if (this.transferData == void 0) return;
+      if (data.messageBody == void 0) return;
       if (data.messageChannel != this.transferData.channel) return;
+      this.handleFile(data.messageBody);
     };
     handleFile = async (encryptedFileData) => {
       if (this.transferData == void 0) return;
@@ -4704,6 +4826,7 @@
         encryptedFileData,
         this.transferData.key
       );
+      console.log(decrypted);
       const parsed = parse(decrypted);
       const isFileData = checkMatchesObjectStructure(
         parsed,
@@ -4712,6 +4835,10 @@
       if (isFileData == false) return;
       const fileData = parsed;
       this.storageModel.write(fileData.path, fileData.body);
+      const pathString = StorageModel.pathComponentsToString(
+        ...fileData.path
+      );
+      this.fileHandlerManager.trigger(pathString);
     };
     // sending
     sendFiles = (directoryPaths, callback) => {
@@ -4735,8 +4862,8 @@
       };
       const stringifiedFileData = stringify(fileData);
       const encryptedFileData = await encryptString(
-        fileContent,
+        stringifiedFileData,
-        stringifiedFileData
+        this.transferData.key
       );
       this.connectionModel.sendPlainMessage(
         this.transferData.channel,

src/Model/Global/fileTransferModel.ts

@@ -1,7 +1,12 @@
 // this file is responsible for sending and handling files.
 
+import {
+  HandlerManager,
+  generateRandomToken,
+  parse,
+  stringify,
+} from "../Utility/utility";
 import { decryptString, encryptString } from "../Utility/crypto";
-import { generateRandomToken, parse, stringify } from "../Utility/utility";
 
 import ConnectionModel from "./connectionModel";
 import { Message } from "udn-frontend";
@@ -14,12 +19,13 @@ export default class FileTransferModel {
 
   // data
   transferData: TransferData | undefined;
+  fileHandlerManager: HandlerManager<string> = new HandlerManager();
 
   // general
   generateTransferData = (): TransferData => {
     const transferData: TransferData = {
-      channel: generateRandomToken(2),
+      channel: generateRandomToken(2).substring(0, 4),
-      key: generateRandomToken(3),
+      key: generateRandomToken(3).substring(0, 6),
     };
     this.transferData = transferData;
     return transferData;
@@ -33,7 +39,10 @@ export default class FileTransferModel {
   // handlers
   handleMessage = (data: Message): void => {
     if (this.transferData == undefined) return;
+    if (data.messageBody == undefined) return;
     if (data.messageChannel != this.transferData.channel) return;
+
+    this.handleFile(data.messageBody);
   };
 
   handleFile = async (encryptedFileData: string): Promise<void> => {
@@ -43,6 +52,7 @@ export default class FileTransferModel {
       encryptedFileData,
       this.transferData.key
     );
+    console.log(decrypted);
 
     const parsed: any = parse(decrypted);
     const isFileData: boolean = checkMatchesObjectStructure(
@@ -53,6 +63,11 @@ export default class FileTransferModel {
 
     const fileData: FileData = parsed;
     this.storageModel.write(fileData.path, fileData.body);
+
+    const pathString: string = StorageModel.pathComponentsToString(
+      ...fileData.path
+    );
+    this.fileHandlerManager.trigger(pathString);
   };
 
   // sending
@@ -82,8 +97,8 @@ export default class FileTransferModel {
     };
     const stringifiedFileData: string = stringify(fileData);
     const encryptedFileData: string = await encryptString(
-      fileContent,
+      stringifiedFileData,
-      stringifiedFileData
+      this.transferData.key
     );
     this.connectionModel.sendPlainMessage(
       this.transferData.channel,

src/View/Modals/dataTransferModal.tsx

@@ -7,6 +7,7 @@ import FileTransferViewModel, {
 
 import StorageModel from "../../Model/Global/storageModel";
 import { StringToTextSpan } from "../Components/textSpan";
+import { reload } from "../utility";
 import { translations } from "../translations";
 
 export function DataTransferModalWrapper(
@@ -18,6 +19,8 @@ export function DataTransferModalWrapper(
       {FileSelectionModal(fileTransferViewModel)}
       {TransferDataDisplayModal(fileTransferViewModel)}
       {TransferDisplayModal(fileTransferViewModel)}
+      {TransferDataInputModal(fileTransferViewModel)}
+      {DataReceptionModal(fileTransferViewModel)}
     </div>
   );
 }
@@ -47,7 +50,10 @@ function DirectionSelectionModal(fileTransferViewModel: FileTransferViewModel) {
               </div>
               <span class="icon">arrow_forward</span>
             </button>
-            <button class="tile">
+            <button
+              class="tile"
+              on:click={fileTransferViewModel.showTransferDataInputModal}
+            >
               <span class="icon">download</span>
               <div>
                 <b>{translations.dataTransferModal.toThisDeviceButton}</b>
@@ -241,13 +247,20 @@ function TransferDisplayModal(fileTransferViewModel: FileTransferViewModel) {
         <main>
           <h2>{translations.dataTransferModal.transferDataHeadline}</h2>
 
-          <p>{translations.dataTransferModal.sendingFiles}</p>
-
           <p
             class="secondary"
             subscribe:innerText={fileTransferViewModel.filesSentText}
           ></p>
 
+          <p
+            class="secondary"
+            toggle:hidden={fileTransferViewModel.didNotFinishSending}
+          >
+            {translations.dataTransferModal.allFilesSent}
+          </p>
+
+          <hr></hr>
+
           <div
             class="tile flex-column align-start"
             children:append={[
@@ -267,3 +280,111 @@ function TransferDisplayModal(fileTransferViewModel: FileTransferViewModel) {
     </div>
   );
 }
+
+function TransferDataInputModal(fileTransferViewModel: FileTransferViewModel) {
+  const isPresented = React.createProxyState(
+    [fileTransferViewModel.presentedModal],
+    () =>
+      fileTransferViewModel.presentedModal.value ==
+      FileTransferModal.TransferDataInput
+  );
+
+  return (
+    <div class="modal" toggle:open={isPresented}>
+      <div>
+        <main>
+          <h2>{translations.dataTransferModal.transferDataHeadline}</h2>
+
+          <span class="secondary">
+            {translations.dataTransferModal.dataEntryInputDescription}
+          </span>
+
+          <hr></hr>
+
+          <div class="flex-column gap content-margin-bottom">
+            <label class="tile">
+              <span class="icon">forum</span>
+              <div>
+                <span class="secondary">
+                  {translations.dataTransferModal.transferChannelHeadline}
+                </span>
+                <input
+                  bind:value={fileTransferViewModel.receivingTransferChannel}
+                ></input>
+              </div>
+            </label>
+            <label class="tile">
+              <span class="icon">key</span>
+              <div>
+                <span class="secondary">
+                  {translations.dataTransferModal.transferKeyHeadline}
+                </span>
+                <input
+                  bind:value={fileTransferViewModel.receivingTransferKey}
+                ></input>
+              </div>
+            </label>
+          </div>
+        </main>
+        <div class="flex-row width-100">
+          <button
+            class="flex"
+            on:click={fileTransferViewModel.showDirectionSelectionModal}
+          >
+            {translations.general.backButton}
+          </button>
+          <button
+            class="primary flex"
+            on:click={fileTransferViewModel.prepareReceivingData}
+            toggle:disabled={fileTransferViewModel.cannotPrepareToReceive}
+          >
+            {translations.general.continueButton}
+            <span class="icon">arrow_forward</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function DataReceptionModal(fileTransferViewModel: FileTransferViewModel) {
+  const isPresented = React.createProxyState(
+    [fileTransferViewModel.presentedModal],
+    () =>
+      fileTransferViewModel.presentedModal.value ==
+      FileTransferModal.ReceptionDisplay
+  );
+
+  return (
+    <div class="modal" toggle:open={isPresented}>
+      <div>
+        <main>
+          <h2>{translations.dataTransferModal.transferDataHeadline}</h2>
+
+          <p class="secondary">
+            {translations.dataTransferModal.readyToReceiveDescription}
+          </p>
+
+          <p
+            class="secondary"
+            subscribe:innerText={fileTransferViewModel.filesReceivedText}
+          ></p>
+
+          <hr></hr>
+
+          <div
+            class="tile flex-column align-start"
+            children:append={[
+              fileTransferViewModel.filePathsReceived,
+              StringToTextSpan,
+            ]}
+          ></div>
+        </main>
+        <button on:click={reload}>
+          {translations.general.reloadAppButton}
+          <span class="icon">refresh</span>
+        </button>
+      </div>
+    </div>
+  );
+}

src/View/translations.ts

@@ -17,6 +17,8 @@ const englishTranslations = {
     saveButton: "Save",
     setButton: "Set",
 
+    reloadAppButton: "Reload App",
+
     fileVersionLabel: "Version",
     searchLabel: "Search",
   },
@@ -57,7 +59,7 @@ const englishTranslations = {
 
     manageStorageButton: "Manage storage",
 
-    transferDataButton: "Transfer Data",
+    transferDataButton: "Data Transfer",
 
     scrollToChatButton: "Chats",
 
@@ -80,9 +82,11 @@ const englishTranslations = {
   },
 
   dataTransferModal: {
-    transferDataHeadline: "Transfer Data",
+    transferDataHeadline: "Data Transfer",
     selectionDescription: "Select the data that you want to transfer.",
     dataEntryDescription: "Enter this data on the other device.",
+    dataEntryInputDescription: "Enter the data displayed on the other device.",
+    readyToReceiveDescription: "Click 'send' on the other device.",
 
     ///
 
@@ -107,8 +111,10 @@ const englishTranslations = {
 
     ///
 
-    sendingFiles: "Sending files...",
+    filesSentCount: (count: number) => `Files sent: ${count}.`,
-    filesSentCount: (count: number) => `Files sent: ${count}`
+    allFilesSent: "Done.",
+
+    filesReceivedCount: (count: number) => `Files received: ${count}.`,
   },
 
   storage: {

src/View/utility.ts

@@ -4,4 +4,8 @@ export function allowDrop(event: DragEvent) {
 
 export function allowDrag(event: DragEvent) {
   event.dataTransfer?.setData("text", "")
+}
+
+export function reload() {
+  window.location.reload();
 }

src/ViewModel/Global/fileTransferViewModel.ts

@@ -5,6 +5,7 @@ import FileTransferModel, {
 } from "../../Model/Global/fileTransferModel";
 import StorageModel, {
   StorageModelSubPath,
+  filePaths,
 } from "../../Model/Global/storageModel";
 
 import ChatListModel from "../../Model/Chat/chatListModel";
@@ -27,30 +28,64 @@ export default class FileTransferViewModel {
   transferChannel: React.State<string> = new React.State("");
   transferKey: React.State<string> = new React.State("");
 
-  filesSentCount: React.State<number> = new React.State(0);
+  receivingTransferChannel: React.State<string> = new React.State("");
+  receivingTransferKey: React.State<string> = new React.State("");
+
   filePathsSent: React.ListState<string> = new React.ListState();
-  didNotFinishSending: React.State<boolean> = new React.State(true);
+  filesSentCount: React.State<number> = React.createProxyState(
+    [this.filePathsSent],
+    () => this.filePathsSent.value.size
+  );
   filesSentText: React.State<string> = React.createProxyState(
     [this.filesSentCount],
     () =>
       translations.dataTransferModal.filesSentCount(this.filesSentCount.value)
   );
 
+  filePathsReceived: React.ListState<string> = new React.ListState();
+  filesReceivedCount: React.State<number> = React.createProxyState(
+    [this.filePathsReceived],
+    () => this.filePathsReceived.value.size
+  );
+  filesReceivedText: React.State<string> = React.createProxyState(
+    [this.filesReceivedCount],
+    () =>
+      translations.dataTransferModal.filesReceivedCount(
+        this.filesReceivedCount.value
+      )
+  );
+
   // guards
   hasNoPathsSelected: React.State<boolean> = React.createProxyState(
     [this.selectedPaths],
     () => this.selectedPaths.value.size == 0
   );
+  didNotFinishSending: React.State<boolean> = new React.State(true);
+  cannotPrepareToReceive: React.State<boolean> = React.createProxyState(
+    [this.receivingTransferChannel, this.receivingTransferKey],
+    () =>
+      this.receivingTransferChannel.value == "" ||
+      this.receivingTransferKey.value == ""
+  );
+
+  // handlers
+  handleReceivedFile = (path: string): void => {
+    this.filePathsReceived.add(path);
+  };
 
   // methods
   getOptions = (): void => {
     this.generalFileOptions.clear();
     this.chatFileOptions.clear();
+    this.selectedPaths.clear();
 
     this.generalFileOptions.add(
       {
         label: translations.dataTransferModal.connectionData,
-        path: StorageModel.getPath(StorageModelSubPath.ConnectionModel, []),
+        path: StorageModel.getPath(
+          StorageModelSubPath.ConnectionModel,
+          filePaths.connectionModel.previousAddresses
+        ),
       },
       {
         label: translations.dataTransferModal.settingsData,
@@ -92,7 +127,6 @@ export default class FileTransferViewModel {
   initiateTransfer = (): void => {
     this.presentedModal.value = FileTransferModal.TransferDisplay;
     this.didNotFinishSending.value = true;
-    this.filesSentCount.value = 0;
     this.filePathsSent.clear();
 
     this.fileTransferModel.sendFiles(
@@ -100,13 +134,27 @@ export default class FileTransferViewModel {
       (path: string) => {
         console.log(path);
         this.filePathsSent.add(path);
-        this.filesSentCount.value++;
       }
     );
 
     this.didNotFinishSending.value = false;
   };
 
+  showTransferDataInputModal = (): void => {
+    this.presentedModal.value = FileTransferModal.TransferDataInput;
+  };
+
+  prepareReceivingData = (): void => {
+    this.presentedModal.value = FileTransferModal.ReceptionDisplay;
+    this.filePathsReceived.clear();
+
+    const transferData: TransferData = {
+      channel: this.receivingTransferChannel.value,
+      key: this.receivingTransferKey.value,
+    };
+    this.fileTransferModel.prepareToReceive(transferData);
+  };
+
   hideModal = (): void => {
     this.presentedModal.value = undefined;
   };
@@ -118,6 +166,10 @@ export default class FileTransferViewModel {
   ) {
     this.fileTransferModel = fileTransferModel;
     this.chatListModel = chatListModel;
+
+    this.fileTransferModel.fileHandlerManager.addHandler(
+      this.handleReceivedFile
+    );
   }
 }