ref(replay): Iterate on selectedReplayIndex (#94313)

Followup from comments in
#94228 (comment)

Depends on #94231

Author: ryan953

static/app/components/replays/queryParams/selectedReplayIndex.tsx

@@ -0,0 +1,45 @@
+import {createContext, useCallback, useContext} from 'react';
+
+import {decodeInteger} from 'sentry/utils/queryString';
+import useLocationQuery from 'sentry/utils/url/useLocationQuery';
+import {useLocation} from 'sentry/utils/useLocation';
+import {useNavigate} from 'sentry/utils/useNavigate';
+
+const SelectedReplayIndexContext = createContext<number>(0);
+
+export function SelectedReplayIndexProvider({children}: {children: React.ReactNode}) {
+  const {selected_replay_index: selectedReplayIndex} = useLocationQuery({
+    fields: {
+      selected_replay_index: decodeInteger,
+    },
+  });
+
+  return (
+    <SelectedReplayIndexContext.Provider value={selectedReplayIndex ?? 0}>
+      {children}
+    </SelectedReplayIndexContext.Provider>
+  );
+}
+
+export function useSelectedReplayIndex() {
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const index = useContext(SelectedReplayIndexContext);
+
+  return {
+    index,
+    select: useCallback(
+      (newIndex: number) => {
+        navigate(
+          {
+            pathname: location.pathname,
+            query: {...location.query, selected_replay_index: newIndex},
+          },
+          {replace: true, preventScrollReset: true}
+        );
+      },
+      [location, navigate]
+    ),
+  };
+}

static/app/views/issueDetails/groupReplays/groupReplays.tsx

@@ -6,6 +6,10 @@ import type {Location} from 'history';
 import {Button} from 'sentry/components/core/button';
 import * as Layout from 'sentry/components/layouts/thirds';
 import Placeholder from 'sentry/components/placeholder';
+import {
+  SelectedReplayIndexProvider,
+  useSelectedReplayIndex,
+} from 'sentry/components/replays/queryParams/selectedReplayIndex';
 import {Provider as ReplayContextProvider} from 'sentry/components/replays/replayContext';
 import {replayMobilePlatforms} from 'sentry/data/platformCategories';
 import {IconPlay, IconUser} from 'sentry/icons';
@@ -22,11 +26,6 @@ import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import {useParams} from 'sentry/utils/useParams';
 import GroupReplaysPlayer from 'sentry/views/issueDetails/groupReplays/groupReplaysPlayer';
-import {
-  SelectedReplayIndexProvider,
-  useSelectedReplayIndex,
-} from 'sentry/views/issueDetails/groupReplays/selectedReplayIndexContext';
-import useSelectReplayIndex from 'sentry/views/issueDetails/groupReplays/useSelectReplayIndex';
 import {useHasStreamlinedUI} from 'sentry/views/issueDetails/utils';
 import useAllMobileProj from 'sentry/views/replays/detail/useAllMobileProj';
 import ReplayTable from 'sentry/views/replays/replayTable';
@@ -175,8 +174,8 @@ function SelectedReplayWrapper({
   });
   const {status, replay} = readerResult;
 
-  const selectedReplayIndex = useSelectedReplayIndex();
-  const {select: setSelectedReplayIndex} = useSelectReplayIndex();
+  const {index: selectedReplayIndex, select: setSelectedReplayIndex} =
+    useSelectedReplayIndex();
 
   return (
     <ReplayContextProvider
@@ -216,8 +215,8 @@ function GroupReplaysTable({
 }) {
   const organization = useOrganization();
   const {allMobileProj} = useAllMobileProj({});
-  const selectedReplayIndex = useSelectedReplayIndex();
-  const {select: setSelectedReplayIndex} = useSelectReplayIndex();
+  const {index: selectedReplayIndex, select: setSelectedReplayIndex} =
+    useSelectedReplayIndex();
 
   const {groupId} = useParams<{groupId: string}>();
   useCleanQueryParamsOnRouteLeave({
@@ -273,8 +272,8 @@ function ReplayOverlay({
   replayCount: number;
   replays: ReplayListRecord[];
 }) {
-  const selectedReplayIndex = useSelectedReplayIndex();
-  const {select: setSelectedReplayIndex} = useSelectReplayIndex();
+  const {index: selectedReplayIndex, select: setSelectedReplayIndex} =
+    useSelectedReplayIndex();
 
   const nextReplay = replays?.[selectedReplayIndex + 1];
   const nextReplayText = nextReplay?.id

static/app/views/issueDetails/groupReplays/selectedReplayIndexContext.tsx

@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 import {Alert} from 'sentry/components/core/alert';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import {PanelTable} from 'sentry/components/panels/panelTable';
+import {useSelectedReplayIndex} from 'sentry/components/replays/queryParams/selectedReplayIndex';
 import {t} from 'sentry/locale';
 import EventView from 'sentry/utils/discover/eventView';
 import type {Sort} from 'sentry/utils/discover/fields';
@@ -12,7 +13,6 @@ import type RequestError from 'sentry/utils/requestError/requestError';
 import {ERROR_MAP} from 'sentry/utils/requestError/requestError';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useRoutes} from 'sentry/utils/useRoutes';
-import {useSelectedReplayIndex} from 'sentry/views/issueDetails/groupReplays/selectedReplayIndexContext';
 import type {ReplayListRecordWithTx} from 'sentry/views/performance/transactionSummary/transactionReplays/useReplaysWithTxData';
 import HeaderCell from 'sentry/views/replays/replayTable/headerCell';
 import {
@@ -76,7 +76,7 @@ function ReplayTable({
   const routes = useRoutes();
   const location = useLocation();
 
-  const selectedReplayIndex = useSelectedReplayIndex();
+  const {index: selectedReplayIndex} = useSelectedReplayIndex();
 
   const tableHeaders = visibleColumns
     .filter(Boolean)

static/app/views/issueDetails/groupReplays/useSelectReplayIndex.tsx

@@ -10,6 +10,7 @@ import {Tooltip} from 'sentry/components/core/tooltip';
 import {DropdownMenu} from 'sentry/components/dropdownMenu';
 import Duration from 'sentry/components/duration/duration';
 import Link from 'sentry/components/links/link';
+import {useSelectedReplayIndex} from 'sentry/components/replays/queryParams/selectedReplayIndex';
 import ReplayPlatformIcon from 'sentry/components/replays/replayPlatformIcon';
 import ReplayPlayPauseButton from 'sentry/components/replays/replayPlayPauseButton';
 import ScoreBar from 'sentry/components/scoreBar';
@@ -37,8 +38,6 @@ import useMedia from 'sentry/utils/useMedia';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import useOrganization from 'sentry/utils/useOrganization';
 import useProjects from 'sentry/utils/useProjects';
-import {useSelectedReplayIndex} from 'sentry/views/issueDetails/groupReplays/selectedReplayIndexContext';
-import useSelectReplayIndex from 'sentry/views/issueDetails/groupReplays/useSelectReplayIndex';
 import type {ReplayListRecordWithTx} from 'sentry/views/performance/transactionSummary/transactionReplays/useReplaysWithTxData';
 import {makeReplaysPathname} from 'sentry/views/replays/pathnames';
 import type {ReplayListLocationQuery, ReplayListRecord} from 'sentry/views/replays/types';
@@ -664,8 +663,8 @@ export function ActivityCell({replay, showDropdownFilters}: Props) {
 }
 
 export function PlayPauseCell({rowIndex}: Props) {
-  const selectedReplayIndex = useSelectedReplayIndex();
-  const {select: setSelectedReplayIndex} = useSelectReplayIndex();
+  const {index: selectedReplayIndex, select: setSelectedReplayIndex} =
+    useSelectedReplayIndex();
   const inner =
     rowIndex === selectedReplayIndex ? (
       <ReplayPlayPauseButton size="sm" priority="default" borderless />