add isRouteSelected

zbycz · Oct 2, 2023 · 10ac97f · 10ac97f
1 parent c70ae2d
commit 10ac97f
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 22 deletions.
diff --git 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
@@ -5,7 +5,6 @@ import { ClimbingContext } from '../contexts/climbingContext';
 
 type Props = {
   onClick: (routeNumber: number) => void;
-  routeSelectedIndex: number;
   children: number;
   x: number;
   y: number;
@@ -24,15 +23,14 @@ export const RouteNumber = ({
   children: routeNumber,
   x,
   y,
-  routeSelectedIndex,
 }: Props) => {
   const RECT_WIDTH = String(routeNumber).length * 5 + 15;
   const RECT_HEIGHT = 20;
   const RECT_Y_OFFSET = 10;
   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
@@ -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
@@ -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
@@ -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
@@ -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 (