chat ui list

src/appStart/StartHelper.tsx

@@ -20,6 +20,7 @@ import {initKey} from '@caj/helper/storage/bdm/encryption';
 import UserManager from '@caj/user/UserManager';
 import MyUserManager from '@caj/user/MyUserManager';
 import DBSchemas from '@caj/helper/storage/bdm/schemas';
+import {chatType} from '@caj/components/chat/types';
 
 const AnimationView = animated(View);
 
@@ -32,9 +33,9 @@ function onAppStart() {
         console.log('finish');
         await BigDataManager.databases.users.setEntry({
           UserId: 'test',
-          AccountName: 'test222222222',
+          AccountName: 'TestAcc',
-          Username: 'us',
+          Username: 'TestAccountVirtual',
-          Description: 'daw',
+          Description: 'This is a test account that is not real. ^^',
           FollowersCount: 2,
           FollowingCount: 24,
           lastUpdateTimestamp: 412341234,
@@ -48,6 +49,21 @@ function onAppStart() {
         store.dispatch(
           appNonSaveVarActions.setAppStatus(appStatus.APP_RUNNING),
         );
+
+        store.dispatch(
+          appNonSaveVarActions.setChatEntity({
+            id: MyUserManager.getSelectedUserId(),
+            type: chatType.User,
+            tags: [],
+          }),
+        );
+        store.dispatch(
+          appNonSaveVarActions.setChatEntity({
+            id: 'test',
+            type: chatType.User,
+            tags: [],
+          }),
+        );
       })
       .catch(err => {
         console.error("Database Error! Can't start App :(", err);

src/caj/components/NotLoggedIn.tsx

@@ -63,15 +63,21 @@ const validateEmail = (email: EMail) => {
 };
 
 export default function NotLoggedIn() {
+  const currentUser = useSelector(
+    (state: RootState) => state.appVariables.preferences.selectedAccount,
+  );
+
   const lang = useSelector((state: RootState) => state.appVariables.lang);
   const theme = useSelector(
     (state: RootState) => state.appVariables.preferences.theme,
   );
 
-  const toast = useToast();
-
   const navigation = useNavigation<RootScreenNavigationProp>();
 
+  if (currentUser !== 'none') {
+    return null;
+  }
+
   return (
     <Box alignItems="center" mt={5}>
       <Text color="primary.400">{lang.appName}</Text>

src/caj/components/ProfilePicture.tsx

@@ -14,8 +14,8 @@ export function ProfilePicture(props: {size: number; UserId: UserId}) {
     return (
       <Skeleton
         bg={'black.200'}
-        width={size}
+        width={size + 'px'}
-        height={size}
+        height={size + 'px'}
         style={{borderRadius: size / 2}}></Skeleton>
     );
   }
@@ -55,15 +55,15 @@ export function ProfilePicture(props: {size: number; UserId: UserId}) {
   return (
     <Box
       bg={'hsl(' + hash + ', 70%, 60%)'}
-      width={size}
+      width={size + 'px'}
-      height={size}
+      height={size + 'px'}
       style={{borderRadius: size / 2}}>
       <Text
         color={'#fff'}
         textAlign={'center'}
-        width={size}
+        width={size + 'px'}
-        height={size}
+        height={size + 'px'}
-        lineHeight={size}
+        lineHeight={size + 'px'}
         fontSize={size * 0.75 + 'px'}>
         {firstLetter.toUpperCase()}
       </Text>

src/caj/components/chat/listChats.tsx

@@ -0,0 +1,81 @@
+import {RootState} from '@caj/redux/store';
+import UserManager from '@caj/user/UserManager';
+import {Box, HStack, Text, VStack} from 'native-base';
+import {useSelector} from 'react-redux';
+import {ProfilePicture} from '../ProfilePicture';
+import {TextSkeleton} from '../simple/Skeleton';
+import {chatType} from './types';
+
+export function ListChats() {
+  const chats = useSelector((state: RootState) => state.nonSaveVariables.chats);
+  const chatActivity = useSelector(
+    (state: RootState) => state.nonSaveVariables.chatActivity,
+  );
+
+  const space = 4;
+  const ppSize = 64;
+  const tagSize = 24;
+
+  return (
+    <VStack space={space + 'px'} width="100%" marginY={space + 'px'}>
+      {chatActivity.map((chatId, i) => {
+        const chat = chats[chatId];
+        if (chat.type === chatType.User) {
+          const user = UserManager.getUserSelector(chatId);
+
+          return (
+            <Box
+              key={'chatList_i' + i + chatId}
+              bg={'black.400'}
+              borderTopRadius={ppSize / 2 + 'px'}
+              borderBottomRightRadius={ppSize / 2 + 'px'}
+              borderBottomLeftRadius={tagSize / 2 + 'px'}
+              marginX={space + 'px'}
+              padding={space + 'px'}>
+              <VStack space={space + 'px'}>
+                <HStack space={space + 'px'}>
+                  <ProfilePicture
+                    UserId={chatId}
+                    size={ppSize}></ProfilePicture>
+                  <VStack>
+                    <TextSkeleton
+                      lineHeight={ppSize / 2.5 + 'px'}
+                      numberOfLines={1}
+                      SkeletonProps={{
+                        lines: 1,
+                        width: '160px',
+                      }}
+                      color="primary.400">
+                      {user.Username.data}
+                    </TextSkeleton>
+                    <TextSkeleton
+                      lineHeight={ppSize / 2.5 + 'px'}
+                      numberOfLines={1}
+                      SkeletonProps={{
+                        lines: 1,
+                        width: '160px',
+                      }}
+                      color="white.400">
+                      {user.Username.data}
+                    </TextSkeleton>
+                  </VStack>
+                </HStack>
+                <HStack>
+                  <Box
+                    height={tagSize + 'px'}
+                    paddingX={tagSize / 2 + 'px'}
+                    borderRadius={tagSize / 2}
+                    bg={'lime.300'}>
+                    <Text color={'#000'} lineHeight={tagSize + 'px'}>
+                      Friend
+                    </Text>
+                  </Box>
+                </HStack>
+              </VStack>
+            </Box>
+          );
+        }
+      })}
+    </VStack>
+  );
+}

src/caj/components/chat/types.ts

@@ -0,0 +1,23 @@
+import { UserId } from "@caj/configs/types"
+
+type GroupId = string;
+
+export enum chatType {
+    User = 0,
+    Group = 1,
+}
+
+export enum chatTags {
+    FRIEND,
+    GROUP,
+    GOOD_FRIENDS,
+}
+
+export type chatId = UserId | GroupId;
+
+export interface chatEntity {
+    type: chatType;
+    id:  chatId;
+    title?: string;
+    tags: chatTags[];
+}

src/caj/configs/appNonSaveVar.ts

@@ -1,5 +1,6 @@
 //these variables should not changed by the user and will not be saved in storage
 
+import { chatEntity, chatId } from '@caj/components/chat/types';
 import {getVersionByNum, VersionType} from '@caj/helper/version';
 import {User} from '@caj/user/types';
 import {UserId} from './types';
@@ -25,6 +26,8 @@ export interface NON_SAVE_VARS {
   appStatus: appStatus;
   connectionStatus: connectionStatus;
   cachedUsers: {[key: UserId]: User};
+  chats: {[key: chatId]: chatEntity}
+  chatActivity: chatId[];
 }
 
 export const non_save_vars: NON_SAVE_VARS = {
@@ -32,4 +35,6 @@ export const non_save_vars: NON_SAVE_VARS = {
   appStatus: appStatus.IS_LOADING,
   connectionStatus: connectionStatus.UNKNOWN,
   cachedUsers: {},
+  chats: {},
+  chatActivity: [],
 };

src/caj/configs/appNonSaveVarReducer.ts

@@ -4,6 +4,7 @@ import type {PayloadAction} from '@reduxjs/toolkit';
 import {appStatus, non_save_vars} from './appNonSaveVar';
 import {User} from '@caj/user/types';
 import {UserId} from './types';
+import {chatEntity, chatId} from '@caj/components/chat/types';
 
 export const appNonSaveVariablesSlice = createSlice({
   name: 'non_save_vars',
@@ -18,6 +19,32 @@ export const appNonSaveVariablesSlice = createSlice({
     removeCachedUser: (state, action: PayloadAction<UserId>) => {
       delete state.cachedUsers[action.payload];
     },
+    setChatEntity: (state, action: PayloadAction<chatEntity>) => {
+      const chatId = action.payload.id;
+
+      state.chats[chatId] = action.payload;
+
+      if (state.chatActivity.includes(chatId) === false)
+        state.chatActivity.unshift(chatId);
+    },
+    changeChatEntity: (state, action: PayloadAction<chatEntity>) => {
+      const chatId = action.payload.id;
+
+      state.chats[chatId] = action.payload;
+
+      if (state.chatActivity.includes(chatId) === false)
+        state.chatActivity.unshift(chatId);
+      state.chatActivity.sort(function (x, y) {
+        return x == chatId ? -1 : y == chatId ? 1 : 0;
+      });
+    },
+    removeChatEntity: (state, action: PayloadAction<chatId>) => {
+      delete state.chats[action.payload];
+
+      state.chatActivity = state.chatActivity.filter(function (ele) {
+        return ele !== action.payload;
+      });
+    },
   },
 });
 

src/caj/lang/en.ts

@@ -14,7 +14,7 @@ export const lang: LangFormat = {
     home: {
       account: 'My account',
       calendar: 'Calendar',
-      chat: 'Conversations',
+      chat: 'Chats',
     },
   },
   info: 'Info',

src/caj/tabs/main/ChatTab.tsx

@@ -1,3 +1,4 @@
+import {ListChats} from '@caj/components/chat/listChats';
 import NotLoggedIn from '@caj/components/NotLoggedIn';
 import {defaultHeaderStyle} from '@caj/configs/colors';
 import {RootStackNavigatorParamList} from '@caj/Navigation';
@@ -44,6 +45,7 @@ function ChatTab() {
 function ChatScreen() {
   return (
     <Center>
+      <ListChats />
       <NotLoggedIn />
     </Center>
   );