l-min-components 1.0.1002 → 1.0.1008

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.1002",
+  "version": "1.0.1008",
   "type": "module",
   "files": [
     "src/assets",

package/src/components/banner/styles/index.jsx

@@ -111,7 +111,7 @@ export const DevBannerWrapper = styled.div`
   .dev_banner_title {
     color: #febf10;
     text-align: center;
-    font-family: "Nunito Sans";
+    font-family: "Nunito" sans-serif;
     font-size: 18px;
     font-weight: 700;
     letter-spacing: 0.36px;
@@ -122,7 +122,7 @@ export const DevBannerWrapper = styled.div`
   .dev_banner_subtitle {
     color: #febf10;
     text-align: center;
-    font-family: "Nunito Sans";
+    font-family: "Nunito" sans-serif;
     font-size: 18px;
     font-weight: 600;
     letter-spacing: 0.36px;
@@ -131,7 +131,7 @@ export const DevBannerWrapper = styled.div`
   .dev_banner_txt {
     color: #fff;
     text-align: center;
-    font-family: "Nunito Sans";
+    font-family: "Nunito" sans-serif;
     font-size: 16px;
     font-weight: 400;
     letter-spacing: 0.32px;

package/src/components/header/getHeaderDetails.js

@@ -101,9 +101,35 @@ const useHeader = () => {
     }
   );
 
-  const handleGetUnreadNotification = async (read = false) => {
+  const handleGetUnreadNotification = async (
+    account_type = "",
+    read = false
+  ) => {
     try {
       await getUnreadNotification({
+        url: `/notify/v1/${account_type}/notifications/`,
+        params: {
+          read: read,
+        },
+      });
+    } catch (err) {
+      //console.log(err);
+    }
+  };
+
+  const [{ ...unreadNotificationPersonalData }, getUnreadNotificationPersonal] =
+    useAxios(
+      {
+        method: "GET",
+      },
+      {
+        manual: true,
+      }
+    );
+
+  const handleGetUnreadNotificationPersonal = async (read = false) => {
+    try {
+      await getUnreadNotificationPersonal({
         url: `/notify/v1/notifications/`,
         params: {
           read: read,
@@ -125,9 +151,32 @@ const useHeader = () => {
       }
     );
 
-  const handleGeneralNotificationCount = async () => {
+  const handleGeneralNotificationCount = async (account_type = "") => {
     try {
       await generalNotificationCount({
+        url: `/notify/v1/${account_type}/notifications/general_notification_count/`,
+      });
+    } catch (err) {
+      //console.log(err);
+    }
+  };
+
+  // general notification count personal
+  const [
+    { ...generalNotificationCountPersonalData },
+    generalNotificationCountPersonal,
+  ] = useAxios(
+    {
+      method: "GET",
+    },
+    {
+      manual: true,
+    }
+  );
+
+  const handleGeneralNotificationCountPersonal = async () => {
+    try {
+      await generalNotificationCountPersonal({
         url: `/notify/v1/notifications/general_notification_count/`,
       });
     } catch (err) {
@@ -145,9 +194,32 @@ const useHeader = () => {
     }
   );
 
-  const handleGetNotificationMarkRead = async () => {
+  const handleGetNotificationMarkRead = async (account_type = "") => {
     try {
       await getNotificationMarkRead({
+        url: `/notify/v1/${account_type}/notifications/mark_all_as_read/`,
+      });
+    } catch (err) {
+      //console.log(err);
+    }
+  };
+
+  //  Mark All Notification as Read Notification Personal acct
+  const [
+    { ...notificationMarkReadPersonalData },
+    getNotificationMarkReadPersonal,
+  ] = useAxios(
+    {
+      method: "PUT",
+    },
+    {
+      manual: true,
+    }
+  );
+
+  const handleGetNotificationMarkReadPersonal = async () => {
+    try {
+      await getNotificationMarkReadPersonal({
         url: `/notify/v1/notifications/mark_all_as_read/`,
       });
     } catch (err) {
@@ -165,10 +237,10 @@ const useHeader = () => {
     }
   );
 
-  const handleGetNotification = async (read) => {
+  const handleGetNotification = async (account_type = "", read) => {
     try {
       await getNotification({
-        url: `/notify/v1/notifications/`,
+        url: `/notify/v1/${account_type}/notifications/`,
         params: {
           read: read,
         },
@@ -243,7 +315,13 @@ const useHeader = () => {
     retrieveUserDetailsData,
     handleRetrieveUserDetails,
     updateUserAccountData,
-    handleUpdateUserAccount
+    handleUpdateUserAccount,
+    notificationMarkReadPersonalData,
+    handleGetNotificationMarkReadPersonal,
+    unreadNotificationPersonalData,
+    handleGetUnreadNotificationPersonal,
+    generalNotificationCountPersonalData,
+    handleGeneralNotificationCountPersonal,
   };
 };
 export default useHeader;

package/src/components/header/index.jsx

@@ -68,16 +68,31 @@ const HeaderComponent = (props) => {
   const { setGeneralData, generalData, notificationMarkReadData } =
     useContext(OutletContext);
   const [selectedAccount, setSelectedAccount] = useState();
+  const [accountType, setAccountType] = useState("");
   const { setDefaultAccount, handleSetDefaultAccount } = useHeader();
+  const currentAccountType = selectedAccount?.type
+    ? selectedAccount?.type?.toLowerCase()
+    : userAccountsDetail?.data?.[0]?.type?.toLowerCase();
+
+  useEffect(() => {
+    if(currentAccountType) {
+      setAccountType(currentAccountType)
+    }
+  }, [currentAccountType])
 
   useEffect(() => {
     setIsOpen(false);
     handleGetUserAccountsDetail();
     handleGetUserDetails();
     handleGetDefaultAccount();
-    handleGetUnreadNotification();
   }, []);
 
+  useEffect(() => {
+    if (accountType) {
+      handleGetUnreadNotification(accountType);
+    }
+  }, [accountType]);
+
   // Merge the notification_count into the results data using find
 
   const allUserAccountsDetail = userAccountsDetail?.data?.results.map(
@@ -93,8 +108,8 @@ const HeaderComponent = (props) => {
   );
 
   useEffect(() => {
-    handleGeneralNotificationCount();
-  }, []);
+    if (accountType) handleGeneralNotificationCount(accountType);
+  }, [accountType]);
 
   useEffect(() => {
     if (userAccountsDetail?.data) {
@@ -297,12 +312,12 @@ const HeaderComponent = (props) => {
   // websocket for all notification account
   useEffect(() => {
     const websocket = new WebSocket(
-      `wss://${socketUrl}?account=${account_id}&authorization=${token}`
+      `wss://${socketUrl}?_account=${account_id}&authorization=${token}`
     );
 
     websocket.onopen = () => {
       //check if socket is connected
-      //console.log("websocket connection established");
+      // console.log("websocket connection established");
     };
 
     websocket.onmessage = (event) => {
@@ -318,9 +333,11 @@ const HeaderComponent = (props) => {
             props.setNewNotifications((prev) => [...prev, data.data]);
 
             //console.log(data);
-            handleGetUnreadNotification();
-            handleGeneralNotificationCount();
-            handleGetNotification();
+            if (accountType) {
+              handleGetUnreadNotification(accountType);
+              handleGeneralNotificationCount();
+              handleGetNotification(accountType);
+            }
           }
         }
       }
@@ -336,12 +353,12 @@ const HeaderComponent = (props) => {
   // websocket for room
   useEffect(() => {
     const websocket2 = new WebSocket(
-      `wss://${socketUrl}?account=${account_id}&authorization=${token}&room_id=${account_id}`
+      `wss://${socketUrl}?_account=${account_id}&authorization=${token}&room_id=${account_id}`
     );
 
     websocket2.onopen = () => {
       //check if socket is connected
-      //console.log("room websocket connection established");
+      // console.log("room websocket connection established");
     };
 
     websocket2.onmessage = (event) => {
@@ -361,9 +378,11 @@ const HeaderComponent = (props) => {
         if (data.event === "new.room.result") {
           //console.log(data);
           if (data.status) {
-            handleGetUnreadNotification();
-            handleGeneralNotificationCount();
-            handleGetNotification();
+            if (accountType) {
+              handleGetUnreadNotification(accountType);
+              handleGeneralNotificationCount(accountType);
+              handleGetNotification(accountType);
+            }
           }
         }
       }
@@ -377,8 +396,10 @@ const HeaderComponent = (props) => {
   }, []);
 
   useEffect(() => {
-    handleGetUnreadNotification();
-    handleGeneralNotificationCount();
+    if (accountType) {
+      handleGetUnreadNotification(accountType);
+      handleGeneralNotificationCount(accountType);
+    }
   }, [notificationMarkReadData?.response]);
 
   // When Developer and on staging

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

@@ -40,8 +40,10 @@ const InputSection = ({
   newMessages,
   setNewMessages,
   setIsMessageSending,
+  accountType,
+  affiliates,
+  courseID,
 }) => {
-  const { affiliates, courseID } = useContext(MessagesContext);
   const [showEmoji, setShowEmoji] = useState();
   const [inputMethod, setInputMethod] = useState("text"); // text | recorder
   const [text, setText] = useState({
@@ -50,8 +52,7 @@ const InputSection = ({
   }); // state for user text
   const [blobData, setBlobData] = useState({}); //state for audio
   const [recording, setRecording] = useState(false);
-  const { pathname } = useLocation();
-  const accountType = pathname.split("/")[1]?.toLowerCase();
+  const [successResponse, setSuccessResponse] = useState(false);
 
   const imageRef = useRef();
   const {
@@ -59,6 +60,7 @@ const InputSection = ({
     createMessageData,
     handleCreateMessageWithMedia,
     createMessageWithMediaData,
+    createMessageAffiliateData,
     handleCreateMessageAffiliate,
     createMessagePersonalData,
     handleCreateMessagePersonal,
@@ -138,7 +140,30 @@ const InputSection = ({
         text: "",
       });
     }
-  }, [createMessageData?.response]);
+    if (createMessageAffiliateData?.response?.status === 201) {
+      setNewMessages((prev) => [...prev, createMessageAffiliateData?.data]);
+      // newMessages[newMessages.length - 1] = createMessageData?.data;
+      setIsMessageSending(false);
+      setText({
+        ...text,
+        text: "",
+      });
+    }
+
+    if (createMessagePersonalData?.response?.status === 201) {
+      setNewMessages((prev) => [...prev, createMessagePersonalData?.data]);
+      // newMessages[newMessages.length - 1] = createMessageData?.data;
+      setIsMessageSending(false);
+      setText({
+        ...text,
+        text: "",
+      });
+    }
+  }, [
+    createMessageData?.response,
+    createMessageAffiliateData?.response,
+    createMessagePersonalData?.response,
+  ]);
 
   useEffect(() => {
     if (createMessageWithMediaData?.response?.status === 201) {

package/src/components/messageAddon/hooks/useMessaging.js

@@ -382,7 +382,8 @@ const useMessaging = () => {
 
   const handleRoomRecipientDetails = async (
     account_type,
-    room_id,
+    account_id,
+    course_id,
     recipient_only = true
   ) => {
     try {
@@ -390,6 +391,8 @@ const useMessaging = () => {
         url: `/notify/v1/${account_type}/chats/recipient_details/`,
         params: {
           room_id,
+          account_id,
+          course_id,
         },
       });
     } catch (err) {
@@ -409,12 +412,14 @@ const useMessaging = () => {
     }
   );
 
-  const handleRoomRecipientDetailsPersonal = async (room_id) => {
+  const handleRoomRecipientDetailsPersonal = async (account_id, course_id) => {
     try {
       await roomRecipientDetailsPersonal({
         url: `/notify/v1/chats/recipient_details/`,
         params: {
-          room_id,
+          account_id,
+          course_id,
+          // room_id,
         },
       });
     } catch (err) {

package/src/components/messageAddon/messages/chatheader/index.jsx

@@ -5,6 +5,7 @@ import Avatar from "../../assets/images/avatar.jpg";
 import { HiUser, HiOfficeBuilding } from "react-icons/hi";
 import { FiMoreVertical } from "react-icons/fi";
 import MoreSvg from "../assets/more";
+import { useNavigate } from "react-router-dom";
 
 /** The top green header of an open chat
  *
@@ -19,11 +20,13 @@ const ChatHeader = ({
   deleteChatModal,
   userFullName,
   courseName,
+  accountType,
   userType,
   userAvatar,
 }) => {
   // handle click outside dropdown container
   const dropdownContainer = useRef(null);
+  const navigate = useNavigate()
   const handleClickOutside = (event) => {
     if (
       dropdownContainer.current &&
@@ -100,7 +103,7 @@ const ChatHeader = ({
                     : "Unpin chat"
                   : "Pin chat"}
               </li>
-              <li onClick={openModal}> Report User</li>
+              <li onClick={() => navigate(`/msg/${accountType}/messages`)}> Report User</li>
               <li onClick={deleteChatModal}> Delete chat</li>
             </ul>
           </div>

package/src/components/messageAddon/messages/messages.jsx

@@ -50,7 +50,7 @@ const Messages = ({
   receiverID,
   setReceiverID,
   accountType,
-  affiliates = false
+  affiliates = false,
 }) => {
   const [showEmoji, setShowEmoji] = useState(false);
   const [chatOptions, setChatOptions] = useState(false);
@@ -99,6 +99,7 @@ const Messages = ({
     handleRoomMessageRecipient,
     roomRecipientDetailsData,
     handleRoomRecipientDetails,
+    retrieveMessageData,
     handleRetrieveMessage,
     roomMessageAffiliateData,
     handleRoomMessageAffiliate,
@@ -129,10 +130,21 @@ const Messages = ({
 
   // use effects for successful responses***
   useEffect(() => {
-    if (roomMessageData?.response?.status === 200)
+    if (roomMessageData?.response?.status === 200) {
       setAllMessages(roomMessageData?.data?.results?.reverse());
+    }
+    if (roomMessageAffiliateData?.response?.status === 200) {
+      setAllMessages(roomMessageAffiliateData?.data?.results?.reverse());
+    }
+    if (retrieveMessageData?.response?.status === 200) {
+      setAllMessages(retrieveMessageData?.data?.results?.reverse());
+    }
     setNewMessages([]);
-  }, [roomMessageData?.response]);
+  }, [
+    roomMessageData?.response,
+    roomMessageAffiliateData?.response,
+    retrieveMessageData?.response,
+  ]);
 
   // useEffect(() => {
   //   if (changePinStatusData?.response?.status === 202) handleGetMyRooms();
@@ -145,7 +157,6 @@ const Messages = ({
       location.reload();
 
       // toast.success("Chat deleted successfully");
-
     }
   }, [clearChatData?.response]);
 
@@ -172,25 +183,25 @@ const Messages = ({
 
   // retrieve users chats/room messages
   useEffect(() => {
-    if (roomID) {
+    if (receiverID && courseID) {
       if (accountType === "enterprise") {
         handleRoomMessage(accountType, receiverID, courseID);
-        handleRoomRecipientDetails(accountType, roomID);
+        handleRoomRecipientDetails(accountType, receiverID, courseID);
       }
       if (!affiliates && accountType === "instructor") {
         handleRoomMessage(accountType, receiverID, courseID);
-        handleRoomRecipientDetails(accountType, roomID);
+        handleRoomRecipientDetails(accountType, receiverID, courseID);
       }
       if (affiliates && accountType === "instructor") {
         handleRoomMessageAffiliate(receiverID, courseID, roomID);
-        handleRoomRecipientDetails(accountType, roomID);
+        handleRoomRecipientDetails(accountType, receiverID, courseID);
       }
       if (accountType === "personal") {
         handleRetrieveMessage(receiverID, courseID, roomID);
-        handleRoomRecipientDetailsPersonal(roomID);
+        handleRoomRecipientDetailsPersonal(receiverID, courseID);
       }
     }
-  }, [roomID]);
+  }, [roomID, receiverID, courseID]);
 
   //console.log("allMessages", allMessages);
   //console.log("handleRoomMessage", roomMessageData);
@@ -323,21 +334,12 @@ const Messages = ({
                 userType={userType}
                 courseName={courseName}
                 userAvatar={userAvatar}
+                accountType={accountType}
               />
 
               <MessageBody ref={scrollRef}>
-                {roomMessageData?.loading && (
-                  <div className="loader-box">
-                    <Loader
-                      zoom={0.3}
-                      color="#E5E5E5"
-                      style={{ textAlign: "center" }}
-                    />
-                  </div>
-                )}
-                {roomMessageData?.data?.results?.length > 0 &&
-                !roomMessageData?.loading &&
-                !roomMessageData?.error ? (
+                {roomMessageData?.loading && <></>}
+                {allMessages.length > 0 ? (
                   <>
                     {allMessages?.map((chat, idx) => (
                       <>
@@ -399,6 +401,9 @@ const Messages = ({
                   setLastMessage={setLastMessage}
                   handleRoomMessage={handleRoomMessage}
                   roomID={roomID}
+                  accountType={accountType}
+                  courseID={courseID}
+                  affiliates={affiliates}
                 />
               </div>
             </>