refactor: format and lint codebase (#971)

app/assets/javascripts/Components/Preferences/Panes/Account/Sync.tsx

@@ -0,0 +1,65 @@
+import {
+  PreferencesGroup,
+  PreferencesSegment,
+  Text,
+  Title,
+} from '@/Components/Preferences/PreferencesComponents'
+import { Button } from '@/Components/Button/Button'
+import { SyncQueueStrategy, dateToLocalizedString } from '@standardnotes/snjs'
+import { STRING_GENERIC_SYNC_ERROR } from '@/Strings'
+import { useState } from '@node_modules/preact/hooks'
+import { observer } from 'mobx-react-lite'
+import { WebApplication } from '@/UIModels/Application'
+import { FunctionComponent } from 'preact'
+
+type Props = {
+  application: WebApplication
+}
+
+export const formatLastSyncDate = (lastUpdatedDate: Date) => {
+  return dateToLocalizedString(lastUpdatedDate)
+}
+
+export const Sync: FunctionComponent<Props> = observer(({ application }: Props) => {
+  const [isSyncingInProgress, setIsSyncingInProgress] = useState(false)
+  const [lastSyncDate, setLastSyncDate] = useState(
+    formatLastSyncDate(application.sync.getLastSyncDate() as Date),
+  )
+
+  const doSynchronization = async () => {
+    setIsSyncingInProgress(true)
+
+    const response = await application.sync.sync({
+      queueStrategy: SyncQueueStrategy.ForceSpawnNew,
+      checkIntegrity: true,
+    })
+    setIsSyncingInProgress(false)
+    if (response && (response as any).error) {
+      application.alertService.alert(STRING_GENERIC_SYNC_ERROR).catch(console.error)
+    } else {
+      setLastSyncDate(formatLastSyncDate(application.sync.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"
+              variant="normal"
+              label="Sync now"
+              disabled={isSyncingInProgress}
+              onClick={doSynchronization}
+            />
+          </div>
+        </div>
+      </PreferencesSegment>
+    </PreferencesGroup>
+  )
+})