From d4f3e967439f63b05f6d2c5974ad2709e6fee4cf Mon Sep 17 00:00:00 2001
From: evlist <vdv@dyomedea.com>
Date: Mon, 12 Sep 2022 09:01:54 +0200
Subject: [PATCH] Using redux selector in layer rather than viewport.

---
 src/components/layer.tsx    | 14 +++++++++-----
 src/components/viewport.tsx |  7 +------
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/components/layer.tsx b/src/components/layer.tsx
index 37fe355..b4e6069 100644
--- a/src/components/layer.tsx
+++ b/src/components/layer.tsx
@@ -1,21 +1,25 @@
 import react from 'react';
+import { useSelector } from 'react-redux';
 
 import { ViewportState } from './viewport';
 
 import '../theme/layer.css';
 
 const Layer: react.FC<{
-  viewportState: ViewportState;
   children?: JSX.Element;
-}> = (props: { viewportState: ViewportState; children?: JSX.Element }) => {
-  const { children: children, ...argProps } = props;
-  console.log(`--- Rendering layer, props: ${JSON.stringify(argProps)} ---`);
+}> = (props: { children?: JSX.Element }) => {
+  const viewportState = useSelector(
+    (state: { slippy: ViewportState }) => state.slippy
+  );
+  console.log(
+    `--- Rendering layer, viewportState: ${JSON.stringify(viewportState)} ---`
+  );
 
   return (
     <div
       className='background'
       style={{
-        transform: `translate(${props.viewportState.translation.x}px, ${props.viewportState.translation.y}px) scale(${props.viewportState.scale})`,
+        transform: `translate(${viewportState.translation.x}px, ${viewportState.translation.y}px) scale(${viewportState.scale})`,
       }}
     >
       {props.children}
diff --git a/src/components/viewport.tsx b/src/components/viewport.tsx
index db7a547..877898f 100644
--- a/src/components/viewport.tsx
+++ b/src/components/viewport.tsx
@@ -24,7 +24,6 @@ export interface Scale {
   };
 }
 
-
 interface ViewportProps {
   children: any;
 }
@@ -37,16 +36,12 @@ export interface ViewportState {
 const Viewport: react.FC<ViewportProps> = (props: ViewportProps) => {
   //console.log(`--- Rendering viewport, props: ${JSON.stringify(props)} ---`);
 
-  const state = useSelector(
-    (globalState: { slippy: ViewportState }) => globalState.slippy
-  );
-
   return (
     <div className='viewport'>
       <MouseHandler>
         <SingleTouchHandler>
           <DoubleTouchHandler>
-            <Layer viewportState={state}>{props.children}</Layer>
+            <Layer>{props.children}</Layer>
           </DoubleTouchHandler>
         </SingleTouchHandler>
       </MouseHandler>