climbing: Add My ticks page

src/components/App/App.tsx

@@ -23,6 +23,7 @@ import { SnackbarProvider } from '../utils/SnackbarContext';
 import { useMobileMode } from '../helpers';
 import { FeaturePanelInDrawer } from '../FeaturePanel/FeaturePanelInDrawer';
 import { UserSettingsProvider } from '../utils/UserSettingsContext';
+import { MyTicksPage } from '../FeaturePanel/Climbing/MyTicksPage';
 
 const usePersistMapView = () => {
   const { view } = useMapStateContext();
@@ -79,6 +80,7 @@ const IndexWithProviders = () => {
 
   const isClimbingDialogShown = router.query.all?.[2] === 'climbing';
   const photo = router.query.all?.[3];
+
   return (
     <>
       <Loading />
@@ -90,8 +92,8 @@ const IndexWithProviders = () => {
           <ClimbingDialog photo={photo} />
         </ClimbingContextProvider>
       )}
-
       <HomepagePanel />
+      {router.query.all?.[0] === 'my-ticks' && <MyTicksPage />}
       {router.pathname === '/install' && <InstallDialog />}
       <Map />
       <TitleAndMetaTags />

src/components/FeaturePanel/Climbing/Editor/PathWithBorder.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { useTheme } from '@mui/material';
 import { useConfig } from '../config';
 import { useClimbingContext } from '../contexts/ClimbingContext';
-import { getDifficultyColor } from '../utils/grades/routeGrade';
+import { getDifficulty, getDifficultyColor } from '../utils/grades/routeGrade';
 
 const RouteLine = styled.path`
   pointer-events: all;
@@ -26,7 +26,7 @@ export const PathWithBorder = ({
   const theme = useTheme();
 
   const strokeColor = isDifficultyHeatmapEnabled
-    ? getDifficultyColor(route.feature.tags, theme)
+    ? getDifficultyColor(getDifficulty(route.feature.tags), theme)
     : config.pathStrokeColor;
 
   const getPathColor = () => {

src/components/FeaturePanel/Climbing/MyTicksPage.tsx

@@ -0,0 +1,117 @@
+import React, { useEffect, useState } from 'react';
+import Router from 'next/router';
+import {
+  TableHead,
+  TableRow,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  Paper,
+} from '@mui/material';
+import { t } from '../../../services/intl';
+import { getAllTicks } from '../../../services/ticks';
+import { TickRow } from './TickRow';
+import { fetchJson } from '../../../services/fetch';
+import {
+  getOverpassUrl,
+  overpassGeomToGeojson,
+} from '../../../services/overpassSearch';
+import { getApiId, getShortId } from '../../../services/helpers';
+import { getRouteGrade } from './utils/grades/routeGrade';
+import { ClosePanelButton } from '../../utils/ClosePanelButton';
+import {
+  PanelContent,
+  PanelScrollbars,
+  PanelSidePadding,
+  PanelWrapper,
+} from '../../utils/PanelHelpers';
+import { ClientOnly } from '../../helpers';
+import { useUserSettingsContext } from '../../utils/UserSettingsContext';
+
+export const MyTicksPage = () => {
+  const [myTicksData, setMyTicksData] = useState({});
+  const allTicks = getAllTicks();
+  const { userSettings } = useUserSettingsContext();
+
+  const getOverpassData = async () => {
+    const queryTicks = allTicks
+      .map(({ osmId }) => {
+        if (!osmId) return '';
+        const { id } = getApiId(osmId);
+        return `node(${id});`;
+      })
+      .join('');
+    const query = `[out:json];(${queryTicks});out body qt;`;
+    const overpass = await fetchJson(getOverpassUrl(query));
+
+    const features = overpassGeomToGeojson(overpass);
+
+    const data = Object.keys(features).reduce((acc, key) => {
+      const feature = features[key];
+      return {
+        ...acc,
+        [getShortId(feature.osmMeta)]: feature.tags,
+      };
+    }, {});
+    setMyTicksData(data);
+  };
+
+  useEffect(() => {
+    getOverpassData();
+  }, []);
+
+  const handleClose = () => {
+    Router.push(`/`);
+  };
+
+  return (
+    <ClientOnly>
+      <PanelWrapper>
+        <PanelContent>
+          <PanelScrollbars>
+            <ClosePanelButton right onClick={handleClose} />
+            <PanelSidePadding>
+              <h1>{t('my_ticks.title')}</h1>
+            </PanelSidePadding>
+            <TableContainer component={Paper}>
+              <Table size="small">
+                <TableHead>
+                  <TableRow>
+                    <TableCell>{t('my_ticks.route_name')}</TableCell>
+                    <TableCell>{t('my_ticks.route_grade')}</TableCell>
+                    <TableCell>{t('my_ticks.route_style')}</TableCell>
+                    <TableCell>{t('my_ticks.route_date')}</TableCell>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {allTicks.map((tick, index) => {
+                    const tickData = myTicksData[tick.osmId];
+                    const name = tickData?.name;
+                    const grade = getRouteGrade(
+                      tickData,
+                      userSettings['climbing.gradeSystem'],
+                    );
+
+                    return (
+                      <TickRow
+                        key={`${tick.osmId}-${tick.date}`}
+                        name={name}
+                        grade={grade}
+                        gradeSystem={userSettings['climbing.gradeSystem']}
+                        tick={tick}
+                        index={index}
+                        isNameVisible
+                        isReadOnly
+                      />
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          </PanelScrollbars>
+        </PanelContent>
+      </PanelWrapper>
+    </ClientOnly>
+  );
+};

src/components/FeaturePanel/Climbing/RouteDifficultyBadge.tsx

@@ -3,12 +3,11 @@ import styled from 'styled-components';
 import { Tooltip, useTheme } from '@mui/material';
 import {
   convertGrade,
-  getDifficulty,
   getDifficultyColor,
   getGradeSystemName,
 } from './utils/grades/routeGrade';
-import { GradeSystem } from './utils/grades/gradeData';
-import { Feature } from '../../../services/types';
+import { useUserSettingsContext } from '../../utils/UserSettingsContext';
+import { RouteDifficulty } from './types';
 
 const Container = styled.div<{ $color: string }>`
   border-radius: 12px;
@@ -22,17 +21,13 @@ const Container = styled.div<{ $color: string }>`
 `;
 
 type Props = {
-  routeFeature: Feature;
-  selectedRouteSystem?: GradeSystem;
+  routeDifficulty?: RouteDifficulty;
 };
 
-export const RouteDifficultyBadge = ({
-  routeFeature,
-  selectedRouteSystem,
-}: Props) => {
+export const RouteDifficultyBadge = ({ routeDifficulty }: Props) => {
   const theme = useTheme();
-  const routeDifficulty = getDifficulty(routeFeature?.tags);
-
+  const { userSettings } = useUserSettingsContext();
+  const selectedRouteSystem = userSettings['climbing.gradeSystem'];
   const convertedGrade = selectedRouteSystem
     ? convertGrade(
         routeDifficulty?.gradeSystem,
@@ -47,7 +42,7 @@ export const RouteDifficultyBadge = ({
     convertedGrade ? selectedRouteSystem : routeDifficulty?.gradeSystem,
   );
 
-  const colorByDifficulty = getDifficultyColor(routeFeature?.tags, theme);
+  const colorByDifficulty = getDifficultyColor(routeDifficulty, theme);
 
   return (
     <Tooltip

src/components/FeaturePanel/Climbing/RouteDistribution.tsx

@@ -110,7 +110,8 @@ export const RouteDistribution = () => {
             {heightsRatios.map((heightRatioItem) => {
               const color = getDifficultyColor(
                 {
-                  'climbing:grade:uiaa': heightRatioItem.grade,
+                  gradeSystem: 'uiaa',
+                  grade: heightRatioItem.grade,
                 },
                 theme,
               );

src/components/FeaturePanel/Climbing/RouteList/ExpandedRow.tsx

@@ -21,7 +21,7 @@ import { RouteInDifferentPhotos } from './RouteInDifferentPhotos';
 import { Label } from './Label';
 import { getOsmappLink } from '../../../../services/helpers';
 import { onTickAdd } from '../../../../services/ticks';
-import { MyTicks } from './MyTicks';
+import { MyRouteTicks } from './MyRouteTicks';
 
 const Left = styled.div`
   flex: 1;
@@ -203,7 +203,7 @@ export const ExpandedRow = ({
             </List>
           </Right>
         </Flex>
-        <MyTicks osmId={osmId} />
+        <MyRouteTicks osmId={osmId} />
       </ExpandedRowContainer>
       <Dialog
         open={routeToDelete !== null}

src/components/FeaturePanel/Climbing/RouteList/MyRouteTicks.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from 'styled-components';
+import { findTicks } from '../../../../services/ticks';
+import { PanelLabel } from '../PanelLabel';
+import { TickRow } from '../TickRow';
+
+const Container = styled.div`
+  margin-bottom: 20px;
+`;
+
+export const MyRouteTicks = ({ osmId }) => {
+  const ticks = findTicks(osmId);
+  if (ticks.length === 0) return null;
+
+  return (
+    <Container>
+      <PanelLabel>Ticks:</PanelLabel>
+      {ticks.map((tick, index) => (
+        <TickRow tick={tick} index={index} />
+      ))}
+    </Container>
+  );
+};

src/components/FeaturePanel/Climbing/RouteList/RouteListRow.tsx

@@ -14,7 +14,7 @@ import { ExpandedRow } from './ExpandedRow';
 import { RouteDifficultyBadge } from '../RouteDifficultyBadge';
 import { getShortId } from '../../../../services/helpers';
 import { isTicked } from '../../../../services/ticks';
-import { useUserSettingsContext } from '../../../utils/UserSettingsContext';
+import { getDifficulty } from '../utils/grades/routeGrade';
 
 const DEBOUNCE_TIME = 1000;
 const Container = styled.div`
@@ -84,7 +84,6 @@ export const RenderListRow = ({
     setRoutesExpanded,
     getPhotoInfoForRoute,
   } = useClimbingContext();
-  const { userSettings } = useUserSettingsContext();
 
   useEffect(() => {
     if (routeSelectedIndex === index) {
@@ -129,6 +128,7 @@ export const RenderListRow = ({
     isExpanded,
     osmId,
   };
+  const routeDifficulty = getDifficulty(tempRoute.feature?.tags);
 
   return (
     <Container ref={ref}>
@@ -162,10 +162,7 @@ export const RenderListRow = ({
           )}
         </NameCell>
         <DifficultyCell $width={50}>
-          <RouteDifficultyBadge
-            routeFeature={tempRoute.feature}
-            selectedRouteSystem={userSettings['climbing.gradeSystem']}
-          />
+          <RouteDifficultyBadge routeDifficulty={routeDifficulty} />
         </DifficultyCell>
 
         <Cell $width={50}>