import variables from 'config/variables';
import { useState, memo, useEffect } from 'react';
import Modal from 'react-modal';
import {
MdAddLink,
MdAssignment,
MdCropFree,
MdRefresh,
MdChecklist,
MdOutlineApps,
} from 'react-icons/md';
import { AddModal } from 'components/Elements/AddModal';
import { Checkbox, Dropdown } from 'components/Form';
import { Button } from 'components/Elements';
import EventBus from 'utils/eventbus';
import { Row, Content, Action } from 'components/Layout/Settings';
import { Header } from 'components/Layout/Settings';
import { getTitleFromUrl, isValidUrl } from 'utils/links';
import { QuickLinks } from 'features/quicklinks';
function NavbarOptions() {
const [showRefreshOptions, setShowRefreshOptions] = useState(
localStorage.getItem('refresh') === 'true',
);
const [appsEnabled, setAppsEnabled] = useState(localStorage.getItem('appsEnabled') === 'true');
const [appsModalInfo, setAppsModalInfo] = useState({
newLink: false,
edit: false,
items: JSON.parse(localStorage.getItem('applinks')),
urlError: '',
iconError: '',
editData: null,
});
const addLink = async (name, url, icon) => {
const data = JSON.parse(localStorage.getItem('applinks'));
if (!url.startsWith('http://') && !url.startsWith('https://')) {
url = 'https://' + url;
}
if (url.length <= 0 || isValidUrl(url) === false) {
return setAppsModalInfo((oldState) => ({
...oldState,
urlError: variables.getMessage('widgets.quicklinks.url_error'),
}));
}
if (icon.length > 0 && isValidUrl(icon) === false) {
return this.setState((oldState) => ({
...oldState,
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('applinks', JSON.stringify(data));
setAppsModalInfo({
newLink: false,
edit: false,
items: data,
urlError: '',
iconError: '',
});
variables.stats.postEvent('feature', 'App link add');
};
const startEditLink = (data) => {
setAppsModalInfo((oldState) => ({
...oldState,
edit: true,
editData: data,
}));
};
const editLink = async (og, name, url, icon) => {
const data = JSON.parse(localStorage.getItem('applinks'));
const dataobj = data.find((i) => i.key === og.key);
dataobj.name = name || (await getTitleFromUrl(url));
dataobj.url = url;
dataobj.icon = icon || '';
localStorage.setItem('applinks', JSON.stringify(data));
setAppsModalInfo((oldState) => ({
...oldState,
items: data,
edit: false,
newLink: false,
}));
};
const deleteLink = (key, event) => {
event.preventDefault();
// remove link from array
const data = JSON.parse(localStorage.getItem('applinks')).filter((i) => i.key !== key);
localStorage.setItem('applinks', JSON.stringify(data));
setAppsModalInfo((oldState) => ({
...oldState,
items: data,
}));
variables.stats.postEvent('feature', 'App link delete');
};
const NAVBAR_SECTION = 'modals.main.settings.sections.appearance.navbar';
const AdditionalSettings = () => {
return (