Update video editing form to reflect changes automatically

Add a useEffect hook to the EditVideoDialog component to automatically update the form state when the `video` prop changes, and force immediate refetch of video data after successful updates.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 170e18f0-0f13-4eca-8643-546bba1dd8cc
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/170e18f0-0f13-4eca-8643-546bba1dd8cc/LY6xmBI
This commit is contained in:
sebastjanartic 2025-09-02 13:12:32 +00:00
parent d0443dc1b3
commit b8eb1642e9

View File

@ -1,4 +1,4 @@
import { useState } from "react";
import { useState, useEffect } from "react";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { useAuth } from "@/hooks/useAuth";
import { Button } from "@/components/ui/button";
@ -217,6 +217,17 @@ function EditVideoDialog({
genre: video.genre,
customThumbnailUrl: video.customThumbnailUrl || "",
});
// Update form data when video prop changes
useEffect(() => {
setFormData({
title: video.title,
description: video.description,
contentType: video.contentType,
genre: video.genre,
customThumbnailUrl: video.customThumbnailUrl || "",
});
}, [video]);
const [isGeneratingAI, setIsGeneratingAI] = useState(false);
const updateMutation = useMutation({
@ -226,9 +237,11 @@ function EditVideoDialog({
title: "Success",
description: "Video updated successfully",
});
// Invalidate cache to refresh the video list
// Invalidate cache to refresh the video list - don't await since this function isn't async
queryClient.invalidateQueries({ queryKey: ["/api/admin/videos"] });
queryClient.invalidateQueries({ queryKey: ["/api/videos"] });
// Force immediate refetch
queryClient.refetchQueries({ queryKey: ["/api/admin/videos"] });
onOpenChange(false);
onSuccess();
},