ClimbingDialog: Add DrawButton on mobile (#654)

zbycz · Oct 9, 2024 · 61a8cbf · 61a8cbf
1 parent 49131d5
commit 61a8cbf
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 73 deletions.
diff --git a/src/components/FeaturePanel/Climbing/ClimbingCragDialog.tsx b/src/components/FeaturePanel/Climbing/ClimbingCragDialog.tsx
@@ -114,8 +114,6 @@ export const ClimbingCragDialog = ({
     machine.execute('createRoute');
   };
 
-  const isMobileMode = useMobileMode();
-
   return (
     <Dialog fullScreen open onClose={handleClose}>
       <ClimbingCragDialogHeader onClose={handleClose} />
@@ -136,22 +134,18 @@ export const ClimbingCragDialog = ({
         <DialogActions>
           <Flex>
             <LeftActions>
-              {!isMobileMode && (
-                <>
-                  {showDebugMenu && (
-                    <Button
-                      onClick={onNewRouteCreate}
-                      color="primary"
-                      startIcon={<AddIcon />}
-                    >
-                      Add new route
-                    </Button>
-                  )}
-                  <div style={{ display: 'flex', justifyContent: 'center' }}>
-                    <ClimbingEditorHelperText />
-                  </div>
-                </>
+              {showDebugMenu && (
+                <Button
+                  onClick={onNewRouteCreate}
+                  color="primary"
+                  startIcon={<AddIcon />}
+                >
+                  Add new route
+                </Button>
               )}
+              <div style={{ display: 'flex', justifyContent: 'center' }}>
+                <ClimbingEditorHelperText />
+              </div>
             </LeftActions>
             <div>
               <Stack spacing={2} direction="row">

diff --git a/src/components/FeaturePanel/Climbing/ClimbingCragDialogHeader.tsx b/src/components/FeaturePanel/Climbing/ClimbingCragDialogHeader.tsx
@@ -42,14 +42,8 @@ export const ClimbingCragDialogHeader = ({ onClose }) => {
   const [isUserSettingsOpened, setIsUserSettingsOpened] =
     useState<boolean>(false);
   const [clickCounter, setClickCounter] = useState<number>(0);
-  const {
-    photoPath,
-    setAreRoutesLoading,
-    photoPaths,
-    setShowDebugMenu,
-    setIsEditMode,
-    isEditMode,
-  } = useClimbingContext();
+  const { photoPath, setAreRoutesLoading, photoPaths, setShowDebugMenu } =
+    useClimbingContext();
 
   const { feature } = useFeatureContext();
 

diff --git a/src/components/FeaturePanel/Climbing/ClimbingEditorHelperText.tsx b/src/components/FeaturePanel/Climbing/ClimbingEditorHelperText.tsx
@@ -6,6 +6,7 @@ import { useFeatureContext } from '../../utils/FeatureContext';
 import { getWikimediaCommonsPhotoPathKeys } from './utils/photo';
 import { RouteNumber } from './RouteNumber';
 import { t } from '../../../services/intl';
+import { useMobileMode } from '../../helpers';
 
 const InlineBlockContainer = styled.div`
   display: inline-block;
@@ -26,65 +27,77 @@ export const ClimbingEditorHelperText = () => {
   };
   const path = getCurrentPath();
   const isInSchema = path.length > 0;
+  const isMobileMode = useMobileMode();
+
+  const DrawButton = () => (
+    <Button
+      color="info"
+      variant="contained"
+      size="small"
+      onClick={onDrawRouteClick}
+      endIcon={
+        <RouteNumber hasCircle={true} hasTick={false} hasTooltip={false}>
+          {routeSelectedIndex + 1}
+        </RouteNumber>
+      }
+    >
+      {t('climbingpanel.draw_route')}
+    </Button>
+  );
 
   return (
     <>
-      {routeSelectedIndex === null && (
-        <Alert severity="info">
-          Select route you want to draw from the list.
-        </Alert>
-      )}
+      {!isMobileMode && (
+        <>
+          {routeSelectedIndex === null && (
+            <Alert severity="info">
+              Select route you want to draw from the list.
+            </Alert>
+          )}
 
-      {machine.currentStateName !== 'extendRoute' &&
-        routeSelectedIndex !== null &&
-        routePhotoPathsCount > 0 && (
-          <Alert severity="info">
-            Route{' '}
-            <InlineBlockContainer>
-              <RouteNumber hasCircle={true} hasTick={false} hasTooltip={false}>
-                {routeSelectedIndex + 1}
-              </RouteNumber>
-            </InlineBlockContainer>{' '}
-            is already drawn, but you can update it. Just drag the points or add
-            a new one.
-          </Alert>
-        )}
-
-      {machine.currentStateName === 'extendRoute' && !isInSchema && (
-        <Alert severity="info">{t('climbingpanel.create_first_node')}</Alert>
-      )}
-      {machine.currentStateName === 'extendRoute' && isInSchema && (
-        <Alert severity="info">{t('climbingpanel.create_next_node')}</Alert>
-      )}
-
-      {machine.currentStateName !== 'extendRoute' &&
-        !isInSchema &&
-        routeSelectedIndex !== null &&
-        routePhotoPathsCount === 0 && (
-          <Alert
-            severity="info"
-            action={
-              <Button
-                color="info"
-                variant="contained"
-                size="small"
-                onClick={onDrawRouteClick}
-                endIcon={
+          {machine.currentStateName !== 'extendRoute' &&
+            routeSelectedIndex !== null &&
+            routePhotoPathsCount > 0 && (
+              <Alert severity="info">
+                Route{' '}
+                <InlineBlockContainer>
                   <RouteNumber
                     hasCircle={true}
                     hasTick={false}
                     hasTooltip={false}
                   >
                     {routeSelectedIndex + 1}
                   </RouteNumber>
-                }
-              >
-                {t('climbingpanel.draw_route')}
-              </Button>
-            }
-          >
-            This route is not drawn yet.
-          </Alert>
+                </InlineBlockContainer>{' '}
+                is already drawn, but you can update it. Just drag the points or
+                add a new one.
+              </Alert>
+            )}
+
+          {machine.currentStateName === 'extendRoute' && !isInSchema && (
+            <Alert severity="info">
+              {t('climbingpanel.create_first_node')}
+            </Alert>
+          )}
+          {machine.currentStateName === 'extendRoute' && isInSchema && (
+            <Alert severity="info">{t('climbingpanel.create_next_node')}</Alert>
+          )}
+        </>
+      )}
+
+      {machine.currentStateName !== 'extendRoute' &&
+        !isInSchema &&
+        routeSelectedIndex !== null &&
+        routePhotoPathsCount === 0 && (
+          <>
+            {isMobileMode ? (
+              <DrawButton />
+            ) : (
+              <Alert severity="info" action={<DrawButton />}>
+                This route is not drawn yet.
+              </Alert>
+            )}
+          </>
         )}
     </>
   );