feat: Initial clean release of CHM

packages/app-desktop/gui/ConfigScreen/controls/plugins/SearchPlugins.tsx

@@ -0,0 +1,137 @@
+import * as React from 'react';
+import { useState, useCallback, useRef, useEffect } from 'react';
+import SearchInput, { OnChangeEvent } from '../../../lib/SearchInput/SearchInput';
+import styled from 'styled-components';
+import RepositoryApi from '@joplin/lib/services/plugins/RepositoryApi';
+import AsyncActionQueue from '@joplin/lib/AsyncActionQueue';
+import { PluginManifest } from '@joplin/lib/services/plugins/utils/types';
+import PluginBox, { InstallState } from './PluginBox';
+import PluginService, { PluginSettings } from '@joplin/lib/services/plugins/PluginService';
+import { OnPluginSettingChangeEvent } from '@joplin/lib/components/shared/config/plugins/types';
+import { _ } from '@joplin/lib/locale';
+import useOnInstallHandler from '@joplin/lib/components/shared/config/plugins/useOnInstallHandler';
+import { themeStyle } from '@joplin/lib/theme';
+import SettingDescription from '../SettingDescription';
+
+const Root = styled.div`
+	width: 100%;
+	max-width: 1180px;
+`;
+
+const ResultsRoot = styled.div`
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: 16px;
+	width: 100%;
+
+	@media (max-width: 740px) {
+		grid-template-columns: 1fr;
+	}
+`;
+
+interface Props {
+	themeId: number;
+	searchQuery: string;
+	onSearchQueryChange(event: OnChangeEvent): void;
+	pluginSettings: PluginSettings;
+	onPluginSettingsChange(event: OnPluginSettingChangeEvent): void;
+	maxWidth: number;
+	repoApi(): RepositoryApi;
+	disabled: boolean;
+}
+
+export default function(props: Props) {
+	const [searchStarted, setSearchStarted] = useState(false);
+	const [manifests, setManifests] = useState<PluginManifest[]>([]);
+	const asyncSearchQueue = useRef(new AsyncActionQueue(10));
+	const [installingPluginsIds, setInstallingPluginIds] = useState<Record<string, boolean>>({});
+	const [searchResultCount, setSearchResultCount] = useState(null);
+
+	const pluginSettingsRef = useRef(props.pluginSettings);
+	pluginSettingsRef.current = props.pluginSettings;
+
+	const onInstall = useOnInstallHandler(setInstallingPluginIds, pluginSettingsRef, props.repoApi, props.onPluginSettingsChange, false);
+
+	useEffect(() => {
+		setSearchResultCount(null);
+		asyncSearchQueue.current.push(async () => {
+			if (!props.searchQuery) {
+				setManifests([]);
+				setSearchResultCount(null);
+			} else {
+				const r = await props.repoApi().search(props.searchQuery);
+				setManifests(r);
+				setSearchResultCount(r.length);
+			}
+		});
+		// eslint-disable-next-line @seiyab/react-hooks/exhaustive-deps -- Old code before rule was applied
+	}, [props.searchQuery]);
+
+	const onChange = useCallback((event: OnChangeEvent) => {
+		setSearchStarted(true);
+		props.onSearchQueryChange(event);
+	}, [props.onSearchQueryChange]);
+
+	const onSearchButtonClick = useCallback(() => {
+		setSearchStarted(false);
+		props.onSearchQueryChange({ value: '' });
+		// eslint-disable-next-line @seiyab/react-hooks/exhaustive-deps -- Old code before rule was applied
+	}, []);
+
+	function installState(pluginId: string): InstallState {
+		const settings = props.pluginSettings[pluginId];
+		if (settings && !settings.deleted) return InstallState.Installed;
+		if (installingPluginsIds[pluginId]) return InstallState.Installing;
+		return InstallState.NotInstalled;
+	}
+
+	function renderResults(query: string, manifests: PluginManifest[]) {
+		if (query && !manifests.length) {
+			if (searchResultCount === null) return ''; // Search in progress
+			return <SettingDescription text={_('No results')}/>;
+		} else {
+			const output = [];
+
+			for (const manifest of manifests) {
+				output.push(<PluginBox
+					key={manifest.id}
+					manifest={manifest}
+					themeId={props.themeId}
+					isCompatible={PluginService.instance().isCompatible(manifest)}
+					onInstall={onInstall}
+					installState={installState(manifest.id)}
+				/>);
+			}
+
+			return output;
+		}
+	}
+
+	const renderContentSourceInfo = () => {
+		if (props.repoApi().isUsingDefaultContentUrl) return null;
+		const theme = themeStyle(props.themeId);
+		const url = new URL(props.repoApi().contentBaseUrl);
+		return <div style={{ ...theme.textStyleMinor, marginTop: 5, fontSize: theme.fontSize }}>{_('Content provided by %s', url.hostname)}</div>;
+	};
+
+	return (
+		<Root>
+			<div style={{ marginBottom: 20, width: 'min(100%, 640px)' }}>
+				<SearchInput
+					inputRef={null}
+					value={props.searchQuery}
+					onChange={onChange}
+					onSearchButtonClick={onSearchButtonClick}
+					searchStarted={searchStarted}
+					placeholder={props.disabled ? _('Please wait...') : _('Search for plugins...')}
+					disabled={props.disabled}
+				/>
+				{renderContentSourceInfo()}
+			</div>
+
+			<ResultsRoot>
+				{renderResults(props.searchQuery, manifests)}
+			</ResultsRoot>
+		</Root>
+	);
+}