fixed sending field

src/actions/authActions.js

@@ -74,8 +74,6 @@ import {
       async (dispatch, getState) => {
          let {auth} = getState()
          let userId = auth.payload?.sub?.id
-         // console.log(userId, file, newLogin, newNick)
-         // debugger
          if (file) {
             let fileObj = await dispatch(actionUploadFile(name, file))
             await dispatch(actionUpdateUserAvatar(userId, fileObj?._id))

src/components/MainMenu.js

@@ -101,7 +101,6 @@ export const MenuDrawer = ({}) => {
          >
             
             <MenuIcon />
-            <CUserAvatar sx={{ ml: 1}} />
          </IconButton>
          
 

src/components/MsgDropZone.js

@@ -1,91 +0,0 @@
-import React, {useEffect, useState} from 'react';
-import {useDropzone} from 'react-dropzone';
-
-import {connect}  from 'react-redux'
-import {
-    actionUploadFile,
-} from "../actions"
-
-
-
-const thumbsContainer = {
-  display: 'flex',
-  flexDirection: 'row',
-  flexWrap: 'wrap',
-  marginTop: 16
-};
-
-const thumb = {
-  display: 'inline-flex',
-  borderRadius: 2,
-  border: '1px solid #eaeaea',
-  marginBottom: 8,
-  marginRight: 8,
-  width: 100,
-  height: 100,
-  padding: 4,
-  boxSizing: 'border-box'
-};
-
-const thumbInner = {
-  display: 'flex',
-  minWidth: 0,
-  overflow: 'hidden'
-};
-
-const img = {
-  display: 'block',
-  width: 'auto',
-  height: '100%'
-};
-
-
-const MsgDropZone = ({onLoad}) => {
-  const [files, setFiles] = useState([]);
-  const {getRootProps, getInputProps} = useDropzone({
-    // accept: 'image/*',
-    onDrop: async (acceptedFiles) => {
-      await setFiles(acceptedFiles.map(file => Object.assign(file, {
-        preview: URL.createObjectURL(file)
-      })));   
-
-      // await acceptedFiles.forEach(file => {
-      //     onLoad("media", file)
-      // })
-     
-    }
-  });
-  
-  const thumbs = files.map(file => (
-    <div style={thumb} key={file.name}>
-      <div style={thumbInner}>
-        <img
-          src={file.preview}
-          style={img}
-        />
-      </div>
-    </div>
-  ));
-
-  useEffect(() => {
-    // Make sure to revoke the data uris to avoid memory leaks
-    files.forEach(file => URL.revokeObjectURL(file.preview));
-  }, [files]);
-
-  return (
-    <form action="/upload" method="post" encType="multipart/form-data" id='form'> 
-        <section className="container">
-        <div {...getRootProps({className: 'dropzone'})}>
-            <input {...getInputProps()} type="file" name="media" id='media'/>
-            <p>Перетащите файлы</p>
-        </div>
-        <aside style={thumbsContainer}>
-            {thumbs}
-        </aside>
-        </section>
-    </form>
-  );
-}
-export const CMsgDropZone = connect( null, {onLoad: actionUploadFile})
-                                                (MsgDropZone)
-

src/components/ProfileModal.js

@@ -1,4 +1,4 @@
-import React, {useEffect, useState, useRef} from 'react';
+import React, {useEffect, useState} from 'react';
 import Box from '@mui/material/Box';
 import Modal from '@mui/material/Modal';
 import ListItem from '@mui/material/ListItem';
@@ -37,7 +37,7 @@ const styleModalParrent = {
 
 const PassModal = ({ onСonfirm, minPass='2', 
                      char=true, bigChar=false, 
-                     number=true, regError}) => {
+                     number=false, regError}) => {
    const [open, setOpen] = useState(false);
    const handleOpen = () => {
      setOpen(true);
@@ -84,7 +84,7 @@ const PassModal = ({ onСonfirm, minPass='2',
          str += 'Пароль не должен содержать пробелы '
       } else {
          str += 'Пароль должен содержать: '
-         str += printStrReq(password, minPass) + ','
+         str += (printStrReq(password, minPass) ? printStrReq(password, minPass) + ',' : '')
          if (!(char ? password.match(/[a-zа-яё]/) : true)) {
             str += ' строчные буквы,'
          }
@@ -242,7 +242,7 @@ const ProfileModal = ({minLog='2', myProfile, onСonfirm, logError}) => {
       accept: 'image/*', 
       maxFiles: 1,
       onDrop: (acceptedFiles) => {
-         console.log(acceptedFiles)
+         // console.log(acceptedFiles)
          setImg(acceptedFiles[0])
       }
    });

src/components/SendingField.js

@@ -1,8 +1,176 @@
+import React, {useState, useEffect, useRef} from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import TextareaAutosize from '@mui/base/TextareaAutosize';
+import SendIcon from '@mui/icons-material/Send';
+import AttachFileIcon from '@mui/icons-material/AttachFile';
+import CloseIcon from '@mui/icons-material/Close';
 
+import {useDropzone} from 'react-dropzone';
 
+import {connect}  from 'react-redux'
+import {
+    actionUploadFile,
+} from "../actions"
+
+const containerWrapp = {
+   // width: '80%',
+   display: 'flex', 
+   flexDirection: 'column',
+   padding: '5px',
+}
+
+const thumbsContainer = {
+   flexGrow: '0',
+   display: 'flex',
+   flexDirection: 'row',
+   flexWrap: 'wrap',
+   width: '100%',
+   overflow: 'auto',
+ };
+ 
+ const thumb = {
+   flexGrow: '0',
+   display: 'inline-flex',
+
+   
+   borderRadius: 2,
+   border: '1px solid #eaeaea',
+   marginBottom: 8,
+   marginRight: 8,
+   width: 100,
+   height: 117,
+   padding: 4,
+   boxSizing: 'border-box',
+   position: 'relative',
+ };
+ 
+ const thumbInner = {
+   display: 'flex',
+   flexDirection: 'column',
+   paddingTop: 17,
+   minWidth: 0,
+   overflow: 'hidden'
+ };
+
+ const closeBtn = {
+    position: 'absolute',
+    right: 0,
+    display: 'flex',
+    justifyContent: 'end',
+ }
+ 
+ const img = {
+   display: 'block',
+   width: 'auto',
+   height: '100%'
+ };
+
+const MsgDropZone = ({onText, setFiles}) => {
+
+   const [localFiles, setLocalFiles] = useState([]);
+
+   const {
+      acceptedFiles,
+      getRootProps, 
+      getInputProps
+   } = useDropzone({
+         noKeyboard: true,
+         onDrop: async (acceptedFiles) => {
+
+            console.log(acceptedFiles)
+
+         await setLocalFiles([...localFiles, 
+            ...acceptedFiles.map(file => Object.assign(file, {
+               preview: URL.createObjectURL(file)
+            }))
+         ]);   
+
+         await acceptedFiles.map(file => {
+            setFiles(file)
+         })
+     
+         }
+      });
+
+      console.log(localFiles)
+
+   const thumbs = localFiles.map((file, index) => (
+      <div style={thumb} key={file.preview}>         
+         <div style={closeBtn}>
+            <CloseIcon 
+               fontSize="small" 
+               sx={{ cursor: 'pointer' }}
+               onClick={() => {}} 
+            />
+         </div>         
+         <div style={thumbInner}>           
+            <img
+            src={file.preview}
+            style={img}
+            /> 
+         </div>     
+      </div>
+      ));
+   
+   // useEffect(() => {
+   // // Make sure to revoke the data uris to avoid memory leaks
+   // localFiles.forEach(file => URL.revokeObjectURL(file.preview));
+   // }, [localFiles]);
+
+  return (
+   <>
+      <form action="/upload" method="post" encType="multipart/form-data" id='form'> 
+         <section style={containerWrapp}>
+
+            <div style={thumbsContainer}>
+               {thumbs}
+            </div>
+        
+
+            <div {...getRootProps({className: 'dropzone'})} style={{ display: 'flex', alignItems: 'center'}}>
+                  <input {...getInputProps()} type="file" name="media" id='media'/>
+
+                  <AttachFileIcon fontSize="large" sx={{ cursor: 'pointer' }} />
+                  
+                  <TextareaAutosize                     
+                     minRows={4}
+                     maxRows={10}
+                     placeholder="Сообщение"
+                     style={{ width: '100%' }}
+                     onClick={(e) => e.stopPropagation()}
+                     onChange={() => onText()}
+                  />
+            </div>
+
+         </section>
+      </form>
+   </>
+  )
+}
+
+
+const SendingField = ({onSend}) => {
+   const [text, setText] = useState('')
+   const [files, setFiles] = useState([])
 
-export const SendingField = () => {
    return (
-      <></>
+      <Box sx={{ display: 'flex', alignItems: 'center', height: '100%', width: '100%'}} >
+      
+         <Box sx={{ flexGrow: 1, flexShrink: 1, flexBasis: '80%', overflow: 'auto', height: '100%', backgroundColor: '#fff' }}>
+            <MsgDropZone onText={setText} onFile={setFiles} />
+         </Box>         
+         <Box sx={{ flexGrow: 1, flexShrink: 0, flexBasis: '50px'}}>
+            <Button 
+               variant="contained" 
+               endIcon={<SendIcon />} 
+               onClick={() => onSend(text, files)}
+            >
+               Отправить
+            </Button>
+         </Box>
+         
+      </Box>
    )
-}
+}
+export const CSendingField= connect( null, {onSend: actionUploadFile})(SendingField)

src/components/index.js

@@ -9,8 +9,7 @@ export {FloatBtn} from './FloatBtn'
 export {UserAvatar, CUserAvatar} from './UserAvatar'
 export {CProfileModal} from './ProfileModal'
 
-export {CMsgDropZone} from './MsgDropZone'
-export {SendingField} from './SendingField'
+export {CSendingField} from './SendingField'
 
 
 

src/pages/Main.js

@@ -10,15 +10,14 @@ import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 
-import SendIcon from '@mui/icons-material/Send';
 
 
-import {MenuDrawer, SearchBlock, CChatList, Header, CMsgDropZone, CUserAvatar} from "../components"
+import {MenuDrawer, SearchBlock, CChatList, Header, CUserAvatar, CSendingField} from "../components"
 import {
    actionChangePass,
    actionAddChat
  } from "../actions"
- import {store, actionAuthLogout} from "../reducers"
+ import {store} from "../reducers"
 
 const theme = createTheme()
 export const Main = ({}) => {
@@ -38,6 +37,7 @@ export const Main = ({}) => {
                         <Header> 
 
                            <MenuDrawer />
+                           <CUserAvatar />
 
                            <SearchBlock />
 
@@ -56,7 +56,7 @@ export const Main = ({}) => {
 
                <Grid item xs={12} sm={8}>
                   <Grid container direction="column" justifyContent="space-between" alignItems="stretch" 
-                        height="100vh">
+                        height="100vh" sx={{backgroundColor: '#eee'}} >
                      
                      
                      <Grid item height="60px"> 
@@ -67,20 +67,15 @@ export const Main = ({}) => {
                         </Header>                    
                      </Grid>
 
-                     <Grid container direction="column" justifyContent="end" alignItems="stretch" 
-                           height="calc(100vh - 160px)">
+                     <Grid item sx={{ flexGrow: 1 }} >
                         сообщения
                         
                      </Grid>
 
-                     <Grid item height="100px" sx={{backgroundColor: '#ddd'}}> 
-
-                        <CMsgDropZone />
-                        <Button variant="contained" endIcon={<SendIcon />} >Отправить</Button>
+                     <Grid item  sx={{ flexGrow: 0 }} height="max-content" > 
+                           <CSendingField />
                      </Grid>
 
-
-
                   </Grid>              
                </Grid>