From 10ac97f04db5baefb20493c2cd3fcec13749f6cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20V=C3=A1clav=C3=ADk?= <jvaclavik@gmail.com>
Date: Mon, 2 Oct 2023 16:54:21 +0200
Subject: [PATCH] add isRouteSelected

---
 src/components/FeaturePanel/Climbing/Editor/Route.tsx |  4 ++--
 .../FeaturePanel/Climbing/Editor/RouteNumber.tsx      |  6 ++----
 .../FeaturePanel/Climbing/Editor/RoutePath.tsx        |  3 ++-
 .../FeaturePanel/Climbing/Editor/RouteWithLabel.tsx   |  9 ++-------
 .../FeaturePanel/Climbing/Editor/StartPoint.tsx       | 11 +++--------
 .../Climbing/contexts/climbingContext.tsx             |  6 ++++++
 6 files changed, 17 insertions(+), 22 deletions(-)

diff --git a/src/components/FeaturePanel/Climbing/Editor/Route.tsx b/src/components/FeaturePanel/Climbing/Editor/Route.tsx
index 6c568077e..aa4bf0fb7 100644
--- a/src/components/FeaturePanel/Climbing/Editor/Route.tsx
+++ b/src/components/FeaturePanel/Climbing/Editor/Route.tsx
@@ -20,10 +20,10 @@ export const Route = ({
   onRouteSelect,
   onPointClick,
 }: Props) => {
-  const { imageSize, routeSelectedIndex, isSelectedRouteEditable } =
+  const { imageSize, isSelectedRouteEditable, isRouteSelected } =
     useContext(ClimbingContext);
 
-  const isSelected = routeSelectedIndex === routeNumber;
+  const isSelected = isRouteSelected(routeNumber);
   const isThisRouteEditMode = isSelectedRouteEditable && isSelected;
   // move defs
   return (
diff --git a/src/components/FeaturePanel/Climbing/Editor/RouteNumber.tsx b/src/components/FeaturePanel/Climbing/Editor/RouteNumber.tsx
index e9b4c7814..a44091838 100644
--- a/src/components/FeaturePanel/Climbing/Editor/RouteNumber.tsx
+++ b/src/components/FeaturePanel/Climbing/Editor/RouteNumber.tsx
@@ -5,7 +5,6 @@ import { ClimbingContext } from '../contexts/climbingContext';
 
 type Props = {
   onClick: (routeNumber: number) => void;
-  routeSelectedIndex: number;
   children: number;
   x: number;
   y: number;
@@ -24,7 +23,6 @@ export const RouteNumber = ({
   children: routeNumber,
   x,
   y,
-  routeSelectedIndex,
 }: Props) => {
   const RECT_WIDTH = String(routeNumber).length * 5 + 15;
   const RECT_HEIGHT = 20;
@@ -32,7 +30,7 @@ export const RouteNumber = ({
   const OUTLINE_WIDTH = 2;
   const HOVER_WIDTH = 10;
 
-  const { imageSize } = useContext(ClimbingContext);
+  const { imageSize, isRouteSelected } = useContext(ClimbingContext);
   const newY = // this shifts Y coordinate in case of too small photo
     y + RECT_Y_OFFSET + RECT_HEIGHT > imageSize.height
       ? imageSize.height - RECT_HEIGHT - OUTLINE_WIDTH
@@ -45,7 +43,7 @@ export const RouteNumber = ({
     },
     cursor: 'pointer',
   };
-  const isSelected = routeSelectedIndex === routeNumber;
+  const isSelected = isRouteSelected(routeNumber);
 
   return (
     <>
diff --git a/src/components/FeaturePanel/Climbing/Editor/RoutePath.tsx b/src/components/FeaturePanel/Climbing/Editor/RoutePath.tsx
index 2f8e9d5d1..081f0c931 100644
--- a/src/components/FeaturePanel/Climbing/Editor/RoutePath.tsx
+++ b/src/components/FeaturePanel/Climbing/Editor/RoutePath.tsx
@@ -29,10 +29,11 @@ export const RoutePath = ({ onRouteSelect, route, routeNumber }) => {
     editorPosition,
     updateRouteOnIndex,
     isPointMoving,
+    isRouteSelected,
     // setPointSelectedIndex,
     // setIsPointMoving,
   } = useContext(ClimbingContext);
-  const isSelected = routeSelectedIndex === routeNumber;
+  const isSelected = isRouteSelected(routeNumber);
 
   const pointsInString = route?.path.map(({ x, y }, index) => {
     const currentX = imageSize.width * x;
diff --git a/src/components/FeaturePanel/Climbing/Editor/RouteWithLabel.tsx b/src/components/FeaturePanel/Climbing/Editor/RouteWithLabel.tsx
index 36e0b66a8..712007822 100644
--- a/src/components/FeaturePanel/Climbing/Editor/RouteWithLabel.tsx
+++ b/src/components/FeaturePanel/Climbing/Editor/RouteWithLabel.tsx
@@ -21,7 +21,7 @@ export const RouteWithLabel = ({
 }: Props) => {
   if (!route || route.path.length === 0) return null;
 
-  const { imageSize, routeSelectedIndex } = useContext(ClimbingContext);
+  const { imageSize } = useContext(ClimbingContext);
 
   const x = imageSize.width * route.path[0].x; // @TODO do contextu, rename x?
   const y = imageSize.height * route.path[0].y; // @TODO do contextu
@@ -46,12 +46,7 @@ export const RouteWithLabel = ({
         onPointClick={onPointClick}
       />
 
-      <RouteNumber
-        onClick={onRouteSelect}
-        x={x}
-        y={y}
-        routeSelectedIndex={routeSelectedIndex}
-      >
+      <RouteNumber onClick={onRouteSelect} x={x} y={y}>
         {routeNumber}
       </RouteNumber>
     </>
diff --git a/src/components/FeaturePanel/Climbing/Editor/StartPoint.tsx b/src/components/FeaturePanel/Climbing/Editor/StartPoint.tsx
index 1aae90148..f77bb5ae5 100644
--- a/src/components/FeaturePanel/Climbing/Editor/StartPoint.tsx
+++ b/src/components/FeaturePanel/Climbing/Editor/StartPoint.tsx
@@ -10,8 +10,8 @@ type Props = {
 };
 
 export const StartPoint = ({ x, y, onClick, routeNumber }: Props) => {
-  const { routeSelectedIndex } = useContext(ClimbingContext);
-  const isSelected = routeSelectedIndex === routeNumber; // @TODO do contextu
+  const { isRouteSelected } = useContext(ClimbingContext);
+  const isSelected = isRouteSelected(routeNumber);
   return (
     <>
       <circle
@@ -28,12 +28,7 @@ export const StartPoint = ({ x, y, onClick, routeNumber }: Props) => {
         strokeWidth="0"
         fill={isSelected ? 'royalblue' : 'white'}
       />
-      <RouteNumber
-        onClick={onClick}
-        x={x}
-        y={y}
-        routeSelectedIndex={routeSelectedIndex}
-      >
+      <RouteNumber onClick={onClick} x={x} y={y}>
         {routeNumber}
       </RouteNumber>
     </>
diff --git a/src/components/FeaturePanel/Climbing/contexts/climbingContext.tsx b/src/components/FeaturePanel/Climbing/contexts/climbingContext.tsx
index d40eccf21..a9675cdff 100644
--- a/src/components/FeaturePanel/Climbing/contexts/climbingContext.tsx
+++ b/src/components/FeaturePanel/Climbing/contexts/climbingContext.tsx
@@ -11,6 +11,7 @@ type ClimbingContextType = {
   editorPosition: EditorPosition;
   imageSize: ImageSize;
   isPointMoving: boolean;
+  isRouteSelected: (routeNumber: number) => boolean;
   isSelectedRouteEditable: boolean;
   pointSelectedIndex: number;
   routes: Array<ClimbingRoute>;
@@ -35,6 +36,7 @@ export const ClimbingContext = createContext<ClimbingContextType>({
     height: 0,
   },
   isPointMoving: false,
+  isRouteSelected: () => null,
   isSelectedRouteEditable: false,
   pointSelectedIndex: null,
   routes: [],
@@ -61,6 +63,9 @@ export const ClimbingContextProvider = ({ children }) => {
   const [routeSelectedIndex, setRouteSelectedIndex] = useState<number>(null);
   const [pointSelectedIndex, setPointSelectedIndex] = useState<number>(null);
 
+  const isRouteSelected = (routeNumber: number) =>
+    routeSelectedIndex === routeNumber;
+
   const updateRouteOnIndex = (
     routeIndex: number,
     callback?: (route: ClimbingRoute) => ClimbingRoute,
@@ -89,6 +94,7 @@ export const ClimbingContextProvider = ({ children }) => {
     setRoutes,
     setRouteSelectedIndex,
     updateRouteOnIndex,
+    isRouteSelected,
   };
 
   return (