feat: add "sync" pane to preferences -> account tab (#621)

* feat: add "sync" pane to preferences -> account tab

* chore: configure eslint to add new line at the end of file and remove trailing spaces

* chore: add newline at the end of file

app/assets/javascripts/components/Button.tsx

@@ -1,6 +1,6 @@
 import { FunctionComponent } from 'preact';
 
-const baseClass = `rounded px-4 py-1.75 font-bold text-sm fit-content cursor-pointer`;
+const baseClass = `rounded px-4 py-1.75 font-bold text-sm fit-content`;
 
 const normalClass = `${baseClass} bg-default color-text border-solid border-gray-300 border-1 \
 focus:bg-contrast hover:bg-contrast`;
@@ -12,15 +12,19 @@ export const Button: FunctionComponent<{
   type: 'normal' | 'primary';
   label: string;
   onClick: () => void;
-}> = ({ type, label, className = '', onClick }) => {
+  disabled?: boolean;
+}> = ({ type, label, className = '', onClick, disabled = false }) => {
   const buttonClass = type === 'primary' ? primaryClass : normalClass;
+  const cursorClass = disabled ? 'cursor-default' : 'cursor-pointer';
+
   return (
     <button
-      className={`${buttonClass} ${className}`}
+      className={`${buttonClass} ${cursorClass} ${className}`}
       onClick={(e) => {
         onClick();
         e.preventDefault();
       }}
+      disabled={disabled}
     >
       {label}
     </button>

app/assets/javascripts/preferences/PreferencesView.tsx

@@ -1,19 +1,21 @@
 import { RoundIconButton } from '@/components/RoundIconButton';
 import { TitleBar, Title } from '@/components/TitleBar';
 import { FunctionComponent } from 'preact';
-import { HelpAndFeedback, Security } from './panes';
+import { AccountPreferences, HelpAndFeedback, Security } from './panes';
 import { observer } from 'mobx-react-lite';
 import { PreferencesMenu } from './preferences-menu';
 import { PreferencesMenuView } from './PreferencesMenuView';
+import { WebApplication } from '@/ui_models/application';
 
 const PaneSelector: FunctionComponent<{
   prefs: PreferencesMenu;
-}> = observer(({ prefs: menu }) => {
+  application: WebApplication;
+}> = observer(({ prefs: menu, application }) => {
   switch (menu.selectedPaneId) {
     case 'general':
       return null;
     case 'account':
-      return null;
+      return <AccountPreferences application={application} />;
     case 'appearance':
       return null;
     case 'security':
@@ -33,15 +35,19 @@ const PaneSelector: FunctionComponent<{
 
 const PreferencesCanvas: FunctionComponent<{
   preferences: PreferencesMenu;
-}> = observer(({ preferences: prefs }) => (
+  application: WebApplication;
+}> = observer(({ preferences: prefs, application }) => (
   <div className="flex flex-row flex-grow min-h-0 justify-between">
     <PreferencesMenuView menu={prefs}></PreferencesMenuView>
-    <PaneSelector prefs={prefs} />
+    <PaneSelector prefs={prefs} application={application} />
   </div>
 ));
 
-const PreferencesView: FunctionComponent<{ close: () => void }> = observer(
-  ({ close }) => {
+const PreferencesView: FunctionComponent<{
+  close: () => void;
+  application: WebApplication;
+}> = observer(
+  ({ close, application }) => {
     const prefs = new PreferencesMenu();
 
     return (
@@ -58,7 +64,7 @@ const PreferencesView: FunctionComponent<{ close: () => void }> = observer(
             icon="close"
           />
         </TitleBar>
-        <PreferencesCanvas preferences={prefs} />
+        <PreferencesCanvas preferences={prefs} application={application} />
       </div>
     );
   }
@@ -66,12 +72,16 @@ const PreferencesView: FunctionComponent<{ close: () => void }> = observer(
 
 export interface PreferencesWrapperProps {
   appState: { preferences: { isOpen: boolean; closePreferences: () => void } };
+  application: WebApplication;
 }
 
 export const PreferencesViewWrapper: FunctionComponent<PreferencesWrapperProps> =
-  observer(({ appState }) => {
+  observer(({ appState, application }) => {
     if (!appState.preferences.isOpen) return null;
     return (
-      <PreferencesView close={() => appState.preferences.closePreferences()} />
+      <PreferencesView
+        application={application}
+        close={() => appState.preferences.closePreferences()}
+      />
     );
   });

app/assets/javascripts/preferences/panes/AccountPreferences.tsx

@@ -0,0 +1,12 @@
+import { Sync } from '@/preferences/panes/account';
+import { PreferencesPane } from '@/preferences/components';
+import { observer } from 'mobx-react-lite';
+import { WebApplication } from '@/ui_models/application';
+
+export const AccountPreferences = observer(({application}: {application: WebApplication}) => {
+  return (
+    <PreferencesPane>
+      <Sync application={application} />
+    </PreferencesPane>
+  );
+});

app/assets/javascripts/preferences/panes/account/Sync.tsx

@@ -0,0 +1,60 @@
+import { PreferencesGroup, PreferencesSegment, Text, Title } from '@/preferences/components';
+import { Button } from '@/components/Button';
+import { SyncQueueStrategy } from '@node_modules/@standardnotes/snjs';
+import { STRING_GENERIC_SYNC_ERROR } from '@/strings';
+import { useState } from '@node_modules/preact/hooks';
+import { dateToLocalizedString } from '@/utils';
+import { observer } from '@node_modules/mobx-react-lite';
+import { WebApplication } from '@/ui_models/application';
+
+type Props = {
+  application: WebApplication;
+};
+
+const Sync = observer(({ application }: Props) => {
+  const formatLastSyncDate = (lastUpdatedDate: Date) => {
+    return dateToLocalizedString(lastUpdatedDate);
+  };
+
+  const [isSyncingInProgress, setIsSyncingInProgress] = useState(false);
+  const [lastSyncDate, setLastSyncDate] = useState(formatLastSyncDate(application.getLastSyncDate() as Date));
+
+  const doSynchronization = async () => {
+    setIsSyncingInProgress(true);
+
+    const response = await application.sync({
+      queueStrategy: SyncQueueStrategy.ForceSpawnNew,
+      checkIntegrity: true
+    });
+    setIsSyncingInProgress(false);
+    if (response && response.error) {
+      application.alertService!.alert(STRING_GENERIC_SYNC_ERROR);
+    } else {
+      setLastSyncDate(formatLastSyncDate(application.getLastSyncDate() as Date));
+    }
+  };
+
+  return (
+    <PreferencesGroup>
+      <PreferencesSegment>
+        <div className='flex flex-row items-center'>
+          <div className='flex-grow flex flex-col'>
+            <Title>Sync</Title>
+            <Text>
+              Last synced <span className='font-bold'>on {lastSyncDate}</span>
+            </Text>
+            <Button
+              className='min-w-20 mt-3'
+              type='normal'
+              label='Sync now'
+              disabled={isSyncingInProgress}
+              onClick={doSynchronization}
+            />
+          </div>
+        </div>
+      </PreferencesSegment>
+    </PreferencesGroup>
+  );
+});
+
+export default Sync;

app/assets/javascripts/preferences/panes/account/index.ts

@@ -0,0 +1 @@
+export { default as Sync } from './Sync';

app/assets/javascripts/preferences/panes/index.ts

@@ -1,2 +1,3 @@
 export * from './HelpFeedback';
 export * from './Security';
+export * from './AccountPreferences';

app/assets/javascripts/views/application/application-view.pug

@@ -28,6 +28,7 @@
   )
   preferences(
     app-state='self.appState'
+    application='self.application'
   )
   challenge-modal(
     ng-repeat="challenge in self.challenges track by challenge.id"