fix: fix 'myInfo' state

ldclabs · Sep 15, 2024 · cc39ac6 · cc39ac6
1 parent 1ae8470
commit cc39ac6
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 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
@@ -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
@@ -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
@@ -12,30 +12,35 @@
   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
   let messages_total = 0n
 
   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
@@ -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
@@ -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
@@ -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)