From 65c3bff706e36782e10265943144c530708abaef Mon Sep 17 00:00:00 2001
From: jan <jan@umbach.dev>
Date: Tue, 7 Mar 2023 23:53:48 +0100
Subject: [PATCH] ui fixes

---
 src/caj/Navigation.tsx                        | 45 ++++++++---
 src/caj/components/NotLoggedIn.tsx            |  4 +-
 src/caj/components/chat/listChats.tsx         |  7 +-
 src/caj/components/chat/screen/main.tsx       | 80 ++++++++++++-------
 src/caj/components/simple/Skeleton.tsx        |  6 +-
 .../components/userUI/AccountInfoBanner.tsx   |  4 +-
 src/caj/tabs/main/ChatTab.tsx                 | 10 +++
 src/caj/user/MyUserManager.ts                 |  3 +-
 src/caj/user/UserManager.ts                   |  1 +
 src/caj/user/types.ts                         |  4 +-
 10 files changed, 116 insertions(+), 48 deletions(-)

diff --git a/src/caj/Navigation.tsx b/src/caj/Navigation.tsx
index 0eaf78a..6979615 100644
--- a/src/caj/Navigation.tsx
+++ b/src/caj/Navigation.tsx
@@ -1,6 +1,6 @@
 import React, {useState, useEffect} from 'react';
 
-import {StyleSheet, Appearance, Dimensions} from 'react-native';
+import {StyleSheet, Appearance, Dimensions, Platform} from 'react-native';
 import {SafeAreaProvider, SafeAreaView} from 'react-native-safe-area-context';
 
 import {useSelector, useDispatch} from 'react-redux';
@@ -16,9 +16,11 @@ import {Box, Input, VStack, Center, Avatar, Text, Button} from 'native-base';
 import {View} from 'react-native';
 
 import {
+  getFocusedRouteNameFromRoute,
   LinkingOptions,
   NavigationContainer,
   NavigatorScreenParams,
+  RouteProp,
   useNavigation,
 } from '@react-navigation/native';
 import {
@@ -44,9 +46,7 @@ import {
   LoginStackNavigatorParamList,
   RegisterScreenAnim,
 } from './components/NotLoggedIn';
-import ChatMainScreen, {
-  ChatMainStackNavigatorParamList,
-} from './components/chat/screen/main';
+import ChatMainScreen from './components/chat/screen/main';
 import ChatScreenStack from './components/chat/screen/main';
 
 const styles = StyleSheet.create({
@@ -63,7 +63,6 @@ export const linking: LinkingOptions<{}> = {
 export type RootStackNavigatorParamList = {
   Home: NavigatorScreenParams<HomeStackNavigatorParamList>;
   Register: NavigatorScreenParams<LoginStackNavigatorParamList>;
-  Chat: NavigatorScreenParams<ChatMainStackNavigatorParamList>;
 };
 
 export type RootScreenNavigationProp =
@@ -73,11 +72,12 @@ export default function Navigation() {
   return (
     <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'}}
+        name="Register"
+        component={RegisterScreenAnim}
+        options={{
+          animation: Platform.OS === 'ios' ? 'fade' : 'slide_from_left',
+        }}
       />
     </Stack.Navigator>
   );
@@ -92,6 +92,9 @@ export type HomeStackNavigatorParamList = {
   ChatList: NavigatorScreenParams<ChatStackNavigatorParamList>;
 };
 
+export type HomeScreenNavigationProp =
+  NativeStackNavigationProp<HomeStackNavigatorParamList>;
+
 function AccountTabAnim(props: any) {
   return (
     <SlideFromLeftView>
@@ -123,12 +126,34 @@ function ChatTabAnim(props: any) {
 }
 
 function HomeStack() {
+  const getTabBarVisibility = (
+    route: RouteProp<HomeStackNavigatorParamList, 'ChatList'>,
+  ) => {
+    const routeName = getFocusedRouteNameFromRoute(route);
+    const hideOnScreens = ['Chat']; // put here name of screen where you want to hide tabBar
+    if (routeName !== undefined) {
+      return hideOnScreens.indexOf(routeName) <= -1;
+    } else {
+      return true;
+    }
+  };
+
   return (
     <Tab.Navigator screenOptions={{headerShown: false, unmountOnBlur: false}}>
       <Tab.Screen name="Account" component={AccountTabAnim} />
       <Tab.Screen name="Calendar" component={CalendarTabAnim} />
       <Tab.Screen name="Maps" component={MapsTabAnim} />
-      <Tab.Screen name="ChatList" component={ChatTabAnim} />
+      <Tab.Screen
+        name="ChatList"
+        component={ChatTabAnim}
+        options={({route}) => {
+          return {
+            tabBarStyle: {
+              display: getTabBarVisibility(route) ? 'flex' : 'none',
+            },
+          };
+        }}
+      />
     </Tab.Navigator>
   );
 }
diff --git a/src/caj/components/NotLoggedIn.tsx b/src/caj/components/NotLoggedIn.tsx
index d745d13..f19dde9 100644
--- a/src/caj/components/NotLoggedIn.tsx
+++ b/src/caj/components/NotLoggedIn.tsx
@@ -68,7 +68,7 @@ export default function NotLoggedIn() {
   );
 
   const lang = useSelector((state: RootState) => state.appVariables.lang);
-  const theme = useSelector( 
+  const theme = useSelector(
     (state: RootState) => state.appVariables.preferences.theme,
   );
 
@@ -81,7 +81,7 @@ export default function NotLoggedIn() {
   return (
     <Box alignItems="center" mt={5}>
       <Text color="primary.400">{lang.appName}</Text>
-      <Text color="white.100">{lang.appNameDesc}</Text>
+      <Text color="white.600">{lang.appNameDesc}</Text>
       <VStack mt={5} space={4} alignItems="center">
         <Button
           w="72"
diff --git a/src/caj/components/chat/listChats.tsx b/src/caj/components/chat/listChats.tsx
index 7482cdf..515565f 100644
--- a/src/caj/components/chat/listChats.tsx
+++ b/src/caj/components/chat/listChats.tsx
@@ -4,8 +4,9 @@ import {
   getBackgroundColor,
   themeSelector,
 } from '@caj/configs/colors';
-import {RootScreenNavigationProp} from '@caj/Navigation';
+import {HomeScreenNavigationProp} from '@caj/Navigation';
 import {RootState, store} from '@caj/redux/store';
+import {ChatScreenNavigationProp} from '@caj/tabs/main/ChatTab';
 import UserManager from '@caj/user/UserManager';
 import {useNavigation} from '@react-navigation/native';
 import {Box, HStack, Pressable, Text, VStack} from 'native-base';
@@ -33,7 +34,7 @@ export function ListChats() {
 
   const lang = useSelector((state: RootState) => state.appVariables.lang);
 
-  const navigation = useNavigation<RootScreenNavigationProp>();
+  const navigation = useNavigation<HomeScreenNavigationProp>();
 
   return (
     <VStack
@@ -51,7 +52,7 @@ export function ListChats() {
               key={'chatList_i' + i + chatId}
               onPress={() => {
                 store.dispatch(appNonSaveVarActions.setSelectedChat(chatId));
-                navigation.navigate('Chat', {screen: 'Overview'});
+                navigation.navigate('ChatList', {screen: 'Chat'});
                 //navigation.navigate('Register', {screen: 'RegStepOne'});
               }}>
               {({isHovered, isFocused, isPressed}) => {
diff --git a/src/caj/components/chat/screen/main.tsx b/src/caj/components/chat/screen/main.tsx
index 8ed8da5..850a168 100644
--- a/src/caj/components/chat/screen/main.tsx
+++ b/src/caj/components/chat/screen/main.tsx
@@ -1,42 +1,64 @@
+import {ProfilePicture} from '@caj/components/ProfilePicture';
+import {TextSkeleton} from '@caj/components/simple/Skeleton';
 import {defaultHeaderStyle} from '@caj/configs/colors';
 import {SlideFromRightView} from '@caj/helper/animations';
 import {RootState} from '@caj/redux/store';
+import UserManager from '@caj/user/UserManager';
 import {
   createNativeStackNavigator,
+  NativeStackNavigationOptions,
   NativeStackNavigationProp,
 } from '@react-navigation/native-stack';
-import {Text} from 'native-base';
+import {Box, HStack, Text, VStack} from 'native-base';
+import {Platform} from 'react-native';
 import {useSelector} from 'react-redux';
 
-export type ChatMainStackNavigatorParamList = {
-  Overview: undefined;
-};
-
-const ChatStack = createNativeStackNavigator<ChatMainStackNavigatorParamList>();
-
-export type ChatScreenNavigationProp =
-  NativeStackNavigationProp<ChatMainStackNavigatorParamList>;
-
-function ChatScreenStack() {
+export function ChatScreenOptions(): NativeStackNavigationOptions {
   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>
+  const chatId = useSelector(
+    (state: RootState) => state.nonSaveVariables.selectedChat,
   );
+  const user = UserManager.getUserSelector(chatId);
+
+  const platformUIFactor = Platform.OS === 'ios' ? 0.8 : 1;
+
+  return {
+    title: '',
+    headerTitle: () => {
+      return (
+        <HStack space={2} alignItems="center" flex={1}>
+          <ProfilePicture UserId={chatId} size={40 * platformUIFactor} />
+          <VStack>
+            <TextSkeleton
+              SkeletonProps={{
+                lines: 1,
+                width: '160px',
+              }}
+              color="primary.400"
+              fontSize={16 * platformUIFactor}>
+              {user.Username.data}
+            </TextSkeleton>
+            <TextSkeleton
+              SkeletonProps={{
+                lines: 1,
+                width: '140px',
+              }}
+              color="white.600"
+              fontSize={16 * platformUIFactor}>
+              {user.AccountName.data}
+            </TextSkeleton>
+          </VStack>
+        </HStack>
+      );
+    },
+    animation: 'slide_from_right',
+    headerShown: true,
+
+    ...defaultHeaderStyle(theme),
+  };
 }
 
 function ChatMainScreen() {
@@ -44,7 +66,11 @@ function ChatMainScreen() {
     (state: RootState) => state.nonSaveVariables.selectedChat,
   );
 
-  return <Text>{chatId}</Text>;
+  return (
+    <Box backgroundColor={'blackBG.400'} height="10000px">
+      {' '}
+    </Box>
+  );
 }
 
-export default ChatScreenStack;
+export default ChatMainScreen;
diff --git a/src/caj/components/simple/Skeleton.tsx b/src/caj/components/simple/Skeleton.tsx
index 9cccf70..c47711a 100644
--- a/src/caj/components/simple/Skeleton.tsx
+++ b/src/caj/components/simple/Skeleton.tsx
@@ -22,6 +22,7 @@ export function TextSkeleton(
   if ((theme.fontSizes as any)[fontSize as any] !== undefined) {
     fontSize = (theme.fontSizes as any)[fontSize as any];
   }
+
   if (typeof fontSize !== 'number') {
     fontSize = defaultFontSize;
   }
@@ -29,12 +30,13 @@ export function TextSkeleton(
   if (props.children === undefined) {
     return (
       <Skeleton.Text
-        marginY={fontSize / 2.5 + 'px'}
+        _line={{h: fontSize / 1.25 + 'px'}}
+        marginY={fontSize / 2.75 + 'px'}
         {...props.SkeletonProps}
         startColor={props.color}
         opacity={0.4}></Skeleton.Text>
     );
   }
 
-  return <Text fontSize={fontSize} {...props} />;
+  return <Text fontSize={fontSize + 'px'} {...props} />;
 }
diff --git a/src/caj/components/userUI/AccountInfoBanner.tsx b/src/caj/components/userUI/AccountInfoBanner.tsx
index 67e8aef..94ed978 100644
--- a/src/caj/components/userUI/AccountInfoBanner.tsx
+++ b/src/caj/components/userUI/AccountInfoBanner.tsx
@@ -165,7 +165,9 @@ export default function AccountInfoBanner(props: {
 }
 
 export function MyUserAccountInfoBanner() {
-  const myUser = UserManager.getUserSelector(MyUserManager.getSelectedUserId());
+  const myUser =
+    MyUserManager.getSelectedMyUserSelector() ||
+    UserManager.initUndefinedUser('none');
 
   return <AccountInfoBanner user={myUser} align="right" />;
 }
diff --git a/src/caj/tabs/main/ChatTab.tsx b/src/caj/tabs/main/ChatTab.tsx
index b7a0b2d..2073490 100644
--- a/src/caj/tabs/main/ChatTab.tsx
+++ b/src/caj/tabs/main/ChatTab.tsx
@@ -1,8 +1,12 @@
 import {ListChats} from '@caj/components/chat/listChats';
+import ChatScreenStack, {
+  ChatScreenOptions,
+} from '@caj/components/chat/screen/main';
 import NotLoggedIn from '@caj/components/NotLoggedIn';
 import {defaultHeaderStyle} from '@caj/configs/colors';
 import {RootStackNavigatorParamList} from '@caj/Navigation';
 import {RootState} from '@caj/redux/store';
+import {NavigatorScreenParams} from '@react-navigation/native';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
@@ -14,6 +18,7 @@ export const ChatTabName = 'Chat';
 
 export type ChatStackNavigatorParamList = {
   Overview: undefined;
+  Chat: undefined;
 };
 
 const ChatStack = createNativeStackNavigator<ChatStackNavigatorParamList>();
@@ -38,6 +43,11 @@ function ChatTab() {
         }}
         component={ChatScreen}
       />
+      <ChatStack.Screen
+        name="Chat"
+        component={ChatScreenStack}
+        options={ChatScreenOptions()}
+      />
     </ChatStack.Navigator>
   );
 }
diff --git a/src/caj/user/MyUserManager.ts b/src/caj/user/MyUserManager.ts
index f9932ad..d3c8f9d 100644
--- a/src/caj/user/MyUserManager.ts
+++ b/src/caj/user/MyUserManager.ts
@@ -130,7 +130,7 @@ function getSelectedUserId(): UserId {
   return store.getState().appVariables.preferences.selectedAccount;
 }
 
-function getSelectedMyUserSelector() {
+function getSelectedMyUserSelector(): MyUserAccount | undefined {
   const myUserId = useSelector(
     (state: RootState) => state.appVariables.preferences.selectedAccount,
   );
@@ -158,5 +158,6 @@ const MyUserManager = {
   getSessionId,
   getSelectedUserId,
   logoutMyUser,
+  getSelectedMyUserSelector,
 };
 export default MyUserManager;
diff --git a/src/caj/user/UserManager.ts b/src/caj/user/UserManager.ts
index 7d14861..dd2dc98 100644
--- a/src/caj/user/UserManager.ts
+++ b/src/caj/user/UserManager.ts
@@ -259,5 +259,6 @@ const UserManager = {
   getUserSelector,
   getUserSelectorPicture,
   getUserSelectorAccountName,
+  initUndefinedUser,
 };
 export default UserManager;
diff --git a/src/caj/user/types.ts b/src/caj/user/types.ts
index 08b9ab5..d69d9f6 100644
--- a/src/caj/user/types.ts
+++ b/src/caj/user/types.ts
@@ -25,8 +25,8 @@ export interface BasicUserProp<T1> {
 export type ProfilePictureType = BasicUserProp<Blob | undefined>;
 
 export interface ProfilePicture {
-  lq: ProfilePictureType;
-  hq?: ProfilePictureType;
+  lq: ProfilePictureType; //low quality
+  hq?: ProfilePictureType; //high quality
 }
 
 export interface User {