From cc39ac6eb0e9705a9884b7fd94cbdc10c7edcc51 Mon Sep 17 00:00:00 2001
From: 0xZensh <txr1883@gmail.com>
Date: Sun, 15 Sep 2024 21:05:53 +0800
Subject: [PATCH] fix: fix 'myInfo' state

---
 .../components/messages/ChannelDetail.svelte  |  4 +-
 .../src/lib/components/messages/Chat.svelte   |  4 +-
 .../src/lib/components/messages/Home.svelte   | 21 ++++---
 .../src/lib/components/messages/Index.svelte  | 45 ++++++++------
 .../components/messages/MyChannelList.svelte  |  5 +-
 .../components/messages/ProfileDetail.svelte  | 60 ++++++++-----------
 .../messages/UserRegisterModel.svelte         | 49 +++------------
 .../src/lib/stores/message.ts                 |  5 ++
 8 files changed, 83 insertions(+), 110 deletions(-)

diff --git a/src/ic_panda_frontend/src/lib/components/messages/ChannelDetail.svelte b/src/ic_panda_frontend/src/lib/components/messages/ChannelDetail.svelte
index 8beb9cb..2de461a 100644
--- a/src/ic_panda_frontend/src/lib/components/messages/ChannelDetail.svelte
+++ b/src/ic_panda_frontend/src/lib/components/messages/ChannelDetail.svelte
@@ -8,7 +8,6 @@
   import IconPanda from '$lib/components/icons/IconPanda.svelte'
   import { toastRun } from '$lib/stores/toast'
   import {
-    myMessageStateAsync,
     type ChannelInfoEx,
     type MyMessageState
   } from '$src/lib/stores/message'
@@ -20,12 +19,12 @@
   import ChannelSetting from './ChannelSetting.svelte'
 
   export let channelId: string
+  export let myState: MyMessageState
 
   const toastStore = getToastStore()
   const { canister, id } = ChannelAPI.parseChannelParam(channelId)
   const onChatBack = getContext('onChatBack') as () => void
 
-  let myState: MyMessageState
   let myInfo: Readable<UserInfo>
   let channelInfo: Readable<ChannelInfoEx>
 
@@ -49,7 +48,6 @@
     const { abort, finally: onfinally } = toastRun(
       async (signal: AbortSignal) => {
         if (canister) {
-          myState = await myMessageStateAsync()
           myInfo = myState.info as Readable<UserInfo>
           channelInfo = await myState.loadChannelInfo(canister, id)
           openSettings = !$channelInfo._kek
diff --git a/src/ic_panda_frontend/src/lib/components/messages/Chat.svelte b/src/ic_panda_frontend/src/lib/components/messages/Chat.svelte
index f105380..d6eb22f 100644
--- a/src/ic_panda_frontend/src/lib/components/messages/Chat.svelte
+++ b/src/ic_panda_frontend/src/lib/components/messages/Chat.svelte
@@ -44,7 +44,7 @@
         ? ''
         : 'max-sm:-translate-x-full'} grid grid-rows-[1fr_auto] border-r border-surface-500/30 bg-white max-sm:shadow-sm sm:rounded-tl-2xl"
     >
-      <MyChannelList />
+      <MyChannelList {myState} />
       <footer class="border-t border-surface-500/30">
         <button
           type="button"
@@ -73,7 +73,7 @@
     >
       {#key channelId}
         {#if channelId && channelId !== 'profile'}
-          <ChannelDetail {channelId} />
+          <ChannelDetail {channelId} {myState} />
         {:else}
           <div class="h-[60px] px-4 py-2 md:hidden">
             <button class="btn -ml-6" on:click={onChatBack}
diff --git a/src/ic_panda_frontend/src/lib/components/messages/Home.svelte b/src/ic_panda_frontend/src/lib/components/messages/Home.svelte
index 560db1b..59b246c 100644
--- a/src/ic_panda_frontend/src/lib/components/messages/Home.svelte
+++ b/src/ic_panda_frontend/src/lib/components/messages/Home.svelte
@@ -12,13 +12,13 @@
   import { writable, type Readable, type Writable } from 'svelte/store'
   import UserRegisterModel from './UserRegisterModel.svelte'
 
-  export let myState: MyMessageState | null
-  export let myInfo: Readable<UserInfo | null>
+  export let myState: MyMessageState
 
   const toastStore = getToastStore()
   const modalStore = getModalStore()
   const latest_users: Writable<UserInfo[]> = writable([])
 
+  let myInfo: Readable<UserInfo | null> = myState.info
   let users_total = 0n
   let names_total = 0n
   let channels_total = 0n
@@ -26,16 +26,21 @@
 
   function getStartedHandler() {
     toastRun(async () => {
-      if (!myState || myState.principal.isAnonymous()) {
+      if (myState.principal.isAnonymous()) {
         const res = await signIn({})
         myState = await myMessageStateAsync()
+        await myState.refreshAllState(true)
         myInfo = myState.info
+        await tick()
+
         if (!$myInfo && res.success == 'ok') {
           modalStore.trigger({
             type: 'component',
             component: {
               ref: UserRegisterModel,
-              props: {}
+              props: {
+                myState
+              }
             }
           })
         }
@@ -44,7 +49,9 @@
           type: 'component',
           component: {
             ref: UserRegisterModel,
-            props: {}
+            props: {
+              myState
+            }
           }
         })
       }
@@ -53,10 +60,6 @@
 
   onMount(() => {
     const { abort } = toastRun(async () => {
-      if (!myState) {
-        myState = await myMessageStateAsync()
-      }
-
       users_total = myState.api.state?.users_total || 0n
       names_total = myState.api.state?.names_total || 0n
       await tick()
diff --git a/src/ic_panda_frontend/src/lib/components/messages/Index.svelte b/src/ic_panda_frontend/src/lib/components/messages/Index.svelte
index 6fca4fa..d27e0cc 100644
--- a/src/ic_panda_frontend/src/lib/components/messages/Index.svelte
+++ b/src/ic_panda_frontend/src/lib/components/messages/Index.svelte
@@ -23,23 +23,32 @@
   async function initState() {
     myState = await myMessageStateAsync()
     myInfo = myState.info
+  }
+
+  async function refreshState() {
+    if (myState.isReady()) {
+      if (!myInfo_) {
+        myInfo_ = myInfo as Readable<UserInfo>
+      }
+      return
+    }
+
+    const iv = await myState.myIV()
+    const mk = await myState.masterKey(iv)
     myInfo_ = myInfo as Readable<UserInfo>
-    if ($myInfo) {
-      const iv = await myState.myIV()
-      const mk = await myState.masterKey(iv)
 
-      if (!mk || !mk.isOpened() || myState.masterKeyKind() !== mk.kind) {
-        modalStore.trigger({
-          type: 'component',
-          component: {
-            ref: PasswordModel,
-            props: {
-              myState: myState,
-              masterKey: mk
-            }
+    if (!mk || !mk.isOpened() || myState.masterKeyKind() !== mk.kind) {
+      modalStore.close()
+      modalStore.trigger({
+        type: 'component',
+        component: {
+          ref: PasswordModel,
+          props: {
+            myState: myState,
+            masterKey: mk
           }
-        })
-      }
+        }
+      })
     }
   }
 
@@ -54,13 +63,15 @@
         $authStore.identity.getPrincipal().compareTo(myState.principal) != 'eq'
       ) {
         toastRun(initState, toastStore)
+      } else if ($myInfo) {
+        refreshState()
       }
     }
   }
 </script>
 
-{#if $myInfo}
+{#if myInfo_}
   <Chat {myState} myInfo={myInfo_} />
-{:else}
-  <Home {myState} {myInfo} />
+{:else if myState}
+  <Home {myState} />
 {/if}
diff --git a/src/ic_panda_frontend/src/lib/components/messages/MyChannelList.svelte b/src/ic_panda_frontend/src/lib/components/messages/MyChannelList.svelte
index 4e41cc2..9f18614 100644
--- a/src/ic_panda_frontend/src/lib/components/messages/MyChannelList.svelte
+++ b/src/ic_panda_frontend/src/lib/components/messages/MyChannelList.svelte
@@ -6,7 +6,6 @@
   import { toastRun } from '$lib/stores/toast'
   import { isActive } from '$lib/utils/window'
   import {
-    myMessageStateAsync,
     type ChannelBasicInfoEx,
     type MyMessageState
   } from '$src/lib/stores/message'
@@ -15,9 +14,10 @@
   import { readable, type Readable } from 'svelte/store'
   import ChannelCreateModel from './ChannelCreateModel.svelte'
 
+  export let myState: MyMessageState
+
   const toastStore = getToastStore()
 
-  let myState: MyMessageState
   let myChannels: Readable<ChannelBasicInfoEx[]> = readable([])
   let filterValue: string = ''
 
@@ -37,7 +37,6 @@
 
   onMount(() => {
     const { abort } = toastRun(async (signal: AbortSignal) => {
-      myState = await myMessageStateAsync()
       myChannels = await myState.loadMyChannelsStream()
       await myState.refreshMyChannels(signal)
       const timer = setInterval(() => {
diff --git a/src/ic_panda_frontend/src/lib/components/messages/ProfileDetail.svelte b/src/ic_panda_frontend/src/lib/components/messages/ProfileDetail.svelte
index a835247..8bbf5b1 100644
--- a/src/ic_panda_frontend/src/lib/components/messages/ProfileDetail.svelte
+++ b/src/ic_panda_frontend/src/lib/components/messages/ProfileDetail.svelte
@@ -38,7 +38,6 @@
   const myFollowing: Writable<DisplayUserInfo[]> = writable([])
   const myInfo: Writable<(UserInfo & ProfileInfo) | null> = writable(null)
 
-  let myID: Principal
   let myState: MyMessageState
   let userInfo: Readable<UserInfo & ProfileInfo>
 
@@ -93,7 +92,9 @@
         type: 'component',
         component: {
           ref: UserRegisterModel,
-          props: {}
+          props: {
+            myState
+          }
         }
       })
     }
@@ -102,27 +103,19 @@
   let followingSubmitting = ''
   function onFollowHandler(user: Principal, fowllowing: boolean = true) {
     toastRun(async () => {
-      if (myState?.principal.isAnonymous()) {
-        const res = await signIn({})
+      if (!myState || myState.principal.isAnonymous()) {
+        await signIn({})
         myState = await myMessageStateAsync()
         const rt = await myState.loadMyProfile().catch(() => null)
-        if (!rt && res.success == 'ok') {
-          modalStore.trigger({
-            type: 'component',
-            component: {
-              ref: UserRegisterModel,
-              props: {}
-            }
-          })
-        } else if (rt) {
-          myInfo.set(rt)
-        }
+        myInfo.set(rt)
       } else if (!$myInfo) {
         modalStore.trigger({
           type: 'component',
           component: {
             ref: UserRegisterModel,
-            props: {}
+            props: {
+              myState
+            }
           }
         })
       } else if (!followingSubmitting) {
@@ -156,26 +149,19 @@
   }
 
   async function onCreateChannelHandler(id: Principal) {
-    if (myState?.principal.isAnonymous()) {
-      const res = await signIn({})
+    if (!myState || myState.principal.isAnonymous()) {
+      await signIn({})
       myState = await myMessageStateAsync()
       const rt = await myState.loadMyProfile().catch(() => null)
       myInfo.set(rt)
-      if (!rt && res.success == 'ok') {
-        modalStore.trigger({
-          type: 'component',
-          component: {
-            ref: UserRegisterModel,
-            props: {}
-          }
-        })
-      }
     } else if (!$myInfo) {
       modalStore.trigger({
         type: 'component',
         component: {
           ref: UserRegisterModel,
-          props: {}
+          props: {
+            myState
+          }
         }
       })
     } else {
@@ -206,23 +192,22 @@
       if (Notification.permission !== 'granted') {
         const perm = await Notification.requestPermission()
         grantedNotification = perm === 'granted'
-        await KVS.set<string>('My', perm, myID.toText() + KEY_NOTIFY_PERM)
+        await KVS.set<string>('My', perm, myID!.toText() + KEY_NOTIFY_PERM)
       } else {
-        await KVS.set<string>('My', 'granted', myID.toText() + KEY_NOTIFY_PERM)
+        await KVS.set<string>('My', 'granted', myID!.toText() + KEY_NOTIFY_PERM)
       }
     } else {
-      await KVS.set<string>('My', 'denied', myID.toText() + KEY_NOTIFY_PERM)
+      await KVS.set<string>('My', 'denied', myID!.toText() + KEY_NOTIFY_PERM)
     }
   }
 
   onMount(() => {
     const { abort, finally: onfinally } = toastRun(async function () {
       myState = await myMessageStateAsync()
-      myID = myState.principal
 
       if (
         (typeof userId === 'string' && userId === myState.id) ||
-        (userId instanceof Principal && userId.compareTo(myID) == 'eq')
+        (userId instanceof Principal && myID && userId.compareTo(myID) == 'eq')
       ) {
         const info = await myState.loadMyProfile()
         myInfo.set(info)
@@ -242,7 +227,7 @@
       if (!info) {
         setTimeout(() => goto('/_/messages'), 2000)
       } else {
-        if (info.id.compareTo(myID) == 'eq') {
+        if (myID && info.id.compareTo(myID) == 'eq') {
           if (
             $page.params['channel'] == 'profile' &&
             info.username.length == 0 &&
@@ -252,7 +237,9 @@
               type: 'component',
               component: {
                 ref: UserRegisterModel,
-                props: {}
+                props: {
+                  myState
+                }
               }
             })
           }
@@ -272,7 +259,8 @@
     return abort
   })
 
-  $: isMe = $userInfo?.id.compareTo(myID) == 'eq'
+  $: myID = $myInfo?.id
+  $: isMe = (myID && $userInfo?.id.compareTo(myID)) == 'eq'
   $: isFowllowing =
     $myInfo?.following
       .at(0)
diff --git a/src/ic_panda_frontend/src/lib/components/messages/UserRegisterModel.svelte b/src/ic_panda_frontend/src/lib/components/messages/UserRegisterModel.svelte
index 140b0cc..aad0acf 100644
--- a/src/ic_panda_frontend/src/lib/components/messages/UserRegisterModel.svelte
+++ b/src/ic_panda_frontend/src/lib/components/messages/UserRegisterModel.svelte
@@ -11,36 +11,26 @@
   import { toastRun } from '$lib/stores/toast'
   import { unwrapOption } from '$lib/types/result'
   import { PANDAToken, formatNumber } from '$lib/utils/token'
-  import {
-    myMessageStateAsync,
-    type MyMessageState
-  } from '$src/lib/stores/message'
+  import { type MyMessageState } from '$src/lib/stores/message'
   import { Principal } from '@dfinity/principal'
-  import {
-    focusTrap,
-    getModalStore,
-    getToastStore
-  } from '@skeletonlabs/skeleton'
+  import { focusTrap, getToastStore } from '@skeletonlabs/skeleton'
   import debounce from 'debounce'
   import { onDestroy, onMount, type SvelteComponent } from 'svelte'
   import { type Readable } from 'svelte/store'
-  import PasswordModel from './PasswordModel.svelte'
 
   const usernameReg = /^[a-z0-9][a-z0-9_]{0,19}$/i
   const toastStore = getToastStore()
-  const modalStore = getModalStore()
 
   // Props
   /** Exposes parent props to this component. */
   export let parent: SvelteComponent
+  export let myState: MyMessageState
 
+  const myInfo: Readable<UserInfo | null> = myState.info
+  const messageState: Readable<StateInfo | null> = myState.api.stateStore
   const messageCanisterPrincipal = Principal.fromText(MESSAGE_CANISTER_ID)
 
   let tokenLedgerAPI: TokenLedgerAPI
-  let myState: MyMessageState
-
-  let messageState: Readable<StateInfo | null>
-  let userInfo: Readable<UserInfo | null>
 
   let validating = false
   let submitting = false
@@ -91,25 +81,7 @@
       }
 
       await myState.refreshAllState(true)
-      const myIV = await myState.myIV()
-      const mk = await myState.masterKey(myIV)
-      if (!mk || !mk.isOpened() || myState.masterKeyKind() !== mk.kind) {
-        modalStore.close()
-        modalStore.trigger({
-          type: 'component',
-          component: {
-            ref: PasswordModel,
-            props: {
-              myState: myState,
-              masterKey: mk
-            }
-          }
-        })
-      } else {
-        setTimeout(async () => {
-          modalStore.close()
-        }, 3000)
-      }
+      parent && parent['onClose']()
     }, toastStore).finally(() => {
       submitting = false
       validating = false
@@ -168,13 +140,10 @@
 
   onMount(() => {
     const { abort } = toastRun(async (signal: AbortSignal) => {
-      myState = await myMessageStateAsync()
-      messageState = myState.api.stateStore
-      userInfo = myState.info
-      if ($userInfo) {
+      if ($myInfo) {
         editMode = true
-        nameInput = $userInfo.name || ''
-        username = unwrapOption($userInfo.username) || ''
+        nameInput = $myInfo.name || ''
+        username = unwrapOption($myInfo.username) || ''
       }
 
       if (signal.aborted) {
diff --git a/src/ic_panda_frontend/src/lib/stores/message.ts b/src/ic_panda_frontend/src/lib/stores/message.ts
index f498383..d508f41 100644
--- a/src/ic_panda_frontend/src/lib/stores/message.ts
+++ b/src/ic_panda_frontend/src/lib/stores/message.ts
@@ -167,6 +167,11 @@ export class MyMessageState {
     return this._coseAPI != null ? 'ECDH' : 'Local'
   }
 
+  isReady(): boolean {
+    const mk = this._mks.at(-1)
+    return (mk && mk.isUser(this.principal) && mk.isOpened()) || false
+  }
+
   async refreshAllState(force: boolean = true): Promise<void> {
     if (force) {
       await Promise.all([this.api.refreshMyInfo(), this.api.refreshState()])