@messenger-box/platform-browser 0.0.1-alpha.101 → 0.0.1-alpha.102

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.0.1-alpha.102](https://github.com/cdmbase/messenger-box/compare/v0.0.1-alpha.101...v0.0.1-alpha.102) (2021-12-03)
+
+**Note:** Version bump only for package @messenger-box/platform-browser
+
+
+
+
+
 ## [0.0.1-alpha.101](https://github.com/cdmbase/messenger-box/compare/v0.0.1-alpha.100...v0.0.1-alpha.101) (2021-12-03)
 
 **Note:** Version bump only for package @messenger-box/platform-browser

package/lib/components/InboxMessage/InboxSidebar/index.d.ts

@@ -5,6 +5,7 @@ declare type IPropsType = {
     messageList?: any;
     currentUser?: any;
     userId?: any;
+    users?: any;
 };
-export default function InboxSidebar({ handleSelectMessgae, user, messageList, userId }: IPropsType): JSX.Element;
+export default function InboxSidebar({ handleSelectMessgae, user, messageList, userId, users }: IPropsType): JSX.Element;
 export {};

package/lib/components/InboxMessage/Messages/styles.d.ts

@@ -57,11 +57,10 @@ export declare const styleSheet: {
             display: string;
             justifyContent: string;
             marginTop: string;
-            '& input': {
+            '& textarea': {
                 borderRadius: string;
                 width: string;
-                minHeight: string;
-                maxHeight: string;
+                overflow: string;
                 color: string;
                 lineHeight: string;
                 fontSize: string;

package/lib/index.js

@@ -192,15 +192,27 @@ const React = __importStar(__webpack_require__(/*! react */ "react"));
 const react_1 = __webpack_require__(/*! @chakra-ui/react */ "@chakra-ui/react");
 const react_fela_1 = __webpack_require__(/*! react-fela */ "react-fela");
 const styles_1 = __webpack_require__(/*! ./styles */ "./src/components/InboxMessage/InboxSidebar/styles.ts");
-function InboxSidebar({ handleSelectMessgae, user, messageList, userId }) {
+function InboxSidebar({ handleSelectMessgae, user, messageList, userId, users }) {
     const { css } = react_fela_1.useFela();
+    const userList = users === null || users === void 0 ? void 0 : users.filter((item) => {
+        return (item === null || item === void 0 ? void 0 : item.id) !== userId;
+    });
     return (React.createElement("div", { className: css(styles_1.styleSheet.inboxSibarStyles) }, (user === null || user === void 0 ? void 0 : user.length) > 0 ? (user === null || user === void 0 ? void 0 : user.map((item, index) => {
         const lastMessage = messageList[(messageList === null || messageList === void 0 ? void 0 : messageList.length) - 1];
+        let memberId;
+        item === null || item === void 0 ? void 0 : item.members.find((ele) => {
+            if (ele.user !== userId) {
+                memberId = ele.user;
+            }
+        });
+        const userMember = userList.find((element) => {
+            return element.id === memberId;
+        });
         return (React.createElement(react_1.Button, { as: "a", border: "none", bg: "none", width: "100%", borderRadius: "10px", _hover: { backgroundColor: 'rgb(221, 221, 221)' }, className: "show-message", paddingLeft: "10px", onClick: () => handleSelectMessgae(item), key: index },
             React.createElement("div", { className: "inbox-contacts" },
                 React.createElement(react_1.Avatar, { size: "md", backgroundColor: "grey", borderRadius: "50%", width: "50px" }),
                 React.createElement("div", { className: "last-message" },
-                    React.createElement("h5", null, item === null || item === void 0 ? void 0 : item.displayName),
+                    React.createElement("h5", null, userMember === null || userMember === void 0 ? void 0 : userMember.username),
                     React.createElement("p", null, lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.message)))));
     })) : (React.createElement("div", { className: "no-messages" },
         React.createElement("h4", null, "You have no unread messages"),
@@ -337,6 +349,7 @@ function Messages({ id, user, userId, currentUser }) {
     const { css } = react_fela_1.useFela();
     const [messageList, setMessageList] = react_1.useState([]);
     const [flag, setFlag] = react_1.useState(false);
+    const [height, setHeight] = react_1.useState('40px');
     const { data, loading, error, refetch } = core_1.useGetMessagesQuery({
         variables: {
             channelId: id,
@@ -372,14 +385,23 @@ function Messages({ id, user, userId, currentUser }) {
         }
     };
     const item = user === null || user === void 0 ? void 0 : user.find((element) => {
-        return element.id == userId;
+        return element.id !== userId;
     });
+    // console.log(textarea)
+    const handleTextareaHeight = (e) => {
+        if (e.key === 'Enter' && message !== '') {
+            setHeight(40 + message.split('\n').length * 10 + 'px');
+        }
+        else {
+            setHeight('40px');
+        }
+    };
     return (react_1.default.createElement("div", { className: css(styles_1.styleSheet.messageListStyles) },
         react_1.default.createElement("div", { className: "message-container" },
             react_1.default.createElement("div", { className: "message-username" },
                 react_1.default.createElement("h2", null, item === null || item === void 0 ? void 0 : item.username),
                 react_1.default.createElement("div", null,
-                    react_1.default.createElement(react_2.Tooltip, { label: "Archive", placement: "bottom-end", backgroundColor: 'black', 
+                    react_1.default.createElement(react_2.Tooltip, { label: "Archive", placement: "bottom-end", backgroundColor: "black", 
                         // bg="white"
                         display: "flex", alignItems: "center", width: "60px", borderRadius: "10px", fontSize: "15px", height: "40px", justifyContent: "center", marginTop: "5px", color: "white", boxShadow: "0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)", hasArrow: true },
                         react_1.default.createElement(react_2.Button, { border: "none", bg: "none", width: "30px", height: "30px", onClick: handleEnterBtn, borderRadius: "50%", _hover: { backgroundColor: 'rgb(221, 221, 221)' } },
@@ -394,7 +416,9 @@ function Messages({ id, user, userId, currentUser }) {
                         react_1.default.createElement(react_2.Button, { border: "none", borderRadius: "50%", bg: "none", marginRight: "5px", height: "40px", width: "40px", _hover: { backgroundColor: 'rgb(221, 221, 221)' } },
                             react_1.default.createElement(bi_1.BiImage, { color: "#464646", style: { fontSize: '25px' } }))),
                     react_1.default.createElement(react_2.InputGroup, { size: "md" },
-                        react_1.default.createElement(react_2.Input, { placeholder: "Type your message", value: message, onPressEnter: handleEnterBtn, onChange: (e) => setMessage(e.target.value) }),
+                        react_1.default.createElement(react_2.Textarea, { placeholder: "Type your message", value: message, height: height, onKeyUp: handleTextareaHeight, 
+                            // height={enter ? message.split('\n').length * 10 + 'px' : '40px'}
+                            onChange: (e) => setMessage(e.target.value) }),
                         react_1.default.createElement(react_2.InputRightElement, null,
                             react_1.default.createElement(react_2.Button, { border: "none", bg: "none", onClick: handleEnterBtn, position: "relative", right: "53px", top: "6px" }, message !== '' ? (react_1.default.createElement(all_1.BsFillArrowUpCircleFill, { color: "rgb(34, 34, 34)", style: { fontSize: '25px' } })) : ('')))))))));
 }
@@ -477,17 +501,17 @@ exports.styleSheet = {
             display: 'flex',
             justifyContent: 'space-around',
             marginTop: '30px',
-            '& input': {
+            '& textarea': {
                 borderRadius: '20px',
                 width: '93%',
-                minHeight: '40px',
-                maxHeight: '40px',
+                overflow: 'hidden',
+                // maxHeight: '40px',
                 color: 'black',
                 lineHeight: '22px',
                 fontSize: '16px',
                 resize: 'none',
                 border: '1px solid rgb(221, 221, 221)',
-                padding: '8px 8px',
+                padding: '9px 8px',
             },
             '& .image-btn': {
                 '& svg': {
@@ -1037,7 +1061,7 @@ function InboxMessage() {
                             } },
                             react_1.default.createElement(all_1.AiOutlineMenu, { style: { fontSize: '20px', color: 'black' } })),
                         showPopover ? react_1.default.createElement(Popover_1.default, { toggleDrawer: toggleDrawer }) : '')),
-                react_1.default.createElement(InboxSidebar_1.default, { userId: userId, user: channel, handleSelectMessgae: handleSelectMessgae, currentUser: currentUser, messageList: messageList })),
+                react_1.default.createElement(InboxSidebar_1.default, { userId: currentUserId, user: channel, handleSelectMessgae: handleSelectMessgae, currentUser: currentUser, messageList: messageList, users: user })),
             react_1.default.createElement("div", { className: "add-conversations" },
                 react_1.default.createElement(react_bootstrap_1.Modal, { show: showModal, onHide: handleClose },
                     react_1.default.createElement(react_bootstrap_1.Modal.Header, { style: {