chore: remove notification code
This commit is contained in:
@@ -1,59 +0,0 @@
|
|||||||
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 };
|
|
||||||
}
|
|
||||||
@@ -1,25 +0,0 @@
|
|||||||
import styled from "styled-components";
|
|
||||||
import useNotification from "../../common/hook/useNotification";
|
|
||||||
import StyledToggle from "../../common/component/styled/Toggle";
|
|
||||||
import Label from "../../common/component/styled/Label";
|
|
||||||
|
|
||||||
const StyledWrapper = styled.div`
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
`;
|
|
||||||
|
|
||||||
export default function Notifications() {
|
|
||||||
const { status, enableNotification } = useNotification();
|
|
||||||
const handleEnableNotify = () => {
|
|
||||||
if (status !== "granted") {
|
|
||||||
enableNotification();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<StyledWrapper>
|
|
||||||
<Label>Notification Setting:</Label>
|
|
||||||
<StyledToggle data-checked={status == "granted"} onClick={handleEnableNotify} />
|
|
||||||
</StyledWrapper>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -24,11 +24,6 @@ const navs = [
|
|||||||
component: <ManageMembers />,
|
component: <ManageMembers />,
|
||||||
admin: true
|
admin: true
|
||||||
}
|
}
|
||||||
// {
|
|
||||||
// name: "notification",
|
|
||||||
// title: "Notification",
|
|
||||||
// component: <Notifications />,
|
|
||||||
// },
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
Reference in New Issue
Block a user