isometrik-chat 0.1.0

package/src/view/component/mediaList/index.js

@@ -0,0 +1,92 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import ImageComponent from "../../../components/ImageComponent";
+import { isImage, isVideo } from "../../../lib/helpers";
+import { mediaListing } from "../../../lib/mockData/index";
+
+const MediaListConatiner = styled.div`
+  display: flex;
+  padding: 0px 30px;
+  overflow: scroll;
+  ::-webkit-scrollbar {
+  display: none;
+  } 
+  -ms-overflow-style: none;
+  scrollbar-width: none;  
+`;
+
+const MediaBody = styled.div`
+  height: 100px;
+  width: 100px;
+  margin: 4px;
+`;
+
+const MediaDocs = styled.div`
+  display: flex;
+  background-color: var(--chat-info-drawer-media-background);
+  border-radius: 10px;
+  background-image: linear-gradient(
+    rgba(0, 0, 0, 0) 70%,
+    rgba(0, 0, 0, 0.6) 100%
+  );
+
+  .media-images {
+    height: 100px;
+    width: 100px;
+    padding: 5px;
+    backgroundrepeat: no-repeat;
+    backgroundsize: cover;
+    object-fit: cover;
+  }
+`;
+
+function MediaList(props) {
+  const { conversationId, message, setTotalMediaFiles, totalMediaFiles } =
+    props;
+  const mediaFile = message?.messages[conversationId]?.filter((data) => {
+    return data?.attachments && data?.attachments?.[0]?.mediaUrl.length > 0;
+  });
+  // const filteredData = mediaFile.filter(item => item.customType !== 'audio');
+  const filteredData = mediaFile.filter(item => isImage(item.attachments[0]?.extension) || isVideo(item.attachments[0]?.extension));
+
+  setTotalMediaFiles(filteredData.length);
+  // filteredData.length = 3;
+  return (
+    <MediaListConatiner>
+      {filteredData?.map((data) => {
+        const fileExtension = data?.attachments[0]?.extension;
+        if (isImage(fileExtension)) {
+          return (
+            <MediaBody key={data?.id}>
+              <MediaDocs>
+                <ImageComponent
+                  className="media-images"
+                  src={data.attachments[0]?.mediaUrl}
+                />
+              </MediaDocs>
+            </MediaBody>
+          );
+        } else if (isVideo(fileExtension)) {
+          return (
+            <MediaBody key={data?.id}>
+              <MediaDocs>
+              <video
+                  controls
+                  style={{ objectFit: "contain" }}
+                  className="media-images"
+                >
+                  <source
+                    src={data.attachments[0]?.mediaUrl}
+                    type="video/mp4"
+                  />
+                </video>
+              </MediaDocs>
+            </MediaBody>
+          );
+        } 
+      })}
+    </MediaListConatiner>
+  );
+}
+
+export default MediaList;

package/src/view/component/menuDialog/index.js

@@ -0,0 +1,71 @@
+import React, { useState } from "react";
+import "./styles.css";
+import client from "../../../utils/chatSdk";
+
+function MenuDialog(props) {
+  const { state, dispatch,menuData,setIsMenu,setIsLogOut, modalRef, setClearChatModal, setDeleteChatModal, handleClickSlideShow, setUserBlockModal, userConversationDetail,setIsBlockedList,setMessageInfo, setIsOpen, chat, setMessageChat,messageChat,setslideShow,setSearchShow,setIsReply,setReply,reply,setDeleteMessage,deleteMessage,getReplyMessageData} = props;
+  const [isForword, setIsForword] = useState(false);
+
+  const menuClick = (data, index) => {
+    if (index === 0) {
+      client?.user
+        ?.getUsers()
+        .then((res) =>
+        {}
+          // dispatch({ type: "ProfileAllUsers", payload: res?.users })
+        )
+        .catch((err) => console.log(err, "err"));
+    }
+    if (data == "Forword message") {
+      setIsForword(data);
+      props?.childData(data);
+    }else if (data.header === 'Clear chat') {
+      setClearChatModal(true);
+    }else if (data.header === 'Delete chat') {
+      setDeleteChatModal(true);
+    }else if (data.header === 'Contact info') {
+      handleClickSlideShow();
+    }else if (data.header === 'Block' || data.header === 'Unblock') {
+      setUserBlockModal(true);
+    }
+    else if (data.header === "Message info") {
+      setMessageInfo(true);
+      setslideShow(false);
+      setSearchShow(false);
+      setMessageChat(chat)
+    }
+    // if (data.header === "Reply") {
+    //   setIsReply(true);
+    //   setReply({ ...reply , isreply:true , data:{chat}})
+    //   getReplyMessageData(chat);
+    // }
+
+    if (data.header === "Delete Message") {
+      setDeleteMessage({...deleteMessage,delete:true,data:{chat}})
+    }
+
+    if (data.id === 5) {
+      setIsLogOut(true);
+    }
+    if (data.id === 4) {
+      setIsBlockedList(true);
+    }
+     setIsMenu(false);
+  };
+
+  
+
+  return (
+    <div ref={modalRef} className="menu">
+      {menuData?.length>0 && menuData.map((data, index) => {
+        return (
+          <div className="menuBox pointer" key={index}>
+            <p onClick={() => menuClick(data, index)}>{data.header} </p>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export default MenuDialog;

package/src/view/component/menuDialog/styles.css

@@ -0,0 +1,24 @@
+.menuBox p {
+    padding: 0 2rem;
+    margin: 0;
+    line-height: 2.5rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 14.5px;
+    color: var(--primary);
+    padding-right: 58px !important;
+    white-space: nowrap;
+}
+
+.menu p:hover {
+  background-color: var(--white);
+}
+
+.menu{
+  z-index: 999;
+  width:100%;
+  
+
+  box-shadow:none !important
+}

package/src/view/component/pagination/pagination.js

@@ -0,0 +1,52 @@
+import React, { useEffect, useState } from 'react';
+
+const around = (n, value) => (value >= n - 5 && value <= n + 5);
+
+const PaginationIndicator = (props) => {
+  const { id, totalData, pageEventHandler, elementRef, ...others } = props;
+  const [pageChange, setPageChange] = useState(0);
+
+  useEffect(() => {
+    const elementNode = document.getElementById(id)
+ || (elementRef && elementRef.current);
+    if (elementNode) {
+      elementNode.addEventListener('scroll', () => {
+        const isScrollTouchingBottom = around(
+          parseInt(elementNode.scrollHeight), // eslint-disable-line
+          parseInt(elementNode.scrollTop) + parseInt(elementNode.clientHeight) // eslint-disable-line
+        );
+        if (isScrollTouchingBottom && parseInt(elementNode.scrollTop)) { // eslint-disable-line
+          setPageChange(Math.random());
+        }
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    const elementNode = document.getElementById(id)
+ || (elementRef && elementRef.current);
+    if (elementNode) {
+      const isScrollTouchingBottom = around(
+        parseInt(elementNode.scrollHeight), // eslint-disable-line
+        parseInt(elementNode.scrollTop) + parseInt(elementNode.clientHeight) // eslint-disable-line
+      );
+      if (isScrollTouchingBottom) {
+        if (pageEventHandler) {
+          pageEventHandler();
+        }
+      }
+    }
+  }, [pageChange]);
+
+  useEffect(() => (
+    () => {
+      const elementNode = document.getElementById(id)
+ || (elementRef && elementRef.current);
+      if (elementNode) {
+        elementNode.removeEventListener('scroll', () => null);
+      }
+    }
+  ), []);
+  return <div {...others}>{props.children}</div>;
+};
+export default PaginationIndicator;

package/src/view/component/pagination/paginationForMsg.js

@@ -0,0 +1,43 @@
+import React, { useEffect, useState } from 'react';
+
+const PaginationForMsg = (props) => {
+    const { id, totalData, pageEventHandler, elementRef, ...others } = props;
+    const [pageChange, setPageChange] = useState(0);
+    useEffect(() => {
+        const elementNode = document.getElementById(id)
+            || (elementRef && elementRef.current);
+        if (elementNode) {
+            elementNode.addEventListener('scroll', () => {
+                const isScrollTouchingTop = parseInt(elementNode.scrollTop) === 0;
+                if (isScrollTouchingTop) {
+                    setPageChange(Math.random());
+                }
+            });
+        }
+    }, []);
+
+    useEffect(() => {
+        const elementNode = document.getElementById(id)
+            || (elementRef && elementRef.current);
+        if (elementNode) {
+            const isScrollTouchingTop = parseInt(elementNode.scrollTop) === 0;
+            if (isScrollTouchingTop) {
+                if (pageEventHandler) {
+                    pageEventHandler();
+                }
+            }
+        }
+    }, [pageChange]);
+
+    useEffect(() => (
+        () => {
+            const elementNode = document.getElementById(id)
+                || (elementRef && elementRef.current);
+            if (elementNode) {
+                elementNode.removeEventListener('scroll', () => null);
+            }
+        }
+    ), []);
+    return <div {...others}>{props.children}</div>;
+};
+export default PaginationForMsg;

package/src/view/component/sidebarChat/index.js

@@ -0,0 +1,321 @@
+import React, { useEffect, useRef, useState } from "react";
+import "./styles.css";
+import { chatList } from "../../../Data";
+import { fontSize } from "../../../Data";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+// import Menu from "../Menu";
+import { createContext } from "react";
+import { ArrowContext } from "../Context";
+import notFound from "../../../assets/images/notFound.jpeg";
+import Badge from "@mui/material/Badge";
+import MenuDialog from "../menuDialog/index";
+import Menu from "@mui/material/Menu";
+import ImageComponent from "../../../components/ImageComponent";
+import {
+  ARROW_LOGO,
+  BOTTOM_ARROW,
+  Empty_Chat_Placeholder,
+} from "../../../utils/global";
+import styled from "styled-components";
+import PaginationIndicator from "../pagination/pagination";
+import UserDetailCard from "../UserDetailsCard/UserDetailCard";
+import { getUserConversationDetails } from "../../../lib/helpers";
+import UserPagingLoader from "../Loader/UserPagingLoader";
+import client from "../../../utils/chatSdk";
+import { CLEAR_CHAT, DELETE_CHAT, MESSAGE_DELETE_FOR_ALL, MESSAGE_DELETE_LOCAL, MESSAGE_DELIVERED, MESSAGE_READ } from "../../../lib/constant";
+import { markMessagesAsRead, putIndicateMessageRead } from "../../../services/deliveryStatus";
+import { getCookie } from "../../../lib/session";
+
+let dataCollection = [];
+let aar = [];
+let markRead = [];
+
+const EmptyChatPlaceholder = styled.div`
+  position: absolute;
+  bottom: 50%;
+  .emptyImage {
+    vertical-align: bottom;
+    height: 1005;
+    height: 100%;
+    width: 100%;
+  }
+`;
+
+const TextPlaceholder = styled.div`
+ padding:0px 35px;
+ align-items:center;
+ margin:auto;
+ text-align: center;
+ cursor:pointer;
+ color:var(--black);
+  }
+`;
+
+function SidebarChat({
+  sideData,
+  dataHandler,
+  disabledKey,
+  state,
+  dispatch,
+  getPaginationHomePageData,
+  findUserId,
+  currentUserConversationDetails,
+  setCurrentUserConversationDetails,
+  getHomePageConversationData,
+  sidebarChatItem,
+  setShowLoader,
+  showConversationPagingLoader,
+  sidebarData,
+  userDetails,
+  messageSlidebar,
+  profileClose,
+  setMediaDocs
+}) {
+  const [isShown, setIsShown] = useState();
+  const [pinChat, setPinChat] = useState(false);
+  const AppContext = createContext();
+  const [isModalShow, setIsMdalShow] = useState(false);
+  const [chatListItem, setChatListItem] = useState();
+  const Delete = localStorage.getItem("deleteIndex");
+  const Pin = localStorage.getItem("pinIndex");
+  const [pinIcon, setPinIcon] = useState(false);
+  const [key, setKey] = useState();
+  const [pinedData, setPinedData] = useState();
+  const [markedData, setMarkedData] = useState();
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const [currentUserId, setCurrentUserId ] = useState('');
+  const open = Boolean(anchorEl);
+  const pageScrollHomePageRef = useRef(null);
+
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClosemodal = () => {
+    setAnchorEl(null);
+  };
+
+  const arrowHandler = (index, event, data) => {
+    setAnchorEl(event.currentTarget);
+    // setIsMdalShow(false);
+    // setIsShown(index);
+    // setPinedData(data);
+    // setMarkedData(data);
+    // console.log("nnn", index,data)
+  };
+
+    const userId = getCookie("userId");
+  
+  useEffect(() => {
+    setChatListItem(sideData);
+  }, [sideData?.length]);
+
+  const getUnreadMessageCount = async (conId) => {
+     try {
+        const unreadCount = await client.message.getUnreadCount({conversationId: conId});
+        return unreadCount;
+     } catch (error) {
+        console.error('error', error);
+     }
+  }
+
+  const getNewUserData = async(conId) => {
+    try {
+      const newUserData = await getUserConversationDetails(conId);
+      return newUserData;
+    } catch (error) {
+      console.error('error', error);
+    }
+  }
+
+  const getConversationListSorted = async () => {
+    if (chatListItem?.length) {
+      const currIndex = chatListItem.findIndex(
+        (obj) =>
+          obj?.conversationId === findUserId?.conversationId
+      );
+      const filteredData = chatListItem.filter(
+        (obj) =>
+          obj?.conversationId === findUserId?.conversationId
+      )[0];
+      if (findUserId?.messageId && findUserId.action  !== MESSAGE_DELIVERED ) {
+        if (currIndex !== -1) {
+          if (findUserId?.conversationId === state.selectedConvId) {
+            if (findUserId?.body && userId !== findUserId?.senderId) {
+              putIndicateMessageRead(findUserId?.messageId, findUserId?.conversationId);
+              chatListItem[currIndex].unreadMessagesCount =  0;
+            }
+          }else {
+            const unreadCount = await getUnreadMessageCount(findUserId.conversationId);
+            chatListItem[currIndex].unreadMessagesCount = unreadCount?.count || 0;
+          }
+          if(findUserId.action === MESSAGE_READ) return;  // to  prevent new message to disappear from sidechat bar
+          chatListItem[currIndex].lastMessageDetails.body = findUserId.body;
+          chatListItem[currIndex].lastMessageDetails.sentAt = findUserId.sentAt;
+          chatListItem.splice(currIndex, 1);
+          chatListItem.unshift(filteredData);
+          setChatListItem([...chatListItem]);
+        } else {
+          const newUserData = await getNewUserData(findUserId.conversationId);
+          setChatListItem([newUserData, ...chatListItem]);
+        }
+      }
+      else if ((findUserId?.action === MESSAGE_DELETE_FOR_ALL || findUserId?.action === MESSAGE_DELETE_LOCAL)  ) {
+        const currentChatObj = state.messages[findUserId?.conversationId].filter(data => data?.body);
+        const findMessageIndex = state?.messages[findUserId?.conversationId].findIndex(
+          (obj) =>
+            (obj.messageId === findUserId?.messageIds[0])
+        );
+        chatListItem[currIndex].lastMessageDetails.body = currentChatObj[findMessageIndex === 0 ? 1 : 0]?.body;
+        chatListItem[currIndex].lastMessageDetails.sentAt = currentChatObj[findMessageIndex === 0 ? 1 : 0]?.sentAt;
+      }
+      else if (findUserId.action === CLEAR_CHAT) {
+            chatListItem[currIndex].lastMessageDetails.body = "";
+      }
+      else if (findUserId.action === DELETE_CHAT) {
+            sidebarData(false);
+            chatListItem.splice(currIndex, 1);
+            setChatListItem([...chatListItem]);
+      }
+
+      if (findUserId.messageId) {
+        pageScrollHomePageRef.current.scrollTop = 0;
+      }
+    }else if (findUserId?.messageId) { // When user don't have any  chats(chatListItem.length === 0)
+      const newUserData = await getNewUserData(findUserId.conversationId);
+      setChatListItem([newUserData, ...chatListItem]);
+    }
+  };
+
+  useEffect(() => {
+    getConversationListSorted();
+    setCurrentUserId(findUserId?.userId);
+  }, [findUserId]);
+
+  // const chatDelete = (deleteItem) => {
+  //   const chat = chatListItem.filter((data) => data?.id != deleteItem);
+  //   setChatListItem(chat);
+  //   setIsMdalShow(!isModalShow);
+  //   chatListItem?.map((data, _) => {
+  //     if (data?.id == deleteItem) {
+  //     }
+  //   });
+  // };
+
+  const handleClose = () => {
+    setIsMdalShow(!isModalShow);
+  };
+
+  const chatUnPin = (unpinItem) => {
+    const result = chatListItem?.filter((data) => data?.id == unpinItem);
+    chatListItem.push(result[0]);
+    chatListItem.shift();
+    const unpin = aar.filter((data) => data != unpinItem);
+    aar = [];
+    aar = [...unpin];
+    setIsMdalShow(!isModalShow);
+  };
+
+  const markChatPin = (markItem) => {
+    markRead.push(markItem);
+    const result = chatListItem.filter((data) => data?.id == markItem);
+    result.forEach((object) => {
+      object.mark = "marked";
+    });
+
+    setIsMdalShow(!isModalShow);
+  };
+
+  const markUnchat = (unMarkItem) => {
+    const unmark = markRead.filter((data) => data != unMarkItem);
+    markRead = [];
+    markRead = [...unmark];
+    setIsMdalShow(!isModalShow);
+  };
+
+  const chatPin = (pinItem) => {
+    const result = chatListItem.filter((data) => data?.id == pinItem);
+    result.forEach((object) => {
+      object.pin = "pined";
+    });
+    chatListItem.unshift(result[0]);
+    setKey(result[0]?.id);
+    aar.push(result[0]?.id);
+    setPinChat(true);
+
+    var uniq = {};
+    var arrFiltered = chatListItem.filter(
+      (obj) => !uniq[obj.id] && (uniq[obj.id] = true)
+    );
+
+    setChatListItem(arrFiltered);
+    setPinIcon(true);
+    setIsMdalShow(!isModalShow);
+  };
+  if (aar.length > "3") {
+  }
+
+  const messagesReadCount = (timeStamp, conversationId) => {
+    const payload = {
+      timestamp: timeStamp,
+      conversationId: conversationId,
+    }
+    markMessagesAsRead(payload);
+  }
+
+  const getCurrentUserDetailsHandler = async (data) => {
+    // console.log(data, 'selecteddata---');
+    setCurrentUserConversationDetails({
+      id: data.opponentDetails.userId,
+      conversationId: data.conversationId,
+    });
+    messagesReadCount(data.lastMessageSentAt, data.conversationId);
+    data.unreadMessagesCount = 0;
+  };
+
+  return (
+    <>
+      <PaginationIndicator
+        elementRef={pageScrollHomePageRef}
+        pageEventHandler={getPaginationHomePageData}
+      />
+      <div ref={pageScrollHomePageRef} className="sidebarChat">
+        {chatListItem?.length > 0 ? (
+          chatListItem?.map((data, index) => {
+            return (
+              <UserDetailCard
+                key={index}
+                getCurrentUserDetailsHandler={getCurrentUserDetailsHandler}
+                dataHandler={dataHandler}
+                data={data}
+                index={index}
+                anchorEl={anchorEl}
+                open={open}
+                handleClosemodal={handleClosemodal}
+                dispatch={dispatch}
+                state={state}
+                isActiveChat={ currentUserConversationDetails.id === data?.opponentDetails?.userId && 
+                  currentUserConversationDetails.id !== findUserId?.senderId
+                }
+                findUserId={findUserId}
+                profileClose={profileClose}
+                setMediaDocs={setMediaDocs}
+              />
+            );
+          })
+        ) : (
+          <EmptyChatPlaceholder>
+            <ImageComponent
+              className="emptyImage"
+              src={Empty_Chat_Placeholder}
+            />
+             <TextPlaceholder >you have no active chats ,<bold onClick={()=>messageSlidebar()} style={{color:"blue"}}> CLICK HERE </bold> to find the users to chat with</TextPlaceholder>
+          </EmptyChatPlaceholder>
+        )}
+        {showConversationPagingLoader && <UserPagingLoader />}
+      </div>
+    </>
+  );
+}
+
+export default SidebarChat;