Reorganize admin components to help bundling

web/components/admin/EditYPDetails.tsx

@@ -0,0 +1,71 @@
+// Note: references to "yp" in the app are likely related to Owncast Directory
+import React, { useState, useContext, useEffect, FC } from 'react';
+import { Typography } from 'antd';
+
+import { ToggleSwitch } from './ToggleSwitch';
+import { ServerStatusContext } from '../../utils/server-status-context';
+import { FIELD_PROPS_NSFW, FIELD_PROPS_YP } from '../../utils/config-constants';
+
+const { Title } = Typography;
+
+// eslint-disable-next-line import/prefer-default-export
+export const EditYPDetails: FC = () => {
+  const [formDataValues, setFormDataValues] = useState(null);
+
+  const serverStatusData = useContext(ServerStatusContext);
+  const { serverConfig } = serverStatusData || {};
+
+  const { yp, instanceDetails } = serverConfig;
+  const { nsfw } = instanceDetails;
+  const { enabled, instanceUrl } = yp;
+
+  useEffect(() => {
+    setFormDataValues({
+      ...yp,
+      enabled,
+      nsfw,
+    });
+  }, [yp, instanceDetails]);
+
+  const hasInstanceUrl = instanceUrl !== '';
+  if (!formDataValues) {
+    return null;
+  }
+  return (
+    <div className="config-directory-details-form">
+      <Title level={3} className="section-title">
+        Owncast Directory Settings
+      </Title>
+
+      <p className="description">
+        Would you like to appear in the{' '}
+        <a href="https://directory.owncast.online" target="_blank" rel="noreferrer">
+          <strong>Owncast Directory</strong>
+        </a>
+        ?
+      </p>
+
+      <p style={{ backgroundColor: 'black', fontSize: '.75rem', padding: '5px' }}>
+        <em>
+          NOTE: You will need to have a URL specified in the <code>Instance URL</code> field to be
+          able to use this.
+        </em>
+      </p>
+
+      <div className="config-yp-container">
+        <ToggleSwitch
+          fieldName="enabled"
+          {...FIELD_PROPS_YP}
+          checked={formDataValues.enabled}
+          disabled={!hasInstanceUrl}
+        />
+        <ToggleSwitch
+          fieldName="nsfw"
+          {...FIELD_PROPS_NSFW}
+          checked={formDataValues.nsfw}
+          disabled={!hasInstanceUrl}
+        />
+      </div>
+    </div>
+  );
+};