Search: Use data from installed plugins, when available

laurent22 · May 24, 2024 · dda04ed · dda04ed
1 parent d4799f3
commit dda04ed
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 25 deletions.
diff --git a/packages/app-mobile/components/screens/ConfigScreen/plugins/PluginBox/PluginChips.tsx b/packages/app-mobile/components/screens/ConfigScreen/plugins/PluginBox/PluginChips.tsx
@@ -14,6 +14,7 @@ interface Props {
 	hasErrors: boolean;
 	isCompatible: boolean;
 	canUpdate: boolean;
+	showInstalledChip: boolean;
 
 	onShowPluginLog?: PluginCallback;
 }
@@ -116,8 +117,16 @@ const PluginChips: React.FC<Props> = props => {
 		return <StyledChip>{_('Disabled')}</StyledChip>;
 	};
 
+	const renderInstalledChip = () => {
+		if (!props.showInstalledChip) {
+			return null;
+		}
+		return <StyledChip>{_('Installed')}</StyledChip>;
+	};
+
 	return <View style={containerStyle}>
 		{renderIncompatibleChip()}
+		{renderInstalledChip()}
 		{renderErrorsChip()}
 		{renderRecommendedChip()}
 		{renderBuiltInChip()}

diff --git a/packages/app-mobile/components/screens/ConfigScreen/plugins/PluginBox/index.tsx b/packages/app-mobile/components/screens/ConfigScreen/plugins/PluginBox/index.tsx
@@ -22,6 +22,7 @@ interface Props {
 	themeId: number;
 	item: PluginItem;
 	isCompatible: boolean;
+	showInstalledChip: boolean;
 
 	hasErrors?: boolean;
 	installState?: InstallState;
@@ -90,6 +91,7 @@ const PluginBox: React.FC<Props> = props => {
 					<PluginChips
 						themeId={props.themeId}
 						item={props.item}
+						showInstalledChip={props.showInstalledChip}
 						hasErrors={props.hasErrors}
 						canUpdate={props.updateState === UpdateState.CanUpdate}
 						onShowPluginLog={props.onShowPluginLog}

diff --git a/packages/app-mobile/components/screens/ConfigScreen/plugins/PluginInfoModal.tsx b/packages/app-mobile/components/screens/ConfigScreen/plugins/PluginInfoModal.tsx
@@ -125,6 +125,7 @@ const PluginInfoModalContent: React.FC<Props> = props => {
 					<PluginChips
 						themeId={props.themeId}
 						item={item}
+						showInstalledChip={false}
 						hasErrors={plugin.hasErrors}
 						canUpdate={false}
 						onShowPluginLog={props.pluginCallbacks.onShowPluginLog}

diff --git a/packages/app-mobile/components/screens/ConfigScreen/plugins/PluginStates.tsx b/packages/app-mobile/components/screens/ConfigScreen/plugins/PluginStates.tsx
@@ -141,14 +141,12 @@ const PluginStates: React.FC<Props> = props => {
 					key={`plugin-${pluginId}`}
 					themeId={props.themeId}
 					pluginId={pluginId}
-					styles={props.styles}
 					pluginSettings={pluginSettings}
 					updatablePluginIds={updatablePluginIds}
 					updatingPluginIds={updatingPluginIds}
-					updatePluginStates={props.updatePluginStates}
+					showInstalledChip={false}
 					onShowPluginInfo={onShowPluginInfo}
 					callbacks={pluginCallbacks}
-					repoApi={repoApi}
 				/>,
 			);
 		}
@@ -158,20 +156,28 @@ const PluginStates: React.FC<Props> = props => {
 		!props.shouldShowBasedOnSearchQuery || props.shouldShowBasedOnSearchQuery(searchInputSearchText())
 	);
 
+	const [searchQuery, setSearchQuery] = useState('');
+
 	const searchAccordion = (
 		<List.Accordion
 			title={_('Install new plugins')}
 			description={_('Browse and install community plugins.')}
 			id='search'
 		>
 			<SearchPlugins
-				pluginSettings={props.pluginSettings}
+				pluginSettings={pluginSettings}
 				themeId={props.themeId}
 				onUpdatePluginStates={props.updatePluginStates}
 				installingPluginIds={installingPluginIds}
 				callbacks={pluginCallbacks}
 				repoApiInitialized={repoApiLoaded}
 				repoApi={repoApi}
+				updatingPluginIds={updatingPluginIds}
+				updatablePluginIds={updatablePluginIds}
+				onShowPluginInfo={onShowPluginInfo}
+
+				searchQuery={searchQuery}
+				setSearchQuery={setSearchQuery}
 			/>
 		</List.Accordion>
 	);

diff --git a/packages/app-mobile/components/screens/ConfigScreen/plugins/PluginToggle.tsx b/packages/app-mobile/components/screens/ConfigScreen/plugins/PluginToggle.tsx
@@ -1,26 +1,22 @@
 
 import * as React from 'react';
-import { ConfigScreenStyles } from '../configScreenStyles';
 import PluginService, { PluginSettings } from '@joplin/lib/services/plugins/PluginService';
 import { useMemo } from 'react';
 import PluginBox from './PluginBox';
-import RepositoryApi from '@joplin/lib/services/plugins/RepositoryApi';
 import useUpdateState from './utils/useUpdateState';
 import { PluginCallback, PluginCallbacks } from './utils/usePluginCallbacks';
 import usePluginItem from './utils/usePluginItem';
 
 interface Props {
 	pluginId: string;
 	themeId: number;
-	styles: ConfigScreenStyles;
 	pluginSettings: PluginSettings;
 	updatablePluginIds: Record<string, boolean>;
 	updatingPluginIds: Record<string, boolean>;
-	repoApi: RepositoryApi;
+	showInstalledChip: boolean;
 
 	callbacks: PluginCallbacks;
 	onShowPluginInfo: PluginCallback;
-	updatePluginStates: (settingValue: PluginSettings)=> void;
 }
 
 const PluginToggle: React.FC<Props> = props => {
@@ -44,6 +40,7 @@ const PluginToggle: React.FC<Props> = props => {
 			item={pluginItem}
 			isCompatible={isCompatible}
 			hasErrors={plugin.hasErrors}
+			showInstalledChip={props.showInstalledChip}
 			onShowPluginLog={props.callbacks.onShowPluginLog}
 			onShowPluginInfo={props.onShowPluginInfo}
 			updateState={updateState}

diff --git a/packages/app-mobile/components/screens/ConfigScreen/plugins/SearchPlugins.tsx b/packages/app-mobile/components/screens/ConfigScreen/plugins/SearchPlugins.tsx
@@ -7,21 +7,29 @@ import { useCallback, useMemo, useState } from 'react';
 import { FlatList, StyleSheet, View } from 'react-native';
 import { TextInput, Text } from 'react-native-paper';
 import PluginBox, { InstallState } from './PluginBox';
-import PluginService, { PluginSettings, SerializedPluginSettings } from '@joplin/lib/services/plugins/PluginService';
+import PluginService, { PluginSettings } from '@joplin/lib/services/plugins/PluginService';
 import { PluginItem } from '@joplin/lib/components/shared/config/plugins/types';
 import RepositoryApi from '@joplin/lib/services/plugins/RepositoryApi';
 import openWebsiteForPlugin from './utils/openWebsiteForPlugin';
-import { PluginCallbacks } from './utils/usePluginCallbacks';
+import { PluginCallback, PluginCallbacks } from './utils/usePluginCallbacks';
+import PluginToggle from './PluginToggle';
 
 interface Props {
 	themeId: number;
-	pluginSettings: SerializedPluginSettings;
+	pluginSettings: PluginSettings;
 	repoApiInitialized: boolean;
 	onUpdatePluginStates: (states: PluginSettings)=> void;
 	repoApi: RepositoryApi;
 
 	installingPluginIds: Record<string, boolean>;
+	updatingPluginIds: Record<string, boolean>;
+	updatablePluginIds: Record<string, boolean>;
+
 	callbacks: PluginCallbacks;
+	onShowPluginInfo: PluginCallback;
+
+	searchQuery: string;
+	setSearchQuery: (newQuery: string)=> void;
 }
 
 interface SearchResultRecord {
@@ -43,7 +51,7 @@ const styles = StyleSheet.create({
 });
 
 const PluginSearch: React.FC<Props> = props => {
-	const [searchQuery, setSearchQuery] = useState('');
+	const { searchQuery, setSearchQuery } = props;
 	const [searchResultManifests, setSearchResultManifests] = useState<PluginManifest[]>([]);
 
 	useAsyncEffect(async event => {
@@ -96,18 +104,34 @@ const PluginSearch: React.FC<Props> = props => {
 	const renderResult = useCallback(({ item }: { item: SearchResultRecord }) => {
 		const manifest = item.item.manifest;
 
-		return (
-			<PluginBox
-				themeId={props.themeId}
-				key={manifest.id}
-				item={item.item}
-				installState={item.installState}
-				isCompatible={PluginService.instance().isCompatible(manifest)}
-				onInstall={onInstall}
-				onAboutPress={openWebsiteForPlugin}
-			/>
-		);
-	}, [onInstall, props.themeId]);
+		if (item.installState === InstallState.Installed && PluginService.instance().isPluginLoaded(manifest.id)) {
+			return (
+				<PluginToggle
+					pluginId={manifest.id}
+					themeId={props.themeId}
+					pluginSettings={props.pluginSettings}
+					updatablePluginIds={props.updatablePluginIds}
+					updatingPluginIds={props.updatingPluginIds}
+					showInstalledChip={true}
+					callbacks={props.callbacks}
+					onShowPluginInfo={props.onShowPluginInfo}
+				/>
+			);
+		} else {
+			return (
+				<PluginBox
+					themeId={props.themeId}
+					key={manifest.id}
+					item={item.item}
+					installState={item.installState}
+					showInstalledChip={false}
+					isCompatible={PluginService.instance().isCompatible(manifest)}
+					onInstall={onInstall}
+					onAboutPress={openWebsiteForPlugin}
+				/>
+			);
+		}
+	}, [onInstall, props.themeId, props.pluginSettings, props.updatingPluginIds, props.updatablePluginIds, props.onShowPluginInfo, props.callbacks]);
 
 	const renderResultsCount = () => {
 		if (!searchQuery.length) return null;

diff --git a/packages/app-mobile/components/screens/ConfigScreen/plugins/utils/usePluginItem.ts b/packages/app-mobile/components/screens/ConfigScreen/plugins/utils/usePluginItem.ts
@@ -13,6 +13,7 @@ const usePluginItem = (id: string, pluginSettings: PluginSettings): PluginItem =
 	}, [id]);
 
 	return useMemo(() => {
+		if (!plugin) return null;
 		const settings = pluginSettings[id];
 
 		const manifest: PluginManifest|null = plugin?.manifest ?? null;