chat ui begin

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "cSpell.words": ["Pressable"]
+}

src/caj/Navigation.tsx

@@ -44,6 +44,10 @@ import {
   LoginStackNavigatorParamList,
   RegisterScreenAnim,
 } from './components/NotLoggedIn';
+import ChatMainScreen, {
+  ChatMainStackNavigatorParamList,
+} from './components/chat/screen/main';
+import ChatScreenStack from './components/chat/screen/main';
 
 const styles = StyleSheet.create({
   container: {
@@ -59,6 +63,7 @@ export const linking: LinkingOptions<{}> = {
 export type RootStackNavigatorParamList = {
   Home: NavigatorScreenParams<HomeStackNavigatorParamList>;
   Register: NavigatorScreenParams<LoginStackNavigatorParamList>;
+  Chat: NavigatorScreenParams<ChatMainStackNavigatorParamList>;
 };
 
 export type RootScreenNavigationProp =
@@ -69,6 +74,11 @@ export default function Navigation() {
     <Stack.Navigator screenOptions={{headerShown: false}}>
       <Stack.Screen name="Home" component={HomeStack} />
       <Stack.Screen name="Register" component={RegisterScreenAnim} />
+      <Stack.Screen
+        name="Chat"
+        component={ChatScreenStack}
+        options={{animation: 'fade'}}
+      />
     </Stack.Navigator>
   );
 }
@@ -79,7 +89,7 @@ export type HomeStackNavigatorParamList = {
   Account: NavigatorScreenParams<AccountStackNavigatorParamList>;
   Calendar: NavigatorScreenParams<CalendarStackNavigatorParamList>;
   Maps: NavigatorScreenParams<MapsStackNavigatorParamList>;
-  Chat: NavigatorScreenParams<ChatStackNavigatorParamList>;
+  ChatList: NavigatorScreenParams<ChatStackNavigatorParamList>;
 };
 
 function AccountTabAnim(props: any) {
@@ -106,9 +116,9 @@ function MapsTabAnim(props: any) {
 }
 function ChatTabAnim(props: any) {
   return (
-    <SlideFromRightView>
+    <SlideFromLeftView>
       <ChatTab {...props} />
-    </SlideFromRightView>
+    </SlideFromLeftView>
   );
 }
 
@@ -118,7 +128,7 @@ function HomeStack() {
       <Tab.Screen name="Account" component={AccountTabAnim} />
       <Tab.Screen name="Calendar" component={CalendarTabAnim} />
       <Tab.Screen name="Maps" component={MapsTabAnim} />
-      <Tab.Screen name="Chat" component={ChatTabAnim} />
+      <Tab.Screen name="ChatList" component={ChatTabAnim} />
     </Tab.Navigator>
   );
 }

src/caj/components/ProfilePicture.tsx

@@ -50,8 +50,6 @@ export function ProfilePicture(props: {size: number; UserId: UserId}) {
 
   hash = Math.abs(hash >> 16);
 
-  console.log(hash);
-
   return (
     <Box
       bg={'hsl(' + hash + ', 70%, 60%)'}

src/caj/components/chat/listChats.tsx

@@ -1,11 +1,14 @@
+import {appNonSaveVarActions} from '@caj/configs/appNonSaveVarReducer';
 import {
   darkThemeStyle,
   getBackgroundColor,
   themeSelector,
 } from '@caj/configs/colors';
-import {RootState} from '@caj/redux/store';
+import {RootScreenNavigationProp} from '@caj/Navigation';
+import {RootState, store} from '@caj/redux/store';
 import UserManager from '@caj/user/UserManager';
-import {Box, HStack, Text, VStack} from 'native-base';
+import {useNavigation} from '@react-navigation/native';
+import {Box, HStack, Pressable, Text, VStack} from 'native-base';
 import {useSelector} from 'react-redux';
 import {start} from 'repl';
 import {ProfilePicture} from '../ProfilePicture';
@@ -18,6 +21,11 @@ export function ListChats() {
   const chatActivity = useSelector(
     (state: RootState) => state.nonSaveVariables.chatActivity,
   );
+  const selectedChat = useSelector(
+    (state: RootState) => state.nonSaveVariables.selectedChat,
+  );
+
+  console.log('selectedChat', selectedChat);
 
   const space = 4;
   const ppSize = 64;
@@ -25,6 +33,8 @@ export function ListChats() {
 
   const lang = useSelector((state: RootState) => state.appVariables.lang);
 
+  const navigation = useNavigation<RootScreenNavigationProp>();
+
   return (
     <VStack
       mt={space * 2 + 'px'}
@@ -37,9 +47,17 @@ export function ListChats() {
           const user = UserManager.getUserSelector(chatId);
 
           return (
-            <Box
+            <Pressable
               key={'chatList_i' + i + chatId}
-              bg={'blackBG.400'}
+              onPress={() => {
+                store.dispatch(appNonSaveVarActions.setSelectedChat(chatId));
+                navigation.navigate('Chat', {screen: 'Overview'});
+                //navigation.navigate('Register', {screen: 'RegStepOne'});
+              }}>
+              {({isHovered, isFocused, isPressed}) => {
+                return (
+                  <Box
+                    bg={isHovered ? 'black.200' : 'blackBG.400'}
                     {...darkThemeStyle(theme, 'black.400')}
                     borderRadius={ppSize / 2 + 'px'}
                     borderTopRightRadius={
@@ -48,7 +66,9 @@ export function ListChats() {
                         : ppSize / 2 + 'px'
                     }
                     borderBottomLeftRadius={
-                chat.tags.length > 0 ? tagSize / 2 + 'px' : ppSize / 2 + 'px'
+                      chat.tags.length > 0
+                        ? tagSize / 2 + 'px'
+                        : ppSize / 2 + 'px'
                     }
                     marginX={space + 'px'}
                     padding={space + 'px'}>
@@ -150,6 +170,9 @@ export function ListChats() {
                     </VStack>
                   </Box>
                 );
+              }}
+            </Pressable>
+          );
         }
       })}
     </VStack>

src/caj/components/chat/screen/main.tsx

@@ -0,0 +1,50 @@
+import {defaultHeaderStyle} from '@caj/configs/colors';
+import {SlideFromRightView} from '@caj/helper/animations';
+import {RootState} from '@caj/redux/store';
+import {
+  createNativeStackNavigator,
+  NativeStackNavigationProp,
+} from '@react-navigation/native-stack';
+import {Text} from 'native-base';
+import {useSelector} from 'react-redux';
+
+export type ChatMainStackNavigatorParamList = {
+  Overview: undefined;
+};
+
+const ChatStack = createNativeStackNavigator<ChatMainStackNavigatorParamList>();
+
+export type ChatScreenNavigationProp =
+  NativeStackNavigationProp<ChatMainStackNavigatorParamList>;
+
+function ChatScreenStack() {
+  const lang = useSelector((state: RootState) => state.appVariables.lang);
+  const theme = useSelector(
+    (state: RootState) => state.appVariables.preferences.theme,
+  );
+
+  return (
+    <ChatStack.Navigator>
+      <ChatStack.Screen
+        name="Overview"
+        options={{
+          title: '',
+          animation: 'fade',
+          headerShown: true,
+          ...defaultHeaderStyle(theme),
+        }}
+        component={ChatMainScreen}
+      />
+    </ChatStack.Navigator>
+  );
+}
+
+function ChatMainScreen() {
+  const chatId = useSelector(
+    (state: RootState) => state.nonSaveVariables.selectedChat,
+  );
+
+  return <Text>{chatId}</Text>;
+}
+
+export default ChatScreenStack;

src/caj/configs/appNonSaveVar.ts

@@ -26,8 +26,9 @@ export interface NON_SAVE_VARS {
   appStatus: appStatus;
   connectionStatus: connectionStatus;
   cachedUsers: {[key: UserId]: User};
-  chats: {[key: chatId]: chatEntity}
+  chats: {[key: chatId]: chatEntity};
   chatActivity: chatId[];
+  selectedChat: chatId | 'none';
 }
 
 export const non_save_vars: NON_SAVE_VARS = {
@@ -37,4 +38,5 @@ export const non_save_vars: NON_SAVE_VARS = {
   cachedUsers: {},
   chats: {},
   chatActivity: [],
+  selectedChat: 'none',
 };

src/caj/configs/appNonSaveVarReducer.ts

@@ -19,6 +19,9 @@ export const appNonSaveVariablesSlice = createSlice({
     removeCachedUser: (state, action: PayloadAction<UserId>) => {
       delete state.cachedUsers[action.payload];
     },
+    setSelectedChat: (state, action: PayloadAction<chatId>) => {
+      state.selectedChat = action.payload;
+    },
     setChatEntity: (state, action: PayloadAction<chatEntity>) => {
       const chatId = action.payload.id;