From ae9679e540b15d1b8fb775865801d79368e2147f Mon Sep 17 00:00:00 2001 From: teodorus-nathaniel Date: Tue, 19 Mar 2024 22:27:18 +0700 Subject: [PATCH 1/4] Change tab to posts if user haven't followed anyone --- src/components/main/HomePage.tsx | 17 +++++++++++++++-- src/stores/my-account.ts | 2 ++ 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/src/components/main/HomePage.tsx b/src/components/main/HomePage.tsx index 6e04e7fd3..3c527684f 100644 --- a/src/components/main/HomePage.tsx +++ b/src/components/main/HomePage.tsx @@ -7,7 +7,10 @@ import { useCallback, useEffect, useState } from 'react' import config from 'src/config' import { useSendEvent } from 'src/providers/AnalyticContext' import { getInitialPropsWithRedux } from 'src/rtk/app' +import { useAppSelector } from 'src/rtk/app/store' import { useFetchTotalStake } from 'src/rtk/features/creators/totalStakeHooks' +import { selectSpaceIdsByFollower } from 'src/rtk/features/spaceIds/followedSpaceIdsSlice' +import { useMyAccount } from 'src/stores/my-account' import { PostKind } from 'src/types/graphql-global-types' import { getAmountRange } from 'src/utils/analytics' import { useIsSignedIn, useMyAddress } from '../auth/MyAccountsContext' @@ -147,9 +150,19 @@ const TabsHomePage = ({ setFiltersInUrl(router, key, filterType, { ref: refId }) } + const isInitializedProxy = useMyAccount(state => state.isInitializedProxy) + const hasFollowedAnyone = useAppSelector(state => { + return (myAddress ? selectSpaceIdsByFollower(state, myAddress) ?? [] : [])?.length > 0 + }) + useEffect(() => { - onChangeKey(tab) - }, [isSignedIn]) + if (!isInitializedProxy || !isSignedIn) return + if (!hasFollowedAnyone) { + setFiltersInUrl(router, 'posts', { type: 'hot' }, { ref: refId }) + } else { + onChangeKey(tab) + } + }, [hasFollowedAnyone, isInitializedProxy]) const handleScroll = () => { const currentScrollPos = window.pageYOffset diff --git a/src/stores/my-account.ts b/src/stores/my-account.ts index d50f218b1..fc80b7a9a 100644 --- a/src/stores/my-account.ts +++ b/src/stores/my-account.ts @@ -148,6 +148,8 @@ export const useMyAccount = create()((set, get) => ({ accountStorage.remove() accountAddressStorage.remove() set({ address: null }) + } else { + accountAddressStorage.set(address) } } From a972cbff20981e3fab75946461c3d395be503892 Mon Sep 17 00:00:00 2001 From: teodorus-nathaniel Date: Tue, 19 Mar 2024 22:37:09 +0700 Subject: [PATCH 2/4] Fetch some data using squid when loading user --- src/components/auth/MyAccountsContext.tsx | 23 +++++++++++++++++------ src/components/main/HomePage.tsx | 11 ++++++----- 2 files changed, 23 insertions(+), 11 deletions(-) diff --git a/src/components/auth/MyAccountsContext.tsx b/src/components/auth/MyAccountsContext.tsx index e41e01622..3e4e2e857 100644 --- a/src/components/auth/MyAccountsContext.tsx +++ b/src/components/auth/MyAccountsContext.tsx @@ -29,13 +29,14 @@ import { fetchChainsInfo } from 'src/rtk/features/chainsInfo/chainsInfoSlice' import { fetchProfileSpace } from 'src/rtk/features/profiles/profilesSlice' import { fetchEntityOfSpaceIdsByFollower } from 'src/rtk/features/spaceIds/followedSpaceIdsSlice' import { useMyAccount } from 'src/stores/my-account' -import { AnyAccountId, EmailAccount } from 'src/types' +import { AnyAccountId, DataSourceTypes, EmailAccount } from 'src/types' import useSubsocialEffect from '../api/useSubsocialEffect' import { useAccountSelector } from '../profile-selector/AccountSelector' import { useIsMobileWidthOrDevice } from '../responsive' import { reloadSpaceIdsFollowedByAccount } from '../spaces/helpers/reloadSpaceIdsFollowedByAccount' import { equalAddresses } from '../substrate' import { getSignerToken, isProxyAdded } from '../utils/OffchainSigner/ExternalStorage' +import { getSubsocialApi } from '../utils/SubsocialConnect' import { desktopWalletConnect, mobileWalletConection } from './utils' // // Types @@ -132,7 +133,7 @@ export function MyAccountsProvider(props: React.PropsWithChildren<{}>) { }, [status]) useSubsocialEffect( - ({ substrate, subsocial }) => { + ({ substrate }) => { if (!address) return let unsubAccountInfo: UnsubscribeFn @@ -141,13 +142,10 @@ export function MyAccountsProvider(props: React.PropsWithChildren<{}>) { const readyApi = await substrate.api Promise.all([ - reloadSpaceIdsFollowedByAccount({ substrate, dispatch: dispatch, account: address }), + reloadSpaceIdsFollowedByAccount({ substrate, dispatch, account: address }), reloadAccountIdsByFollower(address), reloadSpaceIdsRelatedToAccount(address), - dispatch(fetchProfileSpace({ id: address, api: subsocial })), - dispatch(fetchEntityOfSpaceIdsByFollower({ id: address, reload: true, api: subsocial })), dispatch(fetchChainsInfo({})), - dispatch(fetchAddressLikeCounts({ address, postIds: null })), ]) unsubAccountInfo = await readyApi.query.system.account( @@ -166,6 +164,19 @@ export function MyAccountsProvider(props: React.PropsWithChildren<{}>) { }, [address], ) + useEffect(() => { + dispatch( + fetchEntityOfSpaceIdsByFollower({ + id: address, + dataSource: DataSourceTypes.SQUID, + api: getSubsocialApi(), + }), + ) + dispatch( + fetchProfileSpace({ id: address, api: getSubsocialApi(), dataSource: DataSourceTypes.SQUID }), + ) + dispatch(fetchAddressLikeCounts({ address, postIds: null })) + }, [address]) const state = useMemo( () => ({ accounts, status, emailAccounts }), diff --git a/src/components/main/HomePage.tsx b/src/components/main/HomePage.tsx index 3c527684f..b1cd7d9a7 100644 --- a/src/components/main/HomePage.tsx +++ b/src/components/main/HomePage.tsx @@ -151,18 +151,19 @@ const TabsHomePage = ({ } const isInitializedProxy = useMyAccount(state => state.isInitializedProxy) - const hasFollowedAnyone = useAppSelector(state => { - return (myAddress ? selectSpaceIdsByFollower(state, myAddress) ?? [] : [])?.length > 0 + const followedIds = useAppSelector(state => { + return selectSpaceIdsByFollower(state, myAddress) }) + const isLoadingFollowedIds = followedIds === undefined useEffect(() => { - if (!isInitializedProxy || !isSignedIn) return - if (!hasFollowedAnyone) { + if (!isInitializedProxy || !isSignedIn || isLoadingFollowedIds) return + if (followedIds.length === 0) { setFiltersInUrl(router, 'posts', { type: 'hot' }, { ref: refId }) } else { onChangeKey(tab) } - }, [hasFollowedAnyone, isInitializedProxy]) + }, [followedIds, isInitializedProxy]) const handleScroll = () => { const currentScrollPos = window.pageYOffset From a496cf11a801a6ae4a34a235cc42b3ba70ca1c2f Mon Sep 17 00:00:00 2001 From: teodorus-nathaniel Date: Tue, 19 Mar 2024 22:48:11 +0700 Subject: [PATCH 3/4] Improve loading speed --- src/components/auth/MyAccountsContext.tsx | 4 +++- src/components/main/HomePage.tsx | 6 +++--- src/stores/my-account.ts | 3 +-- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/components/auth/MyAccountsContext.tsx b/src/components/auth/MyAccountsContext.tsx index 3e4e2e857..617032223 100644 --- a/src/components/auth/MyAccountsContext.tsx +++ b/src/components/auth/MyAccountsContext.tsx @@ -102,6 +102,7 @@ export function MyAccountsProvider(props: React.PropsWithChildren<{}>) { const reloadAccountIdsByFollower = useCreateReloadAccountIdsByFollower() const reloadSpaceIdsRelatedToAccount = useCreateReloadSpaceIdsRelatedToAccount() const address = useMyAddress() + const isInitialized = useMyAccount(state => state.isInitialized) const { getAllEmailAccounts } = useEmailAccount() const [, recheck] = useReducer(x => (x + 1) % 16384, 0) const isMobile = useIsMobileWidthOrDevice() @@ -165,6 +166,7 @@ export function MyAccountsProvider(props: React.PropsWithChildren<{}>) { [address], ) useEffect(() => { + if (!isInitialized || !address) return dispatch( fetchEntityOfSpaceIdsByFollower({ id: address, @@ -176,7 +178,7 @@ export function MyAccountsProvider(props: React.PropsWithChildren<{}>) { fetchProfileSpace({ id: address, api: getSubsocialApi(), dataSource: DataSourceTypes.SQUID }), ) dispatch(fetchAddressLikeCounts({ address, postIds: null })) - }, [address]) + }, [address, isInitialized]) const state = useMemo( () => ({ accounts, status, emailAccounts }), diff --git a/src/components/main/HomePage.tsx b/src/components/main/HomePage.tsx index b1cd7d9a7..ccf0ce860 100644 --- a/src/components/main/HomePage.tsx +++ b/src/components/main/HomePage.tsx @@ -150,20 +150,20 @@ const TabsHomePage = ({ setFiltersInUrl(router, key, filterType, { ref: refId }) } - const isInitializedProxy = useMyAccount(state => state.isInitializedProxy) + const isInitialized = useMyAccount(state => state.isInitialized) const followedIds = useAppSelector(state => { return selectSpaceIdsByFollower(state, myAddress) }) const isLoadingFollowedIds = followedIds === undefined useEffect(() => { - if (!isInitializedProxy || !isSignedIn || isLoadingFollowedIds) return + if (!isInitialized || !isSignedIn || isLoadingFollowedIds) return if (followedIds.length === 0) { setFiltersInUrl(router, 'posts', { type: 'hot' }, { ref: refId }) } else { onChangeKey(tab) } - }, [followedIds, isInitializedProxy]) + }, [followedIds, isInitialized]) const handleScroll = () => { const currentScrollPos = window.pageYOffset diff --git a/src/stores/my-account.ts b/src/stores/my-account.ts index fc80b7a9a..94966edab 100644 --- a/src/stores/my-account.ts +++ b/src/stores/my-account.ts @@ -153,10 +153,9 @@ export const useMyAccount = create()((set, get) => ({ } } - set({ isInitialized: true }) + set({ isInitialized: true, parentProxyAddress: parentProxyAddress || undefined }) if (parentProxyAddress) { - set({ parentProxyAddress }) try { const proxies = await getProxies(parentProxyAddress) const currentProxy = proxies.find(({ address }) => address === get().address) From b38e97ebfe233699c3d506855a446a14db4b1533 Mon Sep 17 00:00:00 2001 From: teodorus-nathaniel Date: Tue, 19 Mar 2024 22:51:33 +0700 Subject: [PATCH 4/4] Add explanation for isInitialized and isInitializedProxy --- src/components/activity/MyNotifications.tsx | 4 ++-- src/components/activity/NotifCounter.tsx | 11 +++++------ src/stores/my-account.ts | 7 +++++++ 3 files changed, 14 insertions(+), 8 deletions(-) diff --git a/src/components/activity/MyNotifications.tsx b/src/components/activity/MyNotifications.tsx index e62c96124..92b45c589 100644 --- a/src/components/activity/MyNotifications.tsx +++ b/src/components/activity/MyNotifications.tsx @@ -10,13 +10,13 @@ const NOTIFICATION_TITLE = 'My notifications' export const MyNotifications = () => { const myAddress = useMyAddress() - const isInitializedProxy = useMyAccount(state => state.isInitializedProxy) + const isInitialized = useMyAccount(state => state.isInitialized) if (!myAddress) return return ( - {!isInitializedProxy ? ( + {!isInitialized ? ( ) : ( diff --git a/src/components/activity/NotifCounter.tsx b/src/components/activity/NotifCounter.tsx index d428b0101..af9227f7c 100644 --- a/src/components/activity/NotifCounter.tsx +++ b/src/components/activity/NotifCounter.tsx @@ -34,7 +34,7 @@ function InnerNotifCounterProvider(props: React.PropsWithChildren<{}>) { storageKeyType: 'user', }) const myAddress = useMyAddress() - const isInitializedProxy = useMyAccount(state => state.isInitializedProxy) + const isInitialized = useMyAccount(state => state.isInitialized) const [unreadCount, setUnreadCount] = useState(0) const [previousLastRead, setPreviousLastRead] = useState(null) @@ -47,7 +47,7 @@ function InnerNotifCounterProvider(props: React.PropsWithChildren<{}>) { } useEffect(() => { - if (!isInitializedProxy || !myAddress) return + if (!isInitialized || !myAddress) return ;(async () => { const unreadCount = await getNotificationsCount({ address: myAddress, @@ -55,7 +55,7 @@ function InnerNotifCounterProvider(props: React.PropsWithChildren<{}>) { }) setUnreadCount(unreadCount) })() - }, [myAddress, isInitializedProxy]) + }, [myAddress, isInitialized]) return ( ( export const NotificationsBell = ({ unreadCount }: NotificationsProps) => { const myAddress = useMyAddress() - const isInitializedProxy = useMyAccount(state => state.isInitializedProxy) + const isInitialized = useMyAccount(state => state.isInitialized) const { getLastReadNotif } = useNotifCounterContext() if (!enableNotifications) return null - if (!unreadCount || unreadCount <= 0 || !isInitializedProxy) - return + if (!unreadCount || unreadCount <= 0 || !isInitialized) return const showWithoutCount = !getLastReadNotif(myAddress) diff --git a/src/stores/my-account.ts b/src/stores/my-account.ts index 94966edab..aa073fef9 100644 --- a/src/stores/my-account.ts +++ b/src/stores/my-account.ts @@ -16,7 +16,14 @@ import { useAnalytics } from './analytics' import { create } from './utils' type State = { + /** + * `isInitialized` is `true` when the addresses (address & parentProxyAddress) are all set + * but there is still a case where the proxy is invalid and user will be logged out after that + */ isInitialized?: boolean + /** + * `isInitializedProxy` is `true` when the initialization process is all done, including checking the proxy + */ isInitializedProxy?: boolean preferredWallet: any | null