start on social links editing, wip

web/pages/components/config/constants.tsx

@@ -19,13 +19,14 @@ export const SUCCESS_STATES = {
   },
   error: {
     icon: <ExclamationCircleFilled style={{ color: 'red' }} />,
-    message: 'An error occurred.',
+    message: 'An error occurred.',  
   },
 };
 
 // CONFIG API ENDPOINTS
 export const API_VIDEO_VARIANTS = '/video/streamoutputvariants';
 export const API_VIDEO_SEGMENTS = '/video/streamlatencylevel';
+export const API_SOCIAL_HANDLES = '/socialhandles';
 
 export async function postConfigUpdateToAPI(args: ApiPostArgs) {
   const {

web/pages/components/config/edit-social-links.tsx

@@ -0,0 +1,132 @@
+import React, { useContext, useState, useEffect } from 'react';
+import { Typography, Input } from 'antd';
+
+import { ServerStatusContext } from '../../../utils/server-status-context';
+import { TEXTFIELD_DEFAULTS, RESET_TIMEOUT, SUCCESS_STATES, postConfigUpdateToAPI } from './constants';
+
+const { Title } = Typography;
+
+export default function EditSocialLinks() {
+  const [newTagInput, setNewTagInput] = useState('');
+  const [submitStatus, setSubmitStatus] = useState(null);
+  const [submitStatusMessage, setSubmitStatusMessage] = useState('');
+  const serverStatusData = useContext(ServerStatusContext);
+  const { serverConfig, setFieldInConfigState } = serverStatusData || {};
+
+  const { instanceDetails } = serverConfig;
+  const { tags = [] } = instanceDetails;
+
+  const configPath = 'instanceDetails';
+
+  const {
+    apiPath,
+    maxLength,
+    placeholder,
+  } = TEXTFIELD_DEFAULTS[configPath].tags || {};
+
+
+  let resetTimer = null;
+
+  useEffect(() => {
+    return () => {
+      clearTimeout(resetTimer);
+    }  
+  }, []);
+
+  const resetStates = () => {
+    setSubmitStatus(null);
+    setSubmitStatusMessage('');
+    resetTimer = null;
+    clearTimeout(resetTimer);
+  }
+
+  // posts all the tags at once as an array obj
+  const postUpdateToAPI = async (postValue: any) => {
+    await postConfigUpdateToAPI({
+      apiPath,
+      data: { value: postValue },
+      onSuccess: () => {
+        setFieldInConfigState({ fieldName: 'socialHandles', value: postValue, path: configPath });
+        setSubmitStatus('success');
+        setSubmitStatusMessage('Tags updated.');
+        setNewTagInput('');
+        resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
+      },
+      onError: (message: string) => {
+        setSubmitStatus('error');
+        setSubmitStatusMessage(message);
+        resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
+      },
+    });
+  };
+
+  const handleInputChange = e => {
+    if (submitStatusMessage !== '') {
+      setSubmitStatusMessage('');
+    }
+    setNewTagInput(e.target.value);
+  };
+
+  // send to api and do stuff
+  const handleSubmitNewLink = () => {
+    resetStates();
+    const newTag = newTagInput.trim();
+    if (newTag === '') {
+      setSubmitStatusMessage('Please enter a tag');
+      return;
+    } 
+    if (tags.some(tag => tag.toLowerCase() === newTag.toLowerCase())) {
+      setSubmitStatusMessage('This tag is already used!');
+      return;
+    }
+
+    const updatedTags = [...tags, newTag];
+    postUpdateToAPI(updatedTags);
+  };
+
+  const handleDeleteLink = index => {
+    resetStates();
+    const updatedTags = [...tags];
+    updatedTags.splice(index, 1);
+    postUpdateToAPI(updatedTags);
+  }
+
+  const {
+    icon: newStatusIcon = null,
+    message: newStatusMessage = '',
+  } = SUCCESS_STATES[submitStatus] || {};
+
+  return (
+    <div className="tag-editor-container">
+
+      <Title level={3}>Add Tags</Title>
+      <p>This is a great way to categorize your Owncast server on the Directory!</p>
+
+      <div className="tag-current-tags">
+        {tags.map((tag, index) => {
+          const handleClose = () => {
+            handleDeleteLink(index);
+          };
+          return (
+            <Tag closable onClose={handleClose} key={`tag-${tag}-${index}`}>{tag}</Tag>
+          );
+        })}
+      </div>
+      <div className={`status-message ${submitStatus || ''}`}>
+        {newStatusIcon} {newStatusMessage} {submitStatusMessage}
+      </div>
+      <div className="add-new-tag-section">
+        <Input
+          type="text"
+          className="new-tag-input"
+          value={newTagInput}
+          onChange={handleInputChange}
+          onPressEnter={handleSubmitNewTag}
+          maxLength={maxLength}
+          placeholder={placeholder}
+          allowClear
+        />
+      </div>
+    </div>
+  );
+}

web/pages/components/config/social-icons-dropdown.tsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+import { PlusOutlined } from "@ant-design/icons";
+import { Select, Divider, Input } from "antd";
+import classNames from 'classnames';
+import { SocialHandleItem } from "../../../types/config-section";
+import { NEXT_PUBLIC_API_HOST } from '../../../utils/apis';
+
+
+interface DropdownProps {
+  iconList: SocialHandleItem[];
+  selectedOption?: string;
+}
+interface DropdownOptionProps extends SocialHandleItem {
+  isSelected: boolean;
+}
+
+// Add "Other" item which creates a text field
+// Add fixed custom ones - "url", "donate", "follow", "rss"
+
+function dropdownRender(menu) {
+  console.log({menu})
+  return 'hi';
+}
+
+export default function SocialDropdown({ iconList, selectedOption }: DropdownProps) {
+  const [name, setName] = useState('');
+
+  const handleNameChange = event => {
+    setName(event.target.value);
+  };
+
+  const handleAddItem = () => {
+    console.log('addItem');
+    // const { items, name } = this.state;
+    // this.setState({
+    //   items: [...items, name || `New item ${index++}`],
+    //   name: '',
+    // });
+  };
+
+
+  return (
+    <div className="social-dropdown-container">
+      <Select
+        style={{ width: 240 }}
+        className="social-dropdown"
+        placeholder="Social platform..."
+        // defaultValue
+        dropdownRender={menu => (
+          <>
+            {menu}
+            <Divider style={{ margin: '4px 0' }} />
+            <div style={{ display: 'flex', flexWrap: 'nowrap', padding: 8 }}>
+              <Input style={{ flex: 'auto' }} value="" onChange={handleNameChange} />
+              <a
+                style={{ flex: 'none', padding: '8px', display: 'block', cursor: 'pointer' }}
+                onClick={handleAddItem}
+              >
+                <PlusOutlined /> Add item
+              </a>
+            </div>
+          </>
+        )}
+      >
+        {iconList.map(item => {
+          const { platform, icon, key } =  item;
+          return (
+            <Select.Option className="social-option" key={`platform-${key}`} value={key}>
+              <span className="option-icon">
+                <img src={`${NEXT_PUBLIC_API_HOST}${icon}`} alt="" className="option-icon" />
+              </span>
+              <span className="option-label">{platform}</span>
+            </Select.Option>
+          );
+        })
+      }
+      </Select>
+
+    </div>
+  );
+}

web/pages/components/main-layout.tsx

@@ -144,6 +144,9 @@ export default function MainLayout(props) {
             <Menu.Item key="config-page-content">
               <Link href="/config-page-content">Custom page content</Link>
             </Menu.Item>
+            <Menu.Item key="config-social-links">
+              <Link href="/config-social-links">Social links</Link>
+            </Menu.Item>
             <Menu.Item key="config-server-details">
               <Link href="/config-server-details">Server Details</Link>
             </Menu.Item>