isometrik-chat 0.1.0

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

@@ -0,0 +1,512 @@
+import React, { useRef, useState, useEffect } from "react";
+import SliderChat from "../sidebarChat";
+import "./styles.css";
+import Profile from "../Profile";
+import SearchBar from "../SeachBar";
+import MenuDialog from "../menuDialog/index";
+import {setCookie } from "../../../lib/session";
+import client from "../../../utils/chatSdk";
+import ImageComponent from "../../../components/ImageComponent";
+import styled, { css } from "styled-components";
+import {
+  LIGHT_MODE,
+  MENU_ICON,
+  MESSAGE,
+  CLOSE_ICON
+} from "../../../utils/global";
+import { mobile } from "../../../utils/media";
+import OutsideAlerter from "../../../components/OutsideAlerter/OutsideAlerter";
+import { debounce, getUserConversationListBySearch } from "../../../lib/helpers";
+import { ChatState } from "../../../ChatContext";
+const FilterIcon = styled.div`
+margin-right:10px;
+`;
+
+const SideBarHeader = styled.div`
+${mobile(css`
+  width:100vw;
+`)}
+
+
+`;
+
+const SideBarBox = styled.div`
+  position: relative;
+`;
+
+const NotificationsPermission = styled.div`
+  padding: 12px 18px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: lightpink;
+  cursor: pointer;
+`;
+
+const ModalContainer = styled.div`
+background: var(--modal_color);
+color:var(--black);
+box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+border-radius: 4px;
+padding: 1rem 0;
+position: absolute;
+top: 45px;
+left: 165px;
+width: 50%;
+cursor: pointer;
+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: left top;
+z-index: 999;
+
+${(props) =>
+  props.isMenu &&
+  css`
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+  `}
+
+${mobile(css`
+  top:50px;
+  left:180px;
+`)}
+`;
+
+const userHeaderMenu = [
+  // {
+  //   id: 1,
+  //   header: "New Group",
+  // },
+  // {
+  //   id: 2,
+  //   header: "New Community",
+  // },
+  // {
+  //   id: 3,
+  //   header: "Started Message",
+  // },
+  {
+    id: 4,
+    header: "Blocked Contacts",
+  },
+  {
+    id: 5,
+    header: "Logout",
+  },
+];
+
+function Sidebar(props) {
+  const {
+    sideData,
+    sidebarData,
+    disabledKey,
+    state,
+    dispatch,
+    userDetails,
+    setState,
+    getPaginationHomePageData,
+    preventConversationRef,
+    setIsSidebarShow,
+    isLogOut,
+    setIsLogOut,
+    findUserId,
+    sidebarChatItem,
+    getHomePageConversationData,
+    setUserDetails,
+    setShowLoader,
+    setShowProfilePicture,
+    showConversationPagingLoader,
+    setToastStatus,
+    setUserConversationDetail,
+    profileClose,
+    setMediaDocs,
+    showSideChatHeader,
+  } = props;
+
+  const [slideShow, setslideShow] = React.useState(false);
+  const [group, setGroup] = React.useState(false);
+  const [isMenu, setIsMenu] = useState(false);
+  const [status, setStatus] = useState(false);
+  const [messageSliderOpen, setmessageSliderOpen] = useState(false);
+  const [paginationToken, setPaginationToken] = useState(null);
+  const apiCallStatusRef = useRef(false);
+  const [currentUserConversationDetails, setCurrentUserConversationDetails] =
+    useState({ id: "", message: "", conversationId: "" });
+  const [showUserPaginationLoader, setShowUserPaginationLoader] =
+    useState(false);
+    const [isBlockedList , setIsBlockedList] = useState(false);
+  const [askFornotificationPermissions, setAskForNotificationPermissions] = useState(false);
+
+  const { theme, setTheme } = ChatState();
+
+  useEffect(() => {
+    const checkForPermisions = () => {
+      if (!("Notification" in window)) {
+        // Check if the browser supports notifications
+        console.log("This browser does not support desktop notification");
+        return;
+      }
+      return navigator.permissions
+              .query({name:'notifications'})
+              .then((res) => {
+                if(res.state === "granted") {
+                  setAskForNotificationPermissions(false);
+                } else if(res.state === "denied") {
+                  setAskForNotificationPermissions(false);
+                } else {
+                  setAskForNotificationPermissions(true);
+                }
+              })
+              .catch((err) => console.log('err while checking for nitifications permissions', err));
+    }
+    checkForPermisions();
+  }, [])
+
+  const handleBrowserPushNotifications = () => {
+    try {
+      if(typeof window != 'undefined') {
+        if (!("Notification" in window)) {
+          // Check if the browser supports notifications
+          console.log("This browser does not support desktop notification");
+          return;
+        }
+        window.Notification.requestPermission().then((permission) => {
+          console.log('permission -- ', permission);
+          if(permission === 'granted') {
+            console.log('Browser Push Notification Permission granted !!!');
+            setAskForNotificationPermissions(false);
+          } else if (permission === 'denied') {
+            console.log('Notification permission denied');
+            setAskForNotificationPermissions(false);
+          } else {
+            console.log('Notification permission dismissed');
+            setAskForNotificationPermissions(false);
+          }
+        }).catch((err) => {
+          console.log('Error while asking For Notification Permissions -- ', err);
+        });
+      }
+    }
+    catch(err) {
+      console.log('error while asking for brower push notification permissions -- ', err);
+    }
+  }
+
+  const payload = {
+    sort: 1,
+    limit: 20,
+    skip: 0,
+  };
+
+  useEffect(() => {
+    setState((prev) => {
+      return {
+        ...prev,
+        selectedConvId: currentUserConversationDetails?.conversationId,
+      };
+    });
+  }, [currentUserConversationDetails.conversationId]);
+  const handleClick = () => {
+    setIsMenu(!isMenu);
+  };
+  const dataHandler = (data) => {
+    setIsSidebarShow(true);
+    setCookie("isShow", true);
+    sidebarData(data);
+  };
+
+  const handleClickslideShow = () => {
+    setslideShow(true);
+  };
+
+  const handleClosee = () => {
+    setslideShow(false);
+  };
+
+  const groupClick = () => {
+    setGroup(true);
+  };
+
+  const groupClose = () => {
+    setGroup(false);
+  };
+
+  const messageSlidebar = async (body = payload) => {
+    apiCallStatusRef.current = true;
+    try {
+      body?.skip && setShowUserPaginationLoader(true);
+      setmessageSliderOpen(true);
+      const res = await client?.user?.getUserNonblock(body);
+      setPaginationToken(res?.pageToken || null);
+      setState((prev) => {
+        return {
+          ...prev,
+          users: [...prev.users, ...res?.users],
+        };
+      });
+      setShowLoader(false);
+      setShowUserPaginationLoader(false);
+    } catch (error) {
+      setShowLoader(false);
+      setShowUserPaginationLoader(false);
+      console.log(error, "err");
+    } finally {
+      setShowLoader(false);
+      apiCallStatusRef.current = false;
+    }
+  };
+
+  const messageSlideClose = () => {
+    setmessageSliderOpen(false);
+    setState((prev) => {
+      return {
+        ...prev,
+        users: [],
+      };
+    });
+
+  };
+
+  const logOutModalHandle = (logout) => {
+    console.log("hello", logout);
+  };
+
+  const statusHandler = () => {
+    setStatus(true);
+  };
+
+  const statusClose = () => {
+    setStatus(false);
+  };
+
+  const getPaginationData = () => {
+    if (apiCallStatusRef.current ||  state?.users?.length < payload.limit ||
+      state?.users?.length % payload.limit !== 0) return;
+    payload.skip = (state?.users?.length / payload.limit) * payload.limit;
+    messageSlidebar(payload);
+  };
+
+  const getSearchConversationsList = async (value) => {
+    try {
+        const response =  await getUserConversationListBySearch(value);
+        setState((prev) => {
+          return {
+            ...prev,
+            conversations: response?.conversations,
+          };
+        });
+    } catch (error) {
+      setState((prev) => {
+        return {
+          ...prev,
+          conversations: [],
+        };
+      });
+    }
+  }
+
+  const debounceMyFunction = debounce(getSearchConversationsList, 900);
+
+
+  return (
+    <>
+      <SideBarBox className="sidebar">
+        {
+          showSideChatHeader &&
+        <SideBarHeader className="sidebar_header d-flex">
+          <div>
+            <img
+              className="user_image "
+              onClick={handleClickslideShow}
+              src={userDetails?.userProfileImageUrl}
+            />
+          </div>
+          <div
+            className={
+              slideShow || group || messageSliderOpen || status || isBlockedList
+                ? "sliderr"
+                : "slider"
+            }
+          >
+            <Profile
+              allUsers={state?.users}
+              statusClose={statusClose}
+              logOutModalHandle={logOutModalHandle}
+              status={status}
+              messageSlideClose={messageSlideClose}
+              messageSliderOpen={messageSliderOpen}
+              handleClosee={handleClosee}
+              slideShow={slideShow}
+              group={group}
+              groupClose={groupClose}
+              messageSlidebar={messageSlidebar}
+              userDetails={userDetails}
+              paginationToken={paginationToken}
+              getPaginationData={getPaginationData}
+              theme={theme}
+              setTheme={setTheme}
+              sidebarData={sidebarData}
+              state={state}
+              setState={setState}
+              setCurrentUserConversationDetails={
+                setCurrentUserConversationDetails
+              }
+              currentUserConversationDetails={currentUserConversationDetails}
+              setIsSidebarShow={setIsSidebarShow}
+              setUserDetails={setUserDetails}
+              setShowLoader={setShowLoader}
+              setShowProfilePicture={setShowProfilePicture}
+              showUserPaginationLoader={showUserPaginationLoader}
+              setToastStatus={setToastStatus}
+              setIsBlockedList={setIsBlockedList}
+              isBlockedList={isBlockedList}
+              setUserConversationDetail={setUserConversationDetail}
+            />
+          </div>
+
+          <div className="sidebar-right d-flex">
+            <span>
+              {theme ? (
+                <ImageComponent
+                  src={LIGHT_MODE}
+                  className="darkicons"
+                  onClick={() => setTheme(false)}
+                  style={{ filter: "invert(1)" }}
+                />
+              ) : (
+                <ImageComponent
+                  src={LIGHT_MODE}
+                  className="lighticons"
+                  onClick={() => setTheme(true)}
+                />
+              )}
+            </span>
+
+            {/* <span
+              data-testid="community-tab-unread"
+              onClick={groupClick}
+              data-icon="community-tab-unread"
+              class=""
+            >
+              <ImageComponent
+                src={USERS}
+                className={
+                  theme ? "darkicons" : "lighticons"
+                }
+              />
+            </span> */}
+
+            {/* <span
+              onClick={statusHandler}
+              data-testid="status-v3-unread"
+              data-icon="status-v3-unread"
+              class=""
+            >
+              <ImageComponent
+                src={STATUS}
+                className={
+                 theme ? "darkicons" : "lighticons"
+                }
+              />
+            </span> */}
+
+            <span
+              onClick={() => messageSlidebar()}
+              data-testid="chat"
+              data-icon="chat"
+              class=""
+            >
+              <ImageComponent
+                src={MESSAGE}
+                className={theme ? "darkicons" : "lighticons"}
+              />
+            </span>
+            <OutsideAlerter onClose={() => setIsMenu(false)} >
+            <span
+              onClick={()=>setIsMenu(!isMenu)}
+              data-testid="menu"
+              data-icon="menu"
+              class=""
+            >
+              <ImageComponent
+                src={MENU_ICON}
+                className={theme ? "darkicons" : "lighticons"}
+              />
+             
+              <ModalContainer className="modalContainer" isMenu={isMenu}>
+              <MenuDialog
+                menuData={userHeaderMenu}
+                dispatch={dispatch}
+                state={state}
+                isMenu={isMenu}
+                setIsMenu={setIsMenu}
+                isLogOut={isLogOut}
+                setIsLogOut={setIsLogOut}
+                theme={theme}
+                setTheme={setTheme}
+                setIsBlockedList={setIsBlockedList}
+                
+              />
+            </ModalContainer>
+            </span> 
+            </OutsideAlerter>
+          </div>
+        </SideBarHeader>
+        }
+        <div className="d-flex align-items-center border_bottom searchContainer">
+          <SearchBar theme={theme} setTheme={setTheme} userSearchEnteredData={debounceMyFunction} />
+          {/* <FilterIcon>
+            <ImageComponent src={FILTER} 
+             className={
+                theme ? "darkicons" : "lighticons"
+                }>
+
+            </ImageComponent>
+          </FilterIcon> */}
+        </div>
+        {askFornotificationPermissions && <NotificationsPermission>
+          <div className="d-flex flex-column" onClick={handleBrowserPushNotifications}>
+            <span>Get Notifications for of new messages messages</span>
+            <span style={{ textDecoration: 'underline' }}>Turn on desktop notifications</span>
+          </div>
+          <img src={CLOSE_ICON} style={{ width: '12px', height: '12px' }} onClick={() => setAskForNotificationPermissions(false)} />
+        </NotificationsPermission>}
+        <div>
+          <div className="chat d-flex">
+            <SliderChat
+              sideData={sideData}
+              dataHandler={dataHandler}
+              disabledKey={disabledKey}
+              state={state}
+              dispatch={dispatch}
+              getPaginationHomePageData={getPaginationHomePageData}
+              preventConversationRef={preventConversationRef}
+              theme={theme}
+              setTheme={setTheme}
+              findUserId={findUserId}
+              setCurrentUserConversationDetails={
+                setCurrentUserConversationDetails
+              }
+              currentUserConversationDetails={currentUserConversationDetails}
+              sidebarChatItem={sidebarChatItem}
+              getHomePageConversationData={getHomePageConversationData}
+              setShowLoader={setShowLoader}
+              showConversationPagingLoader={showConversationPagingLoader}
+              sidebarData={sidebarData}
+              userDetails={userDetails}
+              messageSlideClose={messageSlideClose}
+              messageSliderOpen={messageSliderOpen}
+              messageSlidebar={messageSlidebar}
+              profileClose={profileClose}
+              setMediaDocs={setMediaDocs}
+            />
+          </div>
+        </div>
+        </SideBarBox>
+    </>
+  );
+}
+export default Sidebar;

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

@@ -0,0 +1,138 @@
+.sidebar_header {
+  justify-content: space-between;
+  padding: 13px;
+  background-color:var(--gray_color);
+  border-right: 1px solid var(--border_color);
+  align-items: center;
+}
+
+.sidebar {
+  max-width: 30vw;
+  flex: 0.3;
+  background-color:var(--white);
+}
+
+.sidebar .bgWhite{
+  background-color: var(--primary-white);
+}
+
+.sidebar .sidebar_header .sliderr {
+  height: 100vh;
+  width: 35vw;
+  position: fixed;
+  z-index: 1;
+  top: 0px;
+  left: 0px;
+  overflow-x: hidden;
+  transition: 0.2s;
+  overflow: auto;
+}
+
+.sidebar .sidebar_header .slider {
+  height: 100vh;
+  width: 0px;
+  position: fixed;
+  z-index: 1;
+  top: 0px;
+  left: 0px;
+  overflow-x: hidden;
+  transition: 0.2s;
+  overflow: auto;
+}
+
+.sidebar-search {
+  padding: 10px;
+  text-align: center;
+  align-items: center;
+}
+
+.sidebar-right {
+  width: 40%;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.sidebar-input {
+  position: relative;
+  padding-left: 15px !important;
+  font-size: 15px;
+  border: none;
+  outline: none;
+  background: none;
+  color: var(--black);
+}
+
+.sidebar_search-container svg {
+  color: #54656f;
+  margin-left: 12px;
+}
+
+.chat {
+  flex-direction: column;
+  padding: 0;
+  background-color: var(--primary-white);
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #e9ecef;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--white) !important;
+}
+
+::-webkit-scrollbar {
+  width: 6px !important;
+  height: 6px !important;
+}
+
+::-webkit-scrollbar-thumb {
+  background:var(--gray_color)
+}
+
+.css-1t1j96h-MuiPaper-root-MuiDialog-paper {
+  margin: 0px !important;
+  padding: 0px !important;
+}
+
+.css-hz1bth-MuiDialog-container {
+  height: auto !important;
+}
+
+.css-uhb5lp {
+  margin: 0px !important;
+}
+
+.css-ekeie0 {
+  height: none !important;
+}
+
+.css-ekeie0 {
+  height: auto !important;
+}
+
+.css-1t1j96h-MuiPaper-root-MuiDialog-paper {
+  border-radius: 0px !important;
+}
+
+.sidebar_header .user_image {
+  cursor: pointer;
+}
+
+.filter {
+  height: 20px !important;
+  width: 20px !important;
+}
+
+.sidebar-search .searchBox {
+  display: flex;
+  background-color: var(--gray_color);
+  flex: 1;
+  border-radius: 10px;
+}
+
+@media (max-width: 768px) {
+  .sidebar{
+    max-width: 100vw;
+  }
+}