chore: refactor props

client/src/components/qr-login/qr-login.tsx

@@ -7,15 +7,15 @@ type Props = {
   socketId: string;
 };
 
-export default function QrLogin({ socketId }: Props) {
+export default function QrLogin(props: Props) {
   const [requested, setRequested] = React.useState(false);
   const canvasRef = React.useRef<HTMLCanvasElement | null>(null);
 
   React.useEffect(() => {
     if (canvasRef.current === null) return;
-    const link = `${config.apiUrl}/api/login/qr/${socketId}`;
+    const link = `${config.apiUrl}/api/login/qr/${props.socketId}`;
     toCanvas(canvasRef.current, link, { width: 350 }).catch((err) => console.error(err));
-  }, [socketId]);
+  }, [props.socketId]);
 
   return (
     <QrLoginWrapper>

client/src/components/search/search.tsx

@@ -5,20 +5,15 @@ type Props = {
   onChange: (value: string) => void;
 };
 
-export default function Search({ onChange }: Props) {
-  const onChangeRef = React.useRef(onChange);
-  React.useMemo(() => {
-    onChangeRef.current = onChange;
-  }, [onChange]);
-
-  const handleChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
-    const value = event.currentTarget.value.trim();
-    onChangeRef.current(value);
-  }, []);
-
+export default function Search(props: Props) {
   return (
     <SearchWrapper>
-      <input onChange={handleChange} placeholder="Search for a movie title..." />
+      <input
+        onChange={(event) => {
+          props.onChange(event.currentTarget.value.trim());
+        }}
+        placeholder="Search for a movie title..."
+      />
     </SearchWrapper>
   );
 }

client/src/components/stream/stream.tsx

@@ -4,25 +4,23 @@ import { Stream as StreamType } from "@/types";
 import Rating from "@/components/rating/rating";
 import { asset } from "@/utils";
 
-type Props = StreamType & {
-  //
-};
+type Props = StreamType;
 
-export default function Stream({ uuid, title, largeCoverImage, rating, year }: Props) {
+export default function Stream(props: Props) {
   const poster = React.useMemo(() => {
-    return asset(largeCoverImage);
-  }, [largeCoverImage]);
+    return asset(props.largeCoverImage);
+  }, [props.largeCoverImage]);
 
   return (
-    <StreamWrapper to={`/streams/${uuid}`} title={title}>
+    <StreamWrapper to={`/streams/${props.uuid}`} title={props.title}>
       <StreamCover>
-        <img src={poster} alt={title} loading="lazy" />
+        <img src={poster} alt={props.title} loading="lazy" />
       </StreamCover>
       <StreamInfo>
-        <Rating $rating={rating} />
-        <time>{year}</time>
+        <Rating $rating={props.rating} />
+        <time>{props.year}</time>
       </StreamInfo>
-      <h3>{title}</h3>
+      <h3>{props.title}</h3>
     </StreamWrapper>
   );
 }

client/src/components/streams-list/streams-list.tsx

@@ -11,16 +11,16 @@ type Props = {
   onLoading?: (loading: boolean) => void;
 };
 
-export default function StreamsList({ page, query, onLoading }: Props) {
+export default function StreamsList(props: Props) {
   const navigate = useNavigate();
 
   const lastPageRef = React.useRef(1);
   const lastQueryRef = React.useRef("");
 
-  const onLoadingRef = React.useRef(onLoading);
+  const onLoadingRef = React.useRef(props.onLoading);
   React.useMemo(() => {
-    onLoadingRef.current = onLoading;
-  }, [onLoading]);
+    onLoadingRef.current = props.onLoading;
+  }, [props.onLoading]);
 
   const [streams, setStreams] = React.useState<StreamType[]>([]);
 
@@ -40,13 +40,13 @@ export default function StreamsList({ page, query, onLoading }: Props) {
       requestRef.current.abort();
     }
 
-    const req = api.get(`/api/streams?page=${page}&q=${query}`);
+    const req = api.get(`/api/streams?page=${props.page}&q=${props.query}`);
     requestRef.current = req;
 
     req.send().then((res) => {
       if (res.status === 401) return navigate("/");
       const streams = res.data.streams ?? [];
-      if (query !== lastQueryRef.current) {
+      if (props.query !== lastQueryRef.current) {
         setStreams(streams);
       } else {
         setStreams((currentStreams) => {
@@ -66,15 +66,15 @@ export default function StreamsList({ page, query, onLoading }: Props) {
         });
       }
     });
-  }, [page, query]);
+  }, [props.page, props.query]);
 
   React.useEffect(() => {
     loadingRef.current = false;
     if (onLoadingRef.current) {
       onLoadingRef.current(false);
     }
-    lastPageRef.current = page;
-    lastQueryRef.current = query;
+    lastPageRef.current = props.page;
+    lastQueryRef.current = props.query;
   }, [streams]);
 
   return (

client/src/components/video-embed/video-embed.tsx

@@ -10,18 +10,18 @@ type Props = {
   stream?: Stream;
 };
 
-export default function VideoEmbed({ stream }: Props) {
+export default function VideoEmbed(props: Props) {
   const interacted = appState((state) => state.interacted);
   const interactedRef = React.useRef(interacted);
 
   const src = React.useMemo(() => {
-    return `${config.apiUrl}/api/watch/${stream?.uuid}`;
-  }, [stream]);
+    return `${config.apiUrl}/api/watch/${props.stream?.uuid}`;
+  }, [props.stream]);
 
   const poster = React.useMemo(() => {
-    if (!stream?.largeCoverImage) return "";
-    return asset(stream.largeCoverImage);
-  }, [stream]);
+    if (!props.stream?.largeCoverImage) return "";
+    return asset(props.stream.largeCoverImage);
+  }, [props.stream]);
 
   const videoRef = React.useRef<HTMLVideoElement>(null);
 
@@ -57,18 +57,19 @@ export default function VideoEmbed({ stream }: Props) {
   }, []);
 
   React.useEffect(() => {
+    if (!props.stream) return;
     const video = videoRef.current;
     if (video === null) return;
 
     function onTimeUpdate() {
-      localStorage.setItem(stream.uuid, `${video.currentTime}`);
+      localStorage.setItem(props.stream.uuid, `${video.currentTime}`);
     }
 
     video.addEventListener("timeupdate", onTimeUpdate);
     return () => {
       video.removeEventListener("timeupdate", onTimeUpdate);
     };
-  }, [stream.uuid]);
+  }, [props.stream?.uuid]);
 
   React.useEffect(() => {
     const video = videoRef.current;
@@ -103,13 +104,14 @@ export default function VideoEmbed({ stream }: Props) {
   }, []);
 
   React.useEffect(() => {
+    if (!props.stream) return;
     const video = videoRef.current;
     if (video === null) return;
     if (!interactedRef.current) return;
-    const currentTime = parseFloat(localStorage.getItem(stream.uuid));
+    const currentTime = parseFloat(localStorage.getItem(props.stream.uuid));
     if (isNaN(currentTime)) return;
     video.currentTime = currentTime;
-  }, [stream.uuid]);
+  }, [props.stream?.uuid]);
 
   React.useEffect(() => {
     const video = videoRef.current;