refactor: new snjs support (#967)

app/assets/javascripts/components/Preferences/panes/Appearance.tsx

@@ -4,12 +4,12 @@ import { sortThemes } from '@/components/QuickSettingsMenu/QuickSettingsMenu';
 import { HorizontalSeparator } from '@/components/Shared/HorizontalSeparator';
 import { Switch } from '@/components/Switch';
 import { WebApplication } from '@/ui_models/application';
-import { GetFeatures } from '@standardnotes/features';
 import {
   ContentType,
   FeatureIdentifier,
   FeatureStatus,
   PrefKey,
+  GetFeatures,
   SNTheme,
 } from '@standardnotes/snjs';
 import { observer } from 'mobx-react-lite';
@@ -61,9 +61,8 @@ export const Appearance: FunctionComponent<Props> = observer(
     );
 
     useEffect(() => {
-      const themesAsItems: DropdownItem[] = (
-        application.items.getDisplayableItems(ContentType.Theme) as SNTheme[]
-      )
+      const themesAsItems: DropdownItem[] = application.items
+        .getDisplayableItems<SNTheme>(ContentType.Theme)
         .filter((theme) => !theme.isLayerable())
         .sort(sortThemes)
         .map((theme) => {

app/assets/javascripts/components/Preferences/panes/ExtensionPane.tsx

@@ -1,79 +0,0 @@
-import {
-  PreferencesGroup,
-  PreferencesSegment,
-} from '@/components/Preferences/components';
-import { WebApplication } from '@/ui_models/application';
-import { ComponentViewer, SNComponent } from '@standardnotes/snjs';
-import { FeatureIdentifier } from '@standardnotes/features';
-import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
-import { ExtensionItem } from './extensions-segments';
-import { ComponentView } from '@/components/ComponentView';
-import { AppState } from '@/ui_models/app_state';
-import { PreferencesMenu } from '@/components/Preferences/PreferencesMenu';
-import { useEffect, useState } from 'preact/hooks';
-
-interface IProps {
-  application: WebApplication;
-  appState: AppState;
-  extension: SNComponent;
-  preferencesMenu: PreferencesMenu;
-}
-
-const urlOverrideForExtension = (extension: SNComponent) => {
-  if (extension.identifier === FeatureIdentifier.CloudLink) {
-    return 'https://extensions.standardnotes.org/components/cloudlink';
-  } else {
-    return undefined;
-  }
-};
-
-export const ExtensionPane: FunctionComponent<IProps> = observer(
-  ({ extension, application, appState, preferencesMenu }) => {
-    const [componentViewer] = useState<ComponentViewer>(
-      application.componentManager.createComponentViewer(
-        extension,
-        undefined,
-        undefined,
-        urlOverrideForExtension(extension)
-      )
-    );
-    const latestVersion =
-      preferencesMenu.extensionsLatestVersions.getVersion(extension);
-
-    useEffect(() => {
-      return () => {
-        application.componentManager.destroyComponentViewer(componentViewer);
-      };
-    }, [application, componentViewer]);
-
-    return (
-      <div className="preferences-extension-pane color-foreground flex-grow flex flex-row overflow-y-auto min-h-0">
-        <div className="flex-grow flex flex-col py-6 items-center">
-          <div className="w-200 max-w-200 flex flex-col">
-            <PreferencesGroup>
-              <ExtensionItem
-                application={application}
-                extension={extension}
-                first={false}
-                uninstall={() =>
-                  application.mutator
-                    .deleteItem(extension)
-                    .then(() => preferencesMenu.loadExtensionsPanes())
-                }
-                latestVersion={latestVersion}
-              />
-              <PreferencesSegment>
-                <ComponentView
-                  application={application}
-                  appState={appState}
-                  componentViewer={componentViewer}
-                />
-              </PreferencesSegment>
-            </PreferencesGroup>
-          </div>
-        </div>
-      </div>
-    );
-  }
-);

app/assets/javascripts/components/Preferences/panes/Extensions.tsx

@@ -13,10 +13,11 @@ import { useEffect, useRef, useState } from 'preact/hooks';
 import { observer } from 'mobx-react-lite';
 
 const loadExtensions = (application: WebApplication) =>
-  application.items.getItems(
-    [ContentType.ActionsExtension, ContentType.Component, ContentType.Theme],
-    true
-  ) as SNComponent[];
+  application.items.getItems([
+    ContentType.ActionsExtension,
+    ContentType.Component,
+    ContentType.Theme,
+  ]) as SNComponent[];
 
 export const Extensions: FunctionComponent<{
   application: WebApplication;

app/assets/javascripts/components/Preferences/panes/backups-segments/EmailBackups.tsx

@@ -13,16 +13,16 @@ import {
   Text,
   Title,
 } from '../../components';
-import {
-  EmailBackupFrequency,
-  MuteFailedBackupsEmailsOption,
-  SettingName,
-} from '@standardnotes/settings';
 import { Dropdown, DropdownItem } from '@/components/Dropdown';
 import { Switch } from '@/components/Switch';
 import { HorizontalSeparator } from '@/components/Shared/HorizontalSeparator';
-import { FeatureIdentifier } from '@standardnotes/features';
-import { FeatureStatus } from '@standardnotes/snjs';
+import {
+  FeatureStatus,
+  FeatureIdentifier,
+  EmailBackupFrequency,
+  MuteFailedBackupsEmailsOption,
+  SettingName,
+} from '@standardnotes/snjs';
 
 type Props = {
   application: WebApplication;

app/assets/javascripts/components/Preferences/panes/backups-segments/cloud-backups/CloudBackupProvider.tsx

@@ -1,11 +1,12 @@
 import { useCallback, useEffect, useState } from 'preact/hooks';
-import { ButtonType, SettingName } from '@standardnotes/snjs';
 import {
+  ButtonType,
+  SettingName,
   CloudProvider,
   DropboxBackupFrequency,
   GoogleDriveBackupFrequency,
   OneDriveBackupFrequency,
-} from '@standardnotes/settings';
+} from '@standardnotes/snjs';
 import { WebApplication } from '@/ui_models/application';
 import { Button } from '@/components/Button';
 import { isDev, openInNewTab } from '@/utils';

app/assets/javascripts/components/Preferences/panes/backups-segments/cloud-backups/index.tsx

@@ -9,14 +9,15 @@ import {
   Title,
 } from '@/components/Preferences/components';
 import { HorizontalSeparator } from '@/components/Shared/HorizontalSeparator';
-import { FeatureIdentifier } from '@standardnotes/features';
-import { FeatureStatus } from '@standardnotes/snjs';
-import { FunctionComponent } from 'preact';
 import {
+  FeatureStatus,
+  FeatureIdentifier,
   CloudProvider,
   MuteFailedCloudBackupsEmailsOption,
   SettingName,
-} from '@standardnotes/settings';
+} from '@standardnotes/snjs';
+import { FunctionComponent } from 'preact';
+
 import { Switch } from '@/components/Switch';
 import { convertStringifiedBooleanToBoolean } from '@/utils';
 import { STRING_FAILED_TO_UPDATE_USER_SETTING } from '@/strings';

app/assets/javascripts/components/Preferences/panes/extensions-segments/ConfirmCustomExtension.tsx

@@ -1,4 +1,4 @@
-import { displayStringForContentType, SNComponent } from '@standardnotes/snjs';
+import { DisplayStringForContentType, SNComponent } from '@standardnotes/snjs';
 import { Button } from '@/components/Button';
 import { FunctionComponent } from 'preact';
 import { Title, Text, Subtitle, PreferencesSegment } from '../../components';
@@ -30,7 +30,7 @@ export const ConfirmCustomExtension: FunctionComponent<{
     },
     {
       label: 'Extension Type',
-      value: displayStringForContentType(component.content_type),
+      value: DisplayStringForContentType(component.content_type),
     },
   ];
 

app/assets/javascripts/components/Preferences/panes/extensions-segments/ExtensionItem.tsx

@@ -47,7 +47,7 @@ export const ExtensionItem: FunctionComponent<ExtensionItemProps> = ({
     const newOfflineOnly = !offlineOnly;
     setOfflineOnly(newOfflineOnly);
     application.mutator
-      .changeAndSaveItem(extension.uuid, (m: any) => {
+      .changeAndSaveItem(extension, (m: any) => {
         if (m.content == undefined) m.content = {};
         m.content.offlineOnly = newOfflineOnly;
       })
@@ -63,7 +63,7 @@ export const ExtensionItem: FunctionComponent<ExtensionItemProps> = ({
   const changeExtensionName = (newName: string) => {
     setExtensionName(newName);
     application.mutator
-      .changeAndSaveItem(extension.uuid, (m: any) => {
+      .changeAndSaveItem(extension, (m: any) => {
         if (m.content == undefined) m.content = {};
         m.content.name = newName;
       })

app/assets/javascripts/components/Preferences/panes/extensions-segments/ExtensionsLatestVersions.ts

@@ -1,6 +1,9 @@
 import { WebApplication } from '@/ui_models/application';
-import { FeatureDescription } from '@standardnotes/features';
-import { SNComponent, ClientDisplayableError } from '@standardnotes/snjs';
+import {
+  SNComponent,
+  ClientDisplayableError,
+  FeatureDescription,
+} from '@standardnotes/snjs';
 import { makeAutoObservable, observable } from 'mobx';
 
 export class ExtensionsLatestVersions {

app/assets/javascripts/components/Preferences/panes/general-segments/Defaults.tsx

@@ -34,7 +34,7 @@ const makeEditorDefault = (
   if (currentDefault) {
     removeEditorDefault(application, currentDefault);
   }
-  application.mutator.changeAndSaveItem(component.uuid, (m) => {
+  application.mutator.changeAndSaveItem(component, (m) => {
     const mutator = m as ComponentMutator;
     mutator.defaultEditor = true;
   });
@@ -44,7 +44,7 @@ const removeEditorDefault = (
   application: WebApplication,
   component: SNComponent
 ) => {
-  application.mutator.changeAndSaveItem(component.uuid, (m) => {
+  application.mutator.changeAndSaveItem(component, (m) => {
     const mutator = m as ComponentMutator;
     mutator.defaultEditor = false;
   });

app/assets/javascripts/components/Preferences/panes/general-segments/Labs.tsx

@@ -1,4 +1,3 @@
-import { FindNativeFeature } from '@standardnotes/features';
 import { Switch } from '@/components/Switch';
 import {
   PreferencesGroup,
@@ -8,7 +7,11 @@ import {
   Title,
 } from '@/components/Preferences/components';
 import { WebApplication } from '@/ui_models/application';
-import { FeatureIdentifier, FeatureStatus } from '@standardnotes/snjs';
+import {
+  FeatureIdentifier,
+  FeatureStatus,
+  FindNativeFeature,
+} from '@standardnotes/snjs';
 import { FunctionComponent } from 'preact';
 import { useCallback, useEffect, useState } from 'preact/hooks';
 import { usePremiumModal } from '@/components/Premium';

app/assets/javascripts/components/Preferences/panes/security-segments/Privacy.tsx

@@ -12,7 +12,7 @@ import {
   MuteSignInEmailsOption,
   LogSessionUserAgentOption,
   SettingName,
-} from '@standardnotes/settings';
+} from '@standardnotes/snjs';
 import { observer } from 'mobx-react-lite';
 import { FunctionalComponent } from 'preact';
 import { useCallback, useEffect, useState } from 'preact/hooks';