extract useLoadReplayReader from ReplayLoadingState, inject instead

Author: ryan953

static/app/components/events/eventHydrationDiff/replayDiffContent.tsx

@@ -17,6 +17,8 @@ import {space} from 'sentry/styles/space';
 import type {Event} from 'sentry/types/event';
 import type {Group} from 'sentry/types/group';
 import {getReplayDiffOffsetsFromEvent} from 'sentry/utils/replays/getDiffTimestamps';
+import useLoadReplayReader from 'sentry/utils/replays/hooks/useLoadReplayReader';
+import useOrganization from 'sentry/utils/useOrganization';
 import {SectionKey} from 'sentry/views/issueDetails/streamline/context';
 import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection';
 
@@ -40,9 +42,17 @@ export default function ReplayDiffContent({event, group, orgSlug, replaySlug}: P
       );
     };
   }
+
+  const organization = useOrganization();
+  const readerResult = useLoadReplayReader({
+    orgSlug: organization.slug,
+    replaySlug,
+    clipWindow: undefined,
+  });
+
   return (
     <ReplayLoadingState
-      replaySlug={replaySlug}
+      readerResult={readerResult}
       renderArchived={wrapInSection(() => (
         <ArchivedReplayAlert message={t('The replay for this event has been deleted.')} />
       ))}

static/app/components/replays/player/__stories__/replaySlugChooser.tsx

@@ -3,6 +3,8 @@ import {css} from '@emotion/react';
 
 import Providers from 'sentry/components/replays/player/__stories__/providers';
 import ReplayLoadingState from 'sentry/components/replays/player/replayLoadingState';
+import useLoadReplayReader from 'sentry/utils/replays/hooks/useLoadReplayReader';
+import useOrganization from 'sentry/utils/useOrganization';
 import {useSessionStorage} from 'sentry/utils/useSessionStorage';
 
 type Props =
@@ -14,33 +16,50 @@ export default function ReplaySlugChooser(props: Props) {
 
   const [replaySlug, setReplaySlug] = useSessionStorage('stories:replaySlug', '');
 
-  let content = null;
-  if (replaySlug) {
-    if (children) {
-      content = (
-        <ReplayLoadingState replaySlug={replaySlug}>
+  const input = (
+    <input
+      defaultValue={replaySlug}
+      onChange={event => {
+        setReplaySlug(event.target.value);
+      }}
+      placeholder="Paste a replaySlug"
+      css={css`
+        font-variant-numeric: tabular-nums;
+      `}
+      size={34}
+    />
+  );
+
+  if (replaySlug && children) {
+    function Content() {
+      const organization = useOrganization();
+      const readerResult = useLoadReplayReader({
+        orgSlug: organization.slug,
+        replaySlug,
+        clipWindow: undefined,
+      });
+      return (
+        <ReplayLoadingState readerResult={readerResult}>
           {({replay}) => <Providers replay={replay}>{children}</Providers>}
         </ReplayLoadingState>
       );
-    } else if (render) {
-      content = render(replaySlug);
     }
+    return (
+      <Fragment>
+        {input}
+        <Content />
+      </Fragment>
+    );
   }
 
-  return (
-    <Fragment>
-      <input
-        defaultValue={replaySlug}
-        onChange={event => {
-          setReplaySlug(event.target.value);
-        }}
-        placeholder="Paste a replaySlug"
-        css={css`
-          font-variant-numeric: tabular-nums;
-        `}
-        size={34}
-      />
-      {content}
-    </Fragment>
-  );
+  if (replaySlug && render) {
+    return (
+      <Fragment>
+        {input}
+        {render(replaySlug)}
+      </Fragment>
+    );
+  }
+
+  return null;
 }

static/app/components/replays/player/replayLoadingState.tsx

@@ -3,43 +3,28 @@ import type {ReactNode} from 'react';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import ArchivedReplayAlert from 'sentry/components/replays/alerts/archivedReplayAlert';
 import MissingReplayAlert from 'sentry/components/replays/alerts/missingReplayAlert';
-import useLoadReplayReader from 'sentry/utils/replays/hooks/useLoadReplayReader';
+import type useLoadReplayReader from 'sentry/utils/replays/hooks/useLoadReplayReader';
 import type ReplayReader from 'sentry/utils/replays/replayReader';
 import useOrganization from 'sentry/utils/useOrganization';
 
-type ClipWindow = {
-  // When to stop the replay, given it continues into that time
-  endTimestampMs: number;
-
-  // When to start the replay, given its start time is early enough
-  startTimestampMs: number;
-};
-
 type ReplayReaderResult = ReturnType<typeof useLoadReplayReader>;
 
 export default function ReplayLoadingState({
   children,
-  replaySlug,
-  clipWindow,
+  readerResult,
   renderArchived,
   renderError,
   renderLoading,
   renderMissing,
 }: {
   children: (props: {replay: ReplayReader}) => ReactNode;
-  replaySlug: string;
-  clipWindow?: ClipWindow;
+  readerResult: ReplayReaderResult;
   renderArchived?: (results: ReplayReaderResult) => ReactNode;
   renderError?: (results: ReplayReaderResult) => ReactNode;
   renderLoading?: (results: ReplayReaderResult) => ReactNode;
   renderMissing?: (results: ReplayReaderResult) => ReactNode;
 }) {
   const organization = useOrganization();
-  const readerResult = useLoadReplayReader({
-    orgSlug: organization.slug,
-    replaySlug,
-    clipWindow,
-  });
 
   if (readerResult.fetchError) {
     return renderError ? (