Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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