isometrik-chat 0.1.0

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

@@ -0,0 +1,124 @@
+.mainChat {
+    flex: 1;
+    flex-direction: column;
+    position: absolute;
+    width: 70%;
+    height: 100vh;
+
+    /* border-bottom: 1px solid; */
+}
+
+.mainChatt {
+    flex: 1;
+    flex-direction: column;
+    position: absolute;
+    width: 40%;
+    /* border-bottom: 1px solid; */
+}
+
+.mainChat .chat_header {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid var(--border_color);
+    padding: 10px 10px;
+    flex: 1;
+    background-color:var(--gray_color)
+}
+
+.mainChatt .chat_Header {
+    display: flex;
+    background-color: var(--gray_color);
+    align-items: center;
+    border-bottom: 1px solid var(--border_color);
+    padding: 10px 12px;
+    flex: 1;
+    /* height: 50px; */
+}
+
+.chat_headerInfo {
+    flex: 1;
+    margin-left: 10px
+}
+
+.MuiDialog-container {
+    display: flex !important;
+    /* justify-content: flex-end !important */
+}
+
+.chat_headerInfo p {
+    color:var(--black);
+    margin-bottom: 0px
+}
+
+.chatbox_Bg {
+    height: 100%;
+
+}
+
+.chatbox_Bg img {
+    height: 100%;
+    width: 100%
+}
+
+.bg {
+
+    height: 100vh;
+    text-align: center;
+    display: block;
+    /* border: 2px solid; */
+}
+.bg div h1 {
+    font-size: 32px;
+    font-weight: 300px;
+    color: var(--black);
+    margin-top: 20px;
+}
+
+.bg .text {
+    font-size: 14px;
+    font-weight: 400px;
+    line-height: 20px;
+    width:33rem;
+}
+
+.contactInfo {
+    height: 100vh;
+    width: 70vw;
+    position: fixed;
+    z-index: 1;
+    top: 0;
+    right: 0;
+    overflow-x: hidden;
+    transition: 0.1s;
+    z-index: 999;
+}
+
+.contact {
+    height: 100vh;
+    width: 0px;
+    position: fixed;
+    z-index: 1;
+    top: 0;
+    right: 0;
+    overflow-x: hidden;
+    transition: 0.1s;
+}
+
+.mainChat .chatbox_Bg {
+    background-color: #f0f2f5
+}
+
+.chatbox_Bg .footer {
+    font-size: 14px;
+    margin-top: 60px
+}
+
+@media (max-width: 420px) {
+    .search_icon{
+        margin: 0.8rem !important;
+    }
+    .chat_header_right{
+    display: flex;
+    align-items: center;
+    }
+}

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

@@ -0,0 +1,261 @@
+import React, { useEffect, useState } from "react";
+import Profile from "../Profile";
+import "./styles.css";
+
+function Menu({
+  index,
+  isShown,
+  chatPin,
+  chatUnPin,
+  chatDelete,
+  handleClose,
+  headerMenu,
+  headerMenuCloseHandle,
+  pinedData,
+  markChatPin,
+  markedData,
+  data,
+  markUnchat,
+}) {
+  const [newGroup, setNewGroup] = useState(false);
+  const [newCommunity, setNewCommunity] = useState(false);
+  const [startedMessage, setStartedMessage] = useState(false);
+  const [settings, setSettings] = useState(false);
+  const [logout, setLogout] = useState(false);
+  var menuItem = [
+    "Archiv chat",
+    "Mute conversation",
+    "Delete chat",
+    `${data?.pin ? "unpin chat" : "pin chat"}`,
+    `${data?.mark ? "mark as read" : "mark as unread"}`,
+    // "mark as read",
+  ];
+  var headerMenuitem = [
+    "New Group",
+    "New Community",
+    "Started Message",
+    "Setting",
+    "Logout",
+  ];
+
+
+  const chatHandle = (index, data) => {
+    if (data == "Delete chat") {
+      var deleteItem = isShown;
+      chatDelete(deleteItem);
+    }
+
+    if (data == "pin chat") {
+      var pinItem = isShown;
+      // console.log("kuldeep",isShown );
+      chatPin(pinItem);
+    }
+    if (data == "unpin chat") {
+      var unpinItem = isShown;
+      chatUnPin(unpinItem);
+    }
+
+    if (data == "mark as unread") {
+      var markItem = isShown;
+      markChatPin(markItem);
+    }
+
+    if (data == "mark as read") {
+      var unMarkItem = isShown;
+      markUnchat(unMarkItem);
+      // console.log("unMarkItem", unMarkItem);
+    }
+  };
+
+  const headerMenuClose = () => {
+    headerMenuCloseHandle();
+  };
+
+  const headerMenuHandler = (index) => {
+    if (index == "0") {
+      setNewGroup(true);
+    }
+
+    if (index == "1") {
+      setNewCommunity(true);
+    }
+
+    if (index == "2") {
+      setStartedMessage(true);
+    }
+
+    if (index == "3") {
+      setSettings(true);
+    }
+
+    if (index == "4") {
+      setLogout(true);
+    }
+  };
+  const newGroupHandle = () => {
+    setNewGroup(false);
+    headerMenuClose();
+  };
+
+  const newCommunityHandle = () => {
+    setNewCommunity(false);
+    headerMenuClose();
+  };
+
+  const startedMessageHandle = () => {
+    setStartedMessage(false);
+    headerMenuClose();
+  };
+
+  const settingsHandle = () => {
+    setSettings(false);
+    headerMenuClose();
+  };
+
+  const modalClose = () => {
+    setLogout(false);
+    headerMenuClose();
+  };
+  return (
+    <div
+      className={`${headerMenu ? "headermenu bg-white" : "bg-white menu"} ${
+        logout ? "mw-0" : ""
+      }`}
+    >
+      <div
+        className={logout ? "d-none pointer" : "pointer"}
+        style={{
+          position: "relative",
+          color: "black",
+          display: "flex",
+          padding: "10px 10px 0px 10px",
+          justifyContent: "flex-end",
+        }}
+      >
+        <svg
+          onClick={!headerMenu ? handleClose : headerMenuClose}
+          xmlns="http://www.w3.org/2000/svg"
+          width="22"
+          height="22"
+          fill="currentColor"
+          class="bi bi-x-lg"
+          viewBox="0 0 16 16"
+        >
+          <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z" />
+        </svg>
+      </div>
+
+      <div
+        style={{ display: "flex", flexDirection: "column" }}
+        className={logout ? "d-none" : ""}
+      >
+        {!headerMenu
+          ? menuItem?.map((data, index) => {
+              return (
+                <div className="menuBox">
+                  <p onClick={() => chatHandle(index, data)}>{data}</p>
+                </div>
+              );
+            })
+          : headerMenuitem.map((data, index) => {
+              return (
+                <div className="menuBox pointer">
+                  <p
+                    onClick={() => {
+                      headerMenuHandler(index, data);
+                    }}
+                  >
+                    {data}
+                  </p>{" "}
+                </div>
+              );
+            })}
+      </div>
+
+      {newGroup || newCommunity || startedMessage || settings ? (
+        <div className="bg-white">
+          <Profile
+            logout
+            settingsHandle={settingsHandle}
+            settings={settings}
+            newGroup={newGroup}
+            newGroupHandle={newGroupHandle}
+            newCommunity={newCommunity}
+            newCommunityHandle={newCommunityHandle}
+            startedMessage={startedMessage}
+            startedMessageHandle={startedMessageHandle}
+          />
+        </div>
+      ) : (
+        ""
+      )}
+
+      {logout ? (
+        <>
+          <div className="logoutdialog">
+            <div
+              className="bg-white position-absolute menumodal "
+              aria-hidden="true"
+              data-mdb-backdrop="static"
+            >
+              <div>
+                <span
+                  onClick={modalClose}
+                  className="d-flex pointer justify-content-end"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="22"
+                    height="22"
+                    fill="currentColor"
+                    class="bi bi-x-lg"
+                    viewBox="0 0 16 16"
+                  >
+                    <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z" />
+                  </svg>
+                </span>
+                <h>
+                  <h5 style={{ marginTop: "10px" }}>Log Out</h5>
+                </h>
+              </div>
+              <div style={{ marginTop: "20px" }}>
+                <h>Are you sure you want to log out </h>{" "}
+              </div>
+
+              <div
+                className="d-flex"
+                style={{
+                  marginTop: "50px",
+                  paddingLeft: "35px",
+                  justifyContent: "space-around",
+                }}
+              >
+                <button
+                  className="bg-white color-green btnn"
+                  style={{
+                    marginLeft: "150px",
+                    color: "#008069",
+                    border: "1px solid lightgray",
+                  }}
+                  onClick={modalClose}
+                >
+                  Cancel
+                </button>
+                <button
+                  className="btnn text-white"
+                  style={{ backgroundColor: "#008069" }}
+                >
+                  Log Out
+                </button>{" "}
+              </div>
+            </div>
+          </div>
+        </>
+      ) : (
+        ""
+      )}
+    </div>
+  );
+}
+
+export default Menu;

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

@@ -0,0 +1,68 @@
+:root {
+  --primary: #3b4a54;
+}
+
+.menu {
+  box-shadow: 0 2px 5px 0 rgba(var(--shadow-rgb), 0.26),
+    0 2px 10px 0 rgba(var(--shadow-rgb), 0.16);
+  transition: 1s infinite show;
+  box-sizing: border-box;
+  display: block;
+  color: var(--primary);
+  white-space: nowrap;
+}
+
+.headermenu {
+  box-shadow: 0 2px 5px 0 rgba(var(--shadow-rgb), 0.26),
+    0 2px 10px 0 rgba(var(--shadow-rgb), 0.16);
+  position: absolute;
+  top: 41px;
+  width: 215px;
+  left: 169px;
+  display: block;
+  z-index: 10000;
+}
+
+.menu p:hover,
+.headermenu p:hover {
+  background-color: lightgray;
+}
+
+.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);
+}
+
+.logoutdialog {
+  background-color: hsla(0, 0%, 100%, 0.85);
+  padding: 200px;
+  height: 100vh;
+  top: -41px;
+  margin-left: -169px;
+  margin-top: -41px;
+  width: 100vw;
+  z-index: 100000;
+  background-size: cover;
+}
+
+.headermenu .menumodal {
+  left: 270px;
+  box-shadow: 0 2px 5px 0 rgba(var(--shadow-rgb), 0.26),
+    0 2px 10px 0 rgba(var(--shadow-rgb), 0.16);
+  top: 150px;
+  width: 35vw;
+  padding: 22px 24px 20px;
+}
+
+div .btnn {
+  /* padding: 10px 24px; */
+  border: 1px solid transparent;
+  border-radius: 3px;
+  /* padding: 5px 25px; */
+}

package/src/view/component/Profile/ProfileInfoContainer.js

@@ -0,0 +1,112 @@
+import React, { useEffect, useRef, useState } from 'react';
+import ImageComponent from '../../../components/ImageComponent';
+import { CORRECT_ICON, EDITPENCILICON, EMOJI_ICON } from '../../../utils/global';
+import ProfileUpdate from './ProfileUpdate';
+import styled from 'styled-components';
+import { USER_BIO_MAX_LENGTH, USER_NAME_MAX_LENGTH, } from '../../../lib/constant';
+
+const UserNameStatus = styled.h5`
+    color: var(--danger) !important;
+    font-size: 12px;
+    width: 90%;
+    margin-top: 3px;
+`;
+
+const ProfileInfoContainer = (props) => {
+    const { setShowImageUploaderOption, userDetails, updateUserDetails, setUpdateUserDetails, showImageUploaderOption, nameDisable, changeInputHandler, theme, nameHandler, saveNameBtn, statusDisable, statusInputHandler, saveStatusBtn, statusHandler, updateUserProfile, setUserDetails, setShowProfilePicture, showUsernameInvalid, handleProfileUpdateKeyDown, setShowUsernameInvalid, setNameDisable } = props;
+    const nameInputRef = useRef(null); 
+    // const statusInputRef = useRef(null);
+
+    useEffect(() => {
+      if (!nameDisable) {
+        nameInputRef.current.focus();
+      }
+    //   else if (!statusDisable) {
+    //     statusInputRef.current.focus();
+    //   }
+    }, [nameDisable ,statusDisable])
+    
+    return (
+        <div>
+            <div
+                className={
+                    props?.slideShow ? " profile-avatar proAvatar" : "profile-avatar"
+                }
+            >
+                <div className='profile_pic_container' >
+                    <img className='user_profile_picture objCover' src={updateUserDetails?.userProfileImageUrl} alt="" />
+                    <ProfileUpdate userDetails={userDetails} setUpdateUserDetails={setUpdateUserDetails} showImageUploaderOption={showImageUploaderOption} updateUserProfile={updateUserProfile} setUserDetails={setUserDetails} setShowProfilePicture={setShowProfilePicture} theme={theme} updateUserDetails={updateUserDetails} setShowUsernameInvalid={setShowUsernameInvalid} setNameDisable={setNameDisable}
+                    />
+                </div>
+            </div>
+            <div
+                className={props?.slideShow ? "profile_body body" : "profile_body"}
+            >
+                <div className="profile_name">
+                    <p>Your Name</p>
+                    <div style={{ alignItems: "center", width:"90%" }}>
+                        <div className={!nameDisable ? "inputField user_input_text" : "user_input_text"}>
+                            <input
+                                ref={nameInputRef}
+                                name="userName"
+                                value={updateUserDetails?.userName}
+                                onChange={changeInputHandler}
+                                disabled={nameDisable}
+                                onKeyDown={handleProfileUpdateKeyDown}
+                                placeholder="Please enter your name"
+                                className="nameFiled"
+                                type='text'
+                            />
+                            {!nameDisable ? (
+                                <p className="emoji_Icon">
+                                    <p className={`${updateUserDetails?.userName?.length >= USER_NAME_MAX_LENGTH ? 'danger__text' : ''} input_maxlength_checker`} >{updateUserDetails?.userName?.length}</p>
+                                    <ImageComponent
+                                        src={EMOJI_ICON}
+                                        className={
+                                            theme
+                                                ? "darkicons"
+                                                : "lighticons"
+                                        }
+                                    />
+                                    <ImageComponent
+                                        style={{ marginLeft: "6px" }}
+                                        onClick={saveNameBtn}
+                                        src={CORRECT_ICON}
+                                        className={
+                                            theme
+                                                ? "darkicons"
+                                                : "lighticons"
+                                        }
+                                    />
+                                </p>
+                            ) : (
+                                <p className="edit_Icon">
+                                    <ImageComponent
+                                        onClick={nameHandler}
+                                        src={EDITPENCILICON}
+                                        className={
+                                            theme
+                                                ? "darkicons"
+                                                : "lighticons"
+                                        }
+                                    />
+                                </p>
+                            )}
+                        </div>
+                        {
+                            showUsernameInvalid &&
+                            <UserNameStatus>{'First letter of username should be in uppercase!'}</UserNameStatus>
+                        }
+                    </div>
+                </div>
+                <div className="profile_bio">
+                    This is your username. This name will be visible to
+                    your Isometrik contacts.
+                </div>
+
+            </div>
+        </div>
+    )
+}
+
+export default ProfileInfoContainer;