From e7cfd26b1b0efa0fe3d45337a1379b150ede14be Mon Sep 17 00:00:00 2001
From: Sergey Yarkov <serzh.yarkov@gmail.com>
Date: Wed, 2 Mar 2022 20:15:11 +0300
Subject: [PATCH] fix: mobile chat layout

---
 src/components/Chat/Sidebar/Sidebar.tsx         | 8 +-------
 src/components/Chat/Sidebar/Users/User/Info.tsx | 6 +++---
 src/components/Chat/Window/Message/Avatar.tsx   | 2 +-
 src/components/Chat/Window/Message/Text.tsx     | 2 +-
 src/components/Chat/Window/Window.tsx           | 3 +--
 src/pages/main/main.tsx                         | 4 +++-
 6 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/src/components/Chat/Sidebar/Sidebar.tsx b/src/components/Chat/Sidebar/Sidebar.tsx
index 202cb36..0537fb8 100644
--- a/src/components/Chat/Sidebar/Sidebar.tsx
+++ b/src/components/Chat/Sidebar/Sidebar.tsx
@@ -10,13 +10,7 @@ export interface ISidebarComposition {
 
 const Sidebar: React.FC<GridItemProps> & ISidebarComposition = props => {
   return (
-    <GridItem
-      pt='7rem'
-      borderRightWidth={{ base: '0', lg: '1px' }}
-      width={{ base: 'full', lg: '400px' }}
-      px={{ base: '0', lg: '3' }}
-      {...props}
-    >
+    <GridItem pt='7rem' borderRightWidth={{ base: '0', lg: '1px' }} px={{ base: '0', lg: '3' }} {...props}>
       {props.children}
     </GridItem>
   );
diff --git a/src/components/Chat/Sidebar/Users/User/Info.tsx b/src/components/Chat/Sidebar/Users/User/Info.tsx
index 66a6d35..913eb00 100644
--- a/src/components/Chat/Sidebar/Users/User/Info.tsx
+++ b/src/components/Chat/Sidebar/Users/User/Info.tsx
@@ -16,12 +16,12 @@ const Info: React.FC<IInfoProps> = ({ fullname, lastMessage }) => {
 
   return (
     <Box ml='4' maxW='200px'>
-      <Text fontWeight={'semibold'} textOverflow={'ellipsis'} overflow={'hidden'} whiteSpace='nowrap'>
+      <Text fontWeight={'semibold'}>
         {isMe ? 'Favorites' : fullname} <br />
         {lastMessage && (
-          <Text as={'span'} fontWeight='normal' fontSize={'sm'} color='gray.500'>
+          <Text as={'span'} fontWeight='normal' fontSize={'sm'} color='gray.500' wordBreak={'break-all'}>
             {lastMessage.from === me?.id && `You: `}
-            {lastMessage.content}
+            {lastMessage.content.length >= 20 ? lastMessage.content.slice(0, 20 - 1) + '...' : lastMessage.content}
           </Text>
         )}
       </Text>
diff --git a/src/components/Chat/Window/Message/Avatar.tsx b/src/components/Chat/Window/Message/Avatar.tsx
index 6887fe1..85cad6d 100644
--- a/src/components/Chat/Window/Message/Avatar.tsx
+++ b/src/components/Chat/Window/Message/Avatar.tsx
@@ -7,7 +7,7 @@ export interface IAvatarProps {
 
 const Avatar: React.FC<IAvatarProps> = memo(({ fullname: name }) => {
   return (
-    <WrapItem>
+    <WrapItem alignSelf={'flex-start'}>
       <ChakraAvatar name={name} size={'sm'} />
     </WrapItem>
   );
diff --git a/src/components/Chat/Window/Message/Text.tsx b/src/components/Chat/Window/Message/Text.tsx
index 14e4bad..714b11e 100644
--- a/src/components/Chat/Window/Message/Text.tsx
+++ b/src/components/Chat/Window/Message/Text.tsx
@@ -14,7 +14,7 @@ const Text: React.FC<ITextProps> = ({ content, time }) => {
 
   return (
     <Box mx={'4'} maxW={'450px'} bg={bgColor} borderRadius='3xl' px='6' py='3'>
-      <ChakraText fontSize={'15px'}>
+      <ChakraText fontSize={'15px'} wordBreak='break-all'>
         {content}
         <Box
           as='time'
diff --git a/src/components/Chat/Window/Window.tsx b/src/components/Chat/Window/Window.tsx
index 254d465..6f94d01 100644
--- a/src/components/Chat/Window/Window.tsx
+++ b/src/components/Chat/Window/Window.tsx
@@ -32,7 +32,7 @@ import { useRootStore } from '@educt/hooks/useRootStore';
 import { useHistory } from 'react-router-dom';
 
 const Wrapper: React.FC<GridItemProps> = props => (
-  <GridItem pt={'7rem'} pb='5' px='12' {...props}>
+  <GridItem pt={'7rem'} pb='5' px={{ base: '4', lg: '12' }} {...props}>
     {props.children}
   </GridItem>
 );
@@ -192,7 +192,6 @@ const Window: React.FC = props => {
               resize={'block'}
               type='text'
               placeholder='Write a message...'
-              maxW='900px'
               variant={'outline'}
               rounded='xl'
               mr='2'
diff --git a/src/pages/main/main.tsx b/src/pages/main/main.tsx
index ee6be1c..8dfc173 100644
--- a/src/pages/main/main.tsx
+++ b/src/pages/main/main.tsx
@@ -40,6 +40,8 @@ const MainPage: React.FC<IPageProps> = () => {
 
   if (me === null || courses === null || stat === null) return <LoadingPage />;
 
+  const unreadMessages = me.notifications.filter(n => n.type === 'MESSAGE');
+
   return (
     <Page>
       <Page.Heading heading={`👋 Hello ${me.first_name},`} description="This what we've got today for you." />
@@ -58,7 +60,7 @@ const MainPage: React.FC<IPageProps> = () => {
             <StatContent>
               <StatNumber>
                 <Link as={ReactRouterLink} to='/messages'>
-                  0
+                  {unreadMessages.length}
                 </Link>
               </StatNumber>
               <StatIcon icon={MdOutlineMessage} />