fix: handle null userRoles in stream metadata fetching logic (#383)

src/hooks/useGetStreamMetadata.ts

@@ -20,37 +20,41 @@ export const useGetStreamMetadata = () => {
 	const [metaData, setMetadata] = useState<MetaData | null>(null);
 	const [userRoles] = useAppStore((store) => store.userRoles);
 
-	const getStreamMetadata = useCallback(async (streams: string[]) => {
-		setLoading(true);
-		try {
-			// stats
-			const allStatsReqs = streams.map((stream) => getLogStreamStats(stream));
-			const allStatsRes = await Promise.all(allStatsReqs);
+	const getStreamMetadata = useCallback(
+		async (streams: string[]) => {
+			if (!userRoles) return;
+			setLoading(true);
+			try {
+				// stats
+				const allStatsReqs = streams.map((stream) => getLogStreamStats(stream));
+				const allStatsRes = await Promise.all(allStatsReqs);
 
-			// retention
-			const streamsWithSettingsAccess = _.filter(streams, (stream) =>
-				_.includes(getStreamsSepcificAccess(userRoles, stream), 'StreamSettings'),
-			);
-			const allretentionReqs = streamsWithSettingsAccess.map((stream) => getLogStreamRetention(stream));
-			const allretentionRes = await Promise.all(allretentionReqs);
+				// retention
+				const streamsWithSettingsAccess = _.filter(streams, (stream) =>
+					_.includes(getStreamsSepcificAccess(userRoles, stream), 'StreamSettings'),
+				);
+				const allretentionReqs = streamsWithSettingsAccess.map((stream) => getLogStreamRetention(stream));
+				const allretentionRes = await Promise.all(allretentionReqs);
 
-			const metadata = streams.reduce((acc, stream, index) => {
-				return {
-					...acc,
-					[stream]: { stats: allStatsRes[index]?.data || {}, retention: allretentionRes[index]?.data || [] },
-				};
-			}, {});
-			setMetadata(metadata);
-		} catch {
-			setError(true);
-			setMetadata(null);
-			notifyError({
-				message: 'Unable to fetch stream data',
-			});
-		} finally {
-			setLoading(false);
-		}
-	}, []);
+				const metadata = streams.reduce((acc, stream, index) => {
+					return {
+						...acc,
+						[stream]: { stats: allStatsRes[index]?.data || {}, retention: allretentionRes[index]?.data || [] },
+					};
+				}, {});
+				setMetadata(metadata);
+			} catch {
+				setError(true);
+				setMetadata(null);
+				notifyError({
+					message: 'Unable to fetch stream data',
+				});
+			} finally {
+				setLoading(false);
+			}
+		},
+		[userRoles],
+	);
 
 	return {
 		isLoading,

src/pages/Home/index.tsx

@@ -88,9 +88,9 @@ const Home: FC = () => {
 	const [searchTerm, setSearchTerm] = useState('');
 
 	useEffect(() => {
-		if (!Array.isArray(userSpecificStreams) || userSpecificStreams.length === 0) return;
+		if (!Array.isArray(userSpecificStreams) || userSpecificStreams.length === 0 || !userRoles) return;
 		getStreamMetadata(userSpecificStreams.map((stream) => stream.name));
-	}, [userSpecificStreams]);
+	}, [userSpecificStreams, userRoles]);
 
 	const filteredMetaData = useMemo(() => {
 		if (!searchTerm || !metaData) return metaData || {};