FeaturePanel: Fix showing non-climbing routes

src/components/FeaturePanel/Climbing/contexts/osmToClimbingRoutes.ts

@@ -5,6 +5,7 @@ import { boltCodeMap } from '../utils/boltCodes';
 import { removeFilePrefix } from '../utils/photo';
 import { getDifficulty } from '../utils/grades/routeGrade';
 import { publishDbgObject } from '../../../../utils';
+import { getDividedFeaturesBySections } from '../utils/route';
 
 const parsePathString = (pathString?: string): PathPoints =>
   pathString
@@ -43,7 +44,7 @@ export const osmToClimbingRoutes = (feature: Feature): Array<ClimbingRoute> => {
     return [];
   }
 
-  const routes = feature.memberFeatures;
+  const routes = getDividedFeaturesBySections(feature.memberFeatures).routes;
 
   const climbingRoutes = routes.map((route) => {
     const { paths, photoToKeyMap } = getPathsByImage(route.tags);

src/components/FeaturePanel/Climbing/utils/route.ts

@@ -0,0 +1,15 @@
+import { Feature } from '../../../../services/types';
+
+const allowedValues = ['route', 'route_bottom', 'route_top'];
+
+export const getDividedFeaturesBySections = (features: Feature[]) =>
+  features.reduce<{ routes: Array<Feature>; other: Array<Feature> }>(
+    (acc, feature) => {
+      const isRoute = allowedValues.includes(feature.tags?.climbing);
+      if (isRoute) {
+        return { ...acc, routes: [...acc.routes, feature] };
+      }
+      return { ...acc, other: [...acc.other, feature] };
+    },
+    { routes: [], other: [] },
+  );

src/components/FeaturePanel/CragsInArea.tsx

@@ -152,10 +152,7 @@ const CragItem = ({ feature }: { feature: Feature }) => {
 export const CragsInArea = () => {
   const { feature } = useFeatureContext();
 
-  if (!feature.memberFeatures?.length) {
-    return null;
-  }
-  if (feature.tags.climbing !== 'area') {
+  if (!feature.memberFeatures?.length || feature.tags.climbing !== 'area') {
     return null;
   }
 

src/components/FeaturePanel/MemberFeatures/MemberFeatures.tsx

@@ -11,6 +11,7 @@ import { useUserSettingsContext } from '../../utils/UserSettingsContext';
 import { Feature } from '../../../services/types';
 import { isRouteMaster } from '../../../utils';
 import { t } from '../../../services/intl';
+import { getDividedFeaturesBySections } from '../Climbing/utils/route';
 
 const getHeading = (feature: Feature) => {
   if (feature.tags.climbing === 'crag') {
@@ -58,27 +59,35 @@ export const MemberFeatures = () => {
     return null;
   }
 
-  const isClimbingCrag = tags.climbing === 'crag';
+  const dividedFeaturesBySections =
+    getDividedFeaturesBySections(memberFeatures);
+  const climbingRoutesFeatures = dividedFeaturesBySections.routes;
+  const otherFeatures = dividedFeaturesBySections.other;
 
   return (
     <Box mb={1}>
       <PanelLabel addition={<PanelAddition />}>
         {getHeading(feature)} ({memberFeatures.length})
       </PanelLabel>
-      <Ul>
-        {memberFeatures.map((item, index) =>
-          isClimbingCrag ? (
+      {climbingRoutesFeatures.length > 0 && (
+        <Ul>
+          {climbingRoutesFeatures.map((item, index) => (
             <ClimbingItem
               key={getOsmappLink(item)}
               feature={item}
               index={index}
               cragFeature={feature}
             />
-          ) : (
+          ))}
+        </Ul>
+      )}
+      {otherFeatures.length > 0 && (
+        <Ul>
+          {otherFeatures.map((item) => (
             <Item key={getOsmappLink(item)} feature={item} />
-          ),
-        )}
-      </Ul>
+          ))}
+        </Ul>
+      )}
     </Box>
   );
 };