Merge pull request #123 from SingularityNET-Archive:development

feat: Add useCallback to handleVideoDataUpdate in SummaryMeetingInfo

Author: Andre-Diamond

components/SummaryMeetingInfo.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import styles from '../styles/typea.module.css'; 
 import { useMyVariable } from '../context/MyVariableContext';
 import SelectNames from './SelectNames';
@@ -154,7 +154,7 @@ const SummaryMeetingInfo: React.FC<SummaryMeetingInfoProps> = ({ workgroup, onUp
     });
   }, [myVariable.summary?.meetingInfo]); // Add myVariable.summary.meetingInfo to the dependency array
 
-  const handleVideoDataUpdate = (newVideoData: any) => {
+  const handleVideoDataUpdate = useCallback((newVideoData: any) => {
     setMeetingInfo(prevMeetingInfo => {
       if (JSON.stringify(prevMeetingInfo.timestampedVideo) === JSON.stringify(newVideoData)) {
         return prevMeetingInfo; 
@@ -164,7 +164,7 @@ const SummaryMeetingInfo: React.FC<SummaryMeetingInfoProps> = ({ workgroup, onUp
         timestampedVideo: newVideoData,
       };
     });
-  };  
+  }, []);  
 
   return (
     <>

components/SummaryTemplate.tsx

@@ -89,7 +89,7 @@ const SummaryTemplate = ({ updateMeetings }: SummaryTemplateProps) => {
       transcriptLink: "",
       mediaLink: "",
       workingDocs: [{ title: "", link: "" }],
-      timestampedVideo: { url: "", intro: "", timestamps: [{ title: "", timestamp: "" }] }
+      timestampedVideo: { url: "", intro: "", timestamps: "" }
     },  
     agendaItems: [
       { 

components/TimestampedVideo.tsx

@@ -17,15 +17,26 @@ const TimestampedVideo: React.FC<TimestampedVideoProps> = ({ onUpdate, initialDa
     timestamps: initialData?.timestamps || '',
   });
 
+  useEffect(() => {
+    // Update videoData when initialData changes
+    setVideoData({
+      url: initialData?.url || '',
+      intro: initialData?.intro || '',
+      timestamps: initialData?.timestamps || '',
+    });
+  }, [initialData]);
+
   const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     const { name, value } = e.target;
-    setVideoData({ ...videoData, [name]: value });
+    setVideoData((prevVideoData: any) => {
+      const updatedVideoData = { ...prevVideoData, [name]: value };
+      if (prevVideoData[name] !== value) {
+        setTimeout(() => onUpdate(updatedVideoData), 0); // Delay the onUpdate call
+      }
+      return updatedVideoData;
+    });
   };
 
-  useEffect(() => {
-    onUpdate(videoData); // Call onUpdate with the current state of videoData
-  }, [videoData, onUpdate]); // Add videoData and onUpdate to the dependency array
-
   return (
     <div className={styles.container}>
       <div className={styles.field}>