message-upload-fix

src/App.js

@@ -82,9 +82,7 @@ function App() {
             <Route path="/registration" component={ConnectRegistrationForm} exact />
             <Route path="/login" component={ConnectLoginForm} exact />
             <Route path="/:_id" component={ConnectMain} />
-            <Redirect from="/login" to="/chat" />
             <Redirect from="/" to="/chat" />
-
           </Switch>
         </div >
       </Router>

src/actions/index.js

@@ -213,7 +213,7 @@ let newMSG = async (chat_id, text, media) => {
   let mediaQuery = []
 
   if (media && Array.isArray(media)) {
-    media.map(item => mediaQuery.push({ "_id": item }))
+    media.map(item => mediaQuery.push({ "_id": item._id }))
   } else {
     mediaQuery.push({})
   }
@@ -274,9 +274,7 @@ let editMSG = async (id, text, media) => {
 let fileFound = async (id) => {
   let query = `query findMedia($id: String){
         MediaFind(query: $id){
-          url originalFileName owner {
-            login _id
-          }
+          url type originalFileName
         }
       }`
 
@@ -356,7 +354,13 @@ export const actionFullRegister = (login, password) => {
 
 let upload = async (files) => {
   let form = new FormData()
-  form.append("media", files)
+
+  if (Array.isArray(files)) {
+    files.map(file => form.append("files[]", file))
+  } else {
+    form.append("media", files)
+  }
+
 
   return fetch("/upload", {
     method: "POST",

src/components/chatWindow.js

@@ -4,19 +4,22 @@ import { MyDropzone } from "./dropzone"
 import ScrollableFeed from 'react-scrollable-feed'
 import { Link } from "react-router-dom"
 
-const Chat = ({ chat_id, chat_title, chat_avatar, user_id, messages, onUpload, onSend }) => {
+const Chat = ({ chat_id, chat_title, user_id, messages, onUpload, onSend }) => {
     let [msg, setMSG] = useState("")
     let [isUpload, setIsUpload] = useState(false)
     let [files, setFiles] = useState([])
     console.log(files)
+
     let filesHandler = (file) => {
-        files.length ? setFiles([...files, file]) : setFiles([file])
+        setFiles(file)
     }
 
     let handler = (e) => {
         if ((e.key === "Enter" && !e.shiftKey) || e.type === "click") {
             onSend(chat_id, msg, files)
             setMSG("")
+            setFiles([])
+            setIsUpload(false)
             e.preventDefault()
         }
     }
@@ -37,7 +40,7 @@ const Chat = ({ chat_id, chat_title, chat_avatar, user_id, messages, onUpload, o
                 {isUpload && <MyDropzone onUpload={onUpload} onSet={filesHandler} />}
                 <button onClick={(e) => handler(e)}>Отправить</button>
             </div>
-        </div>
+        </div >
     )
 }
 

src/components/dropzone.js

@@ -4,11 +4,14 @@ import { connect } from 'react-redux';
 import { actionUploadFile } from '../actions';
 
 export const MyDropzone = ({ maxFiles, onUpload, onSet }) => {
-    const onDrop = useCallback(acceptedFiles => {
-        acceptedFiles.forEach(async (file) => {
+    const onDrop = useCallback(async acceptedFiles => {
+        let files = []
+        await Promise.all(acceptedFiles.map(async (file) => {
             let result = await onUpload(file)
-            onSet(result)
-        })
+            files.push(result)
+            console.log(files)
+        }))
+        onSet(files)
     }, [onUpload])
 
     const { acceptedFiles, getRootProps, getInputProps } = useDropzone({ onDrop, maxFiles: maxFiles })

src/components/message.js

@@ -22,6 +22,20 @@ export const Message = ({ nick, msg, date, media, modified, own = false, replies
             <ReactTimeAgo className="msg-date" date={+date} locale="ru" timeStyle="round" />
             {modified && <span className="mutated-msg">Сообщение изменено</span>}
             {replies && replies.map(repMSG => <Message nick={repMSG.login} msg={repMSG.text} date={repMSG.createdAt} />)}
+            {media && media.length && media.map(file => {
+                file.type.includes("audio") &&
+                    <audio controls>
+                        <source src={"/" + file.url} type={file.type} />
+                    </audio>
+
+                file.type.includes("image") &&
+                    <img src={"/" + file.url} alt={file.originalFileName} />
+
+                file.type.includes("video") &&
+                    <video>
+                        <source src={"/" + file.url} type={file.type} />
+                    </video>
+            })}
         </li>
     )
 }

src/pages/main.js

@@ -36,7 +36,7 @@ const Main = ({ match: { params: { _id } }, userID, chats, getChat, getMessages,
         socket.on('msg', msg => {
             console.log("это пришло по сокету (сообщение)", msg)
 
-            if (chats) {
+            if (chats && chats[msg.chat._id] && chats[msg.chat._id]["messages"].length) {
                 let check = chats[msg.chat._id]["messages"].filter(({ _id }) => _id === msg._id).length
                 console.log(check)
                 if (check) {