isometrik-chat 0.1.0

package/src/view/component/Toaster/Toaster.js

@@ -0,0 +1,117 @@
+import PropTypes from "prop-types";
+import { useEffect, useRef } from "react";
+import ImageComponent from "../../../components/ImageComponent";
+import { CLOSE_ICON } from "../../../utils/global";
+import styled, { css } from "styled-components";
+import { mobile } from "../../../utils/media";
+
+
+const ToasterWrapper = styled.div`
+    position: relative;
+    background: ${props => props.variant === 'success' ? 'var(--toaster-success-bgcolor)' : 'var(--toaster-error-bgcolor)'};
+    position: fixed;
+    bottom: 40px;
+    left: 40px;
+    padding: 10px 20px;
+    border-radius: 5px;
+    color:#8696a0;
+    z-index: 999;
+    visibility: ${props => props.open ? 'visible' : 'hidden'};
+    animation: animate-left-in 500ms, animate-left-out 500ms;
+    
+    ${mobile(css`
+      left: 15px;
+      bottom: 15px;
+    `)}
+
+    .cross_icon{
+          width: 20px !important;
+          height: 20px !important;
+        ${mobile(css`
+            width: 15px !important;
+            height: 15px !important;
+        `)}
+    }
+`;
+
+const ShowToastMessage = styled.span`
+    margin-right: 1rem; 
+    color: var(--primary-white);
+`;
+
+const Toaster = ({ message, variant, time, open, onClose }) => {
+
+  const toastRef = useRef(null);
+
+  useEffect(() => {
+    const timerId = setTimeout(() => {
+      if (toastRef.current) toastRef.current.classList.remove("show");
+      onClose();
+    }, time + 500);
+
+    return () => {
+      console.log("clear timeout");
+      clearTimeout(timerId);
+    };
+  }, [open]);
+
+  return (
+    <>
+      {
+      open && (
+        <ToasterWrapper ref={toastRef} variant={variant}  open={open}>
+          <i className="fa-regular fa-circle-check"></i>
+          <ShowToastMessage className="message">{message}</ShowToastMessage>
+          <ImageComponent onClick={onClose} className={'pointer cross_icon'}  src={CLOSE_ICON}  style={{color:"8696a0", filter:"invert(0.5)"}}  alt="close_icon" />
+        </ToasterWrapper>
+      )
+      }
+
+      <style jsx="true">{`
+        @keyframes animate-left-in {
+          from {
+            bottom: 0px;
+            opacity: 0;
+          }
+          to {
+            bottom: 40px;
+            opacity: 1;
+          }
+        }
+        @keyframes animate-left-out {
+          from {
+            bottom: 40px;
+            opacity: 1;
+          }
+          to {
+            bottom: 0px;
+            opacity: 0;
+          }
+        }
+      `}</style>
+    </>
+  );
+};
+
+Toaster.propTypes = {
+  message: PropTypes.string.isRequired,
+  variant: PropTypes.oneOf(["success", "error", "warning"]),
+  open: PropTypes.oneOf([true, false]).isRequired,
+  onClose: PropTypes.func,
+  time: PropTypes.number,
+  anchorOrigin: PropTypes.exact({
+    vertical: PropTypes.oneOf(["top", "bottom"]),
+    horizontal: PropTypes.oneOf(["left", "center", "right"])
+  })
+};
+
+Toaster.defaultProps = {
+  time: 4000,
+  variant: "success",
+  anchorOrigin: {
+    vertical: "bottom",
+    horizontal: "left"
+  }
+};
+
+export default Toaster;

package/src/view/component/UserDetailsCard/UserDetailCard.js

@@ -0,0 +1,337 @@
+import React from "react";
+import MenuDialog from "../menuDialog";
+import styled, { css } from "styled-components";
+import ImageComponent from "../../../components/ImageComponent";
+import Menu from "@mui/material/Menu";
+import { mobile } from "../../../utils/media";
+import { decodeChatBody, formatDate, getTimeWithMeridian, getTypingMessage } from "../../../lib/helpers";
+import { USER_UNBLOCK_CONVERSATION } from "../../../lib/constant";
+
+const UserChatBox = styled.div`
+  padding-right: 15px;
+  height: 72px;
+  border-bottom: 1px solid var(--border_color);
+  display: flex;
+  flex-basis: auto;
+  flex-direction: column;
+  flex-grow: 1;
+  justify-content: center;
+  min-width: 0;
+`;
+
+const GridCell = styled.div`
+  text-align: left;
+  display: flex;
+  align-items: center;
+  line-height: normal;
+`;
+
+const CellFrameTitle = styled.div`
+  color: #fff;
+  text-align: left;
+  font-weight: 500;
+  line-height: normal;
+  display: flex;
+  flex-grow: 1;
+  overflow: hidden;
+  font-size: 17px;
+  overflow-wrap: break-word;
+`;
+
+const CellFrameUserName = styled.div`
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block;
+  flex-grow: 1;
+  color: var(--black);
+  overflow-x: hidden;
+  position: relative;
+  color: var(--black);
+`;
+
+const CellFramePrimaryDetail = styled.div`
+  margin-top: 3px;
+  margin-left: 6px;
+  font-weight: 600;
+  color: var(--profile-color);
+  overflow: hidden;
+  line-height: 14px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: none;
+  max-width: 100%;
+  font-size: 12px;
+`;
+
+const MessageLastTime = styled.div`
+  text-transform: capitalize;
+`;
+
+const CellFrameSecondary = styled.div`
+  color: #8696a0;
+  font-weight: 400;
+  margin-top: 2px
+  display: flex;
+  align-items: center;
+  min-height: 20px;
+  font-size: 13px;
+  line-height: 20px;
+`;
+
+const LastMessageShow = styled.div`
+  text-align: left;
+  background-color: initial;
+  font-weight: 500;
+  flex-grow: 1;
+  overflow: hidden;
+  font-size: 14px;
+  line-height: 20px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 3px 0;
+  display: flex;
+`;
+
+const Message = styled.div`
+  display: inline-block;
+  align-items: flex-start;
+  position: relative;
+  overflow-x: hidden;
+  flex-grow: 1;
+  overflow-y: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const BadgeDots = styled.div`
+  box-sizing: border-box;
+  font-weight: 500;
+  font-size: 0.75rem;
+  padding: 0 6px;
+  height: 20px;
+  border-radius: 10px;
+  transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  background-color:var(--profile-color);
+  color: #fff;
+  width: fit-content;
+
+  &:hover {
+    display: none;
+  }
+`;
+
+const UserInfo = styled.div`
+  background: ${(props) =>
+    props.isActiveChat && "var(--chat_hover)"};
+  ${mobile(css`
+    background: transparent;
+  `)}
+  .userProfileContainer {
+    padding: 0px 15px 0px 13px;
+  }
+  .user-image {
+    height: 49px;
+    width: 49px;
+    border-radius: 50%;
+  }
+`;
+
+let chatMenuData = [
+  "Archive chat",
+  "Mute notifications",
+  "Exit group",
+  "Pin chat",
+  "Mark as read",
+];
+
+const UserDetailCard = (props) => {
+  const {
+    data,
+    dataHandler,
+    index,
+    anchorEl,
+    open,
+    handleClosemodal,
+    dispatch,
+    state,
+    getCurrentUserDetailsHandler,
+    currentUserConversationDetails,
+    findUserId,
+    findUserIndex,
+    isActiveChat,
+    profileClose,
+    setMediaDocs
+  } = props;
+
+  const getTime = 
+  getTimeWithMeridian(new Date(data?.lastMessageDetails.sentAt));
+
+  return (
+    <>
+    {
+    (data.lastMessageDetails?.hasOwnProperty('body') || data?.lastMessageDetails?.action === USER_UNBLOCK_CONVERSATION ) &&
+    <div key={data?.opponentDetails?.userId}>
+      <UserInfo
+        className="user_Info"
+        onClick={() => {
+          dataHandler(data);
+          getCurrentUserDetailsHandler(data);
+          profileClose();
+          setMediaDocs();
+        }}
+        isActiveChat={
+          isActiveChat
+        }
+      >
+        {data?.createdByUserImageUrl ? (
+          <div className="userProfileContainer">
+            <ImageComponent
+              src={data?.opponentDetails?.userProfileImageUrl}
+              className="user-image"
+              alt={data?.opponentDetails?.userName}
+            />
+          </div>
+        ) : (
+          <div className="userContact_image" style={{ textAlign: "center" }}>
+            {data?.name?.charAt(0)}
+          </div>
+        )}
+
+        <UserChatBox>
+          <GridCell>
+            <CellFrameTitle>
+              <CellFrameUserName>
+                {data?.opponentDetails?.userName}
+              </CellFrameUserName>
+            </CellFrameTitle>
+            <CellFramePrimaryDetail>
+              <MessageLastTime>{formatDate(data?.lastMessageDetails?.sentAt)}</MessageLastTime>
+            </CellFramePrimaryDetail>
+          </GridCell>
+          <CellFrameSecondary>
+            <LastMessageShow>
+              <Message>{decodeChatBody(data?.lastMessageDetails?.body)}</Message>
+              {data.unreadMessagesCount > 0 && (
+                <BadgeDots>{data.unreadMessagesCount}</BadgeDots>
+              )}
+            </LastMessageShow>
+          </CellFrameSecondary>
+        </UserChatBox>
+      </UserInfo>
+      {/* {pinChat ? (
+                  <div>
+                    {aar?.map((item, index) => {
+                      return (
+                        <div
+                          className={`${
+                            item == data?.id ? "d-block " : "d-none"
+                          }`}
+                        >
+                          <h>
+                            <svg
+                              style={{
+                                position: "absolute",
+                                top: "34px",
+                                right: "65px",
+                              }}
+                              height="15"
+                              width="15"
+                              preserveAspectRatio="xMidYMid meet"
+                              class="text_Color"
+                            >
+                              <path
+                                fill="currentColor"
+                                d="M12.074 4.21 8.7 8.232l.116 4.233a.4.4 0 0 1-.657.318L.43 6.297a.4.4 0 0 1 .199-.702l4.196-.622L8.196.957a.63.63 0 0 1 .887-.078l2.914 2.445a.63.63 0 0 1 .077.887ZM1.294 14.229a.713.713 0 0 1-1.09-.915l2.674-3.64 1.536 1.288-3.12 3.267Z"
+                              ></path>
+                            </svg>
+                          </h>
+                        </div>
+                      );
+                    })}
+                  </div>
+                ) : (
+                  ""
+                )} */}
+
+      {/* <div>
+                  {markRead?.map((item, index) => {
+                    return (
+                      <div
+                        className={`${
+                          item == data?.id ? "d-block " : "d-none"
+                        }`}
+                      >
+                        <div
+                          style={{
+                            height: "22px",
+                            width: "22px",
+                            borderRadius: "20px",
+                            background: "#25d366",
+                            position: "absolute",
+                            top: "31px",
+                            right: "40px",
+                          }}
+                        >
+                          {" "}
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div> */}
+
+      {/* { <p className={!isModalShow ? "d-none" : ""}> } */}
+      <div
+        // className={`${index == isShown ? "d-block " : "d-none"}`}
+        style={
+          {
+            // position: "fixed",
+            // zIndex: "10000",
+            // transformOrigin: "left top",
+            // transform: "scale(1)",
+            // opacity: "1",
+            // top: "30%",
+            // width: "15%",
+            // boxShadow:
+            //   "0 2px 5px 0 rgba(var(--shadow-rgb),.26),0 2px 10px 0 rgba(var(--shadow-rgb),.16)",
+            // overflow: "hidden",
+          }
+        }
+      >
+        {/* <Menu
+                      isShown={data?.id}
+                      chatDelete={chatDelete}
+                      chatPin={chatPin}
+                      chatUnPin={chatUnPin}
+                      handleClose={handleClose}
+                      data={data}
+                      pinedData={pinedData}
+                      markChatPin={markChatPin}
+                      markedData={markedData}
+                      markUnchat={markUnchat}
+                    /> */}
+
+        <Menu
+          id="basic-menu"
+          anchorEl={anchorEl}
+          open={open}
+          onClose={handleClosemodal}
+          MenuListProps={{
+            "aria-labelledby": "basic-button",
+          }}
+        >
+          <MenuDialog
+            menuData={chatMenuData}
+            dispatch={dispatch}
+            state={state}
+          />
+        </Menu>
+      </div>
+      {/* {/ </p> /}
+      {/ </div> /} */}
+    </div>
+  }
+  </>
+  );
+};
+
+export default UserDetailCard;

package/src/view/component/deleteMessageMoal.js

@@ -0,0 +1,80 @@
+import React from 'react'
+import styled, { css } from 'styled-components';
+import { mobile } from '../../utils/media';
+
+const ModalContainer = styled.div`
+    background-color: var(--modal_color);
+    color: var(--black);
+    position: absolute;
+    width: 32rem;
+    top: 50%;
+    left: 50%;
+    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
+    -webkit-transform: translate(-50%,-50%);
+    -ms-transform: translate(-50%,-50%);
+    transform: translate(-50%,-50%);
+    padding: 20px 24px 6px 22px;
+    ${mobile(css`
+        max-width: 320px;
+    `)}
+`;
+
+const ModalTitle = styled.h5`
+    margin-top: 20px;
+    text-transform:capitalize;
+    ${mobile(css`
+    font-size: 18px;
+`)}
+`;
+
+const ModalDescription = styled.p`
+    font-size: 18px;
+    ${mobile(css`
+    font-size: 14px;
+`)}
+`;
+
+
+const ButtonAction = styled.div`
+display:flex;
+flex-direction:column;
+justify-content: flex-end;
+margin:3rem 0 20px;
+
+${mobile(css`
+    margin:1.5rem 0 20px;
+`)}
+.cancleBtn{
+    width: fit-content;
+    margin: 0.5rem 0;
+    margin-left: auto;
+    background:var(--white);
+    color:var(--button-primary-background);
+    border:1px solid var(--border_color)};
+
+.logoutBtn{
+    background-color:var(--button-primary-background);
+    color:var(--white);
+}  
+`;
+
+const Button = styled.button`
+    margin-left:15px;
+    border-radius:20px;
+    border:none;
+    padding:5px 20px 5px 20px;
+`;
+function DeleteMessageModal({deleteMesageHandler ,cancleDeleteMessage,deleteMessageEveryone}) {
+  return (
+    <ModalContainer>
+    <ModalTitle>Delete Message </ModalTitle>
+    <ButtonAction className="logoutActionbtn">
+    <Button className="cancleBtn" onClick={deleteMessageEveryone} >Delete for everyone</Button>
+    <Button className="cancleBtn" onClick={deleteMesageHandler} >Delete for Me</Button>
+    <Button className="cancleBtn" onClick={cancleDeleteMessage} >Cancel</Button>
+    </ButtonAction>
+</ModalContainer>
+  )
+}
+
+export default DeleteMessageModal

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

@@ -0,0 +1,22 @@
+import React,{useState} from 'react';
+import EmojiPicker from 'emoji-picker-react';
+
+
+// const onEmojiClick = (event , emojiObject)=>{
+//     setChosenEmoji(emojiObject)
+
+// }
+
+function Emoji() {
+    // const [chosenEmoji , setChosenEmoji] = useState(null);
+
+  return (
+    <div>
+      <EmojiPicker />
+       </div>
+   
+  )
+}
+
+export default Emoji
+