ref(replay): Move some project code into useReplayProjectSlug (#82516)

Extract some code that converts a projectId into a projectSlug.

I'm extracting it because it's something to be reused between
`components/replays/replayPlayer.tsx` and
`components/replays/player/replayPlayer.tsx`. Also, relying on the
ProjectStore as this does is something that'll need to be refactored in
the future because loading the ProjectStore is slow, so it's nice to
separate this out.

static/app/utils/replays/hooks/useReplayData.tsx

@@ -7,9 +7,9 @@ import {DiscoverDatasets} from 'sentry/utils/discover/types';
 import parseLinkHeader from 'sentry/utils/parseLinkHeader';
 import type {ApiQueryKey} from 'sentry/utils/queryClient';
 import {useApiQuery, useQueryClient} from 'sentry/utils/queryClient';
+import {useReplayProjectSlug} from 'sentry/utils/replays/hooks/useReplayProjectSlug';
 import {mapResponseToReplayRecord} from 'sentry/utils/replays/replayDataUtils';
 import type RequestError from 'sentry/utils/requestError/requestError';
-import useProjects from 'sentry/utils/useProjects';
 import type {ReplayError, ReplayRecord} from 'sentry/views/replays/types';
 
 type Options = {
@@ -77,7 +77,6 @@ function useReplayData({
   segmentsPerPage = 100,
 }: Options): Result {
   const hasFetchedAttachments = useRef(false);
-  const projects = useProjects();
   const queryClient = useQueryClient();
 
   // Fetch every field of the replay. The TS type definition lists every field
@@ -98,12 +97,7 @@ function useReplayData({
     [replayData?.data]
   );
 
-  const projectSlug = useMemo(() => {
-    if (!replayRecord) {
-      return null;
-    }
-    return projects.projects.find(p => p.id === replayRecord.project_id)?.slug ?? null;
-  }, [replayRecord, projects.projects]);
+  const projectSlug = useReplayProjectSlug({replayRecord});
 
   const getAttachmentsQueryKey = useCallback(
     ({cursor, per_page}): ApiQueryKey => {

static/app/utils/replays/hooks/useReplayProjectSlug.tsx

@@ -0,0 +1,18 @@
+import {useMemo} from 'react';
+
+import useProjects from 'sentry/utils/useProjects';
+import type {ReplayRecord} from 'sentry/views/replays/types';
+
+interface Props {
+  replayRecord: ReplayRecord | undefined;
+}
+
+export function useReplayProjectSlug({replayRecord}: Props) {
+  const projects = useProjects();
+  return useMemo(() => {
+    if (!replayRecord) {
+      return null;
+    }
+    return projects.projects.find(p => p.id === replayRecord.project_id)?.slug ?? null;
+  }, [replayRecord, projects]);
+}