get variant modal to submit to api and update values

web/pages/components/config/video-variants-table.tsx

@@ -3,39 +3,102 @@ import { Typography, Table, Modal, Button } from 'antd';
 import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
 import { ColumnsType } from 'antd/lib/table';
 import { ServerStatusContext } from '../../../utils/server-status-context';
-import { VideoVariant } from '../../../types/config-section';
+import { UpdateArgs, VideoVariant } from '../../../types/config-section';
 import VideoVariantForm from './video-variant-form';
-import { DEFAULT_VARIANT_STATE } from './constants';
+import { API_VIDEO_VARIANTS, DEFAULT_VARIANT_STATE, SUCCESS_STATES, RESET_TIMEOUT,postConfigUpdateToAPI } from './constants';
 
 const { Title } = Typography;
 
 export default function CurrentVariantsTable() {
   const serverStatusData = useContext(ServerStatusContext);
   const [displayModal, setDisplayModal] = useState(false);
+  const [modalProcessing, setModalProcessing] = useState(false);
   const [editId, setEditId] = useState(0);
-  const [dataState, setDataState] = useState(DEFAULT_VARIANT_STATE);
-  const { serverConfig } = serverStatusData || {};
+
+  // current data inside modal
+  const [modalDataState, setModalDataState] = useState(DEFAULT_VARIANT_STATE);
+  
+  const [submitStatus, setSubmitStatus] = useState(null);
+  const [submitStatusMessage, setSubmitStatusMessage] = useState('');
+
+  const { serverConfig, setFieldInConfigState } = serverStatusData || {};
   const { videoSettings } = serverConfig || {};
   const { videoQualityVariants } = videoSettings || {};
+
+  let resetTimer = null;
+
   if (!videoSettings) {
     return null;
   }
 
-  const handleModalOk = () => {
-    setDisplayModal(false);
-    setEditId(-1);
+  const resetStates = () => {
+    setSubmitStatus(null);
+    setSubmitStatusMessage('');
+    resetTimer = null;
+    clearTimeout(resetTimer);
   }
+
   const handleModalCancel = () => {
     setDisplayModal(false);
     setEditId(-1);
+    setModalDataState(DEFAULT_VARIANT_STATE);
   }
 
-  const handleUpdateField = (fieldName: string, value: any) => {
-    setDataState({
-      ...dataState,
+  // posts all the variants at once as an array obj
+  const postUpdateToAPI = async (postValue: any) => {
+    await postConfigUpdateToAPI({
+      apiPath: API_VIDEO_VARIANTS,
+      data: { value: postValue },
+      onSuccess: () => {
+        setFieldInConfigState({ fieldName: 'videoQualityVariants', value: postValue, path: 'videoSettings' });
+
+        // close modal
+        setModalProcessing(false);
+        handleModalCancel();
+
+        setSubmitStatus('success');
+        setSubmitStatusMessage('Variants updated.');
+        resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
+      },
+      onError: (message: string) => {
+        setSubmitStatus('error');
+        setSubmitStatusMessage(message);
+        resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
+      },
+    });
+  };
+
+  // on Ok, send all of dataState to api
+  // show loading
+  // close modal when api is done
+  const handleModalOk = () => {
+    setModalProcessing(true);
+    
+    const postData = [
+      ...videoQualityVariants,
+    ];
+    if (editId === -1) {
+      postData.push(modalDataState);
+    } else {
+      postData.splice(editId, 1, modalDataState);
+    }
+    console.log("==== submit postData", postData)
+
+    postUpdateToAPI(postData);
+  }
+
+  const handleUpdateField = ({ fieldName, value }: UpdateArgs) => {
+    console.log("===update field", fieldName, value)
+    setModalDataState({
+      ...modalDataState,
       [fieldName]: value,
     });
   }
+
+  const {
+    icon: newStatusIcon = null,
+    message: newStatusMessage = '',
+  } = SUCCESS_STATES[submitStatus] || {};
   
   const videoQualityColumns: ColumnsType<VideoVariant>  = [
     {
@@ -50,13 +113,7 @@ export default function CurrentVariantsTable() {
       render: (bitrate: number) =>
         !bitrate ? "Same as source" : `${bitrate} kbps`,
     },
-    // {
-    //   title: "Framerate",
-    //   dataIndex: "framerate",
-    //   key: "framerate",
-    //   render: (framerate: number) =>
-    //     !framerate ? "Same as source" : `${framerate} fps`,
-    // },
+
     {
       title: "Encoder preset",
       dataIndex: "encoderPreset",
@@ -64,47 +121,38 @@ export default function CurrentVariantsTable() {
       render: (preset: string) =>
         !preset ? "n/a" : preset,
     },
-    // {
-    //   title: "Audio bitrate",
-    //   dataIndex: "audioBitrate",
-    //   key: "audioBitrate",
-    //   render: (bitrate: number) =>
-    //     !bitrate ? "Same as source" : `${bitrate} kbps`,
-    // },
-    // {
-    //   title: "Audio passthrough",
-    //   dataIndex: "audioPassthrough",
-    //   key: "audioPassthrough",
-    //   render: (item: boolean) => item ? <CheckOutlined />: <CloseOutlined />,
-    // },
-    // {
-    //   title: "Video passthrough",
-    //   dataIndex: "videoPassthrough",
-    //   key: "audioPassthrough",
-    //   render: (item: boolean) => item ? <CheckOutlined />: <CloseOutlined />,
-    // },
     {
       title: '',
       dataIndex: '',
       key: 'edit',
       render: (data: VideoVariant) => (
-      <Button type="primary" size="small" onClick={() =>{
-        setEditId(data.key - 1);
-        setDisplayModal(true);
-      }}>
-        Edit
-      </Button>
+        <Button type="primary" size="small" onClick={() => {
+          const index = data.key - 1;
+          setEditId(index);
+          setModalDataState(videoQualityVariants[index]);
+          setDisplayModal(true);
+        }}>
+          Edit
+        </Button>
       ),
     },
   ];
 
+  const statusMessage = (
+    <div className={`status-message ${submitStatus || ''}`}>
+      {newStatusIcon} {newStatusMessage} {submitStatusMessage}
+    </div>
+  );
 
   const videoQualityVariantData = videoQualityVariants.map((variant, index) => ({ key: index + 1, ...variant }));
 
+  // console.log("=========", { modalDataState })
   return (
     <>
       <Title level={3}>Current Variants</Title>
       
+      {statusMessage}
+
       <Table
         pagination={false}
         size="small"
@@ -117,13 +165,23 @@ export default function CurrentVariantsTable() {
         visible={displayModal}
         onOk={handleModalOk}
         onCancel={handleModalCancel}
-        // confirmLoading={confirmLoading}
+        confirmLoading={modalProcessing}
       >
-
-        <VideoVariantForm initialValues={{...videoQualityVariants[editId]}} onUpdateField={handleUpdateField} />
-
-
+        <VideoVariantForm
+          dataState={{...modalDataState}}
+          onUpdateField={handleUpdateField}
+        />
+        
+        {statusMessage}
       </Modal>
+      <br />
+      <Button type="primary" onClick={() => {
+          setEditId(-1);
+          setModalDataState(DEFAULT_VARIANT_STATE);
+          setDisplayModal(true);
+        }}>
+        Add a new variant
+      </Button>
 
     </>
   );