Added custom token loading and replication

src/modals/SelectTokensModal.js

@@ -1,24 +1,82 @@
-import React, { useRef, useContext } from "react";
+import React, { useRef, useContext, useState } from "react";
 import { Flex, Label } from "theme-ui";
+import shortid from "shortid";
 
 import Modal from "../components/Modal";
 import ImageDrop from "../components/ImageDrop";
-
 import TokenTiles from "../components/token/TokenTiles";
 
+import blobToBuffer from "../helpers/blobToBuffer";
+
 import TokenDataContext from "../contexts/TokenDataContext";
+import AuthContext from "../contexts/AuthContext";
 
 function SelectTokensModal({ isOpen, onRequestClose }) {
-  const { tokens } = useContext(TokenDataContext);
+  const { userId } = useContext(AuthContext);
+  const { ownedTokens, addToken, removeToken } = useContext(TokenDataContext);
   const fileInputRef = useRef();
 
+  const [imageLoading, setImageLoading] = useState(false);
+
+  const [selectedTokenId, setSelectedTokenId] = useState(null);
+  const selectedToken = ownedTokens.find(
+    (token) => token.id === selectedTokenId
+  );
+
   function openImageDialog() {
     if (fileInputRef.current) {
       fileInputRef.current.click();
     }
   }
 
-  function handleImageUpload(image) {}
+  function handleTokenAdd(token) {
+    addToken(token);
+  }
+
+  function handleImageUpload(file) {
+    let name = "Unknown Map";
+    if (file.name) {
+      // Remove file extension
+      name = file.name.replace(/\.[^/.]+$/, "");
+      // Removed grid size expression
+      name = name.replace(/(\[ ?|\( ?)?\d+ ?(x|X) ?\d+( ?\]| ?\))?/, "");
+      // Clean string
+      name = name.replace(/ +/g, " ");
+      name = name.trim();
+    }
+    let image = new Image();
+    setImageLoading(true);
+    blobToBuffer(file).then((buffer) => {
+      // Copy file to avoid permissions issues
+      const blob = new Blob([buffer]);
+      // Create and load the image temporarily to get its dimensions
+      const url = URL.createObjectURL(blob);
+      image.onload = function () {
+        handleTokenAdd({
+          file: buffer,
+          name,
+          type: "file",
+          id: shortid.generate(),
+          created: Date.now(),
+          lastModified: Date.now(),
+          owner: userId,
+        });
+      };
+      image.src = url;
+
+      // Set file input to null to allow adding the same image 2 times in a row
+      fileInputRef.current.value = null;
+    });
+  }
+
+  function handleTokenSelect(token) {
+    setSelectedTokenId(token.id);
+  }
+
+  async function handleTokenRemove(id) {
+    await removeToken(id);
+    setSelectedTokenId(null);
+  }
 
   return (
     <Modal isOpen={isOpen} onRequestClose={onRequestClose}>
@@ -38,7 +96,13 @@ function SelectTokensModal({ isOpen, onRequestClose }) {
           <Label pt={2} pb={1}>
             Edit or import a token
           </Label>
-          <TokenTiles tokens={tokens} onTokenAdd={openImageDialog} />
+          <TokenTiles
+            tokens={ownedTokens}
+            onTokenAdd={openImageDialog}
+            selectedToken={selectedToken}
+            onTokenSelect={handleTokenSelect}
+            onTokenRemove={handleTokenRemove}
+          />
         </Flex>
       </ImageDrop>
     </Modal>