From 2c852694ea8d72c812e895f9d8ce91724f9ede6f Mon Sep 17 00:00:00 2001 From: trafficlunar Date: Thu, 26 Dec 2024 23:04:17 +0000 Subject: [PATCH] fix: typescript errors in contexts --- src/context/Canvas.tsx | 24 +++++++++++++----------- src/context/Dialog.tsx | 4 +++- src/context/Image.tsx | 14 ++++++++------ src/context/Loading.tsx | 10 ++++++---- src/context/Settings.tsx | 10 ++++++---- src/context/Textures.tsx | 12 +++++++----- src/context/Tool.tsx | 22 ++++++++++++---------- 7 files changed, 55 insertions(+), 41 deletions(-) diff --git a/src/context/Canvas.tsx b/src/context/Canvas.tsx index 8c87e84..399db3e 100644 --- a/src/context/Canvas.tsx +++ b/src/context/Canvas.tsx @@ -1,20 +1,22 @@ import React, { createContext, ReactNode, useMemo, useState } from "react"; +interface Context { + stageSize: Dimension; + canvasSize: Dimension; + blocks: Block[]; + coords: Position; + scale: number; + setStageSize: React.Dispatch>; + setBlocks: React.Dispatch>; + setCoords: React.Dispatch>; + setScale: React.Dispatch>; +} + interface Props { children: ReactNode; } -export const CanvasContext = createContext({ - stageSize: { width: 0, height: 0 } as Dimension, - canvasSize: { minX: 0, minY: 0, maxX: 0, maxY: 0 }, - blocks: [] as Block[], - coords: { x: 0, y: 0 } as Position, - scale: 0, - setStageSize: ((size: Dimension) => {}) as React.Dispatch>, - setBlocks: ((blocks: Block[]) => {}) as React.Dispatch>, - setCoords: ((coords: Position) => {}) as React.Dispatch>, - setScale: ((value: number) => {}) as React.Dispatch>, -}); +export const CanvasContext = createContext({} as Context); export const CanvasProvider = ({ children }: Props) => { const [stageSize, setStageSize] = useState({ width: 0, height: 0 } as Dimension); diff --git a/src/context/Dialog.tsx b/src/context/Dialog.tsx index e7a0119..e6213f8 100644 --- a/src/context/Dialog.tsx +++ b/src/context/Dialog.tsx @@ -1,11 +1,13 @@ import { Dialog } from "@/components/ui/dialog"; import { createContext, lazy, ReactNode, Suspense, useState } from "react"; +type Context = (id: string) => void; + interface Props { children: ReactNode; } -export const DialogContext = createContext((id: string) => {}); +export const DialogContext = createContext({} as Context); export const DialogProvider = ({ children }: Props) => { const [open, setOpen] = useState(false); diff --git a/src/context/Image.tsx b/src/context/Image.tsx index 3db1033..f9ec807 100644 --- a/src/context/Image.tsx +++ b/src/context/Image.tsx @@ -1,15 +1,17 @@ import { createContext, ReactNode, useState } from "react"; +interface Context { + image: HTMLImageElement | undefined; + imageDimensions: Dimension; + setImage: React.Dispatch>; + setImageDimensions: React.Dispatch>; +} + interface Props { children: ReactNode; } -export const ImageContext = createContext({ - image: new Image() as HTMLImageElement | undefined, - imageDimensions: { width: 0, height: 0 } as Dimension, - setImage: (image: HTMLImageElement) => {}, - setImageDimensions: (dimension: Dimension) => {}, -}); +export const ImageContext = createContext({} as Context); export const ImageProvider = ({ children }: Props) => { const [image, setImage] = useState(); diff --git a/src/context/Loading.tsx b/src/context/Loading.tsx index c6f4ecf..d94c2ef 100644 --- a/src/context/Loading.tsx +++ b/src/context/Loading.tsx @@ -1,14 +1,16 @@ import { createContext, ReactNode, useState } from "react"; import LoadingIndicator from "@/assets/loading.svg?react"; +interface Context { + loading: boolean; + setLoading: React.Dispatch>; +} + interface Props { children: ReactNode; } -export const LoadingContext = createContext({ - loading: false, - setLoading: ((value: boolean) => {}) as React.Dispatch>, -}); +export const LoadingContext = createContext({} as Context); export const LoadingProvider = ({ children }: Props) => { const [loading, setLoading] = useState(true); diff --git a/src/context/Settings.tsx b/src/context/Settings.tsx index a8d9afb..70045d1 100644 --- a/src/context/Settings.tsx +++ b/src/context/Settings.tsx @@ -1,5 +1,10 @@ import { createContext, ReactNode, useState } from "react"; +interface Context { + settings: Settings; + setSetting: (key: K, value: Settings[K]) => void; +} + interface Props { children: ReactNode; } @@ -12,10 +17,7 @@ const defaultSettings: Settings = { blockSelector: true, }; -export const SettingsContext = createContext({ - settings: defaultSettings, - setSetting: (key: K, value: Settings[K]) => {}, -}); +export const SettingsContext = createContext({} as Context); export const SettingsProvider = ({ children }: Props) => { const [settings, setSettings] = useState(defaultSettings); diff --git a/src/context/Textures.tsx b/src/context/Textures.tsx index 80f96c8..e76cbe1 100644 --- a/src/context/Textures.tsx +++ b/src/context/Textures.tsx @@ -7,15 +7,17 @@ import spritesheet from "@/data/blocks/programmer-art/spritesheet.json"; import _blockData from "@/data/blocks/programmer-art/data.json"; const blockData: BlockData = _blockData; +interface Context { + missingTexture: PIXI.Texture | undefined; + textures: Record; + solidTextures: Record; +} + interface Props { children: ReactNode; } -export const TexturesContext = createContext({ - missingTexture: {} as PIXI.Texture | undefined, - textures: {} as Record, - solidTextures: {} as Record, -}); +export const TexturesContext = createContext({} as Context); export const TexturesProvider = ({ children }: Props) => { const { setLoading } = useContext(LoadingContext); diff --git a/src/context/Tool.tsx b/src/context/Tool.tsx index 1e95c8f..3dba991 100644 --- a/src/context/Tool.tsx +++ b/src/context/Tool.tsx @@ -1,19 +1,21 @@ import { createContext, ReactNode, useEffect, useState } from "react"; +interface Context { + tool: Tool; + radius: number; + selectedBlock: string; + cssCursor: string; + setTool: React.Dispatch>; + setRadius: React.Dispatch>; + setSelectedBlock: React.Dispatch>; + setCssCursor: React.Dispatch>; +} + interface Props { children: ReactNode; } -export const ToolContext = createContext({ - tool: "hand" as Tool, - radius: 1, - selectedBlock: "stone", - cssCursor: "pointer", - setTool: ((tool: Tool) => {}) as React.Dispatch>, - setRadius: ((value: number) => {}) as React.Dispatch>, - setSelectedBlock: ((block: string) => {}) as React.Dispatch>, - setCssCursor: ((cursor: string) => {}) as React.Dispatch>, -}); +export const ToolContext = createContext({} as Context); export const ToolProvider = ({ children }: Props) => { const [tool, setTool] = useState("hand");