l-min-components 1.0.294 → 1.0.300

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

@@ -0,0 +1,30 @@
+import useAxios from "axios-hooks";
+
+const useFriends = () => {
+  //GET List Friends
+
+  const [{ ...listFriendsData }, listFriends] = useAxios(
+    {
+      method: "GET",
+    },
+    {
+      manual: true,
+    }
+  );
+  const handleListFriends = async () => {
+    try {
+      await listFriends({
+        url: `/notify/v1/friends/`,
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  return {
+    listFriendsData,
+    handleListFriends,
+  };
+};
+
+export default useFriends;

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

@@ -0,0 +1,81 @@
+import useAxios from "axios-hooks";
+
+const useMedia = () => {
+  //GET List Media
+  const [{ ...getMediaFilesData }, getMediaFiles] = useAxios(
+    {
+      method: "GET",
+    },
+    {
+      manual: true,
+    }
+  );
+  const handleGetMediaFiles = async () => {
+    try {
+      await getMediaFiles({
+        url: `/media/v1/streams/files`,
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  //GET Single Media
+  const [{ ...getSingleMediaData }, getSingleMedia] = useAxios(
+    {
+      method: "GET",
+    },
+    {
+      manual: true,
+    }
+  );
+  const handleGetSingleMedia = async (id) => {
+    try {
+      await getSingleMedia({
+        url: `/media/v1/streams/files/${id}`,
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  //POST Create Media
+  const [{ ...uploadMediaData }, uploadMedia] = useAxios(
+    {
+      method: "POST",
+      url: `/media/v1/streams/files/`,
+    },
+    {
+      manual: true,
+    }
+  );
+
+  const handleUploadMedia = async (files) => {
+    try {
+      if (files) {
+        console.log(files);
+        // console.log("files", files);
+
+        // const formdata = new FormData();
+        // formdata.append("upload", files.upload);
+        // return await uploadMedia({ data: formdata });
+        return await uploadMedia({ data: files });
+      } else {
+        return false;
+      }
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  return {
+    getMediaFilesData,
+    handleGetMediaFiles,
+    getSingleMediaData,
+    handleGetSingleMedia,
+    uploadMediaData,
+    handleUploadMedia,
+  };
+};
+
+export default useMedia;

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

@@ -0,0 +1,241 @@
+import { useState } from "react";
+import useAxios from "axios-hooks";
+import useMedia from "./useMedia";
+
+const useMessaging = () => {
+  const { handleUploadMedia, uploadMediaData } = useMedia();
+  const [loading, setLoading] = useState();
+
+  //GET Retrieve message
+  const [{ ...retrieveMessageData }, retrieveMessage] = useAxios(
+    {
+      method: "GET",
+    },
+    {
+      manual: true,
+    }
+  );
+  const handleRetrieveMessage = async (id) => {
+    try {
+      await retrieveMessage({
+        url: `/notify/v1/chats/${id}`,
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  //GET Read message
+  const [{ ...ReadMessageData }, readMessage] = useAxios(
+    {
+      method: "GET",
+    },
+    {
+      manual: true,
+    }
+  );
+  const handleReadMessage = async (id) => {
+    try {
+      await readMessage({
+        url: `/notify/v1/chats/${id}/read_message/`,
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  //POST Create message
+  const [{ ...createMessageData }, createMessage] = useAxios(
+    {
+      method: "POST",
+    },
+    {
+      manual: true,
+    }
+  );
+
+  const handleCreateMessage = async (user_id, data) => {
+    await createMessage({
+      url: `/notify/v1/chats/`,
+      data: {
+        ...data,
+      },
+      params: {
+        user_id,
+        // room_id,
+      },
+    });
+  };
+
+  //POST Create message with media
+  const [{ ...createMessageWithMediaData }, createMessageMedia] = useAxios(
+    {
+      method: "POST",
+    },
+    {
+      manual: true,
+    }
+  );
+
+  const handleCreateMessageWithMedia = async (file, user_id) => {
+    setLoading(true);
+    const newUploaded = [];
+
+    const formData = new FormData();
+    formData.append("upload", file);
+    const uploadedData = await handleUploadMedia(formData);
+
+    newUploaded.push(uploadedData?.data?.results[0]);
+
+
+    // if (uploadMediaData?.data) {
+    await createMessageMedia({
+      url: `/notify/v1/chats/`,
+      data: {
+        // ...data,
+        ...(newUploaded?.length && {
+          media: newUploaded?.[0],
+        }),
+      },
+      params: {
+        user_id,
+      },
+    });
+    // }
+  };
+
+  //GET Room Messages
+  const [{ ...roomMessageData }, roomMessage] = useAxios(
+    {
+      method: "GET",
+    },
+    {
+      manual: true,
+    }
+  );
+
+  const handleRoomMessage = async (room_id, limit, offset) => {
+    try {
+      await roomMessage({
+        url: `/notify/v1/chats/`,
+        params: {
+          room_id,
+          limit,
+          offset,
+        },
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  //GET Room Messages for Recipient
+  const [{ ...roomMessageRecipientData }, roomMessageRecipient] = useAxios(
+    {
+      method: "GET",
+    },
+    {
+      manual: true,
+    }
+  );
+
+  const handleRoomMessageRecipient = async (room_id, recipient_only = true) => {
+    try {
+      await roomMessageRecipient({
+        url: `/notify/v1/chats/`,
+        params: {
+          room_id,
+          recipient_only,
+        },
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  //DELETE message
+  const [{ ...deleteMessageData }, deleteMessage] = useAxios(
+    {
+      method: "DELETE",
+    },
+    {
+      manual: true,
+    }
+  );
+
+  const handleDeleteMessage = async (id) => {
+    try {
+      await deleteMessage({
+        url: `/notify/v1/chats/${id}/`,
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  //Clear chats
+  const [{ ...clearChatData }, clearChat] = useAxios(
+    {
+      method: "DELETE",
+    },
+    {
+      manual: true,
+    }
+  );
+
+  const handleClearChat = async (id) => {
+    try {
+      await clearChat({
+        url: `/notify/v1/rooms/${id}/destroy_chats/`,
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  //POST report user
+  const [{ ...reportUserData }, reportUser] = useAxios(
+    {
+      method: "POST",
+    },
+    {
+      manual: true,
+    }
+  );
+
+  const handleReportUser = async (data) => {
+    try {
+      await reportUser({
+        url: `/notify/v1/chats/reports/`,
+        data: {
+          ...data,
+        },
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  return {
+    retrieveMessageData,
+    handleRetrieveMessage,
+    ReadMessageData,
+    handleReadMessage,
+    createMessageData,
+    handleCreateMessage,
+    deleteMessageData,
+    handleDeleteMessage,
+    reportUserData,
+    handleReportUser,
+    roomMessageData,
+    handleRoomMessage,
+    createMessageWithMediaData,
+    handleCreateMessageWithMedia,
+    clearChatData,
+    handleClearChat,
+    roomMessageRecipientData,
+    handleRoomMessageRecipient,
+  };
+};
+
+export default useMessaging;

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

@@ -0,0 +1,210 @@
+import useAxios from "axios-hooks";
+
+const useRooms = () => {
+  //GET List My Rooms
+  const [{ ...getMyRoomsData }, getMyRooms] = useAxios(
+    {
+      method: "GET",
+    },
+    {
+      manual: true,
+    }
+  );
+  const handleGetMyRooms = async () => {
+    try {
+      await getMyRooms({
+        url: `/notify/v1/rooms/`,
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  //GET List My Rooms
+  const [{ ...getPinnedRoomsData }, getPinnedRooms] = useAxios(
+    {
+      method: "GET",
+    },
+    {
+      manual: true,
+    }
+  );
+  const handleGetPinnedRooms = async () => {
+    try {
+      await getPinnedRooms({
+        url: `/notify/v1/rooms/`,
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  //GET List My Rooms
+  const [{ ...getAllRoomsData }, getAllRooms] = useAxios(
+    {
+      method: "GET",
+    },
+    {
+      manual: true,
+    }
+  );
+  const handleGetAllRooms = async () => {
+    try {
+      await getAllRooms({
+        url: `/notify/v1/rooms/`,
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  //GET Change Pin Status
+  const [{ ...changePinStatusData }, changePinStatus] = useAxios(
+    {
+      method: "PATCH",
+    },
+    {
+      manual: true,
+    }
+  );
+  const handleChangePinStatus = async (room_id, data) => {
+    try {
+      await changePinStatus({
+        url: `/notify/v1/rooms/${room_id}/change_pin_status/`,
+        data: {
+          ...data,
+        },
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  //GET Retrieve Room
+  const [{ ...RetrieveRoomData }, retrieveRoom] = useAxios(
+    {
+      method: "GET",
+    },
+    {
+      manual: true,
+    }
+  );
+  const handleRetrieveRoom = async (id) => {
+    try {
+      await retrieveRoom({
+        url: `/notify/v1/rooms/${id}/`,
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  //POST Create Public Room
+  const [{ ...createPublicRoomData }, createPublicRoom] = useAxios(
+    {
+      method: "POST",
+    },
+    {
+      manual: true,
+    }
+  );
+
+  const handleCreatePublicRoom = async (data) => {
+    try {
+      await createPublicRoom({
+        url: `/notify/v1/rooms/create_public/`,
+        data: {
+          ...data,
+        },
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  //POST Create Private Room
+  const [{ ...createPrivateRoomData }, createPrivateRoom] = useAxios(
+    {
+      method: "POST",
+    },
+    {
+      manual: true,
+    }
+  );
+
+  const handleCreatePrivateRoom = async (data) => {
+    try {
+      await createPrivateRoom({
+        url: `/notify/v1/rooms/create_private/`,
+        data: {
+          ...data,
+        },
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  //PUT Join Group
+  const [{ ...joinGroupData }, joinGroup] = useAxios(
+    {
+      method: "PUT",
+    },
+    {
+      manual: true,
+    }
+  );
+
+  const handleJoinGroup = async () => {
+    try {
+      await joinGroup({
+        url: `/notify/v1/rooms/create_public/`,
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  //PUT Leave Group
+  const [{ ...leaveGroupData }, leaveGroup] = useAxios(
+    {
+      method: "PUT",
+    },
+    {
+      manual: true,
+    }
+  );
+
+  const handleLeaveGroup = async (id) => {
+    try {
+      await leaveGroup({
+        url: `/notify/v1/rooms/${id}/leave_group/`,
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  return {
+    getMyRoomsData,
+    handleGetMyRooms,
+    getPinnedRoomsData,
+    handleGetPinnedRooms,
+    RetrieveRoomData,
+    handleRetrieveRoom,
+    createPublicRoomData,
+    handleCreatePublicRoom,
+    createPrivateRoomData,
+    handleCreatePrivateRoom,
+    joinGroupData,
+    handleJoinGroup,
+    leaveGroupData,
+    handleLeaveGroup,
+    changePinStatusData,
+    handleChangePinStatus,
+    getAllRoomsData,
+    handleGetAllRooms,
+  };
+};
+
+export default useRooms;

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

@@ -0,0 +1,94 @@
+import { useState, useRef, useEffect } from "react";
+import { MoreIcon } from "../../assets/svg/more";
+import useRooms from "../../hooks/useRooms";
+import Avatar from "../../assets/images/avatar.jpg";
+import { HiUser, HiOfficeBuilding } from "react-icons/hi";
+import { FiMoreVertical } from "react-icons/fi";
+
+/** The top green header of an open chat
+ *
+ */
+const ChatHeader = ({
+  chatOptions,
+  setChatOptions,
+  openModal,
+  chatRecipient,
+  roomID,
+  handleChangePinStatus,
+  deleteChatModal,
+}) => {
+  // handle click outside dropdown container
+  const dropdownContainer = useRef(null);
+  const handleClickOutside = (event) => {
+    if (
+      dropdownContainer.current &&
+      !dropdownContainer.current.contains(event.target)
+    ) {
+      setChatOptions(false);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  // handle click outside dropdown container ends here
+
+  return (
+    <>
+      <div className="friend-header-section">
+        <div className="single-friend">
+          <div className="avatar-profile">
+            <img
+              src={
+                !chatRecipient?.profile_picture?.length
+                  ? Avatar
+                  : chatRecipient?.profile_picture
+              }
+              alt=""
+            />
+            {chatRecipient?.is_online && <span className="online-dot"></span>}
+          </div>
+          <div className="user-details">
+            <h5>
+              {chatRecipient?.first_name} {chatRecipient?.last_name}
+            </h5>
+            <div className="friend-tag">
+              <HiUser /> Friend
+            </div>
+            {/* <div className="instructor-tag">
+              <HiUser /> Instructor
+            </div> */}
+            {/* 
+            <div className="enterprise-tag">
+              <HiOfficeBuilding /> Enterprise
+            </div> */}
+          </div>
+        </div>
+
+        <span onClick={() => setChatOptions(!chatOptions)}>
+          <FiMoreVertical style={{ color: "#636666" }} />
+        </span>
+
+        {chatOptions && (
+          <div className="more-options" ref={dropdownContainer}>
+            <ul>
+              <li
+                onClick={() => handleChangePinStatus(roomID, { pinned: false })}
+              >
+                Pin chat
+              </li>
+              <li onClick={openModal}> Report User</li>
+              <li onClick={deleteChatModal}> Delete chat</li>
+            </ul>
+          </div>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default ChatHeader;

package/src/components/messageAddon/messages/dropdown/chat-dropdown.jsx

@@ -0,0 +1,45 @@
+import { useState, useRef, useEffect } from "react";
+import { FaChevronDown } from "react-icons/fa";
+import { Dropdown } from "../index.styled";
+
+const ChatDropdown = ({
+  text,
+  pinChat,
+  openModal,
+  deleteChatModal,
+  ref,
+  setIsBoxOneOpen,
+  setIsBoxTwoOpen,
+}) => {
+  const dropdownContainer = useRef(null);
+  const handleClickOutside = (event) => {
+    if (
+      dropdownContainer.current &&
+      !dropdownContainer.current.contains(event.target)
+    ) {
+      setIsBoxOneOpen(false);
+      setIsBoxTwoOpen(false);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <Dropdown ref={dropdownContainer}>
+      <div className="more-options">
+        <ul>
+          <li onClick={pinChat}> {text}</li>
+          <li onClick={openModal}> Report user</li>
+          <li onClick={deleteChatModal}> Delete chat</li>
+        </ul>
+      </div>
+    </Dropdown>
+  );
+};
+
+export default ChatDropdown;

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

@@ -0,0 +1,17 @@
+import React, { createContext } from "react";
+
+import MessagesContext, {
+  useMessagesContext,
+} from "../../../hooks/messagesContext";
+import Messages from "./messages";
+
+const MessagesAddon = () => {
+  const messagesContextData = useMessagesContext();
+
+  return (
+    <MessagesContext.Provider value={messagesContextData}>
+      <Messages />
+    </MessagesContext.Provider>
+  );
+};
+export default MessagesAddon;