QC User & Admin Responsive : Menu Landing Page - Desa

src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/program-unggulan/edit/page.tsx

@@ -1,4 +1,5 @@
 'use client'
+
 import stateProgramPendidikanAnak from '@/app/admin/(dashboard)/_state/pendidikan/program-pendidikan-anak';
 import colors from '@/con/colors';
 import {
@@ -17,7 +18,7 @@ import { useShallowEffect } from '@mantine/hooks';
 import { IconArrowBack } from '@tabler/icons-react';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
@@ -29,30 +30,46 @@ const ProgramPendidikanAnakTextEditor = dynamic(
   { ssr: false }
 );
 
+interface FormData {
+  judul: string;
+  deskripsi: string;
+}
+
 function EditTujuanProgram() {
   const router = useRouter();
   const editState = useProxy(stateProgramPendidikanAnak.programUnggulanState);
 
-  const [judul, setJudul] = useState('');
-  const [content, setContent] = useState('');
+  // lokal state form
+  const [formData, setFormData] = useState<FormData>({
+    judul: '',
+    deskripsi: ''
+  });
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   // load data once
   useShallowEffect(() => {
-    if (!editState.findById.data) {
-      editState.findById.initialize();
-    }
+    if (!editState.findById.data) editState.findById.initialize();
   }, []);
 
+  // populate formData saat data global tersedia
   useEffect(() => {
     if (editState.findById.data) {
-      setJudul(editState.findById.data.judul ?? '');
-      setContent(editState.findById.data.deskripsi ?? '');
+      setFormData({
+        judul: editState.findById.data.judul ?? '',
+        deskripsi: editState.findById.data.deskripsi ?? ''
+      });
     }
   }, [editState.findById.data]);
 
+  const handleChange = useCallback(
+    (field: keyof FormData, value: string) => {
+      setFormData((prev) => ({ ...prev, [field]: value }));
+    },
+    []
+  );
+
   const handleSubmit = async () => {
-    if (!judul.trim()) {
+    if (!formData.judul.trim()) {
       toast.error('Judul wajib diisi');
       return;
     }
@@ -60,9 +77,13 @@ function EditTujuanProgram() {
     setIsSubmitting(true);
     try {
       if (editState.findById.data) {
-        editState.findById.data.judul = judul;
-        editState.findById.data.deskripsi = content;
-        await editState.update.save(editState.findById.data);
+        // update global state only on submit
+        const updatedData = {
+          ...editState.findById.data,
+          judul: formData.judul,
+          deskripsi: formData.deskripsi
+        };
+        await editState.update.save(updatedData);
 
         toast.success('Berhasil menyimpan perubahan');
         router.push('/admin/pendidikan/program-pendidikan-anak/program-unggulan');
@@ -77,7 +98,6 @@ function EditTujuanProgram() {
 
   const handleBack = () => router.back();
 
-  // loading state
   if (editState.findById.loading) {
     return (
       <Box>
@@ -93,12 +113,7 @@ function EditTujuanProgram() {
       <Stack gap="xs">
         <Group mb="md">
           <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
-            <Button
-              variant="subtle"
-              onClick={handleBack}
-              p="xs"
-              radius="md"
-            >
+            <Button variant="subtle" onClick={handleBack} p="xs" radius="md">
               <IconArrowBack color={colors['blue-button']} size={24} />
             </Button>
           </Tooltip>
@@ -122,18 +137,20 @@ function EditTujuanProgram() {
             <TextInput
               label={<Text fw="bold">Judul</Text>}
               placeholder="Masukkan judul program"
-              defaultValue={judul}
-              onChange={(e) => setJudul(e.currentTarget.value)}
-              error={!judul && 'Judul wajib diisi'}
+              value={formData.judul}
+              onChange={(e) => handleChange('judul', e.currentTarget.value)}
+              error={!formData.judul && 'Judul wajib diisi'}
             />
 
             {/* Deskripsi Field */}
             <Box>
-              <Text fz="sm" fw="bold" mb="xs">Deskripsi</Text>
+              <Text fz="sm" fw="bold" mb="xs">
+                Deskripsi
+              </Text>
               <ProgramPendidikanAnakTextEditor
                 showSubmit={false}
-                onChange={setContent}
-                initialContent={content}
+                onChange={(value) => handleChange('deskripsi', value)}
+                initialContent={formData.deskripsi}
               />
             </Box>
 
@@ -143,7 +160,7 @@ function EditTujuanProgram() {
                 bg={colors['blue-button']}
                 onClick={handleSubmit}
                 loading={isSubmitting || editState.update.loading}
-                disabled={!judul}
+                disabled={!formData.judul}
               >
                 {isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
               </Button>