From 676ef2ba8fb4875ba7ceff5a3b318f4b7574b25c Mon Sep 17 00:00:00 2001
From: Nate Moore <nate.moore@sentry.io>
Date: Tue, 15 Jul 2025 13:34:09 -0500
Subject: [PATCH 1/2] fix(stories): use story location in footer

---
 static/app/stories/view/storyFooter.tsx | 20 ++------------------
 1 file changed, 2 insertions(+), 18 deletions(-)

diff --git a/static/app/stories/view/storyFooter.tsx b/static/app/stories/view/storyFooter.tsx
index 796c7836af2ba6..e97991110db5cb 100644
--- a/static/app/stories/view/storyFooter.tsx
+++ b/static/app/stories/view/storyFooter.tsx
@@ -1,5 +1,4 @@
 import styled from '@emotion/styled';
-import qs from 'query-string';
 
 import {LinkButton} from 'sentry/components/core/button/linkButton';
 import {Flex} from 'sentry/components/core/layout';
@@ -9,31 +8,16 @@ import type {StoryTreeNode} from 'sentry/stories/view/storyTree';
 import type {StoryDescriptor} from 'sentry/stories/view/useStoriesLoader';
 import {useStory} from 'sentry/stories/view/useStory';
 import {space} from 'sentry/styles/space';
-import {useLocation} from 'sentry/utils/useLocation';
 
 export function StoryFooter() {
-  const location = useLocation();
-
   const {story} = useStory();
   const categories = useStoryBookFilesByCategory();
   const pagination = findPreviousAndNextStory(story, categories);
 
-  const prevLocationDescriptor = qs.stringify({
-    ...location.query,
-    name: pagination?.prev?.story.filesystemPath,
-  });
-  const nextLocationDescriptor = qs.stringify({
-    ...location.query,
-    name: pagination?.next?.story.filesystemPath,
-  });
-
   return (
     <Flex align="center" justify="space-between" gap={space(2)}>
       {pagination?.prev && (
-        <Card
-          to={`/stories/?${prevLocationDescriptor}`}
-          icon={<IconArrow direction="left" />}
-        >
+        <Card to={pagination.prev.story.location} icon={<IconArrow direction="left" />}>
           <CardLabel>Previous</CardLabel>
           <CardTitle>{pagination.prev.story.label}</CardTitle>
         </Card>
@@ -41,7 +25,7 @@ export function StoryFooter() {
       {pagination?.next && (
         <Card
           data-flip
-          to={`/stories/?${nextLocationDescriptor}`}
+          to={pagination.next.story.location}
           icon={<IconArrow direction="right" />}
         >
           <CardLabel>Next</CardLabel>

From 20119a8fb9e69b8d1aa54f4f31772326d87035bc Mon Sep 17 00:00:00 2001
From: Nate Moore <nate.moore@sentry.io>
Date: Tue, 15 Jul 2025 13:40:49 -0500
Subject: [PATCH 2/2] ref(stories): flatten data model

---
 static/app/stories/view/storyFooter.tsx | 32 ++++++++++++-------------
 1 file changed, 15 insertions(+), 17 deletions(-)

diff --git a/static/app/stories/view/storyFooter.tsx b/static/app/stories/view/storyFooter.tsx
index e97991110db5cb..26c34b2e7fc431 100644
--- a/static/app/stories/view/storyFooter.tsx
+++ b/static/app/stories/view/storyFooter.tsx
@@ -3,33 +3,34 @@ import styled from '@emotion/styled';
 import {LinkButton} from 'sentry/components/core/button/linkButton';
 import {Flex} from 'sentry/components/core/layout';
 import {IconArrow} from 'sentry/icons';
-import {useStoryBookFilesByCategory} from 'sentry/stories/view/storySidebar';
-import type {StoryTreeNode} from 'sentry/stories/view/storyTree';
-import type {StoryDescriptor} from 'sentry/stories/view/useStoriesLoader';
-import {useStory} from 'sentry/stories/view/useStory';
 import {space} from 'sentry/styles/space';
 
+import {useStoryBookFilesByCategory} from './storySidebar';
+import type {StoryTreeNode} from './storyTree';
+import {type StoryDescriptor} from './useStoriesLoader';
+import {useStory} from './useStory';
+
 export function StoryFooter() {
   const {story} = useStory();
-  const categories = useStoryBookFilesByCategory();
-  const pagination = findPreviousAndNextStory(story, categories);
+  const stories = useStoryBookFilesByCategory();
+  const pagination = findPreviousAndNextStory(story, stories);
 
   return (
     <Flex align="center" justify="space-between" gap={space(2)}>
       {pagination?.prev && (
-        <Card to={pagination.prev.story.location} icon={<IconArrow direction="left" />}>
+        <Card to={pagination.prev.location} icon={<IconArrow direction="left" />}>
           <CardLabel>Previous</CardLabel>
-          <CardTitle>{pagination.prev.story.label}</CardTitle>
+          <CardTitle>{pagination.prev.label}</CardTitle>
         </Card>
       )}
       {pagination?.next && (
         <Card
           data-flip
-          to={pagination.next.story.location}
+          to={pagination.next.location}
           icon={<IconArrow direction="right" />}
         >
           <CardLabel>Next</CardLabel>
-          <CardTitle>{pagination.next.story.label}</CardTitle>
+          <CardTitle>{pagination.next.label}</CardTitle>
         </Card>
       )}
     </Flex>
@@ -40,14 +41,11 @@ function findPreviousAndNextStory(
   story: StoryDescriptor,
   categories: ReturnType<typeof useStoryBookFilesByCategory>
 ): {
-  next: {category: string; story: StoryTreeNode} | undefined;
-  prev: {category: string; story: StoryTreeNode} | undefined;
+  next?: StoryTreeNode;
+  prev?: StoryTreeNode;
 } | null {
-  const stories = Object.entries(categories).flatMap(([key, category]) =>
-    category.map(s => ({category: key, story: s}))
-  );
-
-  const currentIndex = stories.findIndex(s => s.story.filesystemPath === story.filename);
+  const stories = Object.values(categories).flat();
+  const currentIndex = stories.findIndex(s => s.filesystemPath === story.filename);
 
   if (currentIndex === -1) {
     return null;