fix: 使用 context

zer0fire · Sep 19, 2023 · 3a60a3b · 3a60a3b
1 parent b4b6341
commit 3a60a3b
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 26 deletions.
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
@@ -1,9 +1,10 @@
-import React, { useCallback, useContext, useState } from "react";
+import React, { useCallback, useContext, useReducer, useState } from "react";
 import io from "socket.io-client";
 import "./App.css";
 import PixelGrid from "../PixelGrid/PixelGrid";
 import ColorSelect from "../ColorSelect/ColorSelect";
 import OnlineCount from "../OnlineCount/OnlineCount";
+import { PixelGridContext, initialState, reducer } from "../../stores/store";
 // import { produce } from "immer";
 // import _ from "lodash";
 
@@ -20,38 +21,35 @@ import OnlineCount from "../OnlineCount/OnlineCount";
  */
 const socket: any = io("http://localhost:3001");
 
-export const colorContext = React.createContext({
-    color: "#ff0000",
-});
-
 function App() {
     const [pixelData, setPixelData] = useState([]);
     const [currentColor, setColor] = useState("#ff0000");
-
-    const { color } = useContext(colorContext);
+    const [state, dispatch] = useReducer(reducer, initialState);
 
     const handlePixelClick = (row, col) => {};
 
-    const changeCurrentColor = useCallback((color) => {
+    const changeCurrentColor = (color) => {
         setColor(color);
-    }, []);
+    };
 
     return (
         <React.StrictMode>
             <div>
-                {/* <h1>pixel data</h1> */}
-                <PixelGrid
-                    onPickColor={changeCurrentColor}
-                    currentColor={currentColor}
-                    onPixelClick={handlePixelClick}
-                    socket={socket}
-                ></PixelGrid>
-                <ColorSelect
-                    onChange={changeCurrentColor}
-                    color={currentColor}
-                ></ColorSelect>
-                <OnlineCount socket={socket}></OnlineCount>
-                <span id="color-pick-placeholder"></span>
+                <PixelGridContext.Provider value={{ state, dispatch }}>
+                    {/* <h1>pixel data</h1> */}
+                    <PixelGrid
+                        onPickColor={changeCurrentColor}
+                        currentColor={currentColor}
+                        onPixelClick={handlePixelClick}
+                        socket={socket}
+                    ></PixelGrid>
+                    <ColorSelect
+                        onChange={changeCurrentColor}
+                        color={currentColor}
+                    ></ColorSelect>
+                    <OnlineCount socket={socket}></OnlineCount>
+                    <span id="color-pick-placeholder"></span>
+                </PixelGridContext.Provider>
             </div>
         </React.StrictMode>
     );

diff --git a/src/components/PixelGrid/PixelGrid.tsx b/src/components/PixelGrid/PixelGrid.tsx
@@ -1,6 +1,6 @@
-import React, { useRef, useState, useEffect, useReducer } from "react";
+import React, { useRef, useState, useEffect, useContext } from "react";
 import ReactDOM from "react-dom";
-import { initialState, reducer } from "../../stores/store";
+import { PixelGridContext } from "../../stores/store";
 import {
     createImageFromArrayBuffer,
     getMousePos,
@@ -31,7 +31,7 @@ interface Props {
 function PixelGrid({ onPickColor, currentColor, onPixelClick, socket }: Props) {
     const [canvasWidth, setCanvasWidth] = useState(100);
     const [canvasHeight, setCanvasHeight] = useState(100);
-    const [state, dispatch] = useReducer(reducer, initialState);
+    const { state, dispatch } = useContext(PixelGridContext);
 
     const canvas = useRef<HTMLCanvasElement | null>(null);
     const canvasWrapper = useRef<HTMLDivElement | null>(null);
@@ -270,7 +270,7 @@ function PixelGrid({ onPickColor, currentColor, onPixelClick, socket }: Props) {
                 <canvas
                     style={{
                         ...canvasStyle,
-                        transform: `scale(${TOP_LAYER})`,
+                        transform: `scale(${zoomLevel})`,
                         transformOrigin: "top left",
                     }}
                     // onWheel={handleZoom}

diff --git a/src/stores/store.ts b/src/stores/store.ts
@@ -1,3 +1,4 @@
+import React from "react";
 import { getMousePos } from "../utils";
 import {
     Zoom,
@@ -22,6 +23,8 @@ export const initialState = {
     draggingRef: null,
 };
 
+export const PixelGridContext = React.createContext({} as any);
+
 export function reducer(state, action) {
     switch (action.type) {
         case Zoom: {