Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 3704 | Rev 3711 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3704 Rev 3710
Línea 2... Línea 2...
2 
import React, { useRef, useState } from 'react'
 2 
import React, { useRef, useState } from 'react'
3 
import FileModal from '../../mobile-chat/mobile-chat/chat/fileModal/FileModal';
 3 
import FileModal from '../../mobile-chat/mobile-chat/chat/fileModal/FileModal';
4 
import { axios } from '../../utils';
 4 
import { axios } from '../../utils';
5 
import { addNotification } from '../../redux/notification/notification.actions';
 5 
import { addNotification } from '../../redux/notification/notification.actions';
6 
import { useDispatch } from 'react-redux';
 6 
import { useDispatch } from 'react-redux';
- 
 
 7 
import { useForm } from 'react-hook-form';
Línea 7... Línea 8...
7 
 
 8 
 
Línea 8... Línea 9...
8 
const permittedFiles = "video/mp4, video/mpeg, video/webm, application/pdf, image/jpeg, image/png, image/jpg";
 9 
const permittedFiles = "video/mp4, video/mpeg, video/webm, application/pdf, image/jpeg, image/png, image/jpg";
Línea 9... Línea 10...
9 
 
 10 
 
10 
const MessageBox = ({ onSend, backendVars, sendLink, setMsgs }) => {
 - 
 
11 
 
 11 
const MessageBox = ({ onSend, backendVars, sendLink, setMsgs }) => {
- 
 
 12 
 
12 
    const fileInputEl = useRef(null);
 13 
    const fileInputEl = useRef(null);
Línea 13... Línea 14...
13 
    const [text, setText] = useState('')
 14 
    const [selectedFile, setSelectedFile] = useState("");
14 
    const [selectedFile, setSelectedFile] = useState("");
 15 
    const { handleSubmit, register, errors } = useForm()
15 
    const dispatch = useDispatch()
 - 
 
16 
 
 16 
    const dispatch = useDispatch()
17 
    const handleUploadFile = (e) => {
 - 
 
18 
        const file = e.target.files[0];
 17 
 
Línea 19... Línea 18...
19 
        if (file) {
 18 
    const handleUploadFile = (e) => {
20 
            setSelectedFile(file);
 - 
 
21 
        }
 - 
 
Línea 22... Línea 19...
22 
    };
 19 
        const file = e.target.files[0];
23 
 
 20 
        if (file) setSelectedFile(file)
24 
    const removeSelectedFile = () => {
 21 
    };
25 
        setSelectedFile("");
 22 
 
Línea 42... Línea 39...
42 
                setMsgs(prev => [data.data, ...prev])
 39 
                setMsgs(prev => [data.data, ...prev])
43 
                setSelectedFile("");
 40 
                setSelectedFile("");
44 
            });
 41 
            });
45 
    };
 42 
    };
Línea -... Línea 43...
- 
 
 43 
 
- 
 
 44 
    const handleSend = ({ message }) => onSend(message)
46 
 
 45 
 
47 
    return (
 46 
    return (
48 
        <div className="message-send-area border-gray border-radius">
 47 
        <div className="message-send-area border-gray border-radius">
49 
            <form id="form-send-message" name="form-send-message"
 48 
            <form id="form-send-message" name="form-send-message"
50 
                onSubmit={e => {
 - 
 
51 
                    e.preventDefault()
 - 
 
52 
                    onSend(text)
 - 
 
53 
                    setText('')
 - 
 
54 
                }}
 49 
                onSubmit={handleSubmit(handleSend)}
55 
            >
 50 
            >
56 
                <div className="mf-field">
 51 
                <div className="mf-field">
57 
                    <input
 52 
                    <input
58 
                        type="file"
 53 
                        type="file"
59 
                        name="file"
 - 
 
60 
                        id="file"
 - 
 
61 
                        ref={(e) => {
 - 
 
62 
                            fileInputEl.current = e;
 - 
 
63 
                        }}
 - 
 
64 
                        accept={permittedFiles}
 54 
                        name="file"
- 
 
 55 
                        hidden
- 
 
 56 
                        ref={(e) => fileInputEl.current = e}
65 
                        hidden
 57 
                        accept={permittedFiles}
66 
                        onChange={handleUploadFile}
 58 
                        onChange={handleUploadFile}
67 
                    />
 59 
                    />
68 
                    <button
 60 
                    <button
69 
                        type="button"
 61 
                        type="button"
Línea 72... Línea 64...
72 
                        onClick={() => fileInputEl.current.click()}
 64 
                        onClick={() => fileInputEl.current.click()}
73 
                    />
 65 
                    />
74 
                    <input
 66 
                    <input
75 
                        type="text"
 67 
                        type="text"
76 
                        name="message"
 68 
                        name="message"
77 
                        id="message"
 - 
 
78 
                        className="border-radius"
 69 
                        className="border-radius"
79 
                        value={text}
 70 
                        ref={register({ required: 'Este campo es requerido' })}
80 
                        placeholder={backendVars.labelWriteMessage}
 71 
                        placeholder={backendVars.labelWriteMessage}
81 
                        onChange={e => setText(e.target.value || '')}
 - 
 
82 
                    />
 72 
                    />
- 
 
 73 
                    {errors.message && <p>{errors.message.message}</p>}
83 
                    <button type="submit" className="btn btn-secondary p-1 inmail-submit-btn ">
 74 
                    <button type="submit" className="btn btn-secondary p-1 inmail-submit-btn ">
84 
                        <i className="fas fa-chevron-right" />
 75 
                        <i className="fas fa-chevron-right" />
85 
                    </button>
 76 
                    </button>
86 
                </div>
 77 
                </div>
87 
            </form>
 78 
            </form>
88 
            {
 - 
 
89 
                selectedFile
 79 
            {selectedFile &&
90 
                &&
 - 
 
91 
                <FileModal
 80 
                <FileModal
92 
                    file={selectedFile}
 81 
                    file={selectedFile}
93 
                    onCancel={removeSelectedFile}
 82 
                    onCancel={removeSelectedFile}
94 
                    onSend={handleSendFile}
 83 
                    onSend={handleSendFile}
95 
                />
 84 
                />
96 
            }
 85 
            }
97 
        </div>
 86 
        </div >
98 
    )
 87 
    )
99 
}
 88 
}
100 
export default MessageBox
 89 
export default MessageBox
101 

            90