LogalDeveloper/owncast
0
Fork 0
Code Activity

edit and update social links in modal

Browse Source
This commit is contained in:
gingervitis
2021-01-24 01:22:28 -08:00
committed by Gabe Kangas
parent c3547f189d
commit 9ad9791931
5 changed files with 114 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/pages/components/config/constants.tsx
View File

@@ -238,4 +238,6 @@ export const DEFAULT_VARIANT_STATE:VideoVariant = {
export const DEFAULT_SOCIAL_HANDLE:SocialHandle = {
url: '',
platform: '',
};
};
export const OTHER_SOCIAL_HANDLE_OPTION = 'OTHER_SOCIAL_HANDLE_OPTION';

132
web/pages/components/config/edit-social-links.tsx
View File

@@ -1,132 +0,0 @@
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>
);
}

68
web/pages/components/config/social-icons-dropdown.tsx
View File

@@ -1,66 +1,36 @@
import React, { useState } from 'react';
import { PlusOutlined } from "@ant-design/icons";
import { Select, Divider, Input } from "antd";
import classNames from 'classnames';
import React from 'react';
import { Select } from "antd";
import { SocialHandleDropdownItem } from "../../../types/config-section";
import { NEXT_PUBLIC_API_HOST } from '../../../utils/apis';
import { OTHER_SOCIAL_HANDLE_OPTION } from './constants';
interface DropdownProps {
iconList: SocialHandleDropdownItem[];
selectedOption?: string;
}
interface DropdownOptionProps extends SocialHandleDropdownItem {
isSelected: boolean;
selectedOption: string;
onSelected: any;
}
// Add "Other" item which creates a text field
// Add fixed custom ones - "url", "donate", "follow", "rss"
export default function SocialDropdown({ iconList, selectedOption, onSelected }: DropdownProps) {
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 handleSelected = value => {
if (onSelected) {
onSelected(value);
}
};
const handleAddItem = () => {
console.log('addItem');
// const { items, name } = this.state;
// this.setState({
// items: [...items, name || `New item ${index++}`],
// name: '',
// });
};
const inititalSelected = selectedOption === '' ? null : selectedOption;
return (
<div className="social-dropdown-container">
<p className="">If you are looking for a platform name not on this list, please select Other and type in your own name. A logo will not be provided.</p>
<p className="">If you DO have a logo, drop it in to the <code>/webroot/img/platformicons</code> directory and update the <code>/socialHandle.go</code> list. Then restart the server and it will show up in the list.</p>
<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>
</>
)}
defaultValue={inititalSelected}
value={inititalSelected}
onSelect={handleSelected}
>
{iconList.map(item => {
const { platform, icon, key } = item;
@@ -74,8 +44,10 @@ export default function SocialDropdown({ iconList, selectedOption }: DropdownPro
);
})
}
<Select.Option className="social-option" key={`platform-${OTHER_SOCIAL_HANDLE_OPTION}`} value={OTHER_SOCIAL_HANDLE_OPTION}>
Other...
</Select.Option>
</Select>
</div>
);
}