From d55514ef7c77507ce9f00355d663c8f64f1f2e36 Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Tue, 25 May 2021 16:56:37 +1000
Subject: [PATCH] Refactor map and token image

---
 .../map/{MapTileImage.js => MapImage.js}        |  6 +++---
 src/components/map/MapTile.js                   |  4 ++--
 src/components/map/MapTileGroup.js              |  4 ++--
 src/components/token/ListToken.js               | 17 ++++-------------
 .../token/{TokenTileImage.js => TokenImage.js}  |  8 ++++----
 src/components/token/TokenTile.js               |  4 ++--
 src/components/token/TokenTileGroup.js          |  4 ++--
 7 files changed, 19 insertions(+), 28 deletions(-)
 rename src/components/map/{MapTileImage.js => MapImage.js} (74%)
 rename src/components/token/{TokenTileImage.js => TokenImage.js} (68%)

diff --git a/src/components/map/MapTileImage.js b/src/components/map/MapImage.js
similarity index 74%
rename from src/components/map/MapTileImage.js
rename to src/components/map/MapImage.js
index 037baba..0310487 100644
--- a/src/components/map/MapTileImage.js
+++ b/src/components/map/MapImage.js
@@ -4,7 +4,7 @@ import { Image } from "theme-ui";
 import { useDataURL } from "../../contexts/AssetsContext";
 import { mapSources as defaultMapSources } from "../../maps";
 
-function MapTileImage({ map, sx }) {
+const MapTileImage = React.forwardRef(({ map, ...props }) => {
   const mapURL = useDataURL(
     map,
     defaultMapSources,
@@ -12,7 +12,7 @@ function MapTileImage({ map, sx }) {
     map.type === "file"
   );
 
-  return <Image sx={sx} src={mapURL}></Image>;
-}
+  return <Image src={mapURL} {...props} />;
+});
 
 export default MapTileImage;
diff --git a/src/components/map/MapTile.js b/src/components/map/MapTile.js
index c30c4c2..c061b19 100644
--- a/src/components/map/MapTile.js
+++ b/src/components/map/MapTile.js
@@ -1,7 +1,7 @@
 import React from "react";
 
 import Tile from "../tile/Tile";
-import MapTileImage from "./MapTileImage";
+import MapImage from "./MapImage";
 
 function MapTile({
   map,
@@ -23,7 +23,7 @@ function MapTile({
       badges={badges}
       editTitle="Edit Map"
     >
-      <MapTileImage map={map} />
+      <MapImage map={map} />
     </Tile>
   );
 }
diff --git a/src/components/map/MapTileGroup.js b/src/components/map/MapTileGroup.js
index 123e6c5..f556844 100644
--- a/src/components/map/MapTileGroup.js
+++ b/src/components/map/MapTileGroup.js
@@ -2,7 +2,7 @@ import React from "react";
 import { Grid } from "theme-ui";
 
 import Tile from "../tile/Tile";
-import MapTileImage from "./MapTileImage";
+import MapImage from "./MapImage";
 
 import useResponsiveLayout from "../../hooks/useResponsiveLayout";
 
@@ -22,7 +22,7 @@ function MapTileGroup({ group, maps, isSelected, onSelect, onDoubleClick }) {
         sx={{ gridGap: 2 }}
       >
         {maps.slice(0, 9).map((map) => (
-          <MapTileImage
+          <MapImage
             sx={{ borderRadius: "8px" }}
             map={map}
             key={`${map.id}-group-tile`}
diff --git a/src/components/token/ListToken.js b/src/components/token/ListToken.js
index 0fc004d..c9ae6df 100644
--- a/src/components/token/ListToken.js
+++ b/src/components/token/ListToken.js
@@ -1,28 +1,19 @@
 import React, { useRef } from "react";
-import { Box, Image } from "theme-ui";
+import { Box } from "theme-ui";
 
 import usePreventTouch from "../../hooks/usePreventTouch";
 
-import { useDataURL } from "../../contexts/AssetsContext";
-
-import { tokenSources, unknownSource } from "../../tokens";
+import TokenImage from "./TokenImage";
 
 function ListToken({ token }) {
-  const tokenURL = useDataURL(
-    token,
-    tokenSources,
-    unknownSource,
-    token.type === "file"
-  );
-
   const imageRef = useRef();
   // Stop touch to prevent 3d touch gesutre on iOS
   usePreventTouch(imageRef);
 
   return (
     <Box py={1} sx={{ width: "48px", height: "56px" }}>
-      <Image
-        src={tokenURL}
+      <TokenImage
+        token={token}
         ref={imageRef}
         sx={{
           userSelect: "none",
diff --git a/src/components/token/TokenTileImage.js b/src/components/token/TokenImage.js
similarity index 68%
rename from src/components/token/TokenTileImage.js
rename to src/components/token/TokenImage.js
index d4b5a15..a2bdea4 100644
--- a/src/components/token/TokenTileImage.js
+++ b/src/components/token/TokenImage.js
@@ -5,7 +5,7 @@ import { useDataURL } from "../../contexts/AssetsContext";
 
 import { tokenSources as defaultTokenSources } from "../../tokens";
 
-function TokenTileImage({ token, sx }) {
+const TokenImage = React.forwardRef(({ token, ...props }) => {
   const tokenURL = useDataURL(
     token,
     defaultTokenSources,
@@ -13,7 +13,7 @@ function TokenTileImage({ token, sx }) {
     token.type === "file"
   );
 
-  return <Image sx={sx} src={tokenURL}></Image>;
-}
+  return <Image src={tokenURL} {...props} />;
+});
 
-export default TokenTileImage;
+export default TokenImage;
diff --git a/src/components/token/TokenTile.js b/src/components/token/TokenTile.js
index 864cc7b..1146b24 100644
--- a/src/components/token/TokenTile.js
+++ b/src/components/token/TokenTile.js
@@ -1,7 +1,7 @@
 import React from "react";
 
 import Tile from "../tile/Tile";
-import TokenTileImage from "./TokenTileImage";
+import TokenImage from "./TokenImage";
 
 function TokenTile({
   token,
@@ -21,7 +21,7 @@ function TokenTile({
       badges={badges}
       editTitle="Edit Token"
     >
-      <TokenTileImage token={token} />
+      <TokenImage token={token} />
     </Tile>
   );
 }
diff --git a/src/components/token/TokenTileGroup.js b/src/components/token/TokenTileGroup.js
index 23776e5..abc5d00 100644
--- a/src/components/token/TokenTileGroup.js
+++ b/src/components/token/TokenTileGroup.js
@@ -2,7 +2,7 @@ import React from "react";
 import { Grid } from "theme-ui";
 
 import Tile from "../tile/Tile";
-import TokenTileImage from "./TokenTileImage";
+import TokenImage from "./TokenImage";
 
 import useResponsiveLayout from "../../hooks/useResponsiveLayout";
 
@@ -29,7 +29,7 @@ function TokenTileGroup({
         sx={{ gridGap: 2 }}
       >
         {tokens.slice(0, 9).map((token) => (
-          <TokenTileImage
+          <TokenImage
             sx={{ borderRadius: "8px" }}
             token={token}
             key={`${token.id}-group-tile`}