Update Khufu's file retrieval system

src/stash/StashContextMenu.jsx

@@ -2,6 +2,7 @@ import React from "react";
 import axios from "axios";
 import { toast } from "react-toastify";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import FileDownload from "js-file-download";
 import {
   faInfoCircle,
   faFileDownload,
@@ -16,7 +17,6 @@ import { serverUrls, serverAddress } from "./api.json";
 const downloadUrl = `${serverAddress}/${serverUrls.POST.downloadUrl}`;
 const deleteUrl = `${serverAddress}/${serverUrls.POST.deleteUrl}`;
 const publicUrl = `${serverAddress}/${serverUrls.POST.publicUrl}`;
-const rawUrl = `${serverAddress}/${serverUrls.GET.rawUrl}`;
 
 function getConfig() {
   var authToken = localStorage.getItem("authToken");
@@ -26,27 +26,19 @@ function getConfig() {
 export default class StashContextMenu extends React.Component {
   infoView() {
     var selectedCount = this.props.getSelectedBoxes().length;
-    if (selectedCount === 1) return "View";
-    if (selectedCount > 1) return `${selectedCount} files selected`;
+    if (selectedCount > 0) return `${selectedCount} files selected`;
     return "No Files Selected";
   }
 
-  infoClick(e) {
-    const selectedBoxes = this.props.getSelectedBoxes();
-    if (selectedBoxes.length !== 1) return;
-    const file = selectedBoxes[0];
-    let win = window.open(`${rawUrl}?target=${file}`);
-    if (!win || win.closed || typeof win.closed == "undefined") {
-      window.location = `${rawUrl}?target=${file}`;
-    }
-  }
   downloadClick() {
     const selectedBoxes = this.props.getSelectedBoxes();
     //ZIPS ARE NOT SUPPORTED YET
     if (selectedBoxes.length > 1)
       return toast.error("Downloading multiple files is not yet supported!");
-    else
-      return this.handleDownload(`${downloadUrl}?target=${selectedBoxes[0]}`);
+    return this.handleDownload(
+      `${downloadUrl}?target=${selectedBoxes[0]}`,
+      this.props.fileBoxes[selectedBoxes[0]].file
+    );
   }
   deleteClick() {
     const selectedBoxes = this.props.getSelectedBoxes();
@@ -69,19 +61,28 @@ export default class StashContextMenu extends React.Component {
       toast.error("There was an issue making some files public!");
     let fileBoxes = this.props.fileBoxes;
     selectedBoxes.forEach((selectedBoxId) => {
-      if (!failedFiles.includes(selectedBoxId)) {
+      if (failedFiles.includes(selectedBoxId))
+        fileBoxes[selectedBoxId].selected = true;
+      else
         fileBoxes[selectedBoxId].file.public = !fileBoxes[selectedBoxId].file
           .public;
-      } else {
-        fileBoxes[selectedBoxId].selected = true;
-      }
     });
     this.props.fileBoxesChanged(fileBoxes);
   }
-  handleDownload(url) {
-    let win = window.open(url);
-    if (!win || win.closed || typeof win.closed == "undefined")
-      window.location = url;
+  handleDownload(url, file) {
+    const downloadName = `${file.date}-${file.name}`;
+    const config = getConfig();
+    config.method = "GET";
+    config["Content-Type"] = "application/octet-stream";
+    config.responseType = "blob";
+    const downloadId = this.props.startDownload(file.name);
+    config.onDownloadProgress = (e) =>
+      this.props.updateDownload(downloadId, e.loaded, e.total);
+    axios.request(url, config).then((response) => {
+      if (response.status !== 200)
+        return toast.error("There was an error downloading that!");
+      FileDownload(response.data, downloadName);
+    });
   }
   /**
    * Handles the response from the deleteClick()
@@ -95,11 +96,8 @@ export default class StashContextMenu extends React.Component {
     if (res.status !== 200) toast.error("Error Deleting Some Files");
     let fileBoxes = this.props.fileBoxes;
     selectedBoxes.forEach((selectedBoxId) => {
-      if (!failedFiles.includes(selectedBoxId)) {
-        delete fileBoxes[selectedBoxId];
-      } else {
-        fileBoxes[selectedBoxId].selected = true;
-      }
+      if (!failedFiles.includes(selectedBoxId)) delete fileBoxes[selectedBoxId];
+      else fileBoxes[selectedBoxId].selected = true;
     });
     this.props.fileBoxesChanged(fileBoxes);
   }
@@ -123,7 +121,7 @@ export default class StashContextMenu extends React.Component {
     return (
       <div className="drive-context-menu" style={this.styleCalc()}>
         <ul>
-          <li onClick={this.infoClick.bind(this)}>
+          <li>
             <FontAwesomeIcon icon={faInfoCircle} />
             {this.infoView()}
           </li>

src/stash/scss/_global.scss

@@ -1,5 +1,5 @@
 @import "global/colors", "global/fonts", "global/measurements",
-  "global/animations";
+  "global/animations", "global/zindex";
 html,
 body {
   margin-left: auto;

src/stash/scss/global/_zindex.scss

@@ -0,0 +1,4 @@
+$stashbarIndex: 200;
+$contextMenuIndex: 300;
+$fudIndex: 100;
+$downloadsIndex: 100;

src/stash/scss/stash/StashContextMenu.scss

@@ -6,7 +6,7 @@
   background: lighten($sectionMenuOptions, 10%);
   box-shadow: 1px 3px 2px lighten ($sectionMenuOptions, 5%);
   color: $foreground;
-  z-index: 300;
+  z-index: $contextMenuIndex;
   width: 100%;
   max-width: inherit;
   font-size: 1rem;

src/stash/scss/stash/StashUploadDialog.scss

@@ -16,7 +16,7 @@ $actionButtonSize: 25px;
   max-height: 250px;
   overflow: hidden;
   -webkit-transform: translate3d(0, 0, 0);
-  z-index: 100;
+  z-index: $fudIndex;
   display: block;
   visibility: hidden;
 }

src/stash/scss/stash/Stashbar.scss

@@ -2,7 +2,7 @@
 
 .stashbar {
   width: 100%;
-  z-index: 200;
+  z-index: $stashbarIndex;
 }
 .stashbar-menu {
   width: 100%;