move handleFileChange to controls component and remove styled components

VeraZab · Jan 9, 2024 · 24290d3 · 24290d3
1 parent b663776
commit 24290d3
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 47 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,6 +1,6 @@
 import { ThemeProvider } from "@emotion/react";
 import Box from "@mui/material/Box";
-import { ChangeEvent, useRef, useState } from "react";
+import { useRef, useState } from "react";
 
 import { Theme } from "@mui/material";
 import Canvas from "./components/Canvas";
@@ -40,33 +40,6 @@ const App: React.FC = () => {
     url: null,
   });
 
-  const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files ? event.target.files[0] : null;
-    if (file && file.type.match("image.*")) {
-      const imageUrl = URL.createObjectURL(file);
-      setImageState((prev) => ({
-        ...prev,
-        url: imageUrl,
-        fileName: file.name.replace(".png", ""),
-      }));
-
-      const img = new Image();
-
-      img.onload = () => {
-        setTileState({
-          originalHeight: img.naturalHeight,
-          originalWidth: img.naturalWidth,
-          height: img.naturalHeight,
-          width: img.naturalWidth,
-        });
-
-        setImageState((prev) => ({ ...prev, image: img }));
-      };
-
-      img.src = imageUrl;
-    }
-  };
-
   return (
     <ThemeProvider theme={theme}>
       <Layout>
@@ -86,7 +59,7 @@ const App: React.FC = () => {
             tileState={tileState}
             setTileState={setTileState}
             imageState={imageState}
-            handleFileChange={handleFileChange}
+            setImageState={setImageState}
           />
         </Box>
       </Layout>

diff --git a/src/components/Canvas.tsx b/src/components/Canvas.tsx
@@ -29,7 +29,7 @@ const Canvas: React.FC<CanvasProps> = ({ canvasRef, tileState, imageState, canva
       canvasRef.current.width = canvasState.width;
       canvasRef.current.height = canvasState.height;
     }
-  }, [canvasState, canvasRef]);
+  }, [canvasState.height, canvasState.width, canvasRef]);
 
   useEffect(() => {
     if (imageState.image && canvasRef.current) {
@@ -39,7 +39,7 @@ const Canvas: React.FC<CanvasProps> = ({ canvasRef, tileState, imageState, canva
         ctx.drawImage(imageState.image, 0, 0, tileState.width, tileState.height);
       }
     }
-  }, [imageState.image, canvasRef, tileState, canvasState]);
+  }, [imageState.image, canvasRef, tileState, canvasState.width, canvasState.height]);
 
   return (
     <Box

diff --git a/src/components/Controls.tsx b/src/components/Controls.tsx
@@ -2,6 +2,7 @@ import CloudUploadIcon from "@mui/icons-material/CloudUpload";
 import ReplayIcon from "@mui/icons-material/Replay";
 import { Box, Button, IconButton, InputAdornment, TextField } from "@mui/material";
 import { Theme } from "@mui/material/styles";
+import { ChangeEvent } from "react";
 
 import { CanvasDimensions } from "../types/appState";
 import { ControlsProps } from "../types/controls";
@@ -58,8 +59,35 @@ const Controls: React.FC<ControlsProps> = ({
   tileState,
   setTileState,
   imageState,
-  handleFileChange,
+  setImageState
 }) => {
+  const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files ? event.target.files[0] : null;
+    if (file && file.type.match("image.*")) {
+      const imageUrl = URL.createObjectURL(file);
+      setImageState((prev) => ({
+        ...prev,
+        url: imageUrl,
+        fileName: file.name.replace(".png", ""),
+      }));
+
+      const img = new Image();
+
+      img.onload = () => {
+        setTileState({
+          originalHeight: img.naturalHeight,
+          originalWidth: img.naturalWidth,
+          height: img.naturalHeight,
+          width: img.naturalWidth,
+        });
+
+        setImageState((prev) => ({ ...prev, image: img }));
+      };
+
+      img.src = imageUrl;
+    }
+  };
+
   const tile = () => {
     if (imageState.url && canvasRef.current) {
       const img = new Image();
@@ -139,7 +167,7 @@ const Controls: React.FC<ControlsProps> = ({
         >
           <Button component="label" variant="contained" startIcon={<CloudUploadIcon />}>
             Upload tile
-            <ImageInput type="file" onChange={handleFileChange} />
+            <ImageInput onChange={handleFileChange} />
           </Button>
         </Box>
 
@@ -165,7 +193,9 @@ const Controls: React.FC<ControlsProps> = ({
                 }
               }}
             />
+
             <Box sx={controlsTextStyles}>X</Box>
+
             <TextField
               value={canvasState.height}
               variant="standard"
@@ -186,8 +216,10 @@ const Controls: React.FC<ControlsProps> = ({
                 }
               }}
             />
+
             <Box sx={controlsTextStyles}>Canvas Size</Box>
           </Box>
+
           <Box sx={controlStyles}>
             <TextField
               value={tileState.width}
@@ -208,7 +240,9 @@ const Controls: React.FC<ControlsProps> = ({
                 }
               }}
             />
+
             <Box sx={controlsTextStyles}>X</Box>
+
             <TextField
               value={tileState.height}
               variant="standard"
@@ -228,7 +262,9 @@ const Controls: React.FC<ControlsProps> = ({
                 }
               }}
             />
+
             <Box sx={controlsTextStyles}>Tile Size</Box>
+
             <IconButton
               onClick={() => {
                 setTileState((prev) => ({
@@ -252,6 +288,7 @@ const Controls: React.FC<ControlsProps> = ({
               Tile
             </Button>
           </Box>
+
           <Box>
             <Button variant="contained" onClick={download} disableElevation>
               Download

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -33,6 +33,7 @@ const Header: React.FC = () => {
           src="pattern-tiler-logo.png"
           style={logoStyles}
         />
+
         <Box
           sx={appTitleStyles}
         >
@@ -53,6 +54,7 @@ const Header: React.FC = () => {
             >
               About this tool
             </Box>
+
             <HelpIcon />
           </Box>
         </Tooltip>

diff --git a/src/components/ImageInput.tsx b/src/components/ImageInput.tsx
@@ -1,15 +1,22 @@
-import { styled } from "@mui/material/styles";
+import { ImageInputProps } from "../types/imageInput";
 
-const ImageInput = styled("input")({
-  clip: "rect(0 0 0 0)",
-  clipPath: "inset(50%)",
-  height: 1,
-  overflow: "hidden",
-  position: "absolute",
-  bottom: 0,
-  left: 0,
-  whiteSpace: "nowrap",
-  width: 1,
-});
+const ImageInput: React.FC<ImageInputProps> = ({ onChange }) => (
+  <input
+    type="file"
+    style={
+      {
+        clip: "rect(0 0 0 0)",
+        clipPath: "inset(50%)",
+        height: 1,
+        overflow: "hidden",
+        position: "absolute",
+        bottom: 0,
+        left: 0,
+        whiteSpace: "nowrap",
+        width: 1,
+      }
+    }
+    onChange={onChange} />
+)
 
 export default ImageInput;
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -21,7 +21,9 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
       sx={layoutContainerStyles}
     >
       <Header />
+
       {children}
+
       <Footer />
     </Box>
   );

diff --git a/src/types/controls.ts b/src/types/controls.ts
@@ -1,4 +1,4 @@
-import { ChangeEvent } from "react";
+import React, { ChangeEvent } from "react";
 
 import { CanvasDimensions, ImageAttributes, TileDimensions } from "../types/appState";
 
@@ -9,5 +9,5 @@ export interface ControlsProps {
     tileState: TileDimensions;
     setTileState: React.Dispatch<React.SetStateAction<TileDimensions>>;
     imageState: ImageAttributes;
-    handleFileChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    setImageState: React.Dispatch<React.SetStateAction<ImageAttributes>>;
 }
diff --git a/src/types/imageInput.ts b/src/types/imageInput.ts
@@ -0,0 +1,5 @@
+import { ChangeEvent } from "react";
+
+export interface ImageInputProps {
+    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+};