populate fields from backend

src/component/product/settingsTab/GeneralTab.jsx

@@ -3,19 +3,26 @@ import { useMutation } from "@tanstack/react-query";
 import { pageSettings } from "../../../services/services";
 import SiteTemplateSelector from './SiteTemplateSelector';
 
-const GeneralTab = memo(({name='Full Name', data, isCustom, productData}) =>{
-    //   console.log("Page data == ", data)
+const GeneralTab = memo(({name='Full Name', data, isCustom, productData, backendValues, setFieldsChanged}) =>{
 
-      const [reqStatus, setReqStatus] = useState({error: null, message: ''})
+    const [reqStatus, setReqStatus] = useState({error: null, message: ''})
 
-      const fieldData = {}
-      Object.entries(data)?.forEach(([key, value]) => { // LOOP TO POPULATE FIELDDATA PROPERTIES WITH DATA OF EACH TAB
-        fieldData[value?.name?.toLowerCase().replace(" ", "_")] = ''
-      })
-      const [fields, setFields] = useState(fieldData)
-      const handleChange = ({target:{name, value}}) => {
+    const fieldData = {}
+    Object.entries(data)?.forEach(([key, value]) => { // LOOP TO POPULATE FIELDDATA PROPERTIES WITH DATA OF EACH TAB
+    fieldData[value?.name?.toLowerCase().replace(" ", "_")] = ''
+    })
+    backendValues.forEach(item => { //LOOPING THROUGH USER ALREADY ADDED DATA FROM BACKEND IF ANY AND UPDATING THE FIELDDATA OBJECT
+    fieldData[item?.setting_key?.toLowerCase().replace(" ", "_")] = item?.setting_value
+    })
+
+    // console.log('fieldData', fieldData)
+
+    const [fields, setFields] = useState(fieldData)
+    
+    const handleChange = ({target:{name, value}}) => {
         setFields(prev => ({...prev, [name]:value}))
-      }
+        setFieldsChanged(true)
+    }
 
     const submitSettings = useMutation({
         mutationFn: (fields) => {
@@ -25,6 +32,7 @@ const GeneralTab = memo(({name='Full Name', data, isCustom, productData}) =>{
             if(res?.data?.resultCode != '0'){
                 return setReqStatus({error: true, message: 'Unable to complete, try again later'})
             }
+            setFieldsChanged(false)
             setReqStatus({error: false, message: 'Completed successfully'})
         },
         onError: (err) => {

src/component/product/settingsTab/Settings.jsx

@@ -63,8 +63,23 @@ const Settings = memo(({productData}) => {
     },[])
 
 
+    const [fieldsChanged, setFieldsChanged] = useState(false)
+
     const [activeTab, setActiveTab] = useState(Object.entries(settingsObject)[0][1]?.controls)
 
+    const handleChangeTab = (value) => {
+        // if(fieldsChanged){
+        //     const proceed = confirm('Continue without saving changes')
+        //     if(proceed){
+        //         setActiveTab(value)
+        //         setFieldsChanged(false)
+        //     }
+        // }else{
+        //     setActiveTab(value)
+        // }
+        setActiveTab(value)
+    }
+
 
     const {data, isFetching, isError, error} = useQuery({
         queryKey: queryKeys.settingsData,
@@ -78,7 +93,7 @@ const Settings = memo(({productData}) => {
         }
     })
 
-    const settingsData = data?.data
+    const settingsData = data?.data?.settings
     // console.log('data', settingsData)
 
       return (
@@ -104,12 +119,14 @@ const Settings = memo(({productData}) => {
                         {Object.entries(settingsObject).map(([key, value]) => (
                             <li key={key} className="nav-item">
                             <a className={`nav-link ${activeTab == value.controls && 'active show'}`}
-                                id={key} data-bs-toggle="pill"
+                                id={key} 
+                                // data-bs-toggle="pill"
                                 // data-bs-target={`#${value.controls}`}
-                                type="button" role="tab"
+                                type="button" 
+                                // role="tab"
                                 // aria-controls={value.controls}
                                 // aria-selected="true"
-                                onClick={()=>setActiveTab(value.controls)}
+                                onClick={()=>handleChangeTab(value.controls)}
                             >
                                 {value.title}
                             </a>
@@ -124,7 +141,7 @@ const Settings = memo(({productData}) => {
                                 // id={value.controls} role="tabpanel"
                                 // aria-labelledby={key}
                             >
-                                <GeneralTab name={value.title} data={value.data} isCustom={value.custom} productData={productData} />
+                                <GeneralTab name={value.title} data={value.data} isCustom={value.custom} productData={productData} backendValues={settingsData} setFieldsChanged={setFieldsChanged} />
                             </div>
                         ))}
                     </>