add delete image

src/components/HomePage/LeftBar/SettingsBar/SettingsPicture/DeleteModal/index.tsx

@@ -0,0 +1,77 @@
+import Button from '@mui/material/Button';
+import { makeStyles } from '@material-ui/core'
+import { useDispatch } from 'react-redux';
+import { updateCredentials } from '../../../../../../api-data';
+import { asyncCurrentUser } from '../../../../../../redux/authorization/operations';
+
+const useStyles = makeStyles({
+  modalDelete: {
+    background: '#ffffff',
+    position: 'absolute',
+    content:'',
+    width: '20%',
+    height:'auto',
+    left: '40%',
+    bottom: '48.5%',
+    borderRadius: 10,
+    padding: 10,
+    display: 'flex',
+    flexDirection:'column'
+  },  
+  overlay: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    width: '100vw',
+    height: '100vh',
+    zIndex: 100,
+    backgroundColor: 'rgba(104, 105, 104, 0.6)',
+    overflowY: 'hidden',
+  },
+  titleWrapper: {
+    display: 'flex',
+    justifyContent: 'flex-start',
+    alignContent: 'center',
+    alignItems:'center'
+  },
+})
+
+interface IDeleteModal {
+  setModal: (a: boolean) => void,
+  avatarsArr: { avatarUrl: string, updatedAt: string }[] | [],
+  index: number
+}
+const DeleteModal = ({setModal,avatarsArr,index}:IDeleteModal) => {
+  const classes = useStyles()
+  const dispatch = useDispatch()
+  const handleDeleteModal = (e: any) => {
+    const id = e.target.id
+    if (id === 'overlay' || id === 'cancel') return setModal(false)
+    if (id === 'delete') {
+      const toDelete = avatarsArr[index]
+      const filteredAvatars = [...avatarsArr].filter(({ avatarUrl }) => avatarUrl !== toDelete.avatarUrl)
+      updateCredentials({ avatarsArr:filteredAvatars,avatarUrl: filteredAvatars[0].avatarUrl})
+      setModal(false)
+      dispatch(asyncCurrentUser())
+    }
+  }
+  
+  return (
+    <div onClick={handleDeleteModal} className={classes.overlay} id='overlay'>
+      <div className={classes.modalDelete}>
+        <div className={classes.titleWrapper}>
+          <h3 style={{color: '#2c2c2c'}}>Delete image</h3>
+        </div>
+        <p style={{color: '#050505'}}>{`Are you sure you want to delete the Image?`}</p>
+        <Button id='delete' variant="text" color="error" style={{fontWeight:500,fontSize:22}}>
+          DELETE IMAGE
+        </Button>         
+        <Button id='cancel' variant="text" style={{fontWeight:500,fontSize:22}}>
+          CANCEL
+        </Button>
+      </div>
+    </div>      
+   )
+}
+
+export default DeleteModal

src/components/HomePage/LeftBar/SettingsBar/SettingsPicture/index.tsx

@@ -1,7 +1,13 @@
 import { makeStyles } from '@material-ui/core'
-import { firstLetter,slicedWord,timeStampEU } from '../../../../../helpers'
 import { useSelector } from 'react-redux';
+import { useState } from 'react';
 import { getState } from '../../../../../redux/authorization/selector'
+import { Carousel } from 'react-responsive-carousel';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import Avatar from '@mui/material/Avatar';
+import { firstLetter, slicedWord, timeStampEU } from '../../../../../helpers'
+import DeleteModal from './DeleteModal';
+
 
 const useStyles = makeStyles({
   container: {
@@ -9,54 +15,86 @@ const useStyles = makeStyles({
     backgroundColor: '#ffffff',
     position:'relative',
   },
-  imgContainer: {
-    position:'relative',
-    width: '100%',
-    height: 'auto',
-    color: '#ffffff',
-    display: 'flex',
-    justifyContent: 'center',
-    alignContent: 'center',
-    alignItems: 'center',
-    fontSize: 200,
-  },
   nameTile: {
     position:'absolute',
     color: '#ffffff',
-    backgroundColor: '#6e6e6e7d',
+    backgroundColor: 'rgb(0,0,0)',
     borderRadius: 10,
-    padding:'0px 6px 2px 6px',
-    fontWeight:600,
-    fontSize: 24,
+    padding:8,
+    fontSize: 18,
     zIndex:10,
-    bottom: 50,
-    left:20
+    top: '7%',
+    left: '50%',    
+    marginLeft: '-45%',
+    opacity: 0.7,
+    transition: 'opacity .35s ease-in-out'
   },
   timeTile: {
     position:'absolute',
     color: '#ffffff',
-    backgroundColor:'#6e6e6e7d',
+    backgroundColor: 'rgb(0,0,0)',
     borderRadius: 10,
-    padding:'0px 6px 2px 6px',
-    fontSize: 19,
-    fontWeight:600,
-    bottom: 20,
-    left:20
-  },    
+    padding:4,
+    fontSize: 15,
+    top: '1%',
+    left: '50%',    
+    marginLeft: '-45%',
+    opacity: 0.7,
+    transition: 'opacity .35s ease-in-out'
+  },
+  iconDeleteWrapper: {
+    position: 'absolute',
+    top: '1%',
+    right: '9%',
+  },
+  iconDelete: {
+    '&:hover': {
+      opacity: 1,
+      color: '#fa0000',
+      animation: `$shake 0.5s`,
+    }
+  },
+  '@keyframes shake': {
+  '0%': { transform: 'translate(1px, 1px) rotate(0deg)'},
+  '10%': { transform: 'translate(-1px, -2px) rotate(-1deg)'},
+  '20%': { transform: 'translate(-3px, 0px) rotate(1deg)'},
+  '30%': { transform: 'translate(3px, 2px) rotate(0deg)'},
+  '40%': { transform: 'translate(1px, -1px) rotate(1deg)'},
+  '50%': { transform: 'translate(-1px, 2px) rotate(-1deg)'},
+  '60%': { transform: 'translate(-3px, 1px) rotate(0deg)'},
+  '70%': { transform: 'translate(3px, 1px) rotate(-1deg)'},
+  '80%': { transform: 'translate(-1px, -1px) rotate(1deg)'},
+  '90%': { transform: 'translate(1px, 2px) rotate(0deg)'},
+  '100%': { transform: 'translate(1px, -2px) rotate(-1deg)'},
+}  
 })
 
 const SettingsPicture = () => {
   const classes = useStyles()
-  const  { name,lastName,avatarUrl,online,color }  = useSelector(getState)
+  const { name, lastName, avatarsArr, online } = useSelector(getState)
+  const [modal, setModal] = useState<boolean>(false);
+  const [index, setIndex] = useState<number>(0);
+  const handleClick = (): void => setModal(true)
   return (
     <div className={classes.container}>
-      {avatarUrl ? <img className={classes.imgContainer} width='488px' height='468px' alt='avatar'
-        src={`http://localhost:3000/${avatarUrl}`}></img> :
-        <div className={classes.imgContainer} style={{ background: `linear-gradient(${color} 75%, #4e4e4e)` }}>
-        {`${firstLetter(name)}${firstLetter(lastName)}`}</div>}
+      {modal&&<DeleteModal setModal={setModal} avatarsArr={avatarsArr} index={index} />}
+      <Carousel onChange={(i)=> setIndex(i)}>
+        {avatarsArr.map(({ avatarUrl, updatedAt }) =>
+          <div>
+            <img alt='pic' src={`http://localhost:3000/${avatarUrl}`}/>
+            <p className="legend">{timeStampEU(updatedAt)}</p>         
+          </div>)}
+       </Carousel>      
       <span className={classes.nameTile}>{`${firstLetter(name)}${slicedWord(name, 15, 1)}
         ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}</span>
-      <span className={classes.timeTile}>{online === 'true'?'online':`last seen ${timeStampEU(online)}`}</span>
+      <span className={classes.timeTile}>{online === 'true' ? 'online' : `last seen ${timeStampEU(online)}`}</span>
+      <div className={classes.iconDeleteWrapper}>
+        <Avatar className={classes.iconDelete} onClick={handleClick}
+          sx={{width: 36, height: 36, backgroundColor: 'rgb(0,0,0)',
+          color: '#ffffff', opacity: 0.5,cursor:'pointer'}}>
+          <DeleteOutlineIcon fontSize='medium'/>  
+        </Avatar>     
+      </div>
     </div>
   )
 }

src/components/HomePage/RightBar/RightListsAndBars/CredentialsList/ProfilePicture/index.tsx

@@ -1,57 +1,53 @@
 import { makeStyles } from '@material-ui/core'
-import { firstLetter,slicedWord,timeStampEU } from '../../../../../../helpers'
 import { useSelector } from 'react-redux';
+import { Carousel } from 'react-responsive-carousel';
+import { firstLetter,slicedWord,timeStampEU } from '../../../../../../helpers'
 import { getChat } from '../../../../../../redux/chat/selector'
 
 const useStyles = makeStyles({
   container: {
-    position:'relative'
-  },
-  imgContainer: {
-    position:'relative',
-    width: '100%',
-    height: 'auto',
-    color: '#ffffff',
-    display: 'flex',
-    justifyContent: 'center',
-    alignContent: 'center',
-    alignItems: 'center',
-    fontSize: 200,
+    position: 'relative',
   },
   nameTile: {
     position:'absolute',
     color: '#ffffff',
-    backgroundColor: '#6e6e6e7d',
+    backgroundColor: 'rgb(0,0,0)',
     borderRadius: 10,
-    padding:'0px 6px 2px 6px',
-    fontWeight:600,
-    fontSize: 24,
+    padding:8,
+    fontSize: 18,
     zIndex:10,
-    bottom: 50,
-    left:20
+    top: '6%',
+    left: '50%',    
+    marginLeft: '-45%',
+    opacity: 0.7,
+    transition: 'opacity .35s ease-in-out'
   },
   timeTile: {
     position:'absolute',
     color: '#ffffff',
-    backgroundColor:'#6e6e6e7d',
+    backgroundColor: 'rgb(0,0,0)',
     borderRadius: 10,
-    padding:'0px 6px 2px 6px',
-    fontSize: 19,
-    fontWeight:600,
-    bottom: 20,
-    left:20
+    padding:4,
+    fontSize: 15,
+    top: '1%',
+    left: '50%',    
+    marginLeft: '-45%',
+    opacity: 0.7,
+    transition: 'opacity .35s ease-in-out'
   },    
 })
 
 const ProfilePicture = () => {
   const classes = useStyles()
-  const  { name,lastName,avatarUrl,online,color }  = useSelector(getChat)
+  const { name, lastName, online, avatarsArr} = useSelector(getChat)
   return (
     <div className={classes.container}>
-      {avatarUrl ? <img className={classes.imgContainer} width='488px' height='468px' alt='avatar'
-        src={`http://localhost:3000/${avatarUrl}`}></img> :
-        <div className={classes.imgContainer} style={{ background: `linear-gradient(${color} 75%, #4e4e4e)` }}>
-        {`${firstLetter(name)}${firstLetter(lastName)}`}</div>}
+      <Carousel>
+        {avatarsArr.map(({avatarUrl,updatedAt}) => <div>
+              <img alt='pic' src={`http://localhost:3000/${avatarUrl}`}/>
+                <p className="legend">{timeStampEU(updatedAt)}</p>
+            </div>)}
+       </Carousel>      
       <span className={classes.nameTile}>{`${firstLetter(name)}${slicedWord(name, 15, 1)}
         ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}</span>
       <span className={classes.timeTile}>{online === 'true'?'online':`last seen ${timeStampEU(online)}`}</span>

src/typescript/redux/authorization/interfaces.ts

@@ -5,7 +5,7 @@ export interface IAuthorizationState  {
   originalName: string,
   originalLastName: string,
   avatarUrl: string,
-  avatarsArr: string[] | [],
+  avatarsArr: {avatarUrl:string,updatedAt: string}[] | [],
   color: string,
   code: string,
   _id: string ,

src/typescript/redux/chat/types.ts

@@ -4,7 +4,7 @@ export type TChat = {
   originalName: string,
   originalLastName: string,
   avatarUrl: string,
-  avatarsArr: string[] | [],
+  avatarsArr: {avatarUrl:string,updatedAt: string}[] | [],
   color: string,
   online: string,
   lastMessage: string,

src/typescript/redux/chats/types.ts

@@ -4,7 +4,7 @@ export type TChat = {
   originalName: string,
   originalLastName: string,
   avatarUrl: string,
-  avatarsArr: string[],
+  avatarsArr: {avatarUrl:string,updatedAt: string}[] | [],
   color: string,
   online: string,
   lastMessage: string,