refactor forms to not use ant Form component; split server and instance details forms into their own components

web/pages/config-server-details.tsx

@@ -1,57 +1,17 @@
-import React, { useContext, useEffect } from 'react';
-import { Typography, Form } from 'antd';
-
-import TextField, { TEXTFIELD_TYPE_NUMBER, TEXTFIELD_TYPE_PASSWORD } from './components/config/form-textfield';
-
-import { ServerStatusContext } from '../utils/server-status-context';
-import { TEXTFIELD_DEFAULTS } from './components/config/constants';
+import React from 'react';
+import { Typography } from 'antd';
+import EditServerDetails from './components/config/edit-server-details';
 
 const { Title } = Typography;
 
 export default function ConfigServerDetails() {
-  const [form] = Form.useForm();
-
-  const serverStatusData = useContext(ServerStatusContext);
-  const { serverConfig } = serverStatusData || {};
-
-  const { ffmpegPath, streamKey, webServerPort, rtmpServerPort } = serverConfig;
-
-  const initialValues = {
-    ffmpegPath,
-    streamKey,
-    webServerPort,
-    rtmpServerPort,
-  };
-  
-  useEffect(() => {
-    form.setFieldsValue(initialValues);
-  }, [serverStatusData]);
-
-  const handleResetValue = (fieldName: string) => {
-    const defaultValue = TEXTFIELD_DEFAULTS[fieldName] && TEXTFIELD_DEFAULTS[fieldName].defaultValue || '';
-
-    form.setFieldsValue({ [fieldName]: initialValues[fieldName] || defaultValue });
-  };
-
-  const extraProps = {
-    handleResetValue,
-    initialValues,
-    configPath: '',
-  };
   return (
     <div className="config-server-details-form">
       <Title level={2}>Edit your Server&apos;s details</Title>
 
-      <div className="config-public-details-container">
-        <Form
-          form={form}
-          layout="vertical"
-        >
-          <TextField fieldName="streamKey" type={TEXTFIELD_TYPE_PASSWORD} {...extraProps} />
-          <TextField fieldName="ffmpegPath" {...extraProps} />
-          <TextField fieldName="webServerPort" type={TEXTFIELD_TYPE_NUMBER} {...extraProps} />
-          <TextField fieldName="rtmpServerPort" type={TEXTFIELD_TYPE_NUMBER} {...extraProps} />
-        </Form>
+      <div className="config-server-details-container">
+        <EditServerDetails />
+        
       </div>      
     </div>
   );