Fix layout

4-life · 4-life · commit a87e528a8969 · 2024-10-14T17:52:04.000+03:00
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -92,7 +92,7 @@ jobs:
           key: app-build-${{ github.head_ref }}.${{ github.sha }}
 
       - name: Configure AWS Credentials
-        uses: aws-actions/configure-aws-credentials@v1
+        uses: aws-actions/configure-aws-credentials@v4
         with:
           aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
           aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
diff --git a/src/components/Chat/components/Message/index.tsx b/src/components/Chat/components/Message/index.tsx
@@ -48,7 +48,9 @@ function Message({ message, user, selectUser }: Props) {
       </MsgAvatar>
       <MsgText sx={{ justifyContent: me ? 'flex-end' : 'inherit' }}>
         <UserText>
-          <Typography color="secondary">{text}</Typography>
+          <Typography color="secondary" sx={{ wordBreak: 'break-word' }}>
+            {text}
+          </Typography>
           <Box>
             <TextDate>
               {status === 'sent' && me ? <DoneIcon sx={icon} /> : null}
diff --git a/src/components/Chat/components/Message/styles.tsx b/src/components/Chat/components/Message/styles.tsx
@@ -34,7 +34,7 @@ export const UserText = styled(Box)(({ theme }: { theme: Theme }) => ({
   [theme.breakpoints.down('sm')]: {
     margin: '0 1em',
     minWidth: '50%',
-    maxWidth: '70%',
+    maxWidth: '100%',
   },
 }));
 
diff --git a/src/components/Chat/components/UserInGroup/index.tsx b/src/components/Chat/components/UserInGroup/index.tsx
@@ -1,5 +1,6 @@
 import React, { memo } from 'react';
 import Avatar from '@mui/material/Avatar';
+import { Typography } from '@mui/material';
 import Badge from '@mui/material/Badge';
 import Grid from '@mui/material/Grid';
 
@@ -9,9 +10,13 @@ import { getAvatarUrl } from 'utils/avatars';
 
 import { Box, TimeAgo, UserName, UserStatus, Btn } from './styles';
 
-type Props = { user: UserData; selectUser: (user?: UserData) => void };
+type Props = {
+  user: UserData;
+  selectUser: (user?: UserData) => void;
+  currentUser: boolean;
+};
 
-function UserInGroup({ user, selectUser }: Props) {
+function UserInGroup({ user, selectUser, currentUser }: Props) {
   const { name, status, online, connectedDate, avatar } = user;
   const parsedDate = connectedDate ? new Date(connectedDate) : new Date();
 
@@ -30,7 +35,14 @@ function UserInGroup({ user, selectUser }: Props) {
             </Badge>
           </Grid>
           <Grid item xs={0} sm={8}>
-            <UserName>{name}</UserName>
+            <UserName>
+              {name}
+              {currentUser ? (
+                <Typography component="span" color="gray" marginLeft={1}>
+                  (you)
+                </Typography>
+              ) : null}
+            </UserName>
             <UserStatus color="secondary">{status}</UserStatus>
           </Grid>
           <Grid item xs={0} sm={2}>
diff --git a/src/components/Chat/index.tsx b/src/components/Chat/index.tsx
@@ -100,7 +100,12 @@ function Chat() {
           <Content>
             <Users>
               {users?.map((u) => (
-                <UserInGroup user={u} key={u.id} selectUser={showUserHandler} />
+                <UserInGroup
+                  user={u}
+                  key={u.id}
+                  selectUser={showUserHandler}
+                  currentUser={user?.id === u.id}
+                />
               ))}
               <UsersSkeleton show={!users?.length} />
             </Users>
diff --git a/src/components/Chat/styles.tsx b/src/components/Chat/styles.tsx
@@ -126,7 +126,8 @@ export const Logo = styled(Box)(({ theme }: { theme: Theme }) => ({
   backgroundRepeat: 'no-repeat',
   marginRight: '1em',
   borderRadius: '7px',
-  boxShadow: `0 0px 0.4em 0em inset ${theme.palette.border.dark}`,
+  boxShadow: `0 2px 0.1em 0em ${theme.palette.border.dark}`,
+  backgroundColor: 'white',
 }));
 
 export const Title = styled(Typography)(({ theme }: { theme: Theme }) => ({
diff --git a/src/hooks/useChat.tsx b/src/hooks/useChat.tsx
@@ -48,6 +48,19 @@ const useChat = (currentUser: UserData | null, scrollBottom?: () => void) => {
         );
         setMessages(updatedMessages);
         scrollBottom?.();
+        // const otherMsgs = updatedMessages.filter(({ me }) => !me);
+        // const lastMsg = otherMsgs[otherMsgs.length - 1];
+
+        // if (lastMsg) {
+        //   const sender = users.find(({ id }) => id === lastMsg.userId);
+
+        //   if (sender) {
+        //     showNotification(`New message from ${sender.name}`, {
+        //       body: lastMsg.text,
+        //       icon: '/images/logo.webp',
+        //     });
+        //   }
+        // }
       });
     } else {
       setMessages([]);
diff --git a/src/utils/showNotification.ts b/src/utils/showNotification.ts
@@ -0,0 +1,19 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+export default function showNotification(
+  title: string,
+  options: NotificationOptions
+): void {
+  if (!('Notification' in window)) {
+    return;
+  }
+
+  if (Notification.permission === 'granted') {
+    const notification = new Notification(title, options);
+  } else if (Notification.permission !== 'denied') {
+    Notification.requestPermission().then((permission) => {
+      if (permission === 'granted') {
+        const notification = new Notification(title, options);
+      }
+    });
+  }
+}
diff --git a/src/utils/timeAgo.ts b/src/utils/timeAgo.ts
@@ -1,11 +1,10 @@
 import TimeAgo from 'javascript-time-ago';
 
-// English.
 import en from 'javascript-time-ago/locale/en';
 
 TimeAgo.addDefaultLocale(en);
 
-// Create formatter (English).
+// Create formatter
 const timeAgo = new TimeAgo('en-US');
 
 export default function getTimeAgo(date: Date, short = true): string {
