Browse Source

ref(replays): Remove extra "retry" state from useReplayData (#34910)

Remove the retry state variable, we can simply pass loadEvents on down so children can load more data.
Ryan Albrecht 2 years ago
parent
commit
fd31b8bf93
1 changed files with 33 additions and 43 deletions
  1. 33 43
      static/app/utils/replays/hooks/useReplayData.tsx

+ 33 - 43
static/app/utils/replays/hooks/useReplayData.tsx

@@ -90,7 +90,6 @@ function useReplayData({eventSlug, orgId}: Options): Result {
   const [projectId, eventId] = eventSlug.split(':');
 
   const api = useApi();
-  const [retry, setRetry] = useState(true);
   const [state, setState] = useState<State>(INITIAL_STATE);
 
   const fetchEvent = useCallback(() => {
@@ -141,55 +140,46 @@ function useReplayData({eventSlug, orgId}: Options): Result {
     );
   }, [api, eventId, orgId]);
 
-  const loadEvents = useCallback(
-    async function () {
-      setState(INITIAL_STATE);
-
-      try {
-        const [event, rrwebEvents, replayEvents] = await Promise.all([
-          fetchEvent(),
-          fetchRRWebEvents(),
-          fetchReplayEvents(),
-        ]);
-
-        setState({
-          event,
-          fetchError: undefined,
-          fetching: false,
-          replayEvents,
-          rrwebEvents,
-        });
-      } catch (error) {
-        Sentry.captureException(error);
-        setState({
-          ...INITIAL_STATE,
-          fetchError: error,
-          fetching: false,
-        });
-      }
-    },
-    [fetchEvent, fetchRRWebEvents, fetchReplayEvents]
-  );
-
-  useEffect(() => {
-    if (retry) {
-      setRetry(false);
-      loadEvents();
+  const loadEvents = useCallback(async () => {
+    setState(INITIAL_STATE);
+
+    try {
+      const [event, rrwebEvents, replayEvents] = await Promise.all([
+        fetchEvent(),
+        fetchRRWebEvents(),
+        fetchReplayEvents(),
+      ]);
+
+      setState({
+        event,
+        fetchError: undefined,
+        fetching: false,
+        replayEvents,
+        rrwebEvents,
+      });
+    } catch (error) {
+      Sentry.captureException(error);
+      setState({
+        ...INITIAL_STATE,
+        fetchError: error,
+        fetching: false,
+      });
     }
-  }, [retry, loadEvents]);
+  }, [fetchEvent, fetchRRWebEvents, fetchReplayEvents]);
 
-  const onRetry = useCallback(() => {
-    setRetry(true);
-  }, []);
+  useEffect(() => {
+    loadEvents();
+  }, [loadEvents]);
 
-  const replay = useMemo(() => {
-    return ReplayReader.factory(state.event, state.rrwebEvents, state.replayEvents);
-  }, [state.event, state.rrwebEvents, state.replayEvents]);
+  const replay = useMemo(
+    () => ReplayReader.factory(state.event, state.rrwebEvents, state.replayEvents),
+    [state.event, state.rrwebEvents, state.replayEvents]
+  );
 
   return {
     fetchError: state.fetchError,
     fetching: state.fetching,
-    onRetry,
+    onRetry: loadEvents,
     replay,
   };
 }