mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-22 21:03:19 +03:00
Code Issues Projects Releases Packages Wiki 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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
web/pages/components/config/constants.tsx
View file

@ -239,3 +239,5 @@ 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>
);
}

116
web/pages/config-social-links.tsx
View file

@ -1,25 +1,23 @@
import React, { useState, useContext, useEffect } from 'react';
import { Typography, Table, Button, Modal } from 'antd';
import { Typography, Table, Button, Modal, Input } from 'antd';
import { ColumnsType } from 'antd/lib/table';
import { DeleteOutlined } from '@ant-design/icons';
import SocialDropdown from './components/config/social-icons-dropdown';
import { fetchData, NEXT_PUBLIC_API_HOST, SOCIAL_PLATFORMS_LIST } from '../utils/apis';
import { ServerStatusContext } from '../utils/server-status-context';
import { API_SOCIAL_HANDLES, postConfigUpdateToAPI, RESET_TIMEOUT, SUCCESS_STATES, DEFAULT_SOCIAL_HANDLE } from './components/config/constants';
import { API_SOCIAL_HANDLES, postConfigUpdateToAPI, RESET_TIMEOUT, SUCCESS_STATES, DEFAULT_SOCIAL_HANDLE, OTHER_SOCIAL_HANDLE_OPTION } from './components/config/constants';
import { SocialHandle } from '../types/config-section';
const { Title } = Typography;
// get icons
export default function ConfigSocialLinks() {
const [availableIconsList, setAvailableIconsList] = useState([]);
const [currentSocialHandles, setCurrentSocialHandles] = useState([]);
const [displayModal, setDisplayModal] = useState(false);
const [displayOther, setDisplayOther] = useState(false);
const [modalProcessing, setModalProcessing] = useState(false);
const [editId, setEditId] = useState(0);
const [editId, setEditId] = useState(-1);
// current data inside modal
const [modalDataState, setModalDataState] = useState(DEFAULT_SOCIAL_HANDLE);
@ -27,7 +25,6 @@ export default function ConfigSocialLinks() {
const [submitStatus, setSubmitStatus] = useState(null);
const [submitStatusMessage, setSubmitStatusMessage] = useState('');
const serverStatusData = useContext(ServerStatusContext);
const { serverConfig, setFieldInConfigState } = serverStatusData || {};
@ -43,7 +40,6 @@ export default function ConfigSocialLinks() {
key: item,
...result[item],
}));
console.log({result})
setAvailableIconsList(list);
} catch (error) {
@ -52,12 +48,17 @@ export default function ConfigSocialLinks() {
}
};
const selectedOther = modalDataState.platform !== '' && !availableIconsList.find(item => item.key === modalDataState.platform);
useEffect(() => {
getAvailableIcons();
}, []);
useEffect(() => {
setCurrentSocialHandles(initialSocialHandles);
if (instanceDetails.socialHandles) {
setCurrentSocialHandles(initialSocialHandles);
}
}, [instanceDetails]);
@ -66,12 +67,42 @@ export default function ConfigSocialLinks() {
setSubmitStatusMessage('');
resetTimer = null;
clearTimeout(resetTimer);
}
const handleModalCancel = () => {
};
const resetModal = () => {
setDisplayModal(false);
setEditId(-1);
}
setDisplayOther(false);
setModalProcessing(false);
setModalDataState({...DEFAULT_SOCIAL_HANDLE});
};
const handleModalCancel = () => {
resetModal();
};
const updateModalState = (fieldName: string, value: string) => {
setModalDataState({
...modalDataState,
[fieldName]: value,
});
};
const handleDropdownSelect = (value: string) => {
if (value === OTHER_SOCIAL_HANDLE_OPTION) {
setDisplayOther(true);
updateModalState('platform', '');
} else {
setDisplayOther(false);
updateModalState('platform', value);
}
};
const handleOtherNameChange = event => {
const { value } = event.target;
updateModalState('platform', value);
};
const handleUrlChange = event => {
const { value } = event.target;
updateModalState('url', value);
};
// posts all the variants at once as an array obj
@ -80,14 +111,14 @@ export default function ConfigSocialLinks() {
apiPath: API_SOCIAL_HANDLES,
data: { value: postValue },
onSuccess: () => {
setFieldInConfigState({ fieldName: 'socialHandles', value: postValue, path: 'instancesDetails' });
setFieldInConfigState({ fieldName: 'socialHandles', value: postValue, path: 'instanceDetails' });
// close modal
setModalProcessing(false);
handleModalCancel();
setSubmitStatus('success');
setSubmitStatusMessage('Variants updated.');
setSubmitStatusMessage('Social Handles updated.');
resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
},
onError: (message: string) => {
@ -104,10 +135,9 @@ export default function ConfigSocialLinks() {
// close modal when api is done
const handleModalOk = () => {
setModalProcessing(true);
const postData = [
const postData = currentSocialHandles.length ? [
...currentSocialHandles,
];
]: [];
if (editId === -1) {
postData.push(modalDataState);
} else {
@ -116,15 +146,14 @@ export default function ConfigSocialLinks() {
postUpdateToAPI(postData);
};
const handleDeleteVariant = index => {
const handleDeleteItem = index => {
const postData = [
...currentSocialHandles,
];
postData.splice(index, 1);
postUpdateToAPI(postData)
postUpdateToAPI(postData);
};
const socialHandlesColumns: ColumnsType<SocialHandle> = [
{
title: "#",
@ -136,7 +165,7 @@ export default function ConfigSocialLinks() {
dataIndex: "platform",
key: "platform",
render: (platform: string) => {
const platformInfo = availableIconsList[platform];
const platformInfo = availableIconsList.find(item => item.key === platform);
if (!platformInfo) {
return platform;
}
@ -153,7 +182,7 @@ export default function ConfigSocialLinks() {
},
{
title: "Url to profile",
title: "Url Link",
dataIndex: "url",
key: "url",
},
@ -166,7 +195,7 @@ export default function ConfigSocialLinks() {
<span className="actions">
<Button type="primary" size="small" onClick={() => {
setEditId(index);
setModalDataState(currentSocialHandles[index]);
setModalDataState({...currentSocialHandles[index]});
setDisplayModal(true);
}}>
Edit
@ -175,9 +204,7 @@ export default function ConfigSocialLinks() {
className="delete-button"
icon={<DeleteOutlined />}
size="small"
onClick={() => {
handleDeleteVariant(index);
}}
onClick={() => handleDeleteItem(index)}
/>
</span>
)},
@ -199,13 +226,13 @@ export default function ConfigSocialLinks() {
<Title level={2}>Social Links</Title>
<p>Add all your social media handles and links to your other profiles here.</p>
{statusMessage}
<Table
className="variants-table"
pagination={false}
size="small"
rowKey={record => record.url}
columns={socialHandlesColumns}
dataSource={currentSocialHandles}
/>
@ -217,20 +244,43 @@ export default function ConfigSocialLinks() {
onCancel={handleModalCancel}
confirmLoading={modalProcessing}
>
<SocialDropdown iconList={availableIconsList} />
<SocialDropdown
iconList={availableIconsList}
selectedOption={selectedOther ? OTHER_SOCIAL_HANDLE_OPTION : modalDataState.platform}
onSelected={handleDropdownSelect}
/>
{
displayOther
? (
<>
<Input
placeholder="Other"
defaultValue={modalDataState.platform}
onChange={handleOtherNameChange}
/>
<br/>
</>
) : null
}
<br/>
URL
<Input
placeholder="Url to page"
defaultValue={modalDataState.url}
value={modalDataState.url}
onChange={handleUrlChange}
/>
{statusMessage}
</Modal>
<br />
<Button type="primary" onClick={() => {
setEditId(-1);
setModalDataState(DEFAULT_SOCIAL_HANDLE);
resetModal();
setDisplayModal(true);
}}>
Add a new variant
Add a new social link
</Button>
</div>
);
}

7
web/styles/globals.scss
View file

@ -97,7 +97,12 @@ code {
font-weight: bold;
font-size: 1.5em;
}
.ant-modal-body {
background-color: #33333c;
}
.ant-modal-footer {
background-color: #222229;
}
.ant-select-dropdown {