From 0450edb282d444a679070853198d34df34446e23 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Diamond?=
 <32074058+Andre-Diamond@users.noreply.github.com>
Date: Fri, 28 Jun 2024 07:30:03 +0200
Subject: [PATCH] feat: Add useCallback to handleVideoDataUpdate in
 SummaryMeetingInfo

---
 components/SummaryMeetingInfo.tsx |  6 +++---
 components/SummaryTemplate.tsx    |  2 +-
 components/TimestampedVideo.tsx   | 21 ++++++++++++++++-----
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/components/SummaryMeetingInfo.tsx b/components/SummaryMeetingInfo.tsx
index 13b7295..31925fe 100644
--- a/components/SummaryMeetingInfo.tsx
+++ b/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 (
     <>
diff --git a/components/SummaryTemplate.tsx b/components/SummaryTemplate.tsx
index 1bb40d5..b7fcfc1 100644
--- a/components/SummaryTemplate.tsx
+++ b/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: [
       { 
diff --git a/components/TimestampedVideo.tsx b/components/TimestampedVideo.tsx
index 4464f8e..5108b89 100644
--- a/components/TimestampedVideo.tsx
+++ b/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}>