isometrik-chat 0.1.0

package/src/components/formcontrol/InputText.js

@@ -0,0 +1,60 @@
+import React from "react";
+import styled, { css } from "styled-components";
+import { ipadSM } from "../../utils/media";
+
+const CustomInputText = styled.input`
+  background: #f3f3f9;
+  border-radius: 8px;
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  display: flex;
+  align-items: center;
+  letter-spacing: 0.39996px;
+  color: #1d1c21;
+  border: ${(props) =>
+    props.error ? "1px solid #B00020" : " 1px solid #b1b1b1"};
+  height: 3em;
+  width: 100%;
+  margin: ${(props) => (props.error ? "8px auto" : "8px auto 1rem auto")};
+  padding: 0 9px;
+
+  ${ipadSM(css`
+    margin: 6px auto;
+  `)}
+
+  &:focus {
+    outline: none;
+  }
+  &:-webkit-autofill,
+  &:-webkit-autofill:hover,
+  &:-webkit-autofill:focus,
+  &:-webkit-autofill:active {
+    -webkit-transition: "color 9999s ease-out, background-color 9999s ease-out";
+    -webkit-transition-delay: 9999s;
+    color: #8b8b8b;
+  }
+`;
+
+const ErrorText = styled.div`
+  color: #b00020;
+  padding: 2px 0;
+`;
+
+const InputText = (props) => {
+  const { type = "text", error } = props;
+
+  return (
+    <div>
+      <CustomInputText type={type} {...props} error={props.error} />
+      {error && error !== "" && (
+        <ErrorText errorMessage={error}>{error}</ErrorText>
+      )}
+    </div>
+  );
+};
+
+export default React.forwardRef(InputText);
+  

package/src/global-styles.js

@@ -0,0 +1,42 @@
+import { createGlobalStyle } from "styled-components";
+
+const GlobalStyle = createGlobalStyle`
+    *{
+      -webkit-overflow-scrolling: touch;
+      -webkit-tap-highlight-color: rgba(0,0,0,0);
+    }
+
+    html{
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+
+        text-size-adjust: 100%;
+        
+        text-rendering: optimizeLegibility;
+        scroll-behavior: smooth;
+    }
+
+    body {
+        padding: 0;
+        margin: 0;
+        font-size: 16px;
+        font-family: 'PT Sans', sans-serif;
+        overflow: hidden;
+
+        a{
+          text-decoration: none;
+        }
+
+        main {
+            // margin-top: 105px;
+            // background-color: #fff;
+        }
+    }
+
+      @font-face {
+        font-family: 'Arima Madurai';
+        src: url('/fonts/BenjaminVictoria.ttf');
+      }
+`;
+
+export default GlobalStyle;

package/src/hooks/useDeviceType.js

@@ -0,0 +1,28 @@
+import  { useEffect, useState } from "react";
+
+const useDeviceType = () => {
+    const [isMobileType, setIsMobileType] = useState(false);
+
+    const detectDeviceType = () => {
+        if (typeof window !== "undefined") {
+            // Client-side-only code
+            if ("navigator" in window) {
+              const { navigator } = window;
+              const isMobileViewServer = (
+                navigator?.userAgent
+              ).match(/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile|WPDesktop/i);
+        
+             setIsMobileType(Boolean(isMobileViewServer));
+            }
+          }
+    };
+
+    useEffect(() => {
+      detectDeviceType();
+    }, []);
+  
+    return isMobileType;
+  };
+
+  export default useDeviceType;
+  

package/src/hooks/useThrottle.js

@@ -0,0 +1,29 @@
+import { useState, useEffect, useRef, useCallback } from "react";
+
+function useThrottle(functionParams, delayParams, immediateParams = false) {
+  const [isReady, setIsReady] = useState(true);
+  const savedFn = useRef();
+
+  useEffect(() => {
+    savedFn.current = functionParams;
+  }, [functionParams]);
+
+  const throttledFn = useCallback(
+    (...args) => {
+      if (isReady) {
+        setIsReady(false);
+        savedFn.current(...args);
+        if (immediateParams) {
+          setIsReady(true);
+        } else {
+          setTimeout(() => setIsReady(true), delayParams);
+        }
+      }
+    },
+    [delayParams, immediateParams, isReady, savedFn]
+  );
+
+  return throttledFn;
+}
+
+export default useThrottle;

package/src/index.css

@@ -0,0 +1,225 @@
+body {
+  margin: 0;
+  font-family: Segoe UI, Helvetica Neue, Helvetica, Lucida Grande, Arial, Ubuntu,
+    Cantarell, Fira Sans, sans-serif !important;
+  font-feature-settings: "kern";
+}
+
+:root {
+  --shadow-rgb: 11, 20, 26;
+  --chat-msg-text: #667781;
+  --profile-header: #F53872;
+  --black: #111b21;
+  --bg-white: #f5f6f6;
+  --primary-white: #fff;
+  --gray_color: #ededed;
+  --icon_color: #54656f;
+  --white: #f5f6f6;
+  --border_color: #e9edef;
+  --chat_hover: #ebebeb;
+  --sender_chatbg: #d9fdd3;
+  --chat_timing: #667781;
+  --input_bg: #fff;
+  --profile_bg: #ededed;
+  --contact-profile-bg: #ededed;
+  --profile-name: #F53872;
+  --profile-color:#F53872;
+  --danger: red;
+  --contact-media-text: #fff;
+  --button-primary-background:#00a884;
+  --modal_color:#fff;
+  --encrypted_color: rgb(0, 0, 0);
+  --photopicker_overlay_background: rgba(84,101,111,0.8);
+  --modal-backdrop: hsla(0,0%,100%,0.85);
+  --toast-background:#0b141a;
+  --modal-backDrop:hsla(0,0%,100%,0.85);
+  --chat-info-drawer-media-background:#f0f2f5;
+  --chat-info-background:linear-gradient(15deg,rgba(var(--overlay-rgb),0),rgba(var(--overlay-rgb),0) 45%,rgba(var(--overlay-rgb),.12) 70%,rgba(var(--overlay-rgb),.33));
+  --intro-background:#f0f2f5;
+  --reply-background-color: #d1f4cc;
+  --reply-pannel-background:rgba(11,20,26,0.05);
+  --audio-control-outgoing:#6f8171;
+  --toaster-success-bgcolor: #2E7D32;
+  --toaster-error-bgcolor: #D32F2F;
+}
+
+.dark-theme {
+  --chat-msg-text: #667781;
+  --profile-header: #202c33;
+  --black: #fff;
+  --bg-white: #111b21;
+  --primary-white: #111b21;
+  --gray_color: #202c33;
+  --icon_color: #aebac1;
+  --white: #111b21;
+  --border_color: #2a3942;
+  --chat_hover: #202c33;
+  --sender_chatbg: #005c4b;
+  --chat_timing: hsla(0, 0%, 100%, 0.6);
+  --input_bg: #2a3942;
+  --profile_bg: #111b21;
+  --contact-profile-bg: black;
+  --profile-name: #008069;
+  --danger: #f15c6d;
+  --contact-media-text: #fff;
+  --modal_color:#202c33;
+  --encrypted_color: rgb(250, 217, 100);
+  --photopicker_overlay_background: rgba(84,101,111,0.8);
+  --modal-backdrop: rgba(11,20,26,0.85);
+  --intro-background:#222e35;
+  --toast-background:#0b141a;
+  --modal-backDrop:rgba(11,20,26,0.85);
+  --chat-info-drawer-media-background:rgb(42, 57, 66);
+  --chat-info-background:linear-gradient(15deg,rgba(var(--overlay-rgb),0),rgba(var(--overlay-rgb),0) 45%,rgba(var(--overlay-rgb),.12) 70%,rgba(var(--overlay-rgb),.33));
+  --reply-background-color:#025144;
+  --audio-control-outgoing: #d1d7db;
+  --toaster-success-bgcolor: #2E7D32;
+  --toaster-error-bgcolor: #D32F2F;
+}
+
+.icons {
+  height: 24px;
+  width: 24px;
+  color: var(--icon_color);
+  cursor: pointer;
+}
+
+.darkicons {
+  height: 20px;
+  width: 20px;
+  color: var(--icon_color);
+  filter: invert(1);
+  cursor: pointer;
+}
+
+.lighticons {
+  height: 20px;
+  width: 20px;
+  color: var(--icon_color);
+  filter: opacity(0.5);
+  cursor: pointer;
+}
+.light_footer_icons{
+  margin-left:10px;
+  height: 22px;
+  width: 22px;
+  color: var(--icon_color);
+  cursor: pointer;
+
+}
+
+.MuiDrawer-paper{
+  background-color: var(--primary-white) !important; 
+}
+
+.MuiPaper-root{
+  background-color: var(--primary-white) !important; 
+}
+.dark_footer_icons{
+  margin-left:10px;
+  height: 22px;
+  width: 22px;
+  color: var(--icon_color);
+  filter: invert(1);
+  cursor: pointer;
+
+}
+
+.grpicons {
+  height: 28px;
+  width: 28px;
+  color: var(--icon_color);
+  cursor: pointer;
+}
+
+.user_image {
+  height: 41px;
+  width: 41px;
+  border-radius: 25px;
+}
+
+.userContact_image {
+  height: 49px;
+  width: 49px;
+  border-radius: 25px;
+  font-size: xx-large;
+  color: var(--black);
+  background-color: var(--icon_color);
+}
+
+.text_Color {
+  color: var(--chat-msg-text);
+}
+
+.icons {
+  color: var(--icon_color);
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.margin {
+  margin-left: 7px;
+}
+
+.header {
+  /* position: fixed; */
+  z-index: 2;
+  top: 0px;
+}
+
+.msgFont {
+  font-size: 14px;
+}
+.sidebar_search-container {
+  padding: 5px 5px 5px 10px;
+}
+
+.sidebar_search-container span img{
+padding:2px;
+}
+
+.truncate {
+  width: 25vw !important;
+  /* white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis; */
+}
+
+.sliderContainer{
+background-color: var(--white);  
+}
+
+.textColor {
+ color:var(--black)
+}
+
+.border_color{
+  border-color: var(--border_color);
+} 
+
+.border_bottom {
+  border-bottom: 1px solid var(--border_color);
+}
+
+.searchContainer{
+  background-color: var(--primary-white);
+}
+
+.disable_UI{
+  pointer-events: none;
+  opacity: 0.4;
+}
+
+.absolute{
+  position: absolute;
+}
+
+.objCover{
+  object-fit: cover;
+}
+
+.objContain{
+  object-fit: contain;
+}

package/src/index.js

@@ -0,0 +1,23 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import "bootstrap/dist/css/bootstrap.css";
+import reportWebVitals from "./reportWebVitals";
+import GlobalStyle from "./global-styles";
+import App from "./App";
+import ChatContext from "./ChatContext";
+
+// const store = configureStore()
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
+
+root.render(
+  <>
+  <ChatContext mqttCreds={{ licenseKey: "lic-IMKw4CVRR6IHZ26+FhU7S+eG2Egi9NIHjMB", projectId: "fc4bfc08-3243-420f-884d-1ce37d3f453b", keysetId: "2f7d22d7-b743-4714-837e-af0b129bd542", accountId: "60b1ef70ffcf750001d0440d" }}>
+    <GlobalStyle />
+    <App />
+  </ChatContext>
+  </>
+);
+
+reportWebVitals();

package/src/lib/constant.js

@@ -0,0 +1,21 @@
+export const USER_NAME_MAX_LENGTH  = 25;
+export const USER_BIO_MAX_LENGTH =  110;
+export const SECONDS = 1000;
+export const MINUTES = SECONDS * 60;
+export const HOURS = MINUTES * 60;
+export const DAYS = HOURS * 24;
+export const MONTHS = DAYS * 30;
+export const YEARS = MONTHS * 12;
+export const DELETE_CHAT = 'deleteConversationLocally';
+export const CLEAR_CHAT = 'clearConversation';
+export const MESSAGE_DELIVERED = 'messageDelivered';
+export const MESSAGE_READ = 'messageRead';
+export const USER_UNBLOCKED = 'User unblocked successfully.';
+export const MAX_IMAGE_SIZE = 5 * 1024 * 1024; // 5MB
+export const MAX_VIDEO_SIZE = 50 * 1024 * 1024; // 50MB;
+export const MAX_DOCUMENT_SIZE = 50 * 1024 * 1024 ; // 50MB
+export const  MESSAGE_DELETE_LOCAL = "messagesDeleteLocal";
+export const MESSAGE_DELETE_FOR_ALL = "messagesDeleteForAll";
+export const CONVERSATION_NOT_FOUND = "Conversations not found.";
+export const USER_UNBLOCK_CONVERSATION  = 'userUnblockConversation';
+export const MOBILE_MAX_WIDTH_LIMIT = 420;

package/src/lib/functionality.js

@@ -0,0 +1,13 @@
+const setFirstItem = (array, id, fun) => {
+  if (array?.length) {
+    const currIndex = array.findIndex(
+      (obj) => obj?.opponentDetails?.userId === id
+    );
+    fun(currIndex);
+    const filteredData = array.filter(
+      (obj) => obj?.opponentDetails?.userId === id
+    )[0];
+    array.splice(currIndex, 1);
+    array.unshift(filteredData);
+  }
+};