Show neighboring climbs on climb page

[josh610]

What would you like to be able to do? Please describe. When looking at a climb, I like to be able to conveniently view other climbs at the same crag, à la Mountain Project. I think adding a list of these climbs to the climb page would encourage exploration of the crag.

Here's a quick mockup I created:

How important is this to you (Please pick one)

• Important

[vnugent]

Great idea! Can you also create a mobile mockup as well?

[josh610]

I used a similar design to the one the MP app uses, which I think would suffice, but maybe someone with more experience in UI design could come up with something better.

[vnugent]

Both mockups look great. Thanks!

[clintonlunn]

is this feasible with the current data structure? i don't think we have access to all of the other climbs in an area when we load the climbs page? we do get the left and right climb and their left_right_index. See below for the object that gets returned when loading the page props for this route

{
    "pageProps": {
        "key": "05e7628c-cf5f-570e-bec1-98c6b31bc77c",
        "climb": {
            "id": "05e7628c-cf5f-570e-bec1-98c6b31bc77c",
            "uuid": "05e7628c-cf5f-570e-bec1-98c6b31bc77c",
            "name": "Golden Slumber",
            "fa": "Bob D'Antonio, Vaino Kodas, Moe Hershoff, 2002",
            "length": -1,
            "yds": "5.10d",
            "grades": {
                "ewbank": null,
                "font": null,
                "french": "6b+",
                "vscale": null,
                "yds": "5.10d",
                "uiaa": null,
                "__typename": "GradeType"
            },
            "safety": "UNSPECIFIED",
            "type": {
                "sport": true,
                "bouldering": false,
                "alpine": false,
                "tr": false,
                "trad": true,
                "mixed": false,
                "aid": false,
                "__typename": "ClimbType"
            },
            "media": [],
            "content": {
                "description": "Golden Slumber starts just left of Sleepless in Boulder. Power up a series of cool lay-backing and face moves past several bolts to a short left-facing corner. Place gear in the corner, gain a big hold and clip a bolt below a thin crack. Climb the crack using gear and then climb past two bolts (crux) to a two-bolt anchor.",
                "location": "",
                "protection": "8 bolts and small-to-medium cams to a 2-bolt anchor.",
                "__typename": "Content"
            },
            "pathTokens": [
                "USA",
                "Colorado",
                "Boulder",
                "Boulder Canyon",
                "Lower Dream Canyon",
                "Plotinus Wall",
                "Left Side"
            ],
            "ancestors": [
                "1db1e8ba-a40e-587c-88a4-64f5ea814b8e",
                "ab48aed5-2e8d-54bb-b099-6140fe1f098f",
                "decc1251-4a67-52b9-b23f-3243e10e93d0",
                "e519a674-a620-509c-9e86-a246f84a8e40",
                "4d4f8c21-1892-5260-bf8f-c63bd77ee2bc",
                "48c23a05-aba4-54ff-a125-8ca10caaf364",
                "6da8b9f1-b144-5a85-a45e-df3d58dfb194"
            ],
            "metadata": {
                "climbId": "05e7628c-cf5f-570e-bec1-98c6b31bc77c",
                "__typename": "ClimbMetadata"
            },
            "parent": {
                "gradeContext": "US",
                "metadata": {
                    "isBoulder": false,
                    "__typename": "AreaMetadata"
                },
                "__typename": "Area"
            },
            "authorMetadata": {
                "createdAt": 1684514304339,
                "updatedAt": 1684514304339,
                "createdByUser": null,
                "updatedByUser": null,
                "__typename": "AuthorMetadata"
            },
            "__typename": "Climb"
        },
        "leftClimb": {
            "__typename": "Climb",
            "uuid": "ee166be1-2415-56a8-8885-6948cb44b5f9",
            "id": "ee166be1-2415-56a8-8885-6948cb44b5f9",
            "metadata": {
                "__typename": "ClimbMetadata",
                "climbId": "ee166be1-2415-56a8-8885-6948cb44b5f9",
                "left_right_index": 15
            }
        },
        "rightClimb": {
            "__typename": "Climb",
            "uuid": "1081eab1-59c3-5157-bcfe-cdb9b5f532c5",
            "id": "1081eab1-59c3-5157-bcfe-cdb9b5f532c5",
            "metadata": {
                "__typename": "ClimbMetadata",
                "climbId": "1081eab1-59c3-5157-bcfe-cdb9b5f532c5",
                "left_right_index": 17
            }
        }
    },
    "__N_SSG": true
}

[vnugent]

The current API, get climb by id, doesn't return sibling climbs. We can either make another query to get the parent area object or update get climb API to return siblings. Either way we still need to build a new UI.

[vnugent]

PS: I also wanted to add that this feature would be very useful. I've been using openbeta.io on my phone this summer while out climbing. I often needed to browse neighbor climbs as well as navigate to neighbor crags.

[btmccord]

Got this working on the desktop.

Left right arrow keys (swipe on mobile) were already set up to navigate to the next route left or right. I am wondering if there should be a UI element that also preforms this function, or at least something to let the user know that those keyboard shortcuts exist. Maybe something similar to the mobile mock-up above? Or this?

I also am just thinking that when a user is at the left or right most route, rather than not showing a route we could link to the next area (or route in that area) in that direction if there is one.

On mobile I am thinking that the full route list would move to the bottom of the page.

[vnugent]

On mobile I am thinking that the full route list would move to the bottom of the page.

Sure. Can you create a PR with what you got? We can deal with proper mobile design in follow up PRs.

[btmccord]

Sure. Can you create a PR with what you got? We can deal with proper mobile design in follow up PRs.

PR submitted. It should work properly on mobile

[btmccord]

I think we can close this now