mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-26 14:56:14 +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: '', url: '',
platform: '', 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 React from 'react';
import { PlusOutlined } from "@ant-design/icons"; import { Select } from "antd";
import { Select, Divider, Input } from "antd";
import classNames from 'classnames';
import { SocialHandleDropdownItem } from "../../../types/config-section"; import { SocialHandleDropdownItem } from "../../../types/config-section";
import { NEXT_PUBLIC_API_HOST } from '../../../utils/apis'; import { NEXT_PUBLIC_API_HOST } from '../../../utils/apis';
import { OTHER_SOCIAL_HANDLE_OPTION } from './constants';
interface DropdownProps { interface DropdownProps {
iconList: SocialHandleDropdownItem[]; iconList: SocialHandleDropdownItem[];
selectedOption?: string; selectedOption: string;
} onSelected: any;
interface DropdownOptionProps extends SocialHandleDropdownItem {
isSelected: boolean;
} }
// Add "Other" item which creates a text field export default function SocialDropdown({ iconList, selectedOption, onSelected }: DropdownProps) {
// Add fixed custom ones - "url", "donate", "follow", "rss"
function dropdownRender(menu) { const handleSelected = value => {
console.log({menu}) if (onSelected) {
return 'hi'; onSelected(value);
} }
export default function SocialDropdown({ iconList, selectedOption }: DropdownProps) {
const [name, setName] = useState('');
const handleNameChange = event => {
setName(event.target.value);
}; };
const inititalSelected = selectedOption === '' ? null : selectedOption;
const handleAddItem = () => {
console.log('addItem');
// const { items, name } = this.state;
// this.setState({
// items: [...items, name || `New item ${index++}`],
// name: '',
// });
};
return ( return (
<div className="social-dropdown-container"> <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 <Select
style={{ width: 240 }} style={{ width: 240 }}
className="social-dropdown" className="social-dropdown"
placeholder="Social platform..." placeholder="Social platform..."
// defaultValue defaultValue={inititalSelected}
dropdownRender={menu => ( value={inititalSelected}
<> onSelect={handleSelected}
{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 => { {iconList.map(item => {
const { platform, icon, key } = 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> </Select>
</div> </div>
); );
} }

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

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

7
web/styles/globals.scss
View file

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