1
0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-24 10:27:10 +02:00
joplin/packages/app-desktop/gui/ConfigScreen/controls/plugins/PluginsStates.tsx

346 lines
11 KiB
TypeScript
Raw Normal View History

import * as React from 'react';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import PluginService, { defaultPluginSetting, Plugins, PluginSetting, PluginSettings } from '@joplin/lib/services/plugins/PluginService';
import { _ } from '@joplin/lib/locale';
import styled from 'styled-components';
import SearchPlugins from './SearchPlugins';
import PluginBox, { UpdateState } from './PluginBox';
import Button, { ButtonLevel, ButtonSize } from '../../../Button/Button';
import bridge from '../../../../services/bridge';
import produce from 'immer';
import { OnChangeEvent } from '../../../lib/SearchInput/SearchInput';
import { PluginItem, ItemEvent, OnPluginSettingChangeEvent } from '@joplin/lib/components/shared/config/plugins/types';
import RepositoryApi, { InstallMode } from '@joplin/lib/services/plugins/RepositoryApi';
import Setting, { AppType } from '@joplin/lib/models/Setting';
import useOnInstallHandler from '@joplin/lib/components/shared/config/plugins/useOnInstallHandler';
import useOnDeleteHandler from '@joplin/lib/components/shared/config/plugins/useOnDeleteHandler';
import Logger from '@joplin/utils/Logger';
import StyledMessage from '../../../style/StyledMessage';
import StyledLink from '../../../style/StyledLink';
import SettingHeader from '../SettingHeader';
import SettingDescription from '../SettingDescription';
const { space } = require('styled-system');
const logger = Logger.create('PluginState');
const maxWidth = 320;
const Root = styled.div`
display: flex;
flex-direction: column;
`;
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
const UserPluginsRoot = styled.div<any>`
${space}
display: flex;
flex-wrap: wrap;
`;
const ToolsButton = styled(Button)`
2021-01-20 00:58:09 +02:00
margin-right: 6px;
`;
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
const RepoApiErrorMessage = styled(StyledMessage)<any>`
max-width: ${props => props.maxWidth}px;
margin-bottom: 10px;
`;
interface Props {
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
value: any;
themeId: number;
// eslint-disable-next-line @typescript-eslint/ban-types -- Old code before rule was applied
onChange: Function;
}
2021-01-20 00:58:09 +02:00
let repoApi_: RepositoryApi = null;
function repoApi(): RepositoryApi {
if (repoApi_) return repoApi_;
const appInfo = { type: AppType.Desktop, version: PluginService.instance().appVersion };
repoApi_ = RepositoryApi.ofDefaultJoplinRepo(Setting.value('tempDir'), appInfo, InstallMode.Default);
2021-01-20 00:58:09 +02:00
// repoApi_ = new RepositoryApi('/Users/laurent/src/joplin-plugins-test', Setting.value('tempDir'));
return repoApi_;
}
function usePluginItems(plugins: Plugins, settings: PluginSettings): PluginItem[] {
return useMemo(() => {
const output: PluginItem[] = [];
for (const pluginId in plugins) {
const plugin = plugins[pluginId];
const setting: PluginSetting = {
...defaultPluginSetting(),
...settings[pluginId],
};
output.push({
manifest: plugin.manifest,
installed: true,
enabled: setting.enabled,
deleted: setting.deleted,
devMode: plugin.devMode,
builtIn: plugin.builtIn,
2021-01-20 00:58:09 +02:00
hasBeenUpdated: setting.hasBeenUpdated,
});
}
output.sort((a: PluginItem, b: PluginItem) => {
return a.manifest.name < b.manifest.name ? -1 : +1;
});
return output;
}, [plugins, settings]);
}
export default function(props: Props) {
const [searchQuery, setSearchQuery] = useState('');
2021-01-20 00:58:09 +02:00
const [manifestsLoaded, setManifestsLoaded] = useState<boolean>(false);
const [updatingPluginsIds, setUpdatingPluginIds] = useState<Record<string, boolean>>({});
const [canBeUpdatedPluginIds, setCanBeUpdatedPluginIds] = useState<Record<string, boolean>>({});
const [repoApiError, setRepoApiError] = useState<Error>(null);
const [fetchManifestTime, setFetchManifestTime] = useState<number>(Date.now());
const pluginService = PluginService.instance();
const pluginSettings = useMemo(() => {
return pluginService.unserializePluginSettings(props.value);
// eslint-disable-next-line @seiyab/react-hooks/exhaustive-deps -- Old code before rule was applied
}, [props.value]);
2021-01-20 00:58:09 +02:00
const pluginItems = usePluginItems(pluginService.plugins, pluginSettings);
useEffect(() => {
let cancelled = false;
async function fetchManifests() {
setManifestsLoaded(false);
setRepoApiError(null);
let loadError: Error = null;
try {
await repoApi().initialize();
} catch (error) {
logger.error(error);
loadError = error;
}
2021-01-20 00:58:09 +02:00
if (cancelled) return;
if (loadError) {
setManifestsLoaded(false);
setRepoApiError(loadError);
} else {
setManifestsLoaded(true);
}
2021-01-20 00:58:09 +02:00
}
void fetchManifests();
return () => {
cancelled = true;
};
}, [fetchManifestTime]);
2021-01-20 00:58:09 +02:00
useEffect(() => {
if (!manifestsLoaded) return () => {};
let cancelled = false;
async function fetchPluginIds() {
// Built-in plugins can't be updated from the main repoApi
const nonDefaultPlugins = pluginItems
.filter(plugin => !plugin.builtIn)
.map(p => p.manifest);
const pluginIds = await repoApi().canBeUpdatedPlugins(nonDefaultPlugins);
2021-01-20 00:58:09 +02:00
if (cancelled) return;
2021-01-20 00:58:09 +02:00
const conv: Record<string, boolean> = {};
for (const id of pluginIds) {
conv[id] = true;
}
2021-01-20 00:58:09 +02:00
setCanBeUpdatedPluginIds(conv);
}
void fetchPluginIds();
return () => {
cancelled = true;
};
}, [manifestsLoaded, pluginItems, pluginService.appVersion]);
2021-01-20 00:58:09 +02:00
2021-01-27 01:56:35 +02:00
const onToggle = useCallback((event: ItemEvent) => {
const item = event.item;
const newSettings = produce(pluginSettings, (draft: PluginSettings) => {
if (!draft[item.manifest.id]) draft[item.manifest.id] = defaultPluginSetting();
draft[item.manifest.id].enabled = !draft[item.manifest.id].enabled;
});
props.onChange({ value: pluginService.serializePluginSettings(newSettings) });
// eslint-disable-next-line @seiyab/react-hooks/exhaustive-deps -- Old code before rule was applied
}, [pluginSettings, props.onChange]);
const onInstall = useCallback(async () => {
const result = await bridge().showOpenDialog({
filters: [{ name: 'Joplin Plugin Archive', extensions: ['jpl'] }],
});
const filePath = result && result.length ? result[0] : null;
if (!filePath) return;
const plugin = await pluginService.installPlugin(filePath);
const newSettings = produce(pluginSettings, (draft: PluginSettings) => {
draft[plugin.manifest.id] = defaultPluginSetting();
});
props.onChange({ value: pluginService.serializePluginSettings(newSettings) });
// eslint-disable-next-line @seiyab/react-hooks/exhaustive-deps -- Old code before rule was applied
}, [pluginSettings, props.onChange]);
const onBrowsePlugins = useCallback(() => {
void bridge().openExternal('https://joplinapp.org/plugins/');
}, []);
2021-01-20 00:58:09 +02:00
const onPluginSettingsChange = useCallback((event: OnPluginSettingChangeEvent) => {
props.onChange({ value: pluginService.serializePluginSettings(event.value) });
}, [pluginService, props.onChange]);
2021-01-20 00:58:09 +02:00
const pluginSettingsRef = useRef(pluginSettings);
pluginSettingsRef.current = pluginSettings;
const onDelete = useOnDeleteHandler(pluginSettingsRef, onPluginSettingsChange, false);
const onUpdate = useOnInstallHandler(setUpdatingPluginIds, pluginSettingsRef, repoApi, onPluginSettingsChange, true);
2021-01-20 00:58:09 +02:00
const onToolsClick = useCallback(async () => {
const template = [
{
label: _('Browse all plugins'),
click: onBrowsePlugins,
},
{
label: _('Install from file'),
click: onInstall,
},
];
const menu = bridge().Menu.buildFromTemplate(template);
menu.popup({ window: bridge().window() });
}, [onInstall, onBrowsePlugins]);
const onSearchQueryChange = useCallback((event: OnChangeEvent) => {
setSearchQuery(event.value);
}, []);
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
const onSearchPluginSettingsChange = useCallback((event: any) => {
props.onChange({ value: pluginService.serializePluginSettings(event.value) });
// eslint-disable-next-line @seiyab/react-hooks/exhaustive-deps -- Old code before rule was applied
}, [props.onChange]);
function renderCells(items: PluginItem[]) {
const output = [];
for (const item of items) {
if (item.deleted) continue;
const isUpdating = updatingPluginsIds[item.manifest.id];
const onUpdateHandler = canBeUpdatedPluginIds[item.manifest.id] ? onUpdate : null;
2021-01-20 00:58:09 +02:00
let updateState = UpdateState.Idle;
if (onUpdateHandler) updateState = UpdateState.CanUpdate;
if (isUpdating) updateState = UpdateState.Updating;
if (item.hasBeenUpdated) updateState = UpdateState.HasBeenUpdated;
output.push(<PluginBox
key={item.manifest.id}
item={item}
themeId={props.themeId}
2021-01-20 00:58:09 +02:00
updateState={updateState}
isCompatible={PluginService.instance().isCompatible(item.manifest)}
onDelete={onDelete}
onToggle={onToggle}
2021-01-20 00:58:09 +02:00
onUpdate={onUpdateHandler}
/>);
}
return output;
}
function renderUserPlugins(pluginItems: PluginItem[]) {
const allDeleted = !pluginItems.find(it => it.deleted !== true);
if (!pluginItems.length || allDeleted) {
return (
<UserPluginsRoot mb={'10px'}>
<SettingDescription text={_('You do not have any installed plugin.')}/>
</UserPluginsRoot>
);
} else {
const nonDefaultPlugins = pluginItems.filter(item => !item.builtIn);
const defaultPlugins = pluginItems.filter(item => item.builtIn);
return (
<>
<UserPluginsRoot>
{renderCells(nonDefaultPlugins)}
</UserPluginsRoot>
<UserPluginsRoot>
{renderCells(defaultPlugins)}
</UserPluginsRoot>
</>
);
}
}
2021-01-20 00:58:09 +02:00
function renderSearchArea() {
return (
<div style={{ marginBottom: 0 }}>
<SearchPlugins
2021-01-20 00:58:09 +02:00
disabled={!manifestsLoaded}
maxWidth={maxWidth}
themeId={props.themeId}
searchQuery={searchQuery}
pluginSettings={pluginSettings}
onSearchQueryChange={onSearchQueryChange}
onPluginSettingsChange={onSearchPluginSettingsChange}
2021-01-20 00:58:09 +02:00
repoApi={repoApi}
/>
</div>
2021-01-20 00:58:09 +02:00
);
}
function renderRepoApiError() {
if (!repoApiError) return null;
return <RepoApiErrorMessage maxWidth={maxWidth} type="error">{_('Could not connect to plugin repository.')}<br/><br/>- <StyledLink href="#" onClick={() => { setFetchManifestTime(Date.now()); }}>{_('Try again')}</StyledLink><br/><br/>- <StyledLink href="#" onClick={onBrowsePlugins}>{_('Browse all plugins')}</StyledLink></RepoApiErrorMessage>;
}
2021-01-20 00:58:09 +02:00
function renderBottomArea() {
if (searchQuery) return null;
2021-01-20 00:58:09 +02:00
return (
<div>
{renderRepoApiError()}
<div style={{ display: 'flex', flexDirection: 'row', maxWidth }}>
<ToolsButton size={ButtonSize.Small} tooltip={_('Plugin tools')} iconName="fas fa-cog" level={ButtonLevel.Secondary} onClick={onToolsClick}/>
<div style={{ display: 'flex', flex: 1 }}>
<SettingHeader text={_('Manage your plugins')}/>
</div>
</div>
{renderUserPlugins(pluginItems)}
</div>
2021-01-20 00:58:09 +02:00
);
}
return (
<Root>
{renderSearchArea()}
{renderBottomArea()}
</Root>
);
}