Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 2981 | Rev 2984 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1748 stevensc 1 
import React from 'react'
2655 stevensc 2 
import styles from '../../mobile-chat/mobile-chat/chat/messages/messages.module.scss'
1748 stevensc 3 
 
2655 stevensc 4 
const MessageTemplate = ({ message }) => {
5 
 
1885 steven 6 
    const isRightPosition = message.side === "right";
2655 stevensc 7 
 
2981 stevensc 8 
    const messageRenderer = (msg) => {
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,
19 
            side,
20 
            type
21 
        } = msg;
2655 stevensc 22 
 
23 
        switch (type) {
24 
            case "text":
25 
                return (
26 
                    <div
27 
                        className={`main-message-box ${isRightPosition ? 'ta-right' : ''}`}
2981 stevensc 28 
                        key={message}
2655 stevensc 29 
                    >
30 
                        <div className="messg-usr-img">
2981 stevensc 31 
                            <a href={sender_profile}>
2655 stevensc 32 
                                <img
2981 stevensc 33 
                                    src={sender_image}
2655 stevensc 34 
                                    className="cursor-pointer"
2981 stevensc 35 
                                    alt={`${sender_name} profile image`}
2655 stevensc 36 
                                />
37 
                            </a>
38 
                        </div>
39 
                        <div className={`message-dt mw-30 border-radius ${isRightPosition ? 'bg-light-gray' : 'bg-custom-gray'} `}>
40 
                            <div className="message-inner-dt">
2981 stevensc 41 
                                <p className={`w-100 border-none bg-transparent ${'text-' + side}`}>
42 
                                    {message}
43 
                                </p>
2655 stevensc 44 
                            </div>
2981 stevensc 45 
                            <span className="p-1">{date}</span>
2655 stevensc 46 
                        </div>
47 
                    </div>
48 
                );
49 
            case "image":
50 
                return (
51 
                    <div
52 
                        className={`main-message-box ${isRightPosition ? 'ta-right' : ''}`}
2981 stevensc 53 
                        key={message}
2655 stevensc 54 
                    >
55 
                        <div className="messg-usr-img">
2981 stevensc 56 
                            <a href={sender_profile}>
2655 stevensc 57 
                                <img
2981 stevensc 58 
                                    src={sender_image}
2655 stevensc 59 
                                    className="cursor-pointer"
2981 stevensc 60 
                                    alt={`${sender_name} profile image`}
2655 stevensc 61 
                                />
62 
                            </a>
63 
                        </div>
64 
                        <div className={`message-dt mw-30 border-radius ${isRightPosition ? 'bg-light-gray' : 'bg-custom-gray'} `}>
65 
                            <div className="message-inner-dt">
66 
                                <img
2981 stevensc 67 
                                    src={filename}
68 
                                    alt={`${sender_name} message image`}
2655 stevensc 69 
                                />
70 
                            </div>
2981 stevensc 71 
                            <span className="p-1">{date}</span>
2655 stevensc 72 
                        </div>
73 
                    </div>
74 
                );
75 
            case "video":
76 
                return (
77 
                    <div
78 
                        className={`main-message-box ${isRightPosition ? 'ta-right' : ''}`}
2981 stevensc 79 
                        key={message}
2655 stevensc 80 
                    >
81 
                        <div className="messg-usr-img">
2981 stevensc 82 
                            <a href={sender_profile}>
2655 stevensc 83 
                                <img
2981 stevensc 84 
                                    src={sender_image}
2655 stevensc 85 
                                    className="cursor-pointer"
2981 stevensc 86 
                                    alt={sender_name}
2655 stevensc 87 
                                />
88 
                            </a>
89 
                        </div>
90 
                        <div className={`message-dt mw-30 border-radius ${isRightPosition ? 'bg-light-gray' : 'bg-custom-gray'} `}>
91 
                            <div className="message-inner-dt">
2981 stevensc 92 
                                <video src={filename} />
2655 stevensc 93 
                            </div>
2981 stevensc 94 
                            <span className="p-1">{date}</span>
2655 stevensc 95 
                        </div>
96 
                    </div>
97 
                );
98 
            case "document":
99 
                return (
100 
                    <div
101 
                        className={`main-message-box ${isRightPosition ? 'ta-right' : ''}`}
2981 stevensc 102 
                        key={message}
2655 stevensc 103 
                    >
104 
                        <div className="messg-usr-img">
2981 stevensc 105 
                            <a href={sender_profile}>
2655 stevensc 106 
                                <img
2981 stevensc 107 
                                    src={sender_image}
2655 stevensc 108 
                                    className="cursor-pointer"
2981 stevensc 109 
                                    alt={sender_name}
2655 stevensc 110 
                                />
111 
                            </a>
112 
                        </div>
113 
                        <div className={`message-dt mw-30 border-radius ${isRightPosition ? 'bg-light-gray' : 'bg-custom-gray'} `}>
114 
                            <div className="message-inner-dt">
2982 stevensc 115 
 
2981 stevensc 116 
                                <a href={filename} target="_blank" className={styles.downloadBtn}>
2982 stevensc 117 
                                    Abrir documento
118 
                                    <i className="fa ti-arrow-circle-down" />
2655 stevensc 119 
                                </a>
120 
                            </div>
2981 stevensc 121 
                            <span className="p-1">{date}</span>
2655 stevensc 122 
                        </div>
123 
                    </div>
124 
                );
125 
            default:
126 
                break;
127 
        }
128 
    };
129 
 
130 
    return messageRenderer(message)
131 
 
1748 stevensc 132 
}
133 
export default MessageTemplate