done donwloads files

src/components/AuthPage/Registration/index.tsx

@@ -2,7 +2,7 @@ import { makeStyles, Button, TextField, Typography } from '@material-ui/core'
 import { useState } from 'react';
 import { useDispatch } from 'react-redux';
 
-import UploadAvatar from '../../reusableComponents/DropZone/UploadAvatar'
+import UploadAvatar from './UploadAvatar'
 import { asyncCreateUser } from '../../../redux/authorization/operations'
 import { format } from '../../../helpers'
 

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

@@ -4,7 +4,7 @@ import ListItemText from '@mui/material/ListItemText';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
 import { makeStyles } from '@material-ui/core'
-import UploadFile from '../../../../reusableComponents/DropZone/UploadFile'
+import UploadFile from './UploadFile'
 
 const useStyles = makeStyles({
   list: {
@@ -44,9 +44,7 @@ const FilesMenu = ({setIsOpenMenu,setFile,setValue,setType}:IFilesMenu) => {
         </UploadFile>
       </MenuItem>
       <MenuItem  onClick={() => handleClose('application')}>
-        <UploadFile setFile={setFile} setValue={setValue} accept='
-        application/pdf,application/docx,application/text,
-        application/rar,application/zip,application/excel'>
+        <UploadFile setFile={setFile} setValue={setValue} accept='application/pdf,application/text'>
           <ListItemIcon className={classes.listIcon}>
             <InsertDriveFileIcon fontSize="medium" />
           </ListItemIcon>

src/components/HomePage/RightBar/ChatBar/Messages/MessageLeftAudio/index.tsx

@@ -1,7 +1,10 @@
 import { makeStyles } from "@material-ui/core/styles";
+import { IconButton } from "@material-ui/core";
+import AudioFileIcon from '@mui/icons-material/AudioFile';
+import FileDownloadIcon from '@mui/icons-material/FileDownload';
+import { useState } from "react";
 
 import { timeStamp } from '../../../../../../helpers'
-import AudioPlayer from "../../Players/AudioPlayer";
 
 const useStyles = makeStyles({
   container: {
@@ -11,40 +14,88 @@ const useStyles = makeStyles({
       maxWidth: '80%',
       marginBottom:15
   },
-  playerWrapper: {
+  audioWrapper: {
     position: 'relative',
-    width: 300
-  }, 
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignContent: 'center',
+    alignItems: 'center',
+    maxWidth: 300,
+    padding: '5px 5px 10px 5px',
+    backgroundColor: '#ffffff',
+    borderRadius: 7,
+      "&:after": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "15px solid #ffffff",
+        borderLeft: "15px solid transparent",
+        borderRight: "15px solid transparent",
+        bottom: '0px',
+        left: "-15px"
+      },
+      "&:before": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "17px solid #ffffff",
+        borderLeft: "16px solid transparent",
+        borderRight: "16px solid transparent",
+        bottom: "0px",
+        left: "-17px"
+      }    
+  },
+  bntDownload: {
+    backgroundColor: '#ffffff',
+    color:'#54b0fc',
+    '&:hover': {
+      backgroundColor: '#54b0fc',
+      color:'#deffa9'
+    }
+  },
+  title: {
+    margin: '0 30px 0 5px',
+    color: '#0e0d0d'
+  },
   time: {
       position: "absolute",
       fontSize: ".65em",
       fontWeight:600,
-      bottom: -6,
+      bottom: -10,
       right: -5,
       color: '#ffffff',
       backgroundColor: '#3a3a3a',
       padding: 3,
-      borderRadius:5
+      borderRadius: 5,
+      zIndex:10
     },
 });
+
 interface IMessageLeftAudio {
   audioUrl:string,
   updatedAt: string,
-  audio:any,
-  setAudio: any,
-  i:number
 }
 
-const MessageLeftAudio = ({ audioUrl,updatedAt,audio,setAudio,i }:IMessageLeftAudio) => {
+const MessageLeftAudio = ({ audioUrl,updatedAt }:IMessageLeftAudio) => {
   const classes = useStyles();
+  const [change, setChange] = useState<boolean>(false)
+  const handleChange = () => setChange(!change)
 
   return (
     <div className={classes.container}>
-      <div className={classes.playerWrapper}>
+      <div className={classes.audioWrapper} onMouseEnter={handleChange} onMouseLeave={handleChange}>
+        <AudioFileIcon fontSize='large' style={{ color:'#5f5f5f'}}/>         
+        <span className={classes.title}>Audio File</span>
+        <a href={`http://localhost:3000/${audioUrl}`} target="_blank" rel="noreferrer">
+           <IconButton className={classes.bntDownload}  >
+             <FileDownloadIcon fontSize='small'/>
+           </IconButton>
+        </a>
         <div className={classes.time}>{timeStamp(updatedAt)}</div>
-        <AudioPlayer audio={audio} setAudio={setAudio} i={i} src={`http://localhost:3000/${audioUrl}`}/>
       </div>
     </div>    
 )};
 
-export  default  MessageLeftAudio
+export  default  MessageLeftAudio

src/components/HomePage/RightBar/ChatBar/Messages/MessageLeftText/index.tsx

@@ -46,7 +46,7 @@ const useStyles = makeStyles({
         borderBottom: "17px solid #ffffff",
         borderLeft: "16px solid transparent",
         borderRight: "16px solid transparent",
-        bottom: "-1px",
+        bottom: "0px",
         left: "-17px"
       }      
     },

src/components/HomePage/RightBar/ChatBar/Messages/MessageRightAudio/index.tsx

@@ -1,7 +1,9 @@
 import { makeStyles } from "@material-ui/core/styles";
+import { IconButton } from "@material-ui/core";
+import AudioFileIcon from '@mui/icons-material/AudioFile';
+import FileDownloadIcon from '@mui/icons-material/FileDownload';
 
 import { timeStamp } from '../../../../../../helpers'
-import AudioPlayer from "../../Players/AudioPlayer";
 
 const useStyles = makeStyles({
   container: {
@@ -11,39 +13,84 @@ const useStyles = makeStyles({
       maxWidth: '80%',
       marginBottom:15
   },
-  playerWrapper: {
+  audioWrapper: {
     position: 'relative',
-    width: 300
-  }, 
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignContent: 'center',
+    alignItems: 'center',
+    maxWidth: 300,
+    padding: '5px 5px 10px 5px',
+    backgroundColor: '#deffa9',
+    borderRadius: 7,
+      "&:after": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "15px solid #deffa9",
+        borderLeft: "15px solid transparent",
+        borderRight: "15px solid transparent",
+        bottom: "0",
+        right: "-15px"
+      },
+      "&:before": {
+        content: "''",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        borderBottom: "17px solid #deffa9",
+        borderLeft: "16px solid transparent",
+        borderRight: "16px solid transparent",
+        bottom: "0px",
+        right: "-17px"
+      }    
+  },
+  bntDownload: {
+    backgroundColor: '#deffa9',
+    color:'#54b0fc',
+    '&:hover': {
+      backgroundColor: '#54b0fc',
+      color:'#ffffff'
+    }
+  },
+  title: {
+    margin: '0 30px 0 5px',
+    color: '#0e0d0d'
+  },
   time: {
       position: "absolute",
       fontSize: ".65em",
       fontWeight:600,
-      bottom: -6,
-      right: -5,
+      bottom: -10,
+      left: -5,
       color: '#ffffff',
       backgroundColor: '#3a3a3a',
       padding: 3,
-      borderRadius:5
+      borderRadius: 5,
+      zIndex:10
     },
 });
 
 interface IMessageRightAudio {
   audioUrl:string,
   updatedAt: string,
-  audio:any,
-  setAudio: any,
-  i:number
 }
 
-const MessageRightAudio = ({ audioUrl,updatedAt,audio,setAudio,i }:IMessageRightAudio) => {
+const MessageRightAudio = ({ audioUrl,updatedAt }:IMessageRightAudio) => {
   const classes = useStyles();
 
   return (
     <div className={classes.container}>
-      <div className={classes.playerWrapper}>
+      <div className={classes.audioWrapper}>
+        <AudioFileIcon fontSize='large' style={{ color:'#5f5f5f'}}/>         
+        <span className={classes.title}>Audio File</span>
+        <a href={`http://localhost:3000/${audioUrl}`} target="_blank" rel="noreferrer" download>
+           <IconButton className={classes.bntDownload}  >
+             <FileDownloadIcon fontSize='small'/>
+           </IconButton>
+        </a>
         <div className={classes.time}>{timeStamp(updatedAt)}</div>
-        <AudioPlayer audio={audio} setAudio={setAudio} i={i} src={`http://localhost:3000/${audioUrl}`}/>
       </div>
     </div>    
 )};

src/components/HomePage/RightBar/ChatBar/Players/AudioPlayer/index.tsx

@@ -1,110 +0,0 @@
-import { makeStyles } from '@material-ui/core'
-import Stack from '@mui/material/Stack';
-import Slider from '@mui/material/Slider';
-import PlayCircleIcon from '@mui/icons-material/PlayCircle';
-import PauseCircleIcon from '@mui/icons-material/PauseCircle';
-import VolumeUpIcon from '@mui/icons-material/VolumeUp';
-import VolumeOffIcon from '@mui/icons-material/VolumeOff';
-import AudioFileIcon from '@mui/icons-material/AudioFile';
-import { useEffect } from 'react';
-
-const useStyles = makeStyles({
-  container: {
-    width: '100%',
-    backgroundColor: '#ececec',
-    borderRadius: 5,
-    padding:'0 5px'
-  },
-  icon: {
-    color: '#2d8fff',
-    cursor:"pointer"
-  },
-  iconCancel: {
-    color: '#a3a3a3',
-    cursor:"pointer"
-  }
-})
-
-interface IAudioPlayer {
-  src: string,
-  audio:any,
-  setAudio: any,
-  i:number
-}
-
-const  AudioPlayer = ({ src,audio,setAudio,i }: IAudioPlayer) => {
-  const classes = useStyles()
-  const handlePlay = () => {
-    if (audio) {
-      const oldAudio = audio.audio
-      oldAudio.pause()
-      oldAudio.currentTime = 0
-    }
-    const newAudio = new Audio(src)
-    const newObject = {
-      audio: newAudio,
-      i,
-      pause: true,
-      volume:true
-    }
-    setAudio(newObject)
-    newAudio.play()
-  }
-
-  const handlePause = () => {
-    if (audio) {
-      const oldAudio = audio.audio
-      oldAudio.pause()
-      oldAudio.currentTime = 0
-      setAudio(false)
-    }
-  }
-  
-    const handleVolume = () => {
-      if (audio) {
-        if (audio.volume) {
-         audio.audio.volume = 0
-         audio.volume = false
-      } else {
-         audio.audio.volume = 1
-         audio.volume = true
-      }
-    } 
-  }
-
-  useEffect(() => {
-    if (audio && audio.i !== i &&
-      audio.audio.currentTime === audio.audio.duration) {
-        setAudio(false)
-      }
-  }, [audio, i, setAudio])
-  
-  
-  return (
-    <div className={classes.container} >
-      <Stack spacing={2} direction="row" sx={{ mb: 1 }} alignItems="center">
-        {audio.i !== i && <PlayCircleIcon onClick={handlePlay}
-          fontSize="large" className={classes.icon} />}
-        {!audio && audio.i === i && <PlayCircleIcon onClick={handlePlay}
-          fontSize="large" className={classes.icon} />}
-        {audio && audio.i === i && audio.pause && <PauseCircleIcon
-          onClick={handlePause} fontSize="large" className={classes.iconCancel} />}
-           <Slider
-            size="small"
-            defaultValue={audio.i === i && audio.audio.currentTime}
-            max={audio.i === i &&audio.audio.duration?audio.audio.duration:0}
-            aria-label="Small"
-            valueLabelDisplay="auto"
-        />
-        {audio.i !== i && <a href={src}  target="_blank" rel="noreferrer">
-          <AudioFileIcon style={{ color: '#696969' }} fontSize="large" /> </a>}
-        {audio.i === i && audio.volume && <VolumeUpIcon
-          onClick={handleVolume} className={classes.icon} fontSize="small"/>}
-        {audio.i === i && !audio.volume && <VolumeOffIcon
-          onClick={handleVolume} className={classes.iconCancel} fontSize="small"/>}
-      </Stack>      
-    </div>
-  );
-}
-
-export default AudioPlayer

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

@@ -64,7 +64,7 @@ const useStyles = makeStyles({
         borderBottom: "17px solid #ffffff",
         borderLeft: "16px solid transparent",
         borderRight: "16px solid transparent",
-        bottom: "-1px",
+        bottom: "0px",
         right: "-17px"
       }        
     },

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

@@ -7,9 +7,13 @@ import SendMessage from "./SendMessage";
 import MessageLeftText from './Messages/MessageLeftText'
 import MessageLeftImage from './Messages/MessageLeftImage'
 import MessageLeftAudio from './Messages/MessageLeftAudio'
+import MessageLeftVideo from './Messages/MessageLeftVideo'
+import MessageLeftFile from "./Messages/MessageLeftFile";
 import MessageRightText from './Messages/MessageRightText'
 import MessageRightImage from './Messages/MessageRightImage'
 import MessageRightAudio from './Messages/MessageRightAudio'
+import MessageRightVideo from './Messages/MessageRightVideo'
+import MessageRightFile from "./Messages/MessageRightFile";
 import AlertInfo from "../../../reusableComponents/AlertInfo";
 import { getMessagesMemo } from '../../../../redux/messages/selector'
 import { getNumber } from '../../../../redux/authorization/selector'
@@ -48,7 +52,6 @@ const ChatBar = () => {
   const { companionId } = useSelector(getChat)
   const scroll = useSelector(getScroll)
   const [isArrow, setIsArrow] = useState<boolean>(false)
-  const [audio, setAudio] = useState<any>(false)
   const divRef = useRef<any | null>(null)
   const handleScrollTo = () => {
      divRef.current&&divRef.current.scrollTo({
@@ -103,10 +106,19 @@ const ChatBar = () => {
             <MessageLeftAudio
             key={shortid.generate()}    
             audioUrl={message}
-            updatedAt={updatedAt}
-            audio={audio}
-            setAudio={setAudio}
-            i={i}   
+            updatedAt={updatedAt}  
+              />)
+            if(type === 'video') return (
+            <MessageLeftVideo
+            key={shortid.generate()}    
+            audioUrl={message}
+            updatedAt={updatedAt}  
+              />)
+            if(type === 'file') return (
+            <MessageLeftFile
+            key={shortid.generate()}    
+            audioUrl={message}
+            updatedAt={updatedAt}  
               />)             
           } else {
             if(type === 'text') return (
@@ -130,10 +142,19 @@ const ChatBar = () => {
             <MessageRightAudio
             key={shortid.generate()}    
             audioUrl={message}
-            updatedAt={updatedAt}
-            audio={audio}
-            setAudio={setAudio}
-            i={i}    
+            updatedAt={updatedAt} 
+              />)
+            if(type === 'video') return (
+            <MessageRightVideo
+            key={shortid.generate()}    
+            audioUrl={message}
+            updatedAt={updatedAt} 
+              />)
+            if(type === 'file') return (
+            <MessageRightFile
+            key={shortid.generate()}    
+            audioUrl={message}
+            updatedAt={updatedAt} 
               />)            
           }
         }) : <AlertInfo name='You do not have messages yet!' />}

src/components/HomePage/RightBar/HeaderBar/RightLists/SearchList/Search/index.tsx

@@ -10,7 +10,7 @@ import { useDispatch,useSelector } from "react-redux";
 
 import { actionIsOpen } from '../../../../../../../redux/control/action'
 import { getMessages } from '../../../../../../../redux/messages/selector'
-import StaticDatePicker from "../../../../../../reusableComponents/StaticDatePicker";
+import StaticDatePicker from "./StaticDatePicker";
 
 const SearchBar = styled('div')(({ theme }:any) => ({
   position: 'relative',

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

@@ -1,77 +0,0 @@
-import { makeStyles, Typography,InputLabel,ListItem,ListItemText ,ListItemIcon } from '@material-ui/core'
-import FolderIcon from '@mui/icons-material/Folder';
-import { useDropzone } from 'react-dropzone';
-import { useEffect } from 'react';
-
-const useStyles = makeStyles({
-  container: {
-    width: '100%',
-  },
-  dropZone: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    alignContent: 'center',
-    justifyContent: 'center',
-    width: '100%',
-    padding: '10px',
-    borderRadius: 10,
-    cursor: 'pointer',
-    marginBottom: 20,
-    outline: '2px solid  #959696',
-    '&:hover': {
-      outline: 'dashed  #0040b8',
-    },
-  },
-})
-
-interface IUploadAvatar {
-  setUpload: React.Dispatch<React.SetStateAction<any>>
-}
-const  UploadAvatar = ({ setUpload }: IUploadAvatar) => {
-  
-const {
-    acceptedFiles,
-    getRootProps,
-    getInputProps
-  } = useDropzone({
-    accept: 'image/*',
-  });
-
-    useEffect(() => {
-      setUpload(acceptedFiles[0])
-  }, [setUpload,acceptedFiles])
-
-  const classes = useStyles()
-  const acceptedFileItems = acceptedFiles.map((file: any) => (
-    <ListItem key={file.path}>
-      <ListItemIcon>
-        <FolderIcon/>
-      </ListItemIcon>
-      <ListItemText
-        primary="Avatar uploaded"
-        secondary={`${file.path} -${file.size} bytes`}/>
-   </ListItem>
-  ));
-
-  return (
-    <section className={classes.container} >
-      <div {...getRootProps({ className: classes.dropZone })}>
-        <InputLabel>Drag or drop avatar*</InputLabel>
-        <input {...getInputProps()}/>
-        <img
-          alt='drop zone img'
-          src='https://imagga.com/static/images/upload.svg'
-          width={88}
-          height={72}
-        />
-        <Typography variant="h6" color="initial">image/*</Typography>
-      </div>
-      <aside>
-        <ul>{acceptedFileItems}</ul>
-      </aside>
-    </section>
-  );
-}
-
-export default UploadAvatar

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

@@ -1,50 +0,0 @@
-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 IUploadFile {
-  children:React.ReactNode,
-  setFile: any,
-  setValue: any,
-  accept: string
-}
-  
-const UploadFile = ({children,setFile,setValue,accept}:IUploadFile) => {
-  const classes = useStyles()
-    const { getRootProps, getInputProps, acceptedFiles } = useDropzone({
-        noDrag: true,
-        accept
-    });
-      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 UploadFile

src/components/reusableComponents/StaticDatePicker/index.tsx

@@ -1,39 +0,0 @@
-import { DatePicker } from "@material-ui/pickers";
-import { makeStyles } from '@material-ui/core'
-
-interface IStaticDatePicker {
-   disabled:boolean,
-   date: Date,
-   changeDate: React.Dispatch<React.SetStateAction<any>>,
-   handleOnOpen: () => void
-}
-
-const useStyles = makeStyles({
-    container: {
-        position: 'absolute',
-        left: 1369,
-        top:1,
-        width: 30,
-        cursor: 'pointer',
-    }
-})
-
-const StaticDatePicker = ({ disabled, date, changeDate,handleOnOpen }: IStaticDatePicker) => {
-    const classes = useStyles()
-return (
-    <DatePicker
-        disabled={disabled}
-        className={classes.container}
-        inputVariant='outlined'
-        orientation="portrait"
-        variant="dialog"
-        openTo="date"
-        autoOk
-        value={date}
-        onOpen={handleOnOpen}
-        onChange={changeDate}
-        />
-  );
-};
-
-export default StaticDatePicker;