Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 2655 Rev 2981
Línea 3... Línea 3...
3 
 
 3 
 
Línea 4... Línea 4...
4 
const MessageTemplate = ({ message }) => {
 4 
const MessageTemplate = ({ message }) => {
Línea 5... Línea 5...
5 
 
 5 
 
- 
 
 6 
    const isRightPosition = message.side === "right";
- 
 
 7 
 
- 
 
 8 
    const messageRenderer = (msg) => {
6 
    const isRightPosition = message.side === "right";
 9 
        const {
- 
 
 10 
            date,
- 
 
 11 
            filename,
- 
 
 12 
            message,
- 
 
 13 
            receiver_image,
- 
 
 14 
            receiver_name,
- 
 
 15 
            receiver_profile,
- 
 
 16 
            sender_image,
- 
 
 17 
            sender_name,
- 
 
 18 
            sender_profile,
Línea 7... Línea 19...
7 
 
 19 
            side,
8 
    const messageRenderer = (message) => {
 20 
            type
9 
        const { type } = message;
 21 
        } = msg;
10 
 
 22 
 
11 
        switch (type) {
 23 
        switch (type) {
12 
            case "text":
 24 
            case "text":
13 
                return (
 25 
                return (
14 
                    <div
 26 
                    <div
15 
                        className={`main-message-box ${isRightPosition ? 'ta-right' : ''}`}
 27 
                        className={`main-message-box ${isRightPosition ? 'ta-right' : ''}`}
16 
                        key={message.message}
 28 
                        key={message}
17 
                    >
 29 
                    >
18 
                        <div className="messg-usr-img">
 30 
                        <div className="messg-usr-img">
19 
                            <a href={message.sender_profile}>
 31 
                            <a href={sender_profile}>
20 
                                <img
 32 
                                <img
21 
                                    src={message.sender_image}
 33 
                                    src={sender_image}
22 
                                    className="cursor-pointer"
 34 
                                    className="cursor-pointer"
23 
                                    alt={message.sender_name}
 35 
                                    alt={`${sender_name} profile image`}
24 
                                />
 36 
                                />
25 
                            </a>
 37 
                            </a>
- 
 
 38 
                        </div>
- 
 
 39 
                        <div className={`message-dt mw-30 border-radius ${isRightPosition ? 'bg-light-gray' : 'bg-custom-gray'} `}>
26 
                        </div>
 40 
                            <div className="message-inner-dt">
27 
                        <div className={`message-dt mw-30 border-radius ${isRightPosition ? 'bg-light-gray' : 'bg-custom-gray'} `}>
 41 
                                <p className={`w-100 border-none bg-transparent ${'text-' + side}`}>
28 
                            <div className="message-inner-dt">
 42 
                                    {message}
29 
                                <p className={`w-100 border-none bg-transparent ${'text-' + message.side}`}>{message.message}</p>
 43 
                                </p>
30 
                            </div>
 44 
                            </div>
31 
                            <span className="p-1">{message.date}</span>
 45 
                            <span className="p-1">{date}</span>
32 
                        </div>
 46 
                        </div>
33 
                    </div>
 47 
                    </div>
34 
                );
 48 
                );
35 
            case "image":
 49 
            case "image":
36 
                return (
 50 
                return (
37 
                    <div
 51 
                    <div
38 
                        className={`main-message-box ${isRightPosition ? 'ta-right' : ''}`}
 52 
                        className={`main-message-box ${isRightPosition ? 'ta-right' : ''}`}
39 
                        key={message.message}
 53 
                        key={message}
40 
                    >
 54 
                    >
41 
                        <div className="messg-usr-img">
 55 
                        <div className="messg-usr-img">
42 
                            <a href={message.sender_profile}>
 56 
                            <a href={sender_profile}>
43 
                                <img
 57 
                                <img
44 
                                    src={message.sender_image}
 58 
                                    src={sender_image}
45 
                                    className="cursor-pointer"
 59 
                                    className="cursor-pointer"
46 
                                    alt={message.sender_name}
 60 
                                    alt={`${sender_name} profile image`}
47 
                                />
 61 
                                />
48 
                            </a>
 62 
                            </a>
49 
                        </div>
 63 
                        </div>
50 
                        <div className={`message-dt mw-30 border-radius ${isRightPosition ? 'bg-light-gray' : 'bg-custom-gray'} `}>
 64 
                        <div className={`message-dt mw-30 border-radius ${isRightPosition ? 'bg-light-gray' : 'bg-custom-gray'} `}>
51 
                            <div className="message-inner-dt">
 65 
                            <div className="message-inner-dt">
52 
                                <img
 66 
                                <img
53 
                                    src={message.filename}
 67 
                                    src={filename}
54 
                                    alt={`${message.sender_name} message image`}
 68 
                                    alt={`${sender_name} message image`}
55 
                                />
 69 
                                />
56 
                            </div>
 70 
                            </div>
57 
                            <span className="p-1">{message.date}</span>
 71 
                            <span className="p-1">{date}</span>
58 
                        </div>
 72 
                        </div>
59 
                    </div>
 73 
                    </div>
60 
                );
 74 
                );
61 
            case "video":
 75 
            case "video":
62 
                return (
 76 
                return (
63 
                    <div
 77 
                    <div
64 
                        className={`main-message-box ${isRightPosition ? 'ta-right' : ''}`}
 78 
                        className={`main-message-box ${isRightPosition ? 'ta-right' : ''}`}
65 
                        key={message.message}
 79 
                        key={message}
66 
                    >
 80 
                    >
67 
                        <div className="messg-usr-img">
 81 
                        <div className="messg-usr-img">
68 
                            <a href={message.sender_profile}>
 82 
                            <a href={sender_profile}>
69 
                                <img
 83 
                                <img
70 
                                    src={message.sender_image}
 84 
                                    src={sender_image}
71 
                                    className="cursor-pointer"
 85 
                                    className="cursor-pointer"
72 
                                    alt={message.sender_name}
 86 
                                    alt={sender_name}
73 
                                />
 87 
                                />
74 
                            </a>
 88 
                            </a>
75 
                        </div>
 89 
                        </div>
76 
                        <div className={`message-dt mw-30 border-radius ${isRightPosition ? 'bg-light-gray' : 'bg-custom-gray'} `}>
 90 
                        <div className={`message-dt mw-30 border-radius ${isRightPosition ? 'bg-light-gray' : 'bg-custom-gray'} `}>
77 
                            <div className="message-inner-dt">
 91 
                            <div className="message-inner-dt">
78 
                                <video src={message.filename} />
 92 
                                <video src={filename} />
79 
                            </div>
 93 
                            </div>
80 
                            <span className="p-1">{message.date}</span>
 94 
                            <span className="p-1">{date}</span>
81 
                        </div>
 95 
                        </div>
82 
                    </div>
 96 
                    </div>
83 
                );
 97 
                );
84 
            case "document":
 98 
            case "document":
85 
                return (
 99 
                return (
86 
                    <div
 100 
                    <div
87 
                        className={`main-message-box ${isRightPosition ? 'ta-right' : ''}`}
 101 
                        className={`main-message-box ${isRightPosition ? 'ta-right' : ''}`}
88 
                        key={message.message}
 102 
                        key={message}
89 
                    >
 103 
                    >
90 
                        <div className="messg-usr-img">
 104 
                        <div className="messg-usr-img">
91 
                            <a href={message.sender_profile}>
 105 
                            <a href={sender_profile}>
92 
                                <img
 106 
                                <img
93 
                                    src={message.sender_image}
 107 
                                    src={sender_image}
94 
                                    className="cursor-pointer"
 108 
                                    className="cursor-pointer"
95 
                                    alt={message.sender_name}
 109 
                                    alt={sender_name}
96 
                                />
 110 
                                />
97 
                            </a>
 111 
                            </a>
98 
                        </div>
 112 
                        </div>
99 
                        <div className={`message-dt mw-30 border-radius ${isRightPosition ? 'bg-light-gray' : 'bg-custom-gray'} `}>
 113 
                        <div className={`message-dt mw-30 border-radius ${isRightPosition ? 'bg-light-gray' : 'bg-custom-gray'} `}>
100 
                            <div className="message-inner-dt">
 114 
                            <div className="message-inner-dt">
101 
                                <img
 115 
                                <img
102 
                                    className={styles.pdfImage}
 116 
                                    className={styles.pdfImage}
103 
                                    src="/storage/type/default/filename/pdf.png"
 117 
                                    src="/storage/type/default/filename/pdf.png"
104 
                                    alt="pdf"
 118 
                                    alt="pdf"
105 
                                />
 119 
                                />
106 
                                <a href={m} target="_blank" className={styles.downloadBtn}>
 120 
                                <a href={filename} target="_blank" className={styles.downloadBtn}>
107 
                                    <i className="fa ti-arrow-circle-down"></i>
 121 
                                    <i className="fa ti-arrow-circle-down"></i>
108 
                                </a>
 122 
                                </a>
109 
                            </div>
 123 
                            </div>
110 
                            <span className="p-1">{message.date}</span>
 124 
                            <span className="p-1">{date}</span>
111 
                        </div>
 125 
                        </div>