l-min-components 1.0.289 → 1.0.297

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.289",
+  "version": "1.0.297",
   "type": "module",
   "files": [
     "src/assets",
@@ -17,6 +17,7 @@
     "axios-hooks": "^4.0.0",
     "chart.js": "^4.2.1",
     "classnames": "^2.3.2",
+    "emoji-picker-react": "^4.4.10",
     "js-cookie": "^3.0.5",
     "l-min-components": "^1.0.220",
     "moment": "^2.29.4",
@@ -33,6 +34,9 @@
     "react-modal": "^3.16.1",
     "react-router-dom": "^6.8.2",
     "react-tooltip": "^5.10.1",
+    "slate": "^0.94.0",
+    "slate-history": "^0.93.0",
+    "slate-react": "^0.94.0",
     "styled-components": "^5.3.6"
   },
   "devDependencies": {

package/src/components/AppMainLayout/index.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, createContext, useRef } from "react";
+import React, { useState, useEffect, createContext, useRef, useContext } from "react";
 import { Outlet, useLocation } from "react-router-dom";
 import {
   Layout,
@@ -33,7 +33,7 @@ const AppMainLayout = () => {
 
   return (
     <OutletContext.Provider
-      value={{ setRightComponent, setRightLayout, generalData, setGeneralData }}
+      value={{ setRightComponent, setRightLayout, generalData, setGeneralData, coming }}
     >
       <Layout coming={coming}>
         <HeaderComponent />

package/src/components/dropdown component/index.jsx

@@ -1,4 +1,4 @@
-import React, { useState, CSSProperties, useEffect } from "react";
+import React, { useState, CSSProperties, useEffect, useRef } from "react";
 import {
   ControlInput,
   DropDownContainer,
@@ -35,13 +35,30 @@ const DropDownComponent = (props) => {
   //search params
   const [searchParam, setSearchParam] = useState();
 
+  // dropdown menu ref
+  const dropdownRef = useRef(null);
+
+  // click outside closes the dropdown menu
+  const handleClickOutside = (event) => {
+    if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+      setDropdown(false)
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('click', handleClickOutside);
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, []);
+
   // useEffect to return a function value onChange
   useEffect(() => {
     props?.onSelect && props?.onSelect(selected);
   }, [selected]);
 
   return (
-    <DropDownContainer className={props?.className}>
+    <DropDownContainer className={props?.className} ref={dropdownRef}>
       <DropDownHeader>{props?.header}</DropDownHeader>
       <DropDownControls>
         {props?.searchable ? (
@@ -110,8 +127,8 @@ export default DropDownComponent;
 export const DownIcon = ({ width, height, fill, onClick }) => {
   return (
     <svg
-      width={width || "14"}
-      height={height || "8"}
+      width={width || "18"}
+      height={height || "9"}
       viewBox="0 0 14 8"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
@@ -119,10 +136,10 @@ export const DownIcon = ({ width, height, fill, onClick }) => {
     >
       <path
         d="M1 1L7 7L13 1"
-        stroke={fill || "#18191B"}
+        stroke={fill || "#7C8080"}
         strokeWidth="2"
         strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeLinejoin="round"     
       />
     </svg>
   );

package/src/components/index.js

@@ -28,4 +28,7 @@ export { default as Calender } from "./calender/input";
 export { default as ErrorPage } from "./errorPage";
 export { default as AppMainLayout } from "./AppMainLayout";
 export { OutletContext as OutletContext } from "./AppMainLayout";
-export { default as DatePickerCalender } from "./datePicker"; 
+export { default as DatePickerCalender } from "./datePicker";
+export { default as DatePickerCalender } from "./datePicker";
+export { default as TextEditor } from "./textEditor";
+export { default as MessageAddon } from "./messageAddon/messages";

package/src/components/messageAddon/InputSection/index.jsx

@@ -0,0 +1,336 @@
+import React, {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import { EmojiIcon } from "../../../assets/svg/emoji";
+import { GalleryIcon } from "../../../assets/svg/gallery";
+import { MicrophoneIcon } from "../../../assets/svg/microphone";
+import { SendIcon } from "../../../assets/svg/send";
+import { TextMessagePanel } from "../messages/index.styled";
+import Picker from "emoji-picker-react";
+import cx from "classnames";
+import { ReactMic } from "react-mic";
+import WaveSurfer from "wavesurfer.js";
+import moment from "moment";
+import { RecorderIcon } from "../../../assets/svg/recorder";
+import { RecorderPlayIcon } from "../../../assets/svg/recorderPlay";
+import { PauseIcon } from "../../../assets/svg/pause";
+import { Bin } from "../../../assets/svg/bin";
+import useMessaging from "../../../hooks/useMessaging";
+import useMedia from "../../../hooks/useMedia";
+import { getCookie } from "../../../utils/helpers";
+import InputEmoji from "react-input-emoji";
+
+/** The input section of an open chat, for sending texts, emojis and audios
+ *
+ */
+const InputSection = ({
+  userID,
+  setPreviewModalIsOpen,
+  mediaForm,
+  setMediaForm,
+  setAllMessages,
+  allMessages,
+  newMessages,
+  setNewMessages,
+  setIsMessageSending,
+}) => {
+  const [showEmoji, setShowEmoji] = useState();
+  const [inputMethod, setInputMethod] = useState("text"); // text | recorder
+  const [text, setText] = useState({ text: "", user_message: true }); // state for user text
+  const [blobData, setBlobData] = useState({}); //state for audio
+  const [recording, setRecording] = useState(false);
+  const imageRef = useRef();
+  const {
+    handleCreateMessage,
+    createMessageData,
+    handleCreateMessageWithMedia,
+    createMessageWithMediaData,
+  } = useMessaging();
+  const { handleUploadMedia, uploadMediaData } = useMedia();
+
+  console.log(text);
+
+  // Handle Send when Enter key pressed
+  const handleEnterKey = (e) => {
+    if (e.key === "Enter") {
+      handleSendMessage();
+    }
+  };
+
+  // handle sending a text and audio when button clicked
+  const handleSendMessage = (e) => {
+    if (inputMethod === "recorder") {
+      //   const file = new File([blobData.blob], `record-${Date.now()}.wav`);
+      const file = new File([blobData.blob], `record-${Date.now()}.wav`, {
+        type: "audio/wav",
+      });
+      const data = {
+        media: file,
+      };
+      handleCreateMessageWithMedia(data.media, userID);
+      setInputMethod("text");
+      console.log("uploas", file);
+    }
+
+    if (inputMethod === "text") {
+      // setNewMessages((prev) => [...prev, text]);
+      setIsMessageSending(true);
+      setTimeout(() => {
+        handleCreateMessage(userID, text);
+      }, 1000);
+    }
+  };
+
+  console.log("createMessageData", createMessageData);
+
+  // handle open modal for image preview when an image selected (future note)
+  useEffect(() => {
+    if (mediaForm?.media) {
+      setPreviewModalIsOpen(true);
+    }
+  }, [mediaForm]);
+
+  //handle update messages state when a message sent successfully for text and audio
+  useEffect(() => {
+    if (createMessageData?.response?.status === 201) {
+      setNewMessages((prev) => [...prev, createMessageData?.data]);
+      // newMessages[newMessages.length - 1] = createMessageData?.data;
+      setIsMessageSending(false);
+      setText({
+        ...text,
+        text: "",
+      });
+    }
+  }, [createMessageData?.response]);
+
+  useEffect(() => {
+    if (createMessageWithMediaData?.response?.status === 201) {
+      setNewMessages((prev) => [...prev, createMessageWithMediaData?.data]);
+      // newMessages[newMessages.length - 1] = createMessageData?.data;
+      setText({
+        ...text,
+        text: "",
+      });
+    }
+  }, [createMessageWithMediaData?.response]);
+
+  //handle update messages state when a message sent successfully for text and audio ends here
+
+  console.log("media", mediaForm);
+  console.log("media2", uploadMediaData);
+  console.log("media3", imageRef);
+
+  return (
+    <TextMessagePanel>
+      <div
+        className={cx("text-input-wrapper", {
+          "text-mode": inputMethod === "text",
+        })}
+      >
+        {inputMethod === "text" && (
+          <>
+            <div className="icon-box">
+              <>
+                {/* for handling sending of media (future note) */}
+                {/* <span onClick={(e) => imageRef.current.click()}>
+                <GalleryIcon />
+              </span>
+              <input
+                ref={imageRef}
+                type="file"
+                accept="image/*"
+                style={{ display: "none" }}
+                onChange={async (e) => {
+                  console.log("media", e);
+                  if (e.target.files) {
+                    const file = e.target.files[0];
+                    let imageDataUrl = await readFile(file);
+                    setMediaForm({
+                      ...mediaForm,
+                      media: e.target.files[0],
+                    });
+                  }
+                }}
+              /> */}
+              </>
+              <span
+                onClick={(e) => {
+                  setInputMethod("recorder");
+                }}
+              >
+                <MicrophoneIcon />
+              </span>
+            </div>
+
+            <InputEmoji
+              value={text.text}
+              cleanOnEnter
+              onEnter={handleSendMessage}
+              placeholder="Start typing..."
+              onChange={(e) => {
+                setText((prev) => ({
+                  ...prev,
+                  text: e,
+                }));
+              }}
+              theme="light"
+            />
+          </>
+        )}
+        {inputMethod === "recorder" && (
+          <>
+            <Recorder
+              {...{
+                setInputMethod,
+                blobData,
+                setBlobData,
+                recording,
+                setRecording,
+              }}
+            />
+          </>
+        )}
+      </div>
+      <button
+        className={`send-box ${
+          !text.text && (inputMethod === "text" || recording) ? "disabled" : ""
+        }`}
+        onClick={handleSendMessage}
+        disabled={
+          !text.text &&
+          (inputMethod === "text" || recording || createMessageData?.loading)
+        }
+      >
+        <SendIcon />
+      </button>
+    </TextMessagePanel>
+  );
+};
+
+/** For audio recording and waves functionality
+ *
+ */
+const Recorder = ({
+  blobData,
+  setBlobData,
+  setInputMethod,
+  recording,
+  setRecording,
+}) => {
+  const [recordingTime, setRecordingTime] = useState(0);
+  const waveSurfer = useRef(null);
+  const counterRef = useRef();
+
+  console.log("blob", blobData);
+  // on record stop, concatenate blob to form a pause and continue recording feature
+  const handleStop = (data) => {
+    const { blob } = data;
+    setBlobData((state) => {
+      const newBlob = state.blob
+        ? new Blob([state.blob, blob], { type: "audio/wav" })
+        : blob;
+
+      const url = URL.createObjectURL(newBlob);
+
+      return {
+        blob: newBlob,
+        url,
+      };
+    });
+  };
+
+  useLayoutEffect(() => {
+    setRecording(true);
+  }, []);
+
+  // handle counting time while recording
+  useEffect(() => {
+    let time = 0;
+    if (recording) {
+      counterRef.current = setInterval(() => {
+        time++;
+        const currentDuration = waveSurfer.current?.getDuration() ?? 0;
+        // console.log(waveSurfer.current?.getDuration() ?? 0);
+        setRecordingTime(() => {
+          return Math.floor(currentDuration + time);
+        });
+      }, 1000);
+    }
+    return () => {
+      if (counterRef.current) {
+        clearInterval(counterRef.current);
+      }
+    };
+  }, [recording]);
+
+  //handle creating waves each time
+  useEffect(() => {
+    if (blobData.blob) {
+      if (!waveSurfer.current) {
+        waveSurfer.current = WaveSurfer.create({
+          container: "#waves",
+          waveColor: "#E5AD0E",
+          progressColor: "#FECF4C",
+          cursorWidth: 0,
+          height: 58,
+          barWidth: 2.5,
+          barGap: 4,
+          barRadius: 2,
+          barMinHeight: 3,
+        });
+      }
+
+      waveSurfer.current.loadBlob(blobData.blob);
+    }
+  }, [blobData.blob]);
+
+  return (
+    <>
+      <div className="left-recorder-state">
+        <span className="icon" onClick={(e) => setRecording((state) => !state)}>
+          {recording ? <PauseIcon /> : <RecorderIcon />}
+        </span>
+        <div className="timer">
+          {moment.duration(recordingTime, "seconds").minutes()}:
+          {moment.duration(recordingTime, "seconds").seconds()}
+        </div>
+      </div>
+      <div className="waves-section">
+        {!recording && (
+          <span
+            className="icon"
+            onClick={() => {
+              waveSurfer.current.playPause();
+            }}
+          >
+            <RecorderPlayIcon />
+          </span>
+        )}
+        <div id="waves"></div>
+        {!recording && (
+          <span
+            className="icon"
+            onClick={
+              () => setInputMethod("text") // resetting input method, everything about recorder shutdown
+            }
+          >
+            <Bin />
+          </span>
+        )}
+        <div className="react-mic">
+          <ReactMic
+            onStop={handleStop}
+            record={recording}
+            mimeType="audio/wav"
+          />
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default InputSection;

package/src/components/messageAddon/assets/svg/bin.jsx

@@ -0,0 +1,14 @@
+export const Bin = ({ width, height, fill }) => (
+  <svg
+    width={width || "14"}
+    height={height || "18"}
+    viewBox="0 0 14 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M1 16C1 17.1 1.9 18 3 18H11C12.1 18 13 17.1 13 16V4H1V16ZM3 6H11V16H3V6ZM10.5 1L9.5 0H4.5L3.5 1H0V3H14V1H10.5Z"
+      fill="#ADB3B3"
+    />
+  </svg>
+);

package/src/components/messageAddon/assets/svg/check_circle.jsx

@@ -0,0 +1,25 @@
+export const CheckCircleIcon = ({ width, height, fill, onClick }) => (
+  <svg
+    onClick={onClick}
+    width={width || "13"}
+    height={height || "13"}
+    viewBox="0 0 13 13"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g id="Check circle" clip-path="url(#clip0_14342_79747)">
+      <path
+        id="Icon"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M6.50313 12.9984C10.0947 12.9984 13.0063 10.0869 13.0063 6.49531C13.0063 2.90374 10.0947 -0.0078125 6.50313 -0.0078125C2.91155 -0.0078125 0 2.90374 0 6.49531C0 10.0869 2.91155 12.9984 6.50313 12.9984ZM9.5166 5.44433C9.83405 5.12688 9.83405 4.61219 9.5166 4.29473C9.19915 3.97728 8.68445 3.97728 8.367 4.29473L5.69024 6.97149L4.63925 5.92051C4.3218 5.60306 3.80711 5.60306 3.48965 5.92051C3.1722 6.23797 3.1722 6.75266 3.48965 7.07011L5.11544 8.6959C5.43289 9.01335 5.94758 9.01335 6.26504 8.6959L9.5166 5.44433Z"
+        fill="#00C2C2"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_14342_79747">
+        <rect width="13" height="13" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);

package/src/components/messageAddon/assets/svg/emoji.jsx

@@ -0,0 +1,38 @@
+export const EmojiIcon = ({ width, height, fill }) => (
+  <svg
+    width={width || "24"}
+    height={height || "24"}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M19.0668 4.94813C23.0368 8.91813 22.9668 15.3981 18.8668 19.2881C15.0768 22.8781 8.92679 22.8781 5.12679 19.2881C1.01679 15.3981 0.946776 8.91813 4.92678 4.94813C8.82678 1.03813 15.1668 1.03813 19.0668 4.94813Z"
+      stroke="#ADB3B3"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M15.834 16.0664C13.714 18.0664 10.2741 18.0664 8.16406 16.0664"
+      stroke="#ADB3B3"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M8.66638 8.98828H8.67536"
+      stroke="#ADB3B3"
+      stroke-width="2.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M15.8383 8.98828H15.8472"
+      stroke="#ADB3B3"
+      stroke-width="2.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);

package/src/components/messageAddon/assets/svg/gallery.jsx

@@ -0,0 +1,31 @@
+export const GalleryIcon = ({ width, height, fill }) => (
+  <svg
+    width={width || "24"}
+    height={height || "24"}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z"
+      stroke="#4A4D4D"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M9 10C10.1046 10 11 9.10457 11 8C11 6.89543 10.1046 6 9 6C7.89543 6 7 6.89543 7 8C7 9.10457 7.89543 10 9 10Z"
+      stroke="#4A4D4D"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M2.67188 18.9486L7.60187 15.6386C8.39187 15.1086 9.53187 15.1686 10.2419 15.7786L10.5719 16.0686C11.3519 16.7386 12.6119 16.7386 13.3919 16.0686L17.5519 12.4986C18.3319 11.8286 19.5919 11.8286 20.3719 12.4986L22.0019 13.8986"
+      stroke="#4A4D4D"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);

package/src/components/messageAddon/assets/svg/microphone.jsx

@@ -0,0 +1,38 @@
+export const MicrophoneIcon = ({ width, height, fill }) => (
+  <svg
+    width={width || "24"}
+    height={height || "24"}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12 19C15.31 19 18 16.31 18 13V8C18 4.69 15.31 2 12 2C8.69 2 6 4.69 6 8V13C6 16.31 8.69 19 12 19Z"
+      stroke="#4A4D4D"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M3 11V13C3 17.97 7.03 22 12 22C16.97 22 21 17.97 21 13V11"
+      stroke="#4A4D4D"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M9.10938 7.47969C10.8894 6.82969 12.8294 6.82969 14.6094 7.47969"
+      stroke="#4A4D4D"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M10.0312 10.4819C11.2313 10.1519 12.5013 10.1519 13.7013 10.4819"
+      stroke="#4A4D4D"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);

package/src/components/messageAddon/assets/svg/more.jsx

@@ -0,0 +1,22 @@
+export const MoreIcon = ({ width, height, fill }) => (
+  <svg
+    width={width || "24"}
+    height={height || "24"}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M14 5C14 3.9 13.1 3 12 3C10.9 3 10 3.9 10 5C10 6.1 10.9 7 12 7C13.1 7 14 6.1 14 5Z"
+      fill="white"
+    />
+    <path
+      d="M14 19C14 17.9 13.1 17 12 17C10.9 17 10 17.9 10 19C10 20.1 10.9 21 12 21C13.1 21 14 20.1 14 19Z"
+      fill="white"
+    />
+    <path
+      d="M14 12C14 10.9 13.1 10 12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12Z"
+      fill="white"
+    />
+  </svg>
+);

package/src/components/messageAddon/assets/svg/noMessage.jsx

@@ -0,0 +1,49 @@
+export const NoMessage = ({ width, height, fill }) => (
+  <svg
+    width={width || "65"}
+    height={height || "65"}
+    viewBox="0 0 65 65"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g id="vuesax/linear/message">
+      <g id="vuesax/linear/message_2">
+        <g id="message">
+          <path
+            id="Vector"
+            d="M23.1423 50.7943H21.8056C11.1123 50.7943 5.76562 48.121 5.76562 34.7543V21.3877C5.76562 10.6943 11.1123 5.34766 21.8056 5.34766H43.1923C53.8856 5.34766 59.2323 10.6943 59.2323 21.3877V34.7543C59.2323 45.4477 53.8856 50.7943 43.1923 50.7943H41.8556C41.0269 50.7943 40.2249 51.1953 39.717 51.8637L35.707 57.2103C33.9426 59.5629 31.0554 59.5629 29.291 57.2103L25.281 51.8637C24.8532 51.2755 23.8641 50.7943 23.1423 50.7943Z"
+            stroke="#C6CCCC"
+            stroke-width="4.40659"
+            stroke-miterlimit="10"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            id="Vector_2"
+            d="M43.197 29.407H43.221"
+            stroke="#C6CCCC"
+            stroke-width="5.87546"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            id="Vector_3"
+            d="M32.5017 29.407H32.5257"
+            stroke="#C6CCCC"
+            stroke-width="5.87546"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            id="Vector_4"
+            d="M21.8064 29.407H21.8304"
+            stroke="#C6CCCC"
+            stroke-width="5.87546"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </g>
+      </g>
+    </g>
+  </svg>
+);