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`