refactor: mobile settings drawer (#6013)

* chore(wip): kickoff refactor profile drawer * feat: add export backup * feat: add network status * chore: remove debris * style: reduce profile action buttons vertical spacing * chore(wip): kickoff refactor settings drawer * feat: add stronghold unlock logic & polish imports * feat: finish up drawer routing * fix: subscription error * enhancement: html custom tags and code conventions --------- Co-authored-by: Jean Ribeiro <contact@jeanribeiro.dev>
iotaledger · Mar 3, 2023 · 1095bd4 · 1095bd4
1 parent 54d6ac3
commit 1095bd4
Show file tree

Hide file tree

Showing 36 changed files with 284 additions and 316 deletions.
diff --git a/packages/mobile/components/Drawer.svelte b/packages/mobile/components/Drawer.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { get } from 'svelte/store'
     import { fade, fly } from 'svelte/transition'
 
     import { Icon, Text, TextType } from '@ui'
@@ -11,11 +10,10 @@
         DRAWER_IN_ANIMATION_DURATION_MS,
         DRAWER_OUT_ANIMATION_DURATION_MS,
         DRAWER_STATIC_TITLE_TITLES,
-        getDrawerRouter,
     } from '@/auxiliary/drawer'
-    import { resetRouterWithDrawerDelay } from '@/routers'
     import { Icon as IconEnum } from '@lib/auxiliary/icon'
 
+    export let onBack: () => unknown = () => {}
     export let onClose: () => unknown = () => {}
     export let allowBack: boolean = false
     export let title: string | undefined = undefined
@@ -52,33 +50,19 @@
         moving = false
         const panelSize = enterFromSide ? panelWidth : panelHeight
         if (position < -panelSize / 3) {
-            handleClose()
+            onClose && onClose()
         } else {
             position = 0
         }
     }
-
-    function handleClose(): void {
-        const drawerRouter = get(getDrawerRouter(id))
-        if (drawerRouter) {
-            resetRouterWithDrawerDelay(drawerRouter)
-        }
-        onClose && onClose()
-    }
-    function onBackClick(): void {
-        const drawerRouter = get(getDrawerRouter(id))
-        if (drawerRouter) {
-            drawerRouter.previous()
-        }
-    }
 </script>
 
 <svelte:window on:touchend={onTouchEnd} on:touchmove={onTouchMove} />
 <drawer class="fixed top-0 left-0 w-screen h-screen">
     <overlay
         in:fade|local={{ duration: DRAWER_IN_ANIMATION_DURATION_MS }}
         out:fade|local={{ duration: DRAWER_OUT_ANIMATION_DURATION_MS }}
-        on:click={handleClose}
+        on:click={onClose}
         class="fixed top-0 left-0 w-full h-full z-0 bg-gray-700 dark:bg-gray-900 bg-opacity-60 dark:bg-opacity-60"
     />
     <panel
@@ -102,7 +86,7 @@
             <div class="grid grid-cols-4 h-6 mb-6">
                 <div class="col-span-1">
                     {#if allowBack}
-                        <button type="button" on:click={onBackClick}>
+                        <button type="button" on:click={onBack}>
                             <Icon width="24" height="24" icon={IconEnum.ArrowLeft} classes="text-gray-500" />
                         </button>
                     {/if}

diff --git a/packages/mobile/components/drawers/DrawerManager.svelte b/packages/mobile/components/drawers/DrawerManager.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+    import { get } from 'svelte/store'
+
     import { Drawer } from '@components'
     import {
         AccountActionsDrawer,
@@ -21,7 +23,8 @@
         SendDrawer,
     } from './'
 
-    import { closeDrawer, DrawerId, drawers } from '@/auxiliary/drawer'
+    import { closeDrawer, DrawerId, drawers, getDrawerRouter } from '@/auxiliary/drawer'
+    import { profileRouter, sendRouter } from '@/routers'
 
     const COMPONENTS = {
         [DrawerId.AccountSwitcher]: AccountSwitcherDrawer,
@@ -43,11 +46,28 @@
         [DrawerId.Profile]: ProfileDrawer,
         [DrawerId.NetworkStatus]: NetworkStatusDrawer,
     }
+
+    function onClose(drawerId: DrawerId): void {
+        if (drawerId === DrawerId.Profile) {
+            $profileRouter.closeDrawer()
+        } else if (drawerId === DrawerId.Send) {
+            $sendRouter.closeDrawer()
+        } else {
+            closeDrawer(drawerId)
+        }
+    }
+
+    function onBack(drawerId: DrawerId): void {
+        const drawerRouter = get(getDrawerRouter(drawerId))
+        if (drawerRouter) {
+            drawerRouter.previous()
+        }
+    }
 </script>
 
 {#each $drawers as drawer}
     {@const drawerId = drawer.id}
-    <Drawer id={drawerId} {...drawer.props} onClose={() => closeDrawer(drawerId)}>
+    <Drawer id={drawerId} {...drawer.props} onClose={() => onClose(drawerId)} onBack={() => onBack(drawerId)}>
         <svelte:component this={COMPONENTS[drawerId]} {...drawer.props} />
     </Drawer>
 {/each}
diff --git a/packages/mobile/components/drawers/profile/views/settings/SettingsRouter.svelte b/packages/mobile/components/drawers/profile/views/settings/SettingsRouter.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+    import { SETTINGS_ROUTE_META } from '@/contexts/settings'
+    import { settingsRoute, SettingsRoute } from '@/routers'
+    import { SettingsIndexView } from './views'
+</script>
+
+{#if $settingsRoute === SettingsRoute.Init}
+    <SettingsIndexView />
+{:else}
+    <svelte:component this={SETTINGS_ROUTE_META[$settingsRoute].view} />
+{/if}
diff --git a/packages/mobile/components/drawers/profile/views/settings/SettingsView.svelte b/packages/mobile/components/drawers/profile/views/settings/SettingsView.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+    import SettingsRouter from './SettingsRouter.svelte'
+</script>
+
+<SettingsRouter />
diff --git a/packages/mobile/components/drawers/profile/views/settings/index.js b/packages/mobile/components/drawers/profile/views/settings/index.js
@@ -1 +1,3 @@
 export { default as SettingsView } from './SettingsView.svelte'
+
+export * from './views'
diff --git a/...e/views/settings/views/AppLockView.svelte → ...e/views/settings/views/AppLockView.svelte b/...e/views/settings/views/AppLockView.svelte → ...e/views/settings/views/AppLockView.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
+    import { Radio, Text, TextType } from '@ui'
+
     import { localize } from '@core/i18n'
     import { activeProfile, updateActiveProfileSettings } from '@core/profile'
     import type { IDropdownChoice } from '@core/utils'
-    import { Radio, Text, TextType } from '@ui'
 
     let selectedLockTimeout: number = $activeProfile?.settings?.lockScreenTimeoutInMinutes
     $: selectedLockTimeout, updateActiveProfileSettings({ lockScreenTimeoutInMinutes: selectedLockTimeout })
@@ -22,9 +23,9 @@
     }
 </script>
 
-<div class="flex flex-col space-y-4 h-full">
+<app-lock-view class="flex flex-col space-y-4 h-full">
     <Text type={TextType.p} secondary>{localize('views.settings.appLock.description')}</Text>
     {#each lockScreenTimeoutOptions() as option}
         <Radio value={option.value} bind:group={selectedLockTimeout} label={option.label} classes="p-2" />
     {/each}
-</div>
+</app-lock-view>
diff --git a/.../settings/views/ChangePasswordView.svelte → .../settings/views/ChangePasswordView.svelte b/.../settings/views/ChangePasswordView.svelte → .../settings/views/ChangePasswordView.svelte
@@ -1,11 +1,14 @@
 <script lang="ts">
-    import { exportStronghold } from '@contexts/settings'
+    import zxcvbn from 'zxcvbn'
+
+    import { Button, ButtonSize, Checkbox, PasswordInput, Text, TextType } from '@ui'
+
     import { localize } from '@core/i18n'
     import { MAX_STRONGHOLD_PASSWORD_LENGTH } from '@core/profile'
     import { changePasswordAndUnlockStronghold } from '@core/profile-manager'
     import { PASSWORD_REASON_MAP } from '@core/stronghold'
-    import { Button, ButtonSize, Checkbox, PasswordInput, Text, TextType } from '@ui'
-    import zxcvbn from 'zxcvbn'
+
+    import { exportStronghold } from '@contexts/settings'
 
     let exportStrongholdChecked: boolean
     let startOfPasswordChange: number
@@ -118,7 +121,7 @@
     }
 </script>
 
-<div class="flex flex-col justify-between h-full">
+<change-password-view class="flex flex-col justify-between h-full">
     <div class="flex flex-col space-y-4">
         <Text type={TextType.p} secondary classes="mb-1">{localize('views.settings.changePassword.description')}</Text>
         <PasswordInput
@@ -162,4 +165,4 @@
     >
         {localize('views.settings.changePassword.title')}
     </Button>
-</div>
+</change-password-view>
diff --git a/...ttings/views/ChangeProfileNameView.svelte → ...ttings/views/ChangeProfileNameView.svelte b/...ttings/views/ChangeProfileNameView.svelte → ...ttings/views/ChangeProfileNameView.svelte
@@ -1,15 +1,17 @@
 <script lang="ts">
-    import { showAppNotification } from '@auxiliary/notification'
+    import { Button, ButtonSize, HTMLButtonType, Input, Text, TextType } from '@ui'
+
     import { localize } from '@core/i18n'
     import { activeProfile, updateActiveProfile, validateProfileName } from '@core/profile'
-    import { Button, ButtonSize, HTMLButtonType, Input, Text, TextType } from '@ui'
+
+    import { showAppNotification } from '@auxiliary/notification'
 
     let newName = $activeProfile?.name
     let error = ''
 
     $: trimmedProfileName = newName.trim()
     $: newName, (error = '')
-    $: disabled = invalidName(trimmedProfileName)
+    $: disabled = isInvalidName(trimmedProfileName)
 
     function onSubmitClick(): void {
         try {
@@ -24,7 +26,7 @@
         }
     }
 
-    function invalidName(name: string): boolean {
+    function isInvalidName(name: string): boolean {
         const isSameName = name === $activeProfile?.name
         const isTooShort = name?.length < 1
         return isSameName || isTooShort

diff --git a/.../views/settings/views/CurrencyView.svelte → .../views/settings/views/CurrencyView.svelte b/.../views/settings/views/CurrencyView.svelte → .../views/settings/views/CurrencyView.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
+    import { Radio } from '@ui'
+
     import { MarketCurrency } from '@core/market'
     import { activeProfile, updateActiveProfileSettings } from '@core/profile'
     import type { IDropdownChoice } from '@core/utils'
-    import { Radio } from '@ui'
 
     let currencyList: IDropdownChoice[]
     $: currencyList = Object.values(MarketCurrency)
@@ -13,8 +14,8 @@
     $: selectedCurrency, updateActiveProfileSettings({ marketCurrency: selectedCurrency })
 </script>
 
-<div class="flex flex-col overflow-y-auto">
+<currency-view class="flex flex-col overflow-y-auto">
     {#each currencyList as currency}
         <Radio value={currency.value} bind:group={selectedCurrency} label={currency.label} classes="p-2" />
     {/each}
-</div>
+</currency-view>
diff --git a/...s/settings/views/DeleteProfileView.svelte → ...s/settings/views/DeleteProfileView.svelte b/...s/settings/views/DeleteProfileView.svelte → ...s/settings/views/DeleteProfileView.svelte
@@ -1,15 +1,17 @@
 <script lang="ts">
-    import { deleteProfile } from '@contexts/settings'
+    import { Button, ButtonSize, ButtonVariant, PasswordInput, Text, TextType } from '@ui'
+
     import { localize } from '@core/i18n'
     import { isSoftwareProfile } from '@core/profile'
     import { setStrongholdPassword } from '@core/profile-manager'
-    import { Button, ButtonSize, ButtonVariant, PasswordInput, Text, TextType } from '@ui'
+
+    import { deleteProfile } from '@contexts/settings'
 
     let isBusy = false
     let error = ''
     let password: string
 
-    async function handleDeleteClick(): Promise<void> {
+    async function onDelete(): Promise<void> {
         isBusy = true
         error = ''
 
@@ -24,7 +26,7 @@
     }
 </script>
 
-<div class="flex-1 flex flex-col justify-between space-y-4">
+<delete-profile-view class="flex-1 flex flex-col justify-between space-y-4">
     <div class="flex flex-col space-y-4">
         <Text type={TextType.p}>{localize('popups.deleteProfile.confirmation')}</Text>
         {#if $isSoftwareProfile}
@@ -36,7 +38,7 @@
                 showRevealToggle
                 placeholder={localize('general.password')}
                 autofocus
-                submitHandler={handleDeleteClick}
+                submitHandler={onDelete}
                 disabled={isBusy}
             />
         {/if}
@@ -45,10 +47,10 @@
         disabled={(!password && $isSoftwareProfile) || isBusy}
         size={ButtonSize.Medium}
         classes="w-full"
-        onClick={handleDeleteClick}
+        onClick={onDelete}
         variant={ButtonVariant.Warning}
         {isBusy}
     >
         {localize('actions.delete')}
     </Button>
-</div>
+</delete-profile-view>
diff --git a/...ews/settings/views/DiagnosticsView.svelte → ...ews/settings/views/DiagnosticsView.svelte b/...ews/settings/views/DiagnosticsView.svelte → ...ews/settings/views/DiagnosticsView.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
+    import { onMount } from 'svelte'
+
+    import { Button, ButtonSize, Text, TextType } from '@ui'
+
     import { appSettings, appVersionDetails, Platform } from '@core/app'
     import { localize } from '@core/i18n'
     import { activeProfile } from '@core/profile'
     import { setClipboard } from '@core/utils'
-    import { Button, ButtonSize, Text, TextType } from '@ui'
-    import { onMount } from 'svelte'
 
     let contentApp = ''
     let contentSystem = ''
@@ -34,7 +36,7 @@
         void Platform.getDiagnostics().then((values) => (contentSystem = concatenateInfo(values)))
     })
 
-    function handleCopyClick(): void {
+    function onCopyClick(): void {
         setClipboard(contentApp + '\r\n' + contentSystem)
     }
 
@@ -43,10 +45,10 @@
     }
 </script>
 
-<div class="flex-1 flex flex-col justify-between space-y-4">
+<diagnostics-view class="flex-1 flex flex-col justify-between space-y-4">
     <div class="flex flex-col">
         <Text type={TextType.pre} secondary>{contentApp}</Text>
         <Text type={TextType.pre} secondary>{contentSystem}</Text>
     </div>
-    <Button size={ButtonSize.Medium} classes="w-full" onClick={handleCopyClick}>{localize('actions.copy')}</Button>
-</div>
+    <Button size={ButtonSize.Medium} classes="w-full" onClick={onCopyClick}>{localize('actions.copy')}</Button>
+</diagnostics-view>
diff --git a/.../views/settings/views/ErrorLogView.svelte → .../views/settings/views/ErrorLogView.svelte b/.../views/settings/views/ErrorLogView.svelte → .../views/settings/views/ErrorLogView.svelte
@@ -1,14 +1,15 @@
 <script lang="ts">
+    import { Button, ButtonSize, Text, TextType } from '@ui'
+
     import { errorLog } from '@core/error'
     import { localize } from '@core/i18n'
     import { setClipboard } from '@core/utils'
-    import { Button, ButtonSize, Text, TextType } from '@ui'
 
-    function handleClearClick(): void {
+    function onClearClick(): void {
         errorLog.set([])
     }
 
-    function handleCopyClick(): void {
+    function onCopyClick(): void {
         const str = []
 
         for (const err of $errorLog) {
@@ -21,7 +22,7 @@
     }
 </script>
 
-<div class="flex flex-col justify-between space-y-4 flex-1 relative">
+<error-log-view class="flex flex-col justify-between space-y-4 flex-1 relative">
     <div class="log flex flex-col overflow-y-auto flex-1 space-y-7">
         {#if $errorLog.length > 0}
             {#each $errorLog as error}
@@ -39,15 +40,15 @@
     </div>
     {#if $errorLog.length > 0}
         <div class="flex w-full justify-center space-x-4">
-            <Button size={ButtonSize.Medium} classes="w-full" onClick={handleClearClick}>
+            <Button size={ButtonSize.Medium} classes="w-full" onClick={onClearClick}>
                 {localize('actions.clear')}
             </Button>
-            <Button size={ButtonSize.Medium} classes="w-full" onClick={handleCopyClick}>
+            <Button size={ButtonSize.Medium} classes="w-full" onClick={onCopyClick}>
                 {localize('actions.copy')}
             </Button>
         </div>
     {/if}
-</div>
+</error-log-view>
 
 <style type="text/scss">
     .log {