@messenger-box/platform-browser 0.0.1-alpha.83 → 0.0.1-alpha.84

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.84](https://github.com/cdmbase/messenger-box/compare/v0.0.1-alpha.83...v0.0.1-alpha.84) (2021-11-23)
+
+**Note:** Version bump only for package @messenger-box/platform-browser
+
+
+
+
+
 ## [0.0.1-alpha.83](https://github.com/cdmbase/messenger-box/compare/v0.0.1-alpha.82...v0.0.1-alpha.83) (2021-11-22)
 
 **Note:** Version bump only for package @messenger-box/platform-browser

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

@@ -1,5 +1,7 @@
 declare type IPropsType = {
     handleSelectMessgae?: any;
+    user?: [] | any;
+    messageList?: any;
 };
-export default function InboxSidebar({ handleSelectMessgae }: IPropsType): JSX.Element;
+export default function InboxSidebar({ handleSelectMessgae, user, messageList }: IPropsType): JSX.Element;
 export {};

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

@@ -1 +1 @@
-export default function Messages({ id }: any): JSX.Element;
+export default function Messages({ id, user, userId, currentUser }: any): JSX.Element;

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

@@ -1 +1 @@
-export default function MsgList({ id, messageList }: any): JSX.Element;
+export default function MsgList({ messageList, currentUser }: any): JSX.Element;

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

@@ -1 +1 @@
-export default function Popover(): JSX.Element;
+export default function Popover({ toggleDrawer }: any): JSX.Element;

package/lib/components/InboxMessage/Popover/style.d.ts

@@ -1,5 +1,5 @@
 export declare const styleSheet: {
-    customPopoverStyles: () => {
+    customPopoverStyles: (toggleDrawer: any) => {
         position: string;
         height: string;
         width: string;

package/lib/components/InboxMessage/style.d.ts

@@ -24,6 +24,12 @@ export declare const stylesheet: {
                 fontWeight: string;
                 fontSize: string;
             };
+            '& .ant-btn': {
+                padding: string;
+            };
+            '& .ant-btn:hover': {
+                background: string;
+            };
         };
         '& .header-section': {
             marginBottom: string;

package/lib/index.js

@@ -190,20 +190,24 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = __importStar(__webpack_require__(/*! react */ "react"));
 const antd_1 = __webpack_require__(/*! antd */ "antd");
-const mock_1 = __webpack_require__(/*! ../mock */ "./src/components/InboxMessage/mock.ts");
 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 }) {
+function InboxSidebar({ handleSelectMessgae, user, messageList }) {
     const { css } = react_fela_1.useFela();
-    return (React.createElement("div", { className: css(styles_1.styleSheet.inboxSibarStyles) }, mock_1.inboxData.length > 0 ? mock_1.inboxData.map((item) => {
-        const lastMessage = item.messages[item.messages.length - 1];
-        if (item.isLoggedIn == false) {
-            return React.createElement("a", { className: 'show-message', onClick: () => handleSelectMessgae(item.id) },
+    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];
+        if (item.alias[0] !== JSON.parse(window.atob(window.localStorage.getItem("access_token")
+            .split('.')[1].replace('-', '+')
+            .replace('_', '/'))).sub) {
+            return React.createElement("a", { className: 'show-message', onClick: () => handleSelectMessgae(item.id), key: index },
                 React.createElement("div", { className: 'inbox-contacts' },
-                    React.createElement(antd_1.Avatar, { size: 45 }, item.username.charAt(0)),
+                    React.createElement(antd_1.Avatar, { size: 45 }, item.username
+                        .match(/\b(\w)/g)
+                        .join('')
+                        .toUpperCase()),
                     React.createElement("div", { className: 'last-message' },
-                        React.createElement("h5", null, item.username),
-                        React.createElement("p", null, lastMessage.message))));
+                        React.createElement("h5", null, item === null || item === void 0 ? void 0 : item.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"),
@@ -321,7 +325,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(__webpack_require__(/*! react */ "react"));
 const react_fela_1 = __webpack_require__(/*! react-fela */ "react-fela");
-const mock_1 = __webpack_require__(/*! ../mock */ "./src/components/InboxMessage/mock.ts");
 const styles_1 = __webpack_require__(/*! ./styles */ "./src/components/InboxMessage/Messages/styles.ts");
 const antd_1 = __webpack_require__(/*! antd */ "antd");
 const bi_1 = __webpack_require__(/*! react-icons/bi */ "react-icons/bi");
@@ -329,21 +332,22 @@ const hi_1 = __webpack_require__(/*! react-icons/hi */ "react-icons/hi");
 const ai_1 = __webpack_require__(/*! react-icons/ai */ "react-icons/ai");
 const core_1 = __webpack_require__(/*! @messenger-box/core */ "@messenger-box/core");
 const MessagesList_1 = __importDefault(__webpack_require__(/*! ../MessagesList */ "./src/components/InboxMessage/MessagesList/index.tsx"));
-function Messages({ id }) {
+function Messages({ id, user, userId, currentUser }) {
+    var _a;
     const [message, setMessage] = react_1.useState('');
     const { css } = react_fela_1.useFela();
     const [messageList, setMessageList] = react_1.useState([]);
     const [flag, setFlag] = react_1.useState(false);
     const { data, loading, error, refetch } = core_1.useGetMessagesQuery({
         variables: {
-            channelId: '61969dab8fa1b826187c0d3e'
+            channelId: id
         }
     });
     react_1.useEffect(() => {
         if (!loading) {
             setMessageList(data.messages.data);
         }
-    }, [loading]);
+    }, [loading, id, (_a = data === null || data === void 0 ? void 0 : data.messages) === null || _a === void 0 ? void 0 : _a.data, messageList]);
     const [sendMsg, {}] = core_1.useSendMessagesMutation({
         context: {},
     });
@@ -356,31 +360,31 @@ function Messages({ id }) {
         if (message) {
             sendMsg({
                 variables: {
-                    channelId: '61969dab8fa1b826187c0d3e',
+                    channelId: id,
                     content: message
                 },
             }).then(() => {
                 refetch().then((value) => {
-                    setMessageList(value.data.messages.data);
+                    setMessageList([...value.data.messages.data]);
                 });
             });
             setMessage('');
             setFlag(true);
         }
     };
-    const item = mock_1.inboxData.find((element) => {
-        return element.id == id;
+    const item = user === null || user === void 0 ? void 0 : user.find((element) => {
+        return element.id == userId;
     });
     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.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(ai_1.AiFillStar, null),
                     react_1.default.createElement(ai_1.AiFillMessage, null),
                     react_1.default.createElement(ai_1.AiFillDropboxSquare, null))),
             react_1.default.createElement("div", { className: 'message-row' },
-                react_1.default.createElement(MessagesList_1.default, { id: id, messageList: messageList }),
+                react_1.default.createElement(MessagesList_1.default, { id: id, messageList: messageList, user: user, currentUser: currentUser }),
                 react_1.default.createElement("div", { ref: messagesEndRef }),
                 react_1.default.createElement("div", { className: 'message-input' },
                     react_1.default.createElement(bi_1.BiImage, null),
@@ -501,21 +505,19 @@ const react_1 = __importDefault(__webpack_require__(/*! react */ "react"));
 const antd_1 = __webpack_require__(/*! antd */ "antd");
 const moment_1 = __importDefault(__webpack_require__(/*! moment */ "moment"));
 const ai_1 = __webpack_require__(/*! react-icons/ai */ "react-icons/ai");
-function MsgList({ id, messageList }) {
-    // const user = inboxData.find((element) => {
-    //     return element.id === id
-    // })
-    // const loggedInUser = inboxData.find((element) => {
-    //     return element.isLoggedIn === true
-    // })
+function MsgList({ messageList, currentUser }) {
     return (react_1.default.createElement(react_1.default.Fragment, null, messageList === null || messageList === void 0 ? void 0 : messageList.map((element, index) => {
-        var _a, _b;
-        // if (element.isLoggedIn) {
-        return (react_1.default.createElement("div", { className: 'message- list' },
-            react_1.default.createElement(antd_1.Comment, { author: react_1.default.createElement("p", { className: 'username' }, (_a = element === null || element === void 0 ? void 0 : element.author) === null || _a === void 0 ? void 0 : _a.username), key: index, datetime: moment_1.default().format('HH mm: A'), avatar: react_1.default.createElement(antd_1.Avatar, null, (_b = element === null || element === void 0 ? void 0 : element.author) === null || _b === void 0 ? void 0 : _b.username.charAt(0)), content: react_1.default.createElement("div", { className: "message" },
+        var _a;
+        // if (message.author.username == user?.username ) {
+        return (react_1.default.createElement("div", { className: "message-list", key: index },
+            react_1.default.createElement(antd_1.Comment, { author: react_1.default.createElement("p", { className: "username" }, (_a = element === null || element === void 0 ? void 0 : element.author) === null || _a === void 0 ? void 0 : _a.username), datetime: moment_1.default(element.createdAt).format('HH mm: A'), avatar: element.image ? (react_1.default.createElement(antd_1.Avatar, { src: element.image })) : (react_1.default.createElement(antd_1.Avatar, null, element.author.username
+                    .match(/\b(\w)/g)
+                    .join('')
+                    .toUpperCase())), content: react_1.default.createElement("div", { className: "message" },
                     react_1.default.createElement("p", null, element.message),
-                    react_1.default.createElement(ai_1.AiFillFlag, null)) })));
-        // } else {
+                    currentUser !== element.author.username ? react_1.default.createElement(ai_1.AiFillFlag, null) : '') })));
+        // } 
+        // else {
         //     return (
         //         <div className='message-list'>
         //             {element?.sendTo == user.username  ? <Comment author={<p className='username'>{element?.author?.username}</p>} key={index} datetime={Moment().format('HH mm: A')} avatar={<Avatar>{element?.author?.username.charAt(0)}</Avatar>} content={<div className="message"><p>{element.message}</p></div>} /> : '' }
@@ -546,7 +548,7 @@ const react_1 = __importDefault(__webpack_require__(/*! react */ "react"));
 const react_fela_1 = __webpack_require__(/*! react-fela */ "react-fela");
 const style_1 = __webpack_require__(/*! ./style */ "./src/components/InboxMessage/Popover/style.ts");
 const antd_1 = __webpack_require__(/*! antd */ "antd");
-function Popover() {
+function Popover({ toggleDrawer }) {
     const { css } = react_fela_1.useFela();
     const content = [
         {
@@ -561,7 +563,7 @@ function Popover() {
             total: '0'
         }
     ];
-    return (react_1.default.createElement("div", { className: css(style_1.styleSheet.customPopoverStyles) }, content === null || content === void 0 ? void 0 : content.map((item, index) => {
+    return (react_1.default.createElement("div", { className: css(style_1.styleSheet.customPopoverStyles(toggleDrawer)) }, content === null || content === void 0 ? void 0 : content.map((item, index) => {
         if (!item.total) {
             return (react_1.default.createElement("div", { className: 'popover-style', key: index },
                 react_1.default.createElement(antd_1.Button, { type: 'link', color: '#282121' }, item.name)));
@@ -589,13 +591,13 @@ exports.default = Popover;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.styleSheet = void 0;
 exports.styleSheet = {
-    customPopoverStyles: () => ({
+    customPopoverStyles: (toggleDrawer) => ({
         position: 'absolute',
         height: '120px',
         width: '200px',
         background: 'white',
         boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',
-        left: '189px',
+        left: `${toggleDrawer ? '145px' : '189px'}`,
         top: '145px',
         borderRadius: '10px',
         '& .popover-style': {
@@ -659,6 +661,7 @@ const Messages_1 = __importDefault(__webpack_require__(/*! ./Messages */ "./src/
 const ai_1 = __webpack_require__(/*! react-icons/ai */ "react-icons/ai");
 const Popover_1 = __importDefault(__webpack_require__(/*! ./Popover */ "./src/components/InboxMessage/Popover/index.tsx"));
 const InboxDetails_1 = __importDefault(__webpack_require__(/*! ./InboxDetails */ "./src/components/InboxMessage/InboxDetails/index.tsx"));
+const core_1 = __webpack_require__(/*! @messenger-box/core */ "@messenger-box/core");
 const { SubMenu } = antd_1.Menu;
 function InboxMessage() {
     const { css } = react_fela_1.useFela();
@@ -666,10 +669,77 @@ function InboxMessage() {
     const [showMessageSide, setShowMessageSide] = react_1.useState(false);
     const [showPopover, setShowPopover] = react_1.useState(false);
     const [toggleDrawer, setToggleDrawer] = react_1.useState(true);
+    const [messageList, setMessageList] = react_1.useState([]);
+    const [channel, setChannel] = react_1.useState([]);
+    const [user, setUser] = react_1.useState();
+    const [currentUserId, setCurrentUserId] = react_1.useState();
+    const [currentUser, setCurrentUser] = react_1.useState('');
+    const [userId, setUserId] = react_1.useState();
+    const { data, loading, error, refetch } = core_1.useGetMessagesQuery({
+        variables: {
+            channelId: '619c358964bcaf93a240b23e'
+        }
+    });
+    const channelData = core_1.useGetChannelsByUserQuery();
+    const allChannels = core_1.useGetAllChannelQuery();
+    react_1.useEffect(() => {
+        if (!channelData.loading) {
+            let fChannel = [];
+            let diChal = [];
+            if (currentUserId !== '' && !allChannels.loading) {
+                let uc = [];
+                channelData.data.channelsByUser.forEach(u => uc.push(u.id));
+                let ac = [];
+                allChannels.data.channels.forEach(a => ac.push(a.id));
+                diChal = ac.filter(t => !uc.includes(t));
+                allChannels.data.channels.filter((dc) => {
+                    if (diChal.includes(dc.id)) {
+                        dc.members.forEach(m => {
+                            if (m.user === currentUserId) {
+                                fChannel.push(dc);
+                            }
+                        });
+                    }
+                });
+            }
+            setChannel([...channelData === null || channelData === void 0 ? void 0 : channelData.data.channelsByUser.filter(chl => chl.type === "DIRECT"), ...fChannel.filter(chl => chl.type === "DIRECT")]);
+        }
+    }, [loading, channelData, currentUserId]);
     const handleSelectMessgae = (id) => {
-        setId(id);
         setShowMessageSide(true);
+        setUserId(id);
+        channel === null || channel === void 0 ? void 0 : channel.forEach((item) => {
+            var _a;
+            return (_a = item.members) === null || _a === void 0 ? void 0 : _a.filter(m => {
+                if (m.user == id) {
+                    setId(item.id);
+                }
+            });
+        });
     };
+    const usersRes = core_1.useGetAllUsersQuery();
+    react_1.useEffect(() => {
+        var _a;
+        if (!usersRes.loading) {
+            setUser(usersRes.data.getUsers);
+            (_a = usersRes.data.getUsers) === null || _a === void 0 ? void 0 : _a.map((i) => {
+                if (i.alias[0] !== JSON.parse(window.atob(window.localStorage.getItem("access_token")
+                    .split('.')[1].replace('-', '+')
+                    .replace('_', '/'))).sub) {
+                    return null;
+                }
+                else {
+                    setCurrentUserId(i.id);
+                    setCurrentUser(i.username);
+                }
+            });
+        }
+    });
+    react_1.useEffect(() => {
+        if (!loading) {
+            setMessageList(data.messages.data);
+        }
+    });
     const handleToggle = () => {
         setToggleDrawer(false);
     };
@@ -679,82 +749,17 @@ function InboxMessage() {
                 react_1.default.createElement("div", { className: 'allmessage-header' },
                     react_1.default.createElement("h3", null, "Messages"),
                     react_1.default.createElement(antd_1.Button, { type: 'link', shape: 'circle', onClick: () => { setShowPopover(!showPopover); }, icon: react_1.default.createElement(ai_1.AiOutlineMenu, { style: { fontSize: '20px', color: 'black' } }) }),
-                    showPopover ? react_1.default.createElement(Popover_1.default, null) : '')),
-            react_1.default.createElement(InboxSidebar_1.default, { handleSelectMessgae: handleSelectMessgae })),
+                    showPopover ? react_1.default.createElement(Popover_1.default, { toggleDrawer: toggleDrawer }) : '')),
+            react_1.default.createElement(InboxSidebar_1.default, { user: user, handleSelectMessgae: handleSelectMessgae, messageList: messageList })),
         react_1.default.createElement("div", { className: `msg-container${toggleDrawer ? '-active' : ''}` },
             react_1.default.createElement("div", { className: "border" }),
-            showMessageSide == true ? react_1.default.createElement(Messages_1.default, { id: id }) : ''),
+            showMessageSide == true ? react_1.default.createElement(Messages_1.default, { id: id, user: user, userId: userId, currentUser: currentUser }) : ''),
         react_1.default.createElement("div", { className: toggleDrawer ? 'inbox-details' : 'inbox-details-active' },
             react_1.default.createElement(InboxDetails_1.default, { handleToggle: handleToggle, toggleDrawer: toggleDrawer }))));
 }
 exports.default = InboxMessage;
 
 
-/***/ }),
-
-/***/ "./src/components/InboxMessage/mock.ts":
-/*!*********************************************!*\
-  !*** ./src/components/InboxMessage/mock.ts ***!
-  \*********************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.inboxData = void 0;
-exports.inboxData = [
-    {
-        username: 'Alex',
-        id: Math.random(),
-        isLoggedIn: true,
-        messages: [
-            {
-                message: 'hello',
-                id: Math.random(),
-                isLoggedIn: true,
-            },
-        ]
-    },
-    {
-        username: 'Tim',
-        id: Math.random(),
-        isLoggedIn: false,
-        messages: [
-            {
-                message: 'hello',
-                id: Math.random(),
-                isLoggedIn: false,
-            },
-        ]
-    },
-    {
-        username: 'Jack',
-        id: Math.random(),
-        isLoggedIn: false,
-        messages: [
-            {
-                message: 'hello',
-                id: Math.random(),
-                isLoggedIn: false,
-            },
-        ]
-    },
-    {
-        username: 'Conner',
-        id: Math.random(),
-        isLoggedIn: false,
-        messages: [
-            {
-                message: 'hi',
-                id: Math.random(),
-                isLogged: false,
-            },
-        ]
-    },
-];
-
-
 /***/ }),
 
 /***/ "./src/components/InboxMessage/style.ts":
@@ -794,6 +799,12 @@ exports.stylesheet = {
                 fontWeight: 'bold',
                 fontSize: '1em !important'
             },
+            '& .ant-btn': {
+                padding: '4px'
+            },
+            '& .ant-btn:hover': {
+                background: '#eaeaea'
+            }
         },
         '& .header-section': {
             marginBottom: '20px',
@@ -1018,6 +1029,7 @@ const MessengerComponent = ({ channel, isRefetch }) => {
             });
         });
     };
+    console.log(channel);
     return (react_1.default.createElement("div", { className: css(style_1.styleSheet3.customInputStyle), ref: clickRef },
         react_1.default.createElement("div", { className: "chat_container" },
             react_1.default.createElement("div", { className: "left_chat_box" },
@@ -22302,7 +22314,7 @@ const Dashboard = () => {
     react_1.useEffect(() => {
         if (!loading) {
             let filtChl = data.channelsByUser.filter(c => c.displayName === ('admin (you)' || false));
-            console.log('===============', filtChl.length);
+            console.log('===============', filtChl);
             if (filtChl.length === 0 && currentUsrId !== '') {
                 initChannelFun();
             }
@@ -22340,6 +22352,7 @@ const Dashboard = () => {
                     }
                 });
             }
+            console.log(fChannel);
             setChannels([...data.channelsByUser, ...fChannel]);
             setPublicChannels(joinedChannel);
             setModalPublicChannels(modelChannel);