chore: updates

src/common/component/ChannelSetting/DeleteConfirmModal.js

@@ -2,9 +2,6 @@
 import { useEffect } from "react";
 import toast from "react-hot-toast";
 import { useNavigate, useMatch } from "react-router-dom";
-import { useDispatch } from "react-redux";
-import { toggleChannelSetting } from "../../../app/slices/ui";
-import { removeChannel } from "../../../app/slices/channels";
 import Modal from "../Modal";
 // import BASE_URL from "../../app/config";
 import { useLazyRemoveChannelQuery } from "../../../app/services/channel";
@@ -13,7 +10,6 @@ import Button from "../styled/Button";
 
 export default function DeleteConfirmModal({ id, closeModal }) {
   const navigateTo = useNavigate();
-  const dispatch = useDispatch();
   const pathMatched = useMatch(`/chat/channel/${id}`);
   const [deleteChannel, { isLoading, isSuccess }] = useLazyRemoveChannelQuery();
   const handleDelete = () => {
@@ -22,11 +18,10 @@ export default function DeleteConfirmModal({ id, closeModal }) {
   useEffect(() => {
     if (isSuccess) {
       toast.success("delete channel successfully!");
-      dispatch(removeChannel(id));
-      dispatch(toggleChannelSetting());
       if (pathMatched) {
         navigateTo("/chat");
       }
+      closeModal();
     }
   }, [isSuccess, id, pathMatched]);
   if (!id) return null;

src/common/component/ContextMenu.js

@@ -18,8 +18,9 @@ export default function ContextMenu({
   useOutsideClick(wrapperRef, hideMenu);
   return (
     <StyledWrapper ref={wrapperRef} x={posX} y={posY}>
-      {items.map(
-        ({
+      {items.map((item) => {
+        if (!item) return null;
+        const {
           title,
           handler = (evt) => {
             evt.preventDefault();
@@ -27,20 +28,22 @@ export default function ContextMenu({
           },
           underline = false,
           danger = false,
-        }) => {
-          return (
-            <li
-              className={`item ${underline ? "underline" : ""} ${
-                danger ? "danger" : ""
-              }`}
-              key={title}
-              onClick={handler}
-            >
-              {title}
-            </li>
-          );
-        }
-      )}
+        } = item;
+        return (
+          <li
+            className={`item ${underline ? "underline" : ""} ${
+              danger ? "danger" : ""
+            }`}
+            key={title}
+            onClick={(evt) => {
+              handler(evt);
+              hideMenu();
+            }}
+          >
+            {title}
+          </li>
+        );
+      })}
     </StyledWrapper>
   );
 }

src/common/component/Setting/Notifications.js

@@ -1,6 +1,6 @@
 // import React from "react";
 import styled from "styled-components";
-import useNotification from "../NotificationHub/useNotification";
+import useNotification from "../../hook/useNotification";
 import StyledToggle from "../styled/Toggle";
 import Label from "../styled/Label";
 const StyledWrapper = styled.div`

src/common/hook/useChatScroll.js

@@ -22,7 +22,9 @@ function useChatScroll(dep) {
     console.log("chat scroll", ref);
     if (ref.current) {
       setTimeout(() => {
-        ref.current.scrollTop = ref.current.scrollHeight;
+        if (ref.current) {
+          ref.current.scrollTop = ref.current.scrollHeight;
+        }
       }, 20);
     }
   }, [dep]);

src/common/hook/useNotification.js

@@ -0,0 +1,65 @@
+import { useEffect, useState } from "react";
+// import { useNavigate } from "react-router-dom";
+const isSafariBrowser = () =>
+  navigator.userAgent.indexOf("Safari") > -1 &&
+  navigator.userAgent.indexOf("Chrome") <= -1;
+export default function useNotification() {
+  // const navigate = useNavigate();
+  // granted default denied  /
+  const [status, setStatus] = useState(Notification.permission);
+  const [pageVisible, setPageVisible] = useState(true);
+  useEffect(() => {
+    const visibleChangeHandler = () => {
+      setPageVisible(document.visibilityState === "visible");
+    };
+    const notifyPermissionChangeHandler = (state) => {
+      setStatus(state);
+    };
+    document.addEventListener("visibilitychange", visibleChangeHandler);
+    if (!isSafariBrowser) {
+      navigator.permissions
+        .query({ name: "notifications" })
+        .then(function (permissionStatus) {
+          console.log(
+            "notifications permission status is ",
+            permissionStatus.state
+          );
+          permissionStatus.onchange = notifyPermissionChangeHandler.bind(
+            null,
+            permissionStatus.state
+          );
+        });
+    }
+    return () => {
+      document.removeEventListener("visibilitychange", visibleChangeHandler);
+    };
+  }, []);
+  const enableNotification = () => {
+    if (status !== "granted") {
+      Notification.requestPermission().then((permission) => {
+        console.log(permission);
+        setStatus(permission);
+      });
+    }
+  };
+  const showNotification = (payload = {}) => {
+    console.log("show notify", payload, pageVisible);
+    if (status !== "granted" || pageVisible) return;
+    const {
+      title = "New Message",
+      body = "You have one new message",
+      icon = "https://static.nicegoodthings.com/project/ext/webrowse.logo.png",
+    } = payload;
+    new Notification(title, { body, icon });
+    // const n = new Notification(title, { body, icon });
+    // n.onclick = (evt) => {
+    //   const { data } = evt.target;
+
+    //   console.log("notify evt", evt);
+    //   if (data && data.path) {
+    //     navigate(data.path);
+    //   }
+    // };
+  };
+  return { status, enableNotification, showNotification };
+}