From 5d0496ea82ef616d1bb99dfffd140853eb937fad Mon Sep 17 00:00:00 2001 From: zerosoul Date: Fri, 18 Mar 2022 16:34:36 +0800 Subject: [PATCH] chore: updates --- .../ChannelSetting/DeleteConfirmModal.js | 7 +- src/common/component/ContextMenu.js | 35 +++++----- src/common/component/Setting/Notifications.js | 2 +- src/common/hook/useChatScroll.js | 4 +- src/common/hook/useNotification.js | 65 +++++++++++++++++++ 5 files changed, 89 insertions(+), 24 deletions(-) create mode 100644 src/common/hook/useNotification.js diff --git a/src/common/component/ChannelSetting/DeleteConfirmModal.js b/src/common/component/ChannelSetting/DeleteConfirmModal.js index 1101211e..3bc2e59d 100644 --- a/src/common/component/ChannelSetting/DeleteConfirmModal.js +++ b/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; diff --git a/src/common/component/ContextMenu.js b/src/common/component/ContextMenu.js index 805a1a0a..a646bc9c 100644 --- a/src/common/component/ContextMenu.js +++ b/src/common/component/ContextMenu.js @@ -18,8 +18,9 @@ export default function ContextMenu({ useOutsideClick(wrapperRef, hideMenu); return ( - {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 ( -
  • - {title} -
    • - ); - } - )} + } = item; + return ( +
  • { + handler(evt); + hideMenu(); + }} + > + {title} +
    • + ); + })}     ); } diff --git a/src/common/component/Setting/Notifications.js b/src/common/component/Setting/Notifications.js index 9c03fc71..4f026082 100644 --- a/src/common/component/Setting/Notifications.js +++ b/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` diff --git a/src/common/hook/useChatScroll.js b/src/common/hook/useChatScroll.js index 0cea8f98..49fd1fdf 100644 --- a/src/common/hook/useChatScroll.js +++ b/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]); diff --git a/src/common/hook/useNotification.js b/src/common/hook/useNotification.js new file mode 100644 index 00000000..efaffe10 --- /dev/null +++ b/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 }; +}