From b6637766996766243c13d7ddb9cde403b0ffe791 Mon Sep 17 00:00:00 2001
From: Vera <vera.zabeida@gmail.com>
Date: Tue, 9 Jan 2024 11:12:04 -0500
Subject: [PATCH] create a types folder

---
 src/App.tsx                 | 22 ++--------------------
 src/components/Canvas.tsx   |  9 +--------
 src/components/Controls.tsx | 14 ++------------
 src/components/Layout.tsx   |  6 +-----
 src/types/appState.ts       | 17 +++++++++++++++++
 src/types/canvas.ts         |  8 ++++++++
 src/types/controls.ts       | 13 +++++++++++++
 src/types/layout.ts         |  3 +++
 8 files changed, 47 insertions(+), 45 deletions(-)
 create mode 100644 src/types/appState.ts
 create mode 100644 src/types/canvas.ts
 create mode 100644 src/types/controls.ts
 create mode 100644 src/types/layout.ts

diff --git a/src/App.tsx b/src/App.tsx
index 1f13c14..af7a6d2 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,11 +2,12 @@ import { ThemeProvider } from "@emotion/react";
 import Box from "@mui/material/Box";
 import { ChangeEvent, useRef, useState } from "react";
 
+import { Theme } from "@mui/material";
 import Canvas from "./components/Canvas";
 import Controls from "./components/Controls";
 import Layout from "./components/Layout";
 import { theme } from "./theme";
-import { Theme } from "@mui/material";
+import { CanvasDimensions, ImageAttributes, TileDimensions } from "./types/appState";
 
 export const layoutStyles = (theme: Theme) => ({
   display: "flex",
@@ -19,25 +20,6 @@ export const layoutStyles = (theme: Theme) => ({
   },
 });
 
-export interface CanvasDimensions {
-  width: number;
-  height: number;
-}
-
-export interface TileDimensions {
-  originalWidth: number;
-  originalHeight: number;
-  width: number;
-  height: number;
-}
-
-export interface ImageAttributes {
-  url: string | null;
-  fileName: string | null;
-  image: HTMLImageElement | null;
-}
-
-
 const App: React.FC = () => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const [canvasState, setCanvasState] = useState<CanvasDimensions>({
diff --git a/src/components/Canvas.tsx b/src/components/Canvas.tsx
index 079594a..d20c22b 100644
--- a/src/components/Canvas.tsx
+++ b/src/components/Canvas.tsx
@@ -2,7 +2,7 @@ import { Theme } from "@mui/material";
 import Box from "@mui/material/Box";
 import { CSSProperties, useEffect } from "react";
 
-import { CanvasDimensions, ImageAttributes, TileDimensions } from "../App";
+import { CanvasProps } from "../types/canvas";
 
 const canvasContainerStyles = (theme: Theme) => ({
   display: "flex",
@@ -22,13 +22,6 @@ const canvasStyles: CSSProperties = {
   border: "1px solid grey",
 }
 
-interface CanvasProps {
-  canvasState: CanvasDimensions;
-  tileState: TileDimensions;
-  imageState: ImageAttributes;
-  canvasRef: React.RefObject<HTMLCanvasElement>;
-}
-
 const Canvas: React.FC<CanvasProps> = ({ canvasRef, tileState, imageState, canvasState }) => {
   useEffect(() => {
     const canvas = canvasRef.current;
diff --git a/src/components/Controls.tsx b/src/components/Controls.tsx
index 8b57926..7e1fd98 100644
--- a/src/components/Controls.tsx
+++ b/src/components/Controls.tsx
@@ -2,9 +2,9 @@ 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, ImageAttributes, TileDimensions } from "../App";
+import { CanvasDimensions } from "../types/appState";
+import { ControlsProps } from "../types/controls";
 import ImageInput from "./ImageInput";
 
 const controlsContainerStyles = (theme: Theme) => ({
@@ -51,16 +51,6 @@ const mainControlsContainer = {
   margin: (theme: Theme) => theme.spacing(6, 0)
 }
 
-interface ControlsProps {
-  canvasRef: React.RefObject<HTMLCanvasElement>;
-  canvasState: CanvasDimensions;
-  setCanvasState: React.Dispatch<React.SetStateAction<CanvasDimensions>>;
-  tileState: TileDimensions;
-  setTileState: React.Dispatch<React.SetStateAction<TileDimensions>>;
-  imageState: ImageAttributes;
-  handleFileChange: (event: ChangeEvent<HTMLInputElement>) => void;
-}
-
 const Controls: React.FC<ControlsProps> = ({
   canvasRef,
   canvasState,
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index c41a7f1..21f7b0a 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,6 +1,7 @@
 import { Box, Theme } from "@mui/material";
 import React from "react";
 
+import { LayoutProps } from "../types/layout";
 import Footer from "./Footer";
 import Header from "./Header";
 
@@ -13,11 +14,6 @@ const layoutContainerStyles = (theme: Theme) => ({
   boxSizing: "border-box",
 })
 
-// Define the props for the Layout component
-interface LayoutProps {
-  children?: React.ReactNode;
-}
-
 const Layout: React.FC<LayoutProps> = ({ children }) => {
   return (
     <Box
diff --git a/src/types/appState.ts b/src/types/appState.ts
new file mode 100644
index 0000000..7a7d11b
--- /dev/null
+++ b/src/types/appState.ts
@@ -0,0 +1,17 @@
+export interface CanvasDimensions {
+    width: number;
+    height: number;
+}
+
+export interface TileDimensions {
+    originalWidth: number;
+    originalHeight: number;
+    width: number;
+    height: number;
+}
+
+export interface ImageAttributes {
+    url: string | null;
+    fileName: string | null;
+    image: HTMLImageElement | null;
+}
\ No newline at end of file
diff --git a/src/types/canvas.ts b/src/types/canvas.ts
new file mode 100644
index 0000000..f76dbac
--- /dev/null
+++ b/src/types/canvas.ts
@@ -0,0 +1,8 @@
+import { CanvasDimensions, ImageAttributes, TileDimensions } from "../types/appState";
+
+export interface CanvasProps {
+    canvasState: CanvasDimensions;
+    tileState: TileDimensions;
+    imageState: ImageAttributes;
+    canvasRef: React.RefObject<HTMLCanvasElement>;
+}
\ No newline at end of file
diff --git a/src/types/controls.ts b/src/types/controls.ts
new file mode 100644
index 0000000..f838460
--- /dev/null
+++ b/src/types/controls.ts
@@ -0,0 +1,13 @@
+import { ChangeEvent } from "react";
+
+import { CanvasDimensions, ImageAttributes, TileDimensions } from "../types/appState";
+
+export interface ControlsProps {
+    canvasRef: React.RefObject<HTMLCanvasElement>;
+    canvasState: CanvasDimensions;
+    setCanvasState: React.Dispatch<React.SetStateAction<CanvasDimensions>>;
+    tileState: TileDimensions;
+    setTileState: React.Dispatch<React.SetStateAction<TileDimensions>>;
+    imageState: ImageAttributes;
+    handleFileChange: (event: ChangeEvent<HTMLInputElement>) => void;
+}
\ No newline at end of file
diff --git a/src/types/layout.ts b/src/types/layout.ts
new file mode 100644
index 0000000..761c899
--- /dev/null
+++ b/src/types/layout.ts
@@ -0,0 +1,3 @@
+export interface LayoutProps {
+    children?: React.ReactNode;
+}
\ No newline at end of file