Added login integration with Cairo

src/stash/StashBoard.jsx

@@ -0,0 +1,147 @@
+//Module Imports
+import React from "react";
+import { toast } from "react-toastify";
+//Local Imports
+import Stashbar from "./Stashbar";
+import StashUpload from "./StashUpload";
+import StashContextMenu from "./StashContextMenu";
+import { serverUrls } from "./api.json";
+import "./scss/Stash.scss";
+//Constants
+const filesUrl = `${serverUrls.GET.filesUrl}`;
+//Class
+
+const buildFilebox = (file, index) => ({
+  file,
+  selected: false,
+  filtered: true,
+  position: index,
+});
+const buildDownload = (name, total) => ({
+  name,
+  total,
+  completed: 0.01,
+  progress: 0.01,
+});
+
+class StashBoard extends React.Component {
+  constructor(props) {
+    super(props);
+    window.cairoApi = props.cairoApi;
+    this.state = {
+      fileBoxes: {},
+      downloads: {},
+      contextMenu: null,
+    };
+  }
+
+  componentDidMount() {
+    window.cairoApi
+      .get(filesUrl)
+      .then((res) => {
+        if (res.data === undefined || res.data.length === undefined)
+          return toast.error("Error Loading Files");
+        var fileBoxes = {};
+        res.data.forEach((file, index) => {
+          fileBoxes[file._id] = buildFilebox(file, index);
+        });
+        this.setState({ fileBoxes });
+      })
+      .catch((error) => {
+        if (error.response.status === 401) return toast.error("Unauthorized!");
+        else console.error(error);
+      });
+  }
+
+  fileBoxesChanged = (fileBoxes) => this.setState({ fileBoxes });
+
+  getSelectedBoxes() {
+    var selectedBoxes = [];
+    for (var f in this.state.fileBoxes) {
+      if (!this.state.fileBoxes[f].filtered) continue;
+      if (!this.state.fileBoxes[f].selected) continue;
+      selectedBoxes.push(f);
+    }
+    return selectedBoxes;
+  }
+
+  addFilebox(file) {
+    var fileBoxes = this.state.fileBoxes;
+    fileBoxes[file._id] = buildFilebox(file, Object.keys(fileBoxes).length);
+    this.setState({ fileBoxes });
+  }
+
+  startDownload(name, total) {
+    const downloads = this.state.downloads;
+    const key = `${Date.now()}-${name}`;
+    const download = buildDownload(name, total);
+    download.toast = toast.dark(name, {
+      progress: download.progress,
+      position: "bottom-right",
+    });
+    downloads[key] = download;
+    this.setState({ downloads });
+    return key;
+  }
+
+  updateDownload(downloadId, completed, total) {
+    const downloads = this.state.downloads;
+    const progress = completed / total;
+    toast.update(downloads[downloadId].toast, { progress });
+  }
+
+  removeDriveContextMenu() {
+    if (this.state.contextMenu !== null) this.setState({ contextMenu: null });
+  }
+
+  /*Options Menu Functions*/
+  contextMenu(e) {
+    this.removeDriveContextMenu();
+    if (e.ctrlKey || e.shiftKey) return;
+    e.preventDefault();
+    e.stopPropagation();
+    this.setState({
+      contextMenu: {
+        x: e.clientX,
+        y: e.clientY,
+      },
+    });
+  }
+  render() {
+    return (
+      <div
+        className="dunestash"
+        onClick={this.removeDriveContextMenu.bind(this)}
+      >
+        <Stashbar
+          fileBoxes={this.state.fileBoxes}
+          fileBoxesChanged={this.fileBoxesChanged.bind(this)}
+          contextMenu={this.contextMenu.bind(this)}
+        />
+        {this.state.contextMenu && (
+          <StashContextMenu
+            x={this.state.contextMenu.x}
+            y={this.state.contextMenu.y}
+            fileBoxes={this.state.fileBoxes}
+            fileBoxesChanged={this.fileBoxesChanged.bind(this)}
+            getSelectedBoxes={this.getSelectedBoxes.bind(this)}
+            startDownload={this.startDownload.bind(this)}
+            updateDownload={this.updateDownload.bind(this)}
+          />
+        )}
+        <div className="stash">
+          <StashUpload
+            addFilebox={this.addFilebox.bind(this)}
+            fileBoxes={this.state.fileBoxes}
+            fileBoxesChanged={this.fileBoxesChanged.bind(this)}
+            contextMenu={this.contextMenu.bind(this)}
+            removeDriveContextMenu={this.removeDriveContextMenu.bind(this)}
+            getSelectedBoxes={this.getSelectedBoxes.bind(this)}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default StashBoard;

src/stash/StashContextMenu.jsx

@@ -1,5 +1,4 @@
 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";
@@ -18,11 +17,6 @@ const downloadUrl = `${serverUrls.POST.downloadUrl}`;
 const deleteUrl = `${serverUrls.POST.deleteUrl}`;
 const publicUrl = `${serverUrls.POST.publicUrl}`;
 
-function getConfig() {
-  var authToken = localStorage.getItem("authToken");
-  return { headers: { authorization: `Bearer ${authToken}` } };
-}
-
 export default class StashContextMenu extends React.Component {
   infoView() {
     var selectedCount = this.props.getSelectedBoxes().length;
@@ -42,15 +36,15 @@ export default class StashContextMenu extends React.Component {
   }
   deleteClick() {
     const selectedBoxes = this.props.getSelectedBoxes();
-    axios
-      .post(deleteUrl, selectedBoxes, getConfig())
+    window.cairoApi
+      .post(deleteUrl, selectedBoxes)
       .then((res) => this.handleDelete(res, selectedBoxes))
       .catch((e) => this.handleDelete(e.response, selectedBoxes));
   }
   publicClick() {
     const selectedBoxes = this.props.getSelectedBoxes();
-    axios
-      .post(publicUrl, selectedBoxes, getConfig())
+    window.cairoApi
+      .post(publicUrl, selectedBoxes)
       .then((res) => this.handlePublic(res, selectedBoxes))
       .catch((e) => this.handlePublic(e.response, selectedBoxes));
   }
@@ -71,14 +65,15 @@ export default class StashContextMenu extends React.Component {
   }
   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 config = {
+      method: "GET",
+      "Content-Type": "application/octet-stream",
+      responseType: "blob",
+      onDownloadProgress: (e) =>
+        this.props.updateDownload(downloadId, e.loaded, e.total),
+    };
     const downloadId = this.props.startDownload(file.name);
-    config.onDownloadProgress = (e) =>
-      this.props.updateDownload(downloadId, e.loaded, e.total);
-    axios.request(url, config).then((response) => {
+    window.cairoApi.request(url, config).then((response) => {
       if (response.status !== 200)
         return toast.error("There was an error downloading that!");
       FileDownload(response.data, downloadName);

src/stash/StashUpload.jsx

@@ -1,6 +1,6 @@
 //Module Imports
 import React from "react";
-import axios, { CancelToken } from "axios";
+import { CancelToken } from "axios";
 import { toast } from "react-toastify";
 //Local Imports
 import StashDropzone from "./StashDropzone";
@@ -13,7 +13,6 @@ const cancelMessage = "User Canceled";
 const successClearTime = 200;
 
 function buildUpload(file, uploadUuid, onProgress) {
-  var authToken = localStorage.getItem("authToken");
   var upload = {
     file,
     uploadUuid,
@@ -25,7 +24,7 @@ function buildUpload(file, uploadUuid, onProgress) {
     upload.cancelUpload = () => cancel(cancelMessage);
   });
   upload.config = {
-    headers: { authorization: `Bearer ${authToken}`, filesize: file.size },
+    headers: { filesize: file.size },
     onUploadProgress: (e) => onProgress(e, uploadUuid),
     cancelToken,
   };
@@ -69,7 +68,7 @@ export default class StashUpload extends React.Component {
   startUpload(upload) {
     const data = new FormData();
     data.append(uploadField, upload.file);
-    axios
+    window.cairoApi
       .post(uploadUrl, data, upload.config)
       .then((res) => this.uploadDone(res, upload))
       .catch((e) => this.uploadError(e, upload));

src/stash/api.json

@@ -9,10 +9,14 @@
     "GET": {
       "filesUrl": "/api/nubian/stash/files",
       "rawUrl": "/api/nubian/stash/raw"
+    },
+    "api": {
+      "cairo": {
+        "verify": "/api/cairo/user/data"
+      }
     }
   },
   "serverFields": {
     "uploadField": "user-selected-file"
-  },
-  "constants": { "jwtHeader": "authorization" }
+  }
 }