finished sprint, video plays bc of useref instead of usestate

src/screens/LegalRights/VideoPage/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Pressable, ScrollView, Text, View } from 'react-native';
 import { Video } from 'expo-av';
 import supabase from '@/supabase/createClient';
@@ -21,11 +21,13 @@ export default function VideoPage(testProp: any) {
   const [index, setIndex] = useState(0); // index of current page in full array of pages
   const [language, setLanguage] = useState('english'); // which language associated to array of pages
 
-  // video link associated to current page; used for src of video element
-  const [videoLink, setVideoLink] = useState(
+  const videoLinkRef = useRef(
     'https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4',
   );
 
+  //
+  const [renderTrigger, setRenderTrigger] = useState(0);
+
   const nextPage = () => {
     setIndex(prevIndex => Math.min(prevIndex + 1, preaData.length - 1)); // next index in array of pages
   };
@@ -42,17 +44,26 @@ export default function VideoPage(testProp: any) {
   }, []);
 
   useEffect(() => {
-    let response = supabase.storage // fetch current http link for current page
-      .from('PREA_videos')
-      .getPublicUrl(language + '/' + preaData[index]['video_id'] + '.mp4');
-    let { data } = response;
-    setVideoLink(data['publicUrl']); // set link for video link
+    const fetchVideoLink = async () => {
+      let response = supabase.storage
+        .from('PREA_videos')
+        .getPublicUrl(`${language}/${preaData[index]['video_id']}.mp4`);
+
+      let { data } = response;
+
+      videoLinkRef.current = data['publicUrl']; // Update the ref with the new video link
+
+      setRenderTrigger(prev => prev + 1); // Trigger a re-render to apply the new link
+    };
+
+    fetchVideoLink();
   }, [index]); // run useEffect every time value of index changes
 
   return (
     <ScrollView style={styles.container}>
       <Video
-        source={{ uri: videoLink }}
+        key={renderTrigger} // Changing the key forces re-mount and playback reset
+        source={{ uri: videoLinkRef.current }}
         rate={1.0}
         volume={1.0}
         isMuted={false}

src/screens/LegalRights/index.tsx

@@ -7,7 +7,7 @@ import { styles } from './styles';
 export default function LegalRights({ navigation }: { navigation: any }) {
   const [englishPressed, setEnglishPressed] = useState(true); // english or spanish 🧍‍♂️
 
-  // english pages var
+  // english pages var mhm
   const [englishModules, setEnglishModules] = useState([
     {
       id: 'string',
@@ -21,7 +21,7 @@ export default function LegalRights({ navigation }: { navigation: any }) {
     },
   ]);
 
-  // spanish pages var
+  // spanish pages var mhm
   const [spanishModules, setSpanishModules] = useState([
     {
       id: 'string',
@@ -35,7 +35,7 @@ export default function LegalRights({ navigation }: { navigation: any }) {
     },
   ]);
 
-  // get data from supabase on render; only once
+  // get data from supabase on render; only once fr
   useEffect(() => {
     fetchData();
   }, []);
@@ -50,9 +50,9 @@ export default function LegalRights({ navigation }: { navigation: any }) {
       throw englishError;
     }
     const newEnglishModules = englishData;
-    englishData.sort((a, b) => a.page_number - b.page_number); // sort the array based on pages' page_number
+    englishData.sort((a, b) => a.page_number - b.page_number); // sort the array based on pages' page_number yur
 
-    const spanishResponse = await supabase // grab all the spanish pages from the supabase table
+    const spanishResponse = await supabase // grab all the spanish pages from the supabase table yk
       .from('prea_page')
       .select()
       .eq('spanish', true);