finished upload input

src/components/HomePage/RightBar/ChatBar/FilesMenu/index.tsx

@@ -2,45 +2,44 @@ import MenuList from '@mui/material/MenuList';
 import MenuItem from '@mui/material/MenuItem';
 import ListItemText from '@mui/material/ListItemText';
 import ListItemIcon from '@mui/material/ListItemIcon';
-import PhotoSizeSelectActualIcon from '@mui/icons-material/PhotoSizeSelectActual';
 import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
-
 import { makeStyles } from '@material-ui/core'
-
+import UploadPhotoAndVideo from '../../../../reusableComponents/DropZone/UploadPhotoAndVideo'
 
 const useStyles = makeStyles({
-    list: {
-      background: '#fdfdfd',
-    },
-    listIcon: {
-      marginRight: 15,
-    },
+  list: {
+    background: '#fdfdfd',
+  },
+  listIcon: {
+      position: 'absolute',
+      left:0
+  },
+  listText: {
+      position: 'absolute',
+      left:60
+  },  
 })
 
 interface IFilesMenu {
-  setIsOpenMenu: any
+  setIsOpenMenu: any,
+  setFile: any,
+  setValue:any
 }
-const FilesMenu = ({setIsOpenMenu}:IFilesMenu) => {
+const FilesMenu = ({setIsOpenMenu,setFile,setValue}:IFilesMenu) => {
   const classes = useStyles()
-  const handleClose = (i: number) => {
-    console.log(i, 'index of type file')
-    setIsOpenMenu(false)
-  }
+  const handleClose = () => setIsOpenMenu(false)
+  
   return (
-      <MenuList className={classes.list}>
-        <MenuItem onClick={() => handleClose(0)}>
-          <ListItemIcon className={classes.listIcon}>
-            <PhotoSizeSelectActualIcon fontSize="medium" />
-          </ListItemIcon>
-          <ListItemText>Photo or Video</ListItemText>
-        </MenuItem>
-        <MenuItem onClick={() => handleClose(1)}>
+    <MenuList className={classes.list}>
+      <MenuItem  onClick={handleClose}>
+      <UploadPhotoAndVideo setFile={setFile} setValue={setValue}>
           <ListItemIcon className={classes.listIcon}>
             <InsertDriveFileIcon fontSize="medium" />
           </ListItemIcon>
-          <ListItemText>File</ListItemText>
-        </MenuItem>
-      </MenuList>
+          <ListItemText className={classes.listText}>Upload File jpg*,png*,mp3*,mp4*</ListItemText>
+        </UploadPhotoAndVideo>
+      </MenuItem>
+  </MenuList>
   );
 }
 

src/components/HomePage/RightBar/ChatBar/SendMessage/index.tsx

@@ -5,6 +5,7 @@ import AttachFileIcon from '@mui/icons-material/AttachFile';
 import SentimentSatisfiedAltIcon from '@mui/icons-material/SentimentSatisfiedAlt';
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import Avatar from '@mui/material/Avatar';
+import CloseIcon from '@mui/icons-material/Close';
 import { useState } from "react";
 import { useSelector } from "react-redux";
 import { getState } from '../../../../../redux/authorization/selector'
@@ -12,7 +13,6 @@ import { getState } from '../../../../../redux/authorization/selector'
 import FilesMenu from "../FilesMenu";
 import NotDone from "../../../../reusableComponents/NotDone";
 
-
 const useStyles = makeStyles({   
     container: {
         display: "flex",
@@ -73,15 +73,12 @@ const useStyles = makeStyles({
         height: 'auto',
     },
     attachIcon: {
-        height:'auto',
-        '&:hover': {
-            color: 'rgb(41, 139, 231)',
-        }        
+        transform:'rotate(30deg)',  
     },
     filesMenu: {
       background: '#fdfdfd',
       position: 'absolute',
-      width: 230,
+      width: 355,
       maxWidth: '100%',
       left: 406,
       bottom:64,
@@ -115,7 +112,21 @@ const useStyles = makeStyles({
             backgroundColor: 'rgb(41, 139, 231)',
             color: '#ffffff',
         }
-    },    
+    },
+    iconCancel: {
+        position: 'absolute',
+        left:-45,
+        display:'flex',
+        backgroundColor: '#945353',
+        width: 56,
+        height: 56,
+        color: '#6b6b6b',
+        borderRadius: '50%',
+        '&:hover': {
+            backgroundColor: 'rgb(218, 18, 18)',
+            color: '#ffffff',
+        }
+    },
 });
 
 interface ISendMessage{
@@ -128,6 +139,7 @@ const SendMessage = ({setChat,isArrow,handleArrow}:ISendMessage) => {
     const classes = useStyles();
     const currentUser = useSelector(getState)
     const [value, setValue] = useState<string>('')
+    const [file, setFile] = useState<any>(null)
     const [isOpenMenu, setIsOpenMenu] = useState<boolean>(false)
     const [isOpenEmoji, setIsOpenEmoji] = useState<boolean>(false)
     const sentMessage = () => {
@@ -136,60 +148,62 @@ const SendMessage = ({setChat,isArrow,handleArrow}:ISendMessage) => {
         avatarUrl:`http://${avatarUrl}`,
         name,
         lastName,
-        message: value,
+        message: value?value:file.path,
         }
         setChat((prevState: any) => [...prevState, newMessage])
         setValue('')
-        setIsOpenMenu(false)
-        setIsOpenEmoji(false)        
+        setFile(null)
+        isOpenMenu&&setIsOpenMenu(false)
+        isOpenEmoji&&setIsOpenEmoji(false)        
     }    
     const handleTextarea = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-        setIsOpenMenu(false)
-        setIsOpenEmoji(false)
+        isOpenMenu&&setIsOpenMenu(false)
+        isOpenEmoji && setIsOpenEmoji(false)
         setValue(e.target.value.trim())
     }
     const handleFocusTextarea = () => {
-        setIsOpenMenu(false)
-        setIsOpenEmoji(false)
+        isOpenMenu&&setIsOpenMenu(false)
+        isOpenEmoji&&setIsOpenEmoji(false) 
     }
     const handleLeaveInput = (e: any) => {
         if (e.clientX > 1450 || e.clientX < 850) {
-        setIsOpenMenu(false)
-        setIsOpenEmoji(false) 
+        isOpenMenu&&setIsOpenMenu(false)
+        isOpenEmoji&&setIsOpenEmoji(false)  
         }
     }
     const handleMoveInput = (e: any) => {
         if (e.clientX < 1250 && e.clientX > 1200) {
-        setIsOpenMenu(false)
-        setIsOpenEmoji(false)  
+        isOpenMenu&&setIsOpenMenu(false)
+        isOpenEmoji&&setIsOpenEmoji(false)   
         }
     }
     const handleKeyPres = (e: any) => {
-        console.log(value.length)
         if(e.code === 'Enter'&& value) sentMessage()
     }
-    const handleEnterFileMenu = () => setIsOpenMenu(true)
-    const handleLeaveFileMenu = () => setIsOpenMenu(false)
-    const handleEnterEmoji = () => setIsOpenEmoji(true)
-    const handleLeaveEmoji = () => setIsOpenEmoji(false)  
-
+    const handleEnterFileMenu = () => !isOpenMenu&&setIsOpenMenu(true)
+    const handleLeaveFileMenu = () => isOpenMenu&&setIsOpenMenu(false)
+    const handleEnterEmoji = () => !isOpenEmoji&&setIsOpenEmoji(true)
+    const handleLeaveEmoji = () => isOpenEmoji && setIsOpenEmoji(false)
+    const handleClearMessage = () => setFile(null)
 
+    console.log(value,file)
     return (
         <div className={classes.container} >            
             <div onMouseLeave={handleLeaveInput} onMouseMove={handleMoveInput}
-                 onKeyPress={handleKeyPres} className={classes.inputContainer}>
+                onKeyPress={handleKeyPres} className={classes.inputContainer}>
+                <CloseIcon onClick={handleClearMessage} fontSize="small" className={classes.iconCancel}
+                    sx={{backgroundColor:'#ffffff',width:36,height:36,color:'#949393',display:file?'inline-block':'none'}}/>
                 <SentimentSatisfiedAltIcon onMouseEnter={handleEnterEmoji}
-                    fontSize='medium' sx={{ color: isOpenEmoji ? 'rgb(41, 139, 231)' : '#6b6b6b' }} />
+                    fontSize='medium' sx={{ color: isOpenEmoji ? 'rgb(41, 139, 231)' : '#6b6b6b' }}/>
                 <div onMouseLeave={handleLeaveEmoji} style={{display:isOpenEmoji?'block':'none'}} className={classes.emoji}>
                     <NotDone name='Emoji Bar'/>
                 </div>                
-                <textarea value={value} onFocus={handleFocusTextarea} onChange={handleTextarea} className={classes.textarea}
-                  placeholder='Message' rows={1}></textarea>
-                <AttachFileIcon onMouseEnter={handleEnterFileMenu} 
-                    className={classes.attachIcon}
+                <textarea disabled={file?true:false} value={value} onFocus={handleFocusTextarea} onChange={handleTextarea}
+                    className={classes.textarea} placeholder={file?'Press onto Plane to send or Cross to remove':'Message'} rows={1}></textarea>
+                <AttachFileIcon onMouseEnter={handleEnterFileMenu} className={classes.attachIcon}
                     fontSize='medium'  sx={{color: isOpenMenu?'rgb(41, 139, 231)':'#6b6b6b'}}/>
                 <div onMouseLeave={handleLeaveFileMenu} style={{display:isOpenMenu?'block':'none'}} className={classes.filesMenu}>
-                    <FilesMenu setIsOpenMenu={setIsOpenMenu}/>
+                    <FilesMenu setFile={setFile} setValue={setValue} setIsOpenMenu={setIsOpenMenu}/>
                 </div>
                 <Avatar onClick={handleArrow} className={classes.avatarArrow} sx={{
                   backgroundColor: '#ffffff',
@@ -197,12 +211,12 @@ const SendMessage = ({setChat,isArrow,handleArrow}:ISendMessage) => {
                   <ArrowDownwardIcon fontSize="medium" />
                 </Avatar>                 
             </div>  
-            {value ?
+            {value || file ?
              <Avatar onClick={sentMessage} className={classes.avatar} sx={{
                backgroundColor: '#ffffff',
                width: 56, height: 56 ,color: 'rgb(41, 139, 231)'}}>
                   <SendIcon fontSize="medium" />
-                </Avatar> :
+            </Avatar> :
              <Avatar className={classes.avatar} sx={{
                backgroundColor: '#ffffff',
                     width: 56, height: 56, color: '#6b6b6b'}}>                   

src/components/reusableComponents/DropZone/UploadAvatar/index.tsx

@@ -28,9 +28,9 @@ const useStyles = makeStyles({
 interface IUploadAvatar {
   setUpload: React.Dispatch<React.SetStateAction<any>>
 }
-function UploadAvatar({ setUpload }: IUploadAvatar) {
+const  UploadAvatar = ({ setUpload }: IUploadAvatar) => {
   
-  const {
+const {
     acceptedFiles,
     getRootProps,
     getInputProps

src/components/reusableComponents/DropZone/UploadPhotoAndVideo/index.tsx

@@ -0,0 +1,49 @@
+import { makeStyles } from '@material-ui/core'
+import React from 'react';
+import { useDropzone } from 'react-dropzone';
+import { useEffect } from 'react';
+
+const useStyles = makeStyles({
+  container: {
+      width: '100%',
+      position:'relative',
+  },
+    dropZone: {
+        width: '100%',
+        display: 'flex',
+        position:'relative',
+        height: 20,
+        zIndex:10
+  },
+})
+
+interface IUploadPhotoAndVideo {
+  children:React.ReactNode,
+  setFile: any,
+  setValue:any,
+}
+  
+const UploadPhotoAndVideo = ({children,setFile,setValue}:IUploadPhotoAndVideo) => {
+  const classes = useStyles()
+    const { getRootProps, getInputProps, acceptedFiles } = useDropzone({
+        noDrag: true,
+        accept: 'image/jpeg,image/png,video/mp4,audio/mpeg'
+    });
+      useEffect(() => {
+        if (acceptedFiles.slice(-1)[0]) {
+          setValue('')
+          setFile(acceptedFiles.slice(-1)[0])
+        }
+      }, [setFile,setValue, acceptedFiles])
+  
+    return (
+    <div className={classes.container} >
+      {children}
+      <div  {...getRootProps({ className: classes.dropZone })}>
+        <input placeholder='Photo or Video' {...getInputProps()}/>
+      </div>
+    </div>
+  );
+}
+
+export default UploadPhotoAndVideo