From c43d73e4f597a28b70d7aea55b19ec4b2a9209e3 Mon Sep 17 00:00:00 2001
From: Dmytro Demchenko <demchenkodmytro73@gmail.com>
Date: Fri, 27 Sep 2024 14:08:39 +0300
Subject: [PATCH] refactor: Update useQueryParams hook to accept optional
 streamUrl parameter (#420)

The useQueryParams hook in the P2PVideoDemo component has been updated to accept an optional streamUrl parameter. This allows for more flexibility in setting the initial stream URL when using the hook. The defaultParams object in the hook has also been modified to include the streamUrl parameter. This refactor improves the reusability and configurability of the useQueryParams hook.
---
 .../src/components/P2PVideoDemo.tsx           |  4 +--
 .../src/hooks/useQueryParams.ts               | 35 +++++++++++--------
 2 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/packages/p2p-media-loader-demo/src/components/P2PVideoDemo.tsx b/packages/p2p-media-loader-demo/src/components/P2PVideoDemo.tsx
index 064f3167..be662d36 100644
--- a/packages/p2p-media-loader-demo/src/components/P2PVideoDemo.tsx
+++ b/packages/p2p-media-loader-demo/src/components/P2PVideoDemo.tsx
@@ -66,7 +66,7 @@ export const P2PVideoDemo = ({
     p2pUploaded: 0,
   });
 
-  const { queryParams, setURLQueryParams } = useQueryParams();
+  const { queryParams, setURLQueryParams } = useQueryParams(streamUrl);
 
   const trackers = useMemo(
     () => queryParams.trackers.split(","),
@@ -121,7 +121,7 @@ export const P2PVideoDemo = ({
 
     return PlayerComponent ? (
       <PlayerComponent
-        streamUrl={streamUrl ?? queryParams.streamUrl}
+        streamUrl={queryParams.streamUrl}
         announceTrackers={trackers}
         swarmId={queryParams.swarmId === "" ? undefined : queryParams.swarmId}
         onPeerConnect={onPeerConnect}
diff --git a/packages/p2p-media-loader-demo/src/hooks/useQueryParams.ts b/packages/p2p-media-loader-demo/src/hooks/useQueryParams.ts
index e6d11573..fd042402 100644
--- a/packages/p2p-media-loader-demo/src/hooks/useQueryParams.ts
+++ b/packages/p2p-media-loader-demo/src/hooks/useQueryParams.ts
@@ -1,32 +1,37 @@
-import { useState, useEffect, useCallback, useRef } from "react";
+import { useState, useEffect, useCallback, useRef, useMemo } from "react";
 import { DEFAULT_STREAM, DEFAULT_TRACKERS, PLAYERS } from "../constants";
 
 type QueryParamsType = Record<string, string>;
 
-const defaultParams: QueryParamsType = {
-  player: Object.keys(PLAYERS)[0],
-  streamUrl: DEFAULT_STREAM,
-  trackers: DEFAULT_TRACKERS,
-  debug: "",
-  swarmId: "",
-};
-
-function getInitialParams(searchParams: URLSearchParams): QueryParamsType {
+function getInitialParams(
+  searchParams: URLSearchParams,
+  defaultParams: QueryParamsType,
+): QueryParamsType {
   return Object.keys(defaultParams).reduce((params, key) => {
     params[key] = searchParams.get(key) ?? defaultParams[key];
     return params;
   }, {} as QueryParamsType);
 }
 
-export function useQueryParams() {
+export function useQueryParams(streamUri?: string) {
+  const defaultParams = useMemo(() => {
+    return {
+      player: Object.keys(PLAYERS)[0],
+      streamUrl: streamUri ?? DEFAULT_STREAM,
+      trackers: DEFAULT_TRACKERS,
+      debug: "",
+      swarmId: "",
+    } as QueryParamsType;
+  }, [streamUri]);
+
   const searchParamsRef = useRef(new URLSearchParams(window.location.search));
   const [queryParams, setQueryParams] = useState<QueryParamsType>(() =>
-    getInitialParams(searchParamsRef.current),
+    getInitialParams(searchParamsRef.current, defaultParams),
   );
 
   const updateQueryParamsFromURL = useCallback(() => {
     const searchParams = searchParamsRef.current;
-    const newParams = getInitialParams(searchParams);
+    const newParams = getInitialParams(searchParams, defaultParams);
 
     setQueryParams((prevParams) => {
       const hasChanges = Object.keys(newParams).some(
@@ -34,7 +39,7 @@ export function useQueryParams() {
       );
       return hasChanges ? newParams : prevParams;
     });
-  }, []);
+  }, [defaultParams]);
 
   const setURLQueryParams = useCallback(
     (newParams: Partial<QueryParamsType>) => {
@@ -60,7 +65,7 @@ export function useQueryParams() {
 
       updateQueryParamsFromURL();
     },
-    [updateQueryParamsFromURL],
+    [defaultParams, updateQueryParamsFromURL],
   );
 
   useEffect(() => {