userProfile

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),
         );

src/caj/components/AccountInfoBanner.tsx

@@ -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 (
-      <Center width={300}>
-        <Skeleton.Text lines={1} px="12" />
-      </Center>
-    );
-  }
-
-  return <Center>{myUser.Username.data}</Center>;
-}
-
-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 <Center>undefined</Center>;
-  }
-
-  return <Center>{myUser.AccountName.data}</Center>;
-}
-
-export default function AccountInfoBanner() {
-  return (
-    <Center>
-      Account
-      <Test />
-      <Test2 />
-    </Center>
-  );
-}

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<ITextProps> & {
+      variant?: unknown;
+      size?: unknown;
+      colorScheme?: ColorSchemeType;
+    } & RefAttributes<unknown>,
+) {
+  console.log('props.children', props.children);
+  if (props.children === undefined) {
+    return <Skeleton.Text marginY={1} {...props.SkeletonProps}></Skeleton.Text>;
+  }
+
+  return <Text {...props} />;
+}

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 (
+    <Box
+      bg={'red.800'}
+      width={size}
+      height={size}
+      style={{borderRadius: size / 2}}></Box>
+  );
+}
+
+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 (
+        <Box
+          bg={getBackgroundColor(theme)}
+          {...darkThemeStyle(theme, 'black.500')}
+          p={1}
+          ml={2}
+          mb={10}
+          style={{
+            height: boxHeight,
+            borderTopLeftRadius: height / 2,
+            borderBottomLeftRadius: height / 2,
+          }}>
+          {props.children}
+        </Box>
+      );
+    }
+    if (align === 'center') {
+      return props.children;
+    }
+  };
+
+  return (
+    <Background>
+      <VStack space={2}>
+        <Box
+          bg={'blackBG.400'}
+          left={boxHeight / 2 - 25}
+          pl={100}
+          pr={3}
+          height={10}
+          width={'85%'}
+          borderRadius={25}
+          {...darkThemeStyle(theme, 'black.500')}>
+          <TextSkeleton
+            SkeletonProps={{lines: 1, width: '160px'}}
+            color="primary.800"
+            fontSize={14}>
+            {user.Username.data}
+          </TextSkeleton>
+          <TextSkeleton
+            SkeletonProps={{lines: 1, width: '120px'}}
+            color="white.100"
+            margin={0}
+            padding={0}
+            fontSize={12}>
+            {user.AccountName.data}
+          </TextSkeleton>
+        </Box>
+        <Box
+          bg={'blackBG.400'}
+          left={boxHeight / 2 - 25}
+          pl={100}
+          height={10}
+          width={'75%'}
+          borderRadius={25}
+          {...darkThemeStyle(theme, 'black.500')}>
+          <TextSkeleton SkeletonProps={{lines: 1}}>
+            {user.FollowersCount.data} {'   '} {user.FollowingCount.data}
+          </TextSkeleton>
+        </Box>
+      </VStack>
+      <Box position={'absolute'} top={1} left={1}>
+        <ProfilePic size={height - _theme.space[1] * 2} />
+      </Box>
+    </Background>
+  );
+}
+
+export function MyUserAccountInfoBanner() {
+  const myUser = UserManager.getUserSelector(MyUserManager.getSelectedUserId());
+
+  return <AccountInfoBanner user={myUser} align="right" />;
+}

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} : {};
+}

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,
         }}>
-        <AccountInfoBanner />
+        <MyUserAccountInfoBanner />
       </Box>
       <NotLoggedIn />
     </>

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;