Added custom token loading and replication

src/components/token/TokenTile.js

@@ -1,15 +1,18 @@
 import React from "react";
-import { Flex, Image, Text } from "theme-ui";
+import { Flex, Image, Text, Box, IconButton } from "theme-ui";
+
+import RemoveMapIcon from "../../icons/RemoveMapIcon";
 
 import useDataSource from "../../helpers/useDataSource";
-
 import { tokenSources as defaultTokenSources } from "../../tokens";
 
-function TokenTile({ token, isSelected }) {
+function TokenTile({ token, isSelected, onTokenSelect, onTokenRemove }) {
   const tokenSource = useDataSource(token, defaultTokenSources);
+  const isDefault = token.type === "default";
 
   return (
     <Flex
+      onClick={() => onTokenSelect(token)}
       sx={{
         borderColor: "primary",
         borderStyle: isSelected ? "solid" : "none",
@@ -52,6 +55,22 @@ function TokenTile({ token, isSelected }) {
           {token.name}
         </Text>
       </Flex>
+      {isSelected && !isDefault && (
+        <Box sx={{ position: "absolute", top: 0, right: 0 }}>
+          <IconButton
+            aria-label="Remove Map"
+            title="Remove Map"
+            onClick={() => {
+              onTokenRemove(token.id);
+            }}
+            bg="overlay"
+            sx={{ borderRadius: "50%" }}
+            m={1}
+          >
+            <RemoveMapIcon />
+          </IconButton>
+        </Box>
+      )}
     </Flex>
   );
 }

src/components/token/TokenTiles.js

@@ -6,7 +6,13 @@ import AddIcon from "../../icons/AddIcon";
 
 import TokenTile from "./TokenTile";
 
-function TokenTiles({ tokens, onTokenAdd }) {
+function TokenTiles({
+  tokens,
+  onTokenAdd,
+  onTokenSelect,
+  selectedToken,
+  onTokenRemove,
+}) {
   return (
     <SimpleBar style={{ maxHeight: "300px", width: "500px" }}>
       <Flex
@@ -45,7 +51,13 @@ function TokenTiles({ tokens, onTokenAdd }) {
           <AddIcon large />
         </Flex>
         {tokens.map((token) => (
-          <TokenTile key={token.id} token={token} />
+          <TokenTile
+            key={token.id}
+            token={token}
+            isSelected={selectedToken && token.id === selectedToken.id}
+            onTokenSelect={onTokenSelect}
+            onTokenRemove={onTokenRemove}
+          />
         ))}
       </Flex>
     </SimpleBar>

src/components/token/Tokens.js

@@ -18,7 +18,7 @@ const listTokenClassName = "list-token";
 
 function Tokens({ onMapTokenStateCreate }) {
   const { userId } = useContext(AuthContext);
-  const { tokens } = useContext(TokenDataContext);
+  const { ownedTokens, tokens } = useContext(TokenDataContext);
 
   const [tokenSize, setTokenSize] = useState(1);
 
@@ -28,6 +28,7 @@ function Tokens({ onMapTokenStateCreate }) {
       onMapTokenStateCreate({
         id: shortid.generate(),
         tokenId: token.id,
+        tokenType: token.type,
         owner: userId,
         size: tokenSize,
         label: "",
@@ -49,13 +50,15 @@ function Tokens({ onMapTokenStateCreate }) {
         }}
       >
         <SimpleBar style={{ height: "calc(100% - 48px)", overflowX: "hidden" }}>
-          {tokens.map((token) => (
-            <ListToken
-              key={token.id}
-              token={token}
-              className={listTokenClassName}
-            />
-          ))}
+          {ownedTokens
+            .filter((token) => token.owner === userId)
+            .map((token) => (
+              <ListToken
+                key={token.id}
+                token={token}
+                className={listTokenClassName}
+              />
+            ))}
         </SimpleBar>
         <Flex
           bg="muted"