diff --git a/src/appStart/StartHelper.tsx b/src/appStart/StartHelper.tsx index cb35b03..8bcb6d6 100644 --- a/src/appStart/StartHelper.tsx +++ b/src/appStart/StartHelper.tsx @@ -45,22 +45,6 @@ function onAppStart() { XpPoints: 0, }); - setTimeout(async () => { - console.log('get'); - const obj = await BigDataManager.databases.users.getEntry('test'); - - //await UserManager.getUser(MyUserManager.getSelectedUserId()); - - //await UserManager.getUser('ce97da21-c5f1-46f8-947b-ce9288b74ed1'); - }, 4100); - setTimeout(async () => { - console.log('get'); - const obj = await BigDataManager.databases.users.getEntry('test'); - - //await UserManager.getUser(MyUserManager.getSelectedUserId()); - //await UserManager.getUser('7396bd88-fe36-4e2e-9810-a83b33440ab6'); - }, 2100); - store.dispatch( appNonSaveVarActions.setAppStatus(appStatus.APP_RUNNING), ); diff --git a/src/caj/components/AccountInfoBanner.tsx b/src/caj/components/AccountInfoBanner.tsx deleted file mode 100644 index 522a6df..0000000 --- a/src/caj/components/AccountInfoBanner.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import {UserId} from '@caj/configs/types'; -import {RootState} from '@caj/redux/store'; -import MyUserManager from '@caj/user/MyUserManager'; -import UserManager from '@caj/user/UserManager'; -import {Center, Skeleton} from 'native-base'; -import {useSelector} from 'react-redux'; - -// 7396bd88-fe36-4e2e-9810-a83b33440ab6 - -function Test() { - /*UserManager.getUser(uuid).then(user => { - //console.log(user); - });*/ - - const myUser = UserManager.getUserSelector(MyUserManager.getSelectedUserId()); - - console.log('reload', myUser); - - if (myUser === undefined) { - return ( -
- -
- ); - } - - return
{myUser.Username.data}
; -} - -function Test2() { - const uuid = 'ce97da21-c5f1-46f8-947b-ce9288b74ed1'; - - /*UserManager.getUser(uuid).then(user => { - //console.log(user); - });*/ - - const myUser = UserManager.getUserSelector(uuid); - - console.log('reload', myUser); - - if (myUser === undefined) { - return
undefined
; - } - - return
{myUser.AccountName.data}
; -} - -export default function AccountInfoBanner() { - return ( -
- Account - - -
- ); -} diff --git a/src/caj/components/simple/Skeleton.tsx b/src/caj/components/simple/Skeleton.tsx new file mode 100644 index 0000000..700e3d3 --- /dev/null +++ b/src/caj/components/simple/Skeleton.tsx @@ -0,0 +1,23 @@ +import {Center, Skeleton, Text} from 'native-base'; +import { + InterfaceTextProps, + ITextProps, +} from 'native-base/lib/typescript/components/primitives/Text/types'; +import {ColorSchemeType} from 'native-base/lib/typescript/components/types'; +import {RefAttributes} from 'react'; + +export function TextSkeleton( + props: {SkeletonProps: any} & JSX.IntrinsicAttributes & + InterfaceTextProps & { + variant?: unknown; + size?: unknown; + colorScheme?: ColorSchemeType; + } & RefAttributes, +) { + console.log('props.children', props.children); + if (props.children === undefined) { + return ; + } + + return ; +} diff --git a/src/caj/components/userUI/AccountInfoBanner.tsx b/src/caj/components/userUI/AccountInfoBanner.tsx new file mode 100644 index 0000000..19ac3c1 --- /dev/null +++ b/src/caj/components/userUI/AccountInfoBanner.tsx @@ -0,0 +1,120 @@ +import {ThemeMode} from '@caj/configs/appVar'; +import { + darkThemeStyle, + getBackgroundColor, + themeNB, + themeSelector, +} from '@caj/configs/colors'; +import {UserId} from '@caj/configs/types'; +import MyUserManager from '@caj/user/MyUserManager'; +import {User} from '@caj/user/types'; +import UserManager from '@caj/user/UserManager'; +import {Box, Center, Skeleton, Text, VStack} from 'native-base'; + +import {TextSkeleton} from '../simple/Skeleton'; + +// 7396bd88-fe36-4e2e-9810-a83b33440ab6 + +function ProfilePic(props: {size: number}) { + const size = props.size; + return ( + + ); +} + +export default function AccountInfoBanner(props: { + user: User; + align?: 'center' | 'right'; +}) { + const user = props.user; + const align = props.align || 'center'; + + const theme = themeSelector(); + const _theme = themeNB(theme); + + const height = 150; + let boxHeight = height; + + if (theme === ThemeMode.Darkest) { + boxHeight += 2; + } + + const Background = (props: {children: any}) => { + if (align === 'right') { + return ( + + {props.children} + + ); + } + if (align === 'center') { + return props.children; + } + }; + + return ( + + + + + {user.Username.data} + + + {user.AccountName.data} + + + + + {user.FollowersCount.data} {' '} {user.FollowingCount.data} + + + + + + + + ); +} + +export function MyUserAccountInfoBanner() { + const myUser = UserManager.getUserSelector(MyUserManager.getSelectedUserId()); + + return ; +} diff --git a/src/caj/configs/colors.ts b/src/caj/configs/colors.ts index 42201dd..0edf5d0 100644 --- a/src/caj/configs/colors.ts +++ b/src/caj/configs/colors.ts @@ -251,3 +251,17 @@ export const defaultHeaderStyle = (cur: ThemeMode, place?: 'registration') => { }, }; }; + +export function themeSelector() { + const theme = useSelector( + (state: RootState) => state.appVariables.preferences.theme, + ); + + return theme; +} + +export const themeNB = theme; + +export function darkThemeStyle(theme: ThemeMode, borderColor: string) { + return theme === ThemeMode.Darkest ? {borderWidth: 1, borderColor} : {}; +} diff --git a/src/caj/tabs/main/AccountTab.tsx b/src/caj/tabs/main/AccountTab.tsx index df1a73c..eca5629 100644 --- a/src/caj/tabs/main/AccountTab.tsx +++ b/src/caj/tabs/main/AccountTab.tsx @@ -1,4 +1,6 @@ -import AccountInfoBanner from '@caj/components/AccountInfoBanner'; +import AccountInfoBanner, { + MyUserAccountInfoBanner, +} from '@caj/components/userUI/AccountInfoBanner'; import NotLoggedIn from '@caj/components/NotLoggedIn'; import {ThemeMode} from '@caj/configs/appVar'; import {defaultHeaderStyle} from '@caj/configs/colors'; @@ -61,7 +63,7 @@ function AccountScreen() { paddingVertical: 20, borderBottomLeftRadius: 20, }}> - + diff --git a/src/caj/user/UserManager.ts b/src/caj/user/UserManager.ts index 5d57202..f106095 100644 --- a/src/caj/user/UserManager.ts +++ b/src/caj/user/UserManager.ts @@ -22,6 +22,14 @@ async function getUser( let state = store.getState(); let userIsInCache = false; + { + const usr = state.nonSaveVariables.cachedUsers[UserId]; + if (usr !== undefined) { + user = usr; + userIsInCache = true; + } + } + if (UserId === state.appVariables.preferences.selectedAccount) { const usr = state.appVariables.preferences.accounts[UserId]; @@ -41,14 +49,6 @@ async function getUser( } } - if (user === undefined) { - const usr = state.nonSaveVariables.cachedUsers[UserId]; - if (usr !== undefined) { - user = usr; - userIsInCache = true; - } - } - if (user === undefined) { const usr = await BigDataManager.databases.users.getEntry(UserId); @@ -136,6 +136,7 @@ async function getUser( } if (userIsInCache === false && user !== undefined) { + console.log('save in cache'); store.dispatch(appNonSaveVarActions.setCachedUser(user)); cachedUserList.push(user.UserId); @@ -151,15 +152,63 @@ async function getUser( return user; } +enum GetParam { + CACHE = 0, + SAVE, +} + +let getUserList: {[key: UserId]: GetParam} = {}; + +async function refreshUsers() { + for (let UserId in getUserList) { + const param = getUserList[UserId]; + delete getUserList[UserId]; + + await getUser(UserId); + } +} + +setInterval(refreshUsers, 1300); + +function addUserToGetQueue(UserId: UserId, param: GetParam) { + if (getUserList[UserId] === undefined) { + getUserList[UserId] = param; + } else if (getUserList[UserId] < param) { + getUserList[UserId] = param; + } +} + function getUserSelector(UserId: UserId) { - getUser(UserId); + addUserToGetQueue(UserId, GetParam.CACHE); const myUser = useSelector( (state: RootState) => state.nonSaveVariables.cachedUsers[UserId], ); + if (myUser === undefined) { + return initUndefinedUser(UserId); + } + return myUser; } +function initUndefinedUser(UserId: UserId): User { + return { + AccountName: createUserProp(SourceProp.online), + Description: createUserProp(SourceProp.online), + FollowersCount: createUserProp(SourceProp.online), + FollowingCount: createUserProp(SourceProp.online), + lastUpdateTimestamp: 0, + ProfilePicture: { + lq: createUserProp(SourceProp.online), + hq: createUserProp(SourceProp.online), + }, + UserId, + Username: createUserProp(SourceProp.online), + XpLevel: createUserProp(SourceProp.online), + XpPoints: createUserProp(SourceProp.online), + }; +} + const UserManager = {getUser, getUserSelector}; export default UserManager;