import variables from 'config/variables';
import { PureComponent, createRef } from 'react';
import { MdAddLink, MdLinkOff } from 'react-icons/md';
import { Header, Row, Content, Action, PreferencesWrapper } from 'components/Layout/Settings';
import { Checkbox, Dropdown } from 'components/Form/Settings';
import { Button } from 'components/Elements';
import Modal from 'react-modal';
import { AddModal } from 'components/Elements/AddModal';
import EventBus from 'utils/eventbus';
import { QuickLink } from './QuickLink';
import { getTitleFromUrl, isValidUrl } from 'utils/links';
class QuickLinksOptions extends PureComponent {
constructor() {
super();
this.state = {
items: JSON.parse(localStorage.getItem('quicklinks')),
showAddModal: false,
urlError: '',
iconError: '',
edit: false,
editData: '',
};
this.quicklinksContainer = createRef();
}
deleteLink(key, event) {
event.preventDefault();
// remove link from array
const data = JSON.parse(localStorage.getItem('quicklinks')).filter((i) => i.key !== key);
localStorage.setItem('quicklinks', JSON.stringify(data));
this.setState({
items: data,
});
variables.stats.postEvent('feature', 'Quicklink delete');
}
async addLink(name, url, icon) {
const data = JSON.parse(localStorage.getItem('quicklinks'));
if (!url.startsWith('http://') && !url.startsWith('https://')) {
url = 'https://' + url;
}
if (url.length <= 0 || isValidUrl(url) === false) {
return this.setState({
urlError: variables.getMessage('widgets.quicklinks.url_error'),
});
}
if (icon.length > 0 && isValidUrl(icon) === false) {
return this.setState({
iconError: variables.getMessage('widgets.quicklinks.url_error'),
});
}
data.push({
name: name || (await getTitleFromUrl(url)),
url,
icon: icon || '',
key: Math.random().toString(36).substring(7) + 1,
});
localStorage.setItem('quicklinks', JSON.stringify(data));
this.setState({
items: data,
showAddModal: false,
urlError: '',
iconError: '',
});
variables.stats.postEvent('feature', 'Quicklink add');
}
startEditLink(data) {
this.setState({
edit: true,
editData: data,
showAddModal: true,
});
}
async editLink(og, name, url, icon) {
const data = JSON.parse(localStorage.getItem('quicklinks'));
const dataobj = data.find((i) => i.key === og.key);
dataobj.name = name || (await getTitleFromUrl(url));
dataobj.url = url;
dataobj.icon = icon || '';
localStorage.setItem('quicklinks', JSON.stringify(data));
this.setState({
items: data,
showAddModal: false,
edit: false,
});
}
componentDidMount() {
EventBus.on('refresh', (data) => {
if (data === 'quicklinks') {
if (localStorage.getItem('quicklinksenabled') === 'false') {
return (this.quicklinksContainer.current.style.display = 'none');
}
this.quicklinksContainer.current.style.display = 'block';
this.setState({
items: JSON.parse(localStorage.getItem('quicklinks')),
});
}
});
}
componentWillUnmount() {
EventBus.off('refresh');
}
render() {
const QUICKLINKS_SECTION = 'modals.main.settings.sections.quicklinks';
const AdditionalSettings = () => {
return (