feat(preferences): extension modals into extension panes (#683)
* feat(preferences): show inline extensions in extensions pane * wip * wip * refactor: convert ComponentView to React component * refactor: convert ComponentView to React component * chore: fix merge conflicts * feat: don't show features whose `area` is "room", update modal items' icons in Preferences menu * chore: fix TS error * feat: don't show 2FA Manager in modal-based component * feat: remove `ExtendedDataReloadComplete` event, since Extensions Manger is being removed from the app * chore: avoid hardcoded values in svg image, optimize `if` condition * chore: remove remnant comment * fix: fix typescript errors Co-authored-by: vardanhakobyan <vardan_live@live.com>
This commit is contained in:
@@ -9,9 +9,9 @@ import {
|
||||
PreferencesPane,
|
||||
PreferencesSegment,
|
||||
} from '../components';
|
||||
import { ConfirmCustomExtension, ExtensionItem } from './extensions-segments';
|
||||
import { ConfirmCustomExtension, ExtensionItem, ExtensionsLatestVersions } from './extensions-segments';
|
||||
import { useEffect, useRef, useState } from 'preact/hooks';
|
||||
import { FeatureDescription } from '@standardnotes/features';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
|
||||
const loadExtensions = (application: WebApplication) => application.getItems([
|
||||
ContentType.ActionsExtension,
|
||||
@@ -19,30 +19,14 @@ const loadExtensions = (application: WebApplication) => application.getItems([
|
||||
ContentType.Theme,
|
||||
]) as SNComponent[];
|
||||
|
||||
function collectFeatures(features: FeatureDescription[] | undefined, versionMap: Map<string, string>) {
|
||||
if (features == undefined) return;
|
||||
for (const feature of features) {
|
||||
versionMap.set(feature.identifier, feature.version);
|
||||
}
|
||||
}
|
||||
|
||||
const loadLatestVersions = (application: WebApplication) => application.getAvailableSubscriptions()
|
||||
.then(subscriptions => {
|
||||
const versionMap: Map<string, string> = new Map();
|
||||
collectFeatures(subscriptions?.CORE_PLAN?.features, versionMap);
|
||||
collectFeatures(subscriptions?.PLUS_PLAN?.features, versionMap);
|
||||
collectFeatures(subscriptions?.PRO_PLAN?.features, versionMap);
|
||||
return versionMap;
|
||||
});
|
||||
|
||||
export const Extensions: FunctionComponent<{
|
||||
application: WebApplication
|
||||
}> = ({ application }) => {
|
||||
extensionsLatestVersions: ExtensionsLatestVersions,
|
||||
}> = observer(({ application, extensionsLatestVersions }) => {
|
||||
|
||||
const [customUrl, setCustomUrl] = useState('');
|
||||
const [confirmableExtension, setConfirmableExtension] = useState<SNComponent | undefined>(undefined);
|
||||
const [extensions, setExtensions] = useState(loadExtensions(application));
|
||||
const [latestVersions, setLatestVersions] = useState<Map<string, string> | undefined>(undefined);
|
||||
|
||||
const confirmableEnd = useRef<HTMLDivElement>(null);
|
||||
|
||||
@@ -52,12 +36,6 @@ export const Extensions: FunctionComponent<{
|
||||
}
|
||||
}, [confirmableExtension, confirmableEnd]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!latestVersions) {
|
||||
loadLatestVersions(application).then(versions => setLatestVersions(versions));
|
||||
}
|
||||
}, [latestVersions, application]);
|
||||
|
||||
const uninstallExtension = async (extension: SNComponent) => {
|
||||
await application.deleteItem(extension);
|
||||
setExtensions(loadExtensions(application));
|
||||
@@ -94,12 +72,13 @@ export const Extensions: FunctionComponent<{
|
||||
<PreferencesGroup>
|
||||
{
|
||||
extensions
|
||||
.filter(extension => !['modal', 'rooms'].includes(extension.area))
|
||||
.sort((e1, e2) => e1.name.toLowerCase().localeCompare(e2.name.toLowerCase()))
|
||||
.map((extension, i) => (
|
||||
<ExtensionItem
|
||||
application={application}
|
||||
extension={extension}
|
||||
latestVersion={latestVersions?.get(extension.package_info.identifier)}
|
||||
latestVersion={extensionsLatestVersions.getVersion(extension)}
|
||||
first={i === 0}
|
||||
uninstall={uninstallExtension}
|
||||
toggleActivate={toggleActivateExtension} />
|
||||
@@ -140,4 +119,4 @@ export const Extensions: FunctionComponent<{
|
||||
</PreferencesGroup>
|
||||
</PreferencesPane>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user