isometrik-chat 0.1.0

package/src/components/MediaDocs.js

@@ -0,0 +1,155 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import { getMonth, isImage, isVideo } from "../lib/helpers";
+import ImageComponent from "./ImageComponent";
+
+const MediaListContainer = styled.div`
+  display: flex;
+  box-sizing: border-box;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  cursor: pointer;
+  margin-right: 1rem;
+`;
+
+const MediaBody = styled.div`
+  height: 112px;
+  width: 112px;
+  margin: 4px 4px 10px;
+  display: flex;
+`;
+
+const MediaDocsWrapper = 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: 112px;
+    width: 112px;
+    padding: 10px;
+    background-repeat: no-repeat;
+    object-fit: cover;
+  }
+`;
+
+const MediaDocsContainer = styled.div`
+    display: flex;
+    overflow: scroll;
+    flex-wrap: wrap;
+    padding-top: 1rem;
+`;
+
+const NoMediaFoundWrapper = styled.div`
+    display: flex;
+    width: 100%;
+    height: 80vh;
+
+    .no_media{
+      margin: auto;
+    }
+`;
+
+const getMonthwiseMedia = (mediaDocs) => {
+  let obj = {};
+  mediaDocs?.forEach((element) => {
+    const key = getMonth(element.sentAt);
+    // if the key doesn't exist in the map, create a new array for it
+    if (!obj.hasOwnProperty(key)) {
+      obj[key] = [];
+    }
+    // add the value to the array corresponding to the key
+    if (element?.customType !== 'document') {  // put the check for document , if the element is document then not show in this list
+      obj[key].push({
+        timeStamp: element?.sentAt,
+        mediaUrl: element?.attachments[0]?.mediaUrl,
+        extension: element?.attachments[0]?.extension,
+        mediaId: element?.attachments[0]?.mediaId,
+      });
+    }
+  });
+
+  return obj;
+};
+
+
+function MediaDocs(props) {
+  const { mediaDocs, handleImgVidClick } = props;
+
+  const mediaDocsHelper = () => {
+    if (mediaDocs?.length > 0) {
+      return Object.entries(getMonthwiseMedia(mediaDocs)).map(([key, value]) => (
+        <>
+          {
+            value?.length > 0 &&
+            <span className="letter" id={`${key.toUpperCase()}`}>
+              {key}
+            </span>
+          }
+          <MediaDocsContainer>
+            {value?.length > 0 ? value.map((m) => {
+              const fileExtension = m.extension;
+              if (isImage(fileExtension)) {
+                return (
+                  <MediaListContainer
+                    onClick={() => handleImgVidClick(m.mediaId)} >
+                    <MediaBody>
+                      <MediaDocsWrapper>
+                        <ImageComponent
+                          className="media-images"
+                          src={m?.mediaUrl}
+                        />
+                      </MediaDocsWrapper>
+                    </MediaBody>
+                  </MediaListContainer>
+                );
+              } else if (isVideo(fileExtension)) {
+                return (
+                  <MediaListContainer
+                    onClick={() => handleImgVidClick(m.mediaId)} >
+                    <MediaBody>
+                      <MediaDocsWrapper>
+                        <video
+                          controls
+                          style={{ objectFit: "contain" }}
+                          className="media-images"
+                        >
+                          <source src={m.mediaUrl} type="video/mp4" />
+                        </video>
+                      </MediaDocsWrapper>
+                    </MediaBody>
+                  </MediaListContainer>
+                );
+              } else {
+                return <p>Unsupported media format</p>;
+              }
+            }) :
+              <NoMediaFoundWrapper>
+                <p className="no_media">{'No media'}</p>
+              </NoMediaFoundWrapper>
+            }
+          </MediaDocsContainer>
+        </>
+      ));
+    } else {
+      return (
+        <NoMediaFoundWrapper>
+          <p>{'No media'}</p>
+        </NoMediaFoundWrapper>
+      )
+    }
+  }
+
+  return (
+    <>
+      {
+        mediaDocsHelper()
+      }
+    </>
+  )
+}
+export default MediaDocs;

package/src/components/MediaDocumentContainer.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import styled from 'styled-components';
+import ChatBubble from './ChatBox/ChatBubble';
+import { getCookie } from '../lib/session';
+
+const MediaDocumentContainerWrapper = styled.div`
+    position: relative;
+    flex-wrap: wrap;
+`;
+
+const NoDocumentFound = styled.p`
+    color: var(--black);
+`;
+
+const ChatBubbleWrapper = styled.div`   
+    margin: 0.25rem 0;
+    padding: 0.5rem;
+    width: fit-content;
+    border-bottom-right-radius: 7.5px;
+    border-bottom-left-radius: 7.5px;
+    --tw-bg-opacity: 1;
+    background-color: ${props => props.selfChat ? 'var(--sender_chatbg)' : 'var(--toast-background)'};
+    position: relative;
+`;
+
+const NoDocumentContentFoundWrapper = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 80vh;   
+`;
+
+
+const MediaDocumentContainer = (props) => {
+    const { mediaDocs } = props;
+    const userId = getCookie('userId');
+  return (
+    <MediaDocumentContainerWrapper>
+        {
+            mediaDocs?.filter(chat => chat?.customType === 'document')?.length > 0 ? 
+            mediaDocs.filter(chat => chat?.customType === 'document').map(chat => (
+                <ChatBubbleWrapper selfChat={userId === chat?.senderInfo?.userId || userId === chat?.senderId}>
+                    <ChatBubble isNotShowDropDown={true} chat={chat} />
+                </ChatBubbleWrapper>
+            ))
+            :
+            <NoDocumentContentFoundWrapper>
+                <NoDocumentFound>{'No Docs'}</NoDocumentFound>
+            </NoDocumentContentFoundWrapper>
+        }
+    </MediaDocumentContainerWrapper>
+  )
+}
+
+export default MediaDocumentContainer

package/src/components/MessageInfoDropdown.js

@@ -0,0 +1,124 @@
+import React, { useState } from "react";
+import styled, { css } from "styled-components";
+import { BOTTOM_ARROW } from "../utils/global";
+import MenuDialog from "../view/component/menuDialog";
+import ImageComponent from "./ImageComponent";
+import OutsideAlerter from "./OutsideAlerter/OutsideAlerter";
+
+const MenuContainer = styled.div`
+  position: absolute;
+  background: var(--modal_color);
+  color: var(--black);
+  // top: 30px;
+  right: 30px;
+  top: ${props => props.top ? `${props.top}px` : ``};
+  // right: ${props => props.left ? `${props.left}px` : ``};
+  z-index: 999;
+  padding: 1rem 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  visibility: hidden;
+  transform: translateY(-10px);
+  transition: opacity 331ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    transform 220ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transform-origin: right top;
+  width: 230px;
+  ${(props) =>
+    props?.isOpen &&
+    css`
+      opacity: 1;
+      visibility: visible;
+      transform: translateY(0);
+    `}
+    ${(props) =>
+      props?.userChat &&
+      css`
+        left:100% !important;
+      `}
+
+      ${(props) =>
+        props?.messageLength &&
+        css`
+          top:0px !important;
+        `}
+`;
+
+const Image= styled.div`
+${(props) =>
+  props?.isMedia &&
+  css`
+  .user_self_chat .bottom_arrow {
+    background-color: var(--white);
+  }
+  `}
+`;
+
+function MessageInfoDropdown(props) {
+    const {messageInfo , theme,setMessageInfo,chat,setMessageChat,setslideShow,setSearchShow, menuData,userChat,messageLength,isMedia,setIsReply,isReply,setReply,reply,setDeleteMessage,deleteMessage,getReplyMessageData,isOpen,setIsOpen } = props;
+    const [modalPosition, setModalPosition] = useState({ x: 0, y: 0 });
+
+  // const [isOpen, setIsOpen] = useState(false);
+const handler =(event)=>{
+  // setMessageChat(chat);
+  setIsOpen(!isOpen);
+  if (window.innerHeight - event.clientY < 150 ) {
+    setModalPosition({  y: -100 });
+  }else{
+    setModalPosition(({y : 30}));
+  }
+  event.stopPropagation();
+}
+  return (
+    <>
+    {/* <OutsideAlerter onClose={() => setIsOpen(false)}> */}
+      <Image>
+      <ImageComponent
+        onClick={(e) => handler(e)}
+        src={BOTTOM_ARROW} 
+        className={props?.theme ? "darkicons bottom_arrow " : "lighticons bottom_arrow"}
+      /> </Image>
+      {isOpen && (
+        <MenuContainer top={modalPosition.y} isOpen={isOpen} userChat={userChat} messageLength={messageLength}>
+          <MenuDialog
+            menuData={menuData}
+            theme={theme}
+            setIsMenu={setIsOpen}
+            isMenu={isOpen}
+            setMessageInfo={setMessageInfo}
+            messageInfo={messageInfo}
+            chat={chat}
+            setMessageChat={setMessageChat}
+            messageChat={chat}
+            setslideShow={setslideShow}
+            setSearchShow={setSearchShow}
+            setIsReply={setIsReply}
+            setReply={setReply}
+            reply={reply}
+            setDeleteMessage={setDeleteMessage}
+            deleteMessage={deleteMessage}
+            // getReplyMessageData={getReplyMessageData}
+
+          />
+        </MenuContainer>
+      )}
+    {/* </OutsideAlerter> */}
+    <style>{`
+    .user_chat .bottom_arrow {
+      // background-color: var(--white);
+      height:30px;
+      width:30px;
+    }
+
+    .user_self_chat .bottom_arrow {
+      // background-color: var(--sender_chatbg);
+      height:30px;
+      width:30px;
+    }
+    
+    `}</style>
+    </>
+  );
+}
+
+export default MessageInfoDropdown;

package/src/components/Modal/AllowMicPermissionModal.js

@@ -0,0 +1,63 @@
+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: 2rem 1.5rem;
+    z-index: 999;
+    display: flex;
+    flex-direction: column;
+    ${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: 15px;
+    margin-top: 1rem;
+    ${mobile(css`
+    font-size: 14px;
+`)}
+`;
+
+const ConfirmButton = styled.button`
+    margin-left:auto;
+    margin-top: 3rem;
+    border-radius:20px;
+    border:none;
+    padding:5px 20px;
+    background-color:var(--button-primary-background);
+    color:var(--white);
+`;
+
+const AllowMicPermissionModal = (props) => {
+  const { onClose } = props;
+
+  return (
+    <ModalContainer>
+      <ModalTitle>{'Allow microphone'}</ModalTitle>
+      <ModalDescription>{`To record Voice Messages, Isometrik needs access to your microphone permission.`}</ModalDescription>
+      <ConfirmButton onClick={onClose}>{'OK, got it!'}</ConfirmButton>
+    </ModalContainer>
+  )
+}
+
+export default AllowMicPermissionModal;

package/src/components/Modal/BlockUnblockChatModal.js

@@ -0,0 +1,78 @@
+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;
+    ${mobile(css`
+    font-size: 18px;
+`)}
+`;
+
+const ModalDescription = styled.p`
+    font-size: 18px;
+    ${mobile(css`
+    font-size: 14px;
+`)}
+`;
+
+
+const ButtonAction = styled.div`
+display:flex;
+justify-content: flex-end;
+margin:3rem 0 20px;
+
+${mobile(css`
+    margin:1.5rem 0 20px;
+`)}
+
+.cancleBtn{
+    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;
+`;
+
+const BlockUnblockChatModal = (props) => {
+    const { cancelButtonClick, confirmButtonClick, isUserBlocked, userName} = props;
+    return (
+        <ModalContainer>
+            <ModalTitle>{isUserBlocked ? `Unblock ${userName} ?` : `Block ${userName} ?`}</ModalTitle>
+            <ModalDescription>{`${isUserBlocked ? ` ` : `Are you sure you want to block ${userName}, blocked users will no longer be able to message you ?`}`}</ModalDescription>
+            <ButtonAction className="logoutActionbtn">
+                <Button className="cancleBtn" onClick={cancelButtonClick} >Cancel</Button>
+                <Button className="logoutBtn" onClick={confirmButtonClick} >{isUserBlocked ? 'Unblock' : 'Block'}</Button>
+            </ButtonAction>
+        </ModalContainer>
+    )
+}
+
+export default BlockUnblockChatModal;

package/src/components/Modal/CameraPermissionBlockedModal.js

@@ -0,0 +1,61 @@
+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;
+    max-width: 500px;
+    max-height: 700px;
+    top: 50%;
+    left: 50%;
+    -webkit-transform: translate(-50%,-50%);
+    -ms-transform: translate(-50%,-50%);
+    transform: translate(-50%,-50%);
+    padding: 0 2rem;
+    padding-bottom: 3rem;
+    visibility: visible;
+
+    ${mobile(css`
+        width: 90%;
+        padding: 0 1.5rem 2rem;
+    `)}
+`;
+
+const ModalHeaderTitle = styled.h3`
+    font-size: 2rem;
+    color: var(--black);
+    padding-top: 2rem;
+    margin-left: 1rem;
+    margin-bottom: 1rem;
+`;
+
+const ModalHeaderText = styled.p`
+    margin-bottom: 0;
+    color: var(--black);
+    margin-left: 1rem;
+    padding-top:${props => props.isPaddingTop ? '2rem' : 'unset'};
+`;
+
+const ModalAllowCameraCTA =  styled.button`
+    border: none;
+    padding: 10px 20px;
+    background: var(--profile-name);
+    color: #fff;
+    border-radius: 45px;
+    margin: 2rem 0 0;
+`;
+
+const CameraPermissionBlockedModal = (props) => {
+    const { onClick } = props;
+    return (
+        <ModalContainer isPadding>
+            <ModalHeaderTitle>{'Allow Camera'}</ModalHeaderTitle>
+            <ModalHeaderText >{`To take photos, Isometrik needs access to your computer's camera. Click Camera icon in the URL bar and choose. Always allow ${window.location.href} to access your camera.`}</ModalHeaderText>
+            <ModalAllowCameraCTA onClick={onClick}>{'OK, got it'}</ModalAllowCameraCTA>
+        </ModalContainer>
+    )
+}
+
+export default CameraPermissionBlockedModal;

package/src/components/Modal/CameraPermissionRequestModal.js

@@ -0,0 +1,60 @@
+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;
+    max-width: 500px;
+    max-height: 700px;
+    top: 50%;
+    left: 50%;
+    -webkit-transform: translate(-50%,-50%);
+    -ms-transform: translate(-50%,-50%);
+    transform: translate(-50%,-50%);
+    padding: 0 2rem;
+    padding-bottom: 3rem;
+    visibility: visible;
+
+    ${mobile(css`
+        width: 90%;
+    `)}
+`;
+
+const ModalHeaderTitle = styled.h3`
+    font-size: 2rem;
+    color: var(--black);
+    padding-top: 2rem;
+    margin-left: 1rem;
+    margin-bottom: 1rem;
+`;
+
+const ModalHeaderText = styled.p`
+    margin-bottom: 0;
+    color: var(--black);
+    margin-left: 1rem;
+    padding-top:${props => props.isPaddingTop ? '2rem' : 'unset'};
+`;
+
+const ModalAllowCameraCTA =  styled.button`
+    border: none;
+    padding: 10px 20px;
+    background: var(--profile-name);
+    color: #fff;
+    border-radius: 45px;
+    margin: 2rem 0 0;
+`;
+
+const CameraPermissionRequestModal = (props) => {
+    const { onClick } = props;
+  return (
+    <ModalContainer >
+    <ModalHeaderTitle>{'Allow Camera'}</ModalHeaderTitle>
+    <ModalHeaderText>{`To take photos, click "Allow" above to give the Isometrik access to your camera.`}</ModalHeaderText>
+    <ModalAllowCameraCTA onClick={onClick}>{'OK, got it'}</ModalAllowCameraCTA>
+</ModalContainer>
+  )
+}
+
+export default CameraPermissionRequestModal;

package/src/components/Modal/ClearChatModal.js

@@ -0,0 +1,78 @@
+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;
+    ${mobile(css`
+    font-size: 18px;
+`)}
+`;
+
+const ModalDescription = styled.p`
+    font-size: 18px;
+    ${mobile(css`
+    font-size: 14px;
+`)}
+`;
+
+
+const ButtonAction = styled.div`
+display:flex;
+justify-content: flex-end;
+margin:3rem 0 20px;
+
+${mobile(css`
+    margin:1.5rem 0 20px;
+`)}
+
+.cancleBtn{
+    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;
+`;
+
+const ClearChatModal = (props) => {
+    const { cancelButtonClick, confirmButtonClick} = props;
+    return (
+        <ModalContainer>
+            <ModalTitle>{'Clear this chat ?'}</ModalTitle>
+            <ModalDescription>{'Messages will only be removed from this device and your devices on the newer versions of Isometrik.'}</ModalDescription>
+            <ButtonAction className="logoutActionbtn">
+                <Button className="cancleBtn" onClick={cancelButtonClick} >Cancel</Button>
+                <Button className="logoutBtn" onClick={confirmButtonClick} >{"Clear chat"}</Button>
+            </ButtonAction>
+        </ModalContainer>
+    )
+}
+
+export default ClearChatModal;