diff --git a/.env.example b/.env.example index 1b30c93..bf31239 100644 --- a/.env.example +++ b/.env.example @@ -5,12 +5,6 @@ NEXT_PUBLIC_EVENT_SLUG= NEXT_PUBLIC_EVENT_READY= -NEXT_PUBLIC_FIREBASE_API_KEY= -NEXT_PUBLIC_FIREBASE_MESSAGE_ID= -NEXT_PUBLIC_FIREBASE_PUBLIC_KEY= -NEXT_PUBLIC_FIREBASE_SERVER_KEY= -NEXT_PUBLIC_FIREBASE_APP_ID= -NEXT_PUBLIC_MESSAGING_TOPIC= NEXT_PUBLIC_GOOGLE_TAG= NEXT_PUBLIC_EVENT_SLUG_2022= diff --git a/components/layouts/components/NotificationsPrompt.tsx b/components/layouts/components/NotificationsPrompt.tsx deleted file mode 100644 index e01d9d4..0000000 --- a/components/layouts/components/NotificationsPrompt.tsx +++ /dev/null @@ -1,187 +0,0 @@ -import { toast } from 'react-toastify' -import axios from 'axios' -import { useCallback, useEffect, useState } from 'react' -import { - getMessaging, - getToken, - isSupported, - onMessage, -} from 'firebase/messaging' -import { NOTIFICATIONS } from '../../../utils/constants' -import app from '../../../firebase/util' -import { isClient } from '../../../utils/helpers' - -export const NotificationsPrompt = () => { - const toggleModal = () => { - const body = document.querySelector('body') - const modals = document.querySelectorAll('#notification-modal') - for (let i = 0; i < modals.length; i += 1) { - modals[i].classList.toggle('opacity-0') - modals[i].classList.toggle('pointer-events-none') - } - body?.classList.toggle('modal-active') - } - - const isTokenSentToServer = () => { - return localStorage.getItem(NOTIFICATIONS) === '1' - } - - const setTokenSentToServer = (sent: boolean) => { - localStorage.setItem(NOTIFICATIONS, sent ? '1' : '0') - } - const setTokenToTopic = (token: string) => { - axios.get(`/api/notification?token=${token}`) - } - - const sendTokenToServer = useCallback((currentToken: string) => { - if (!isTokenSentToServer()) { - // console.log('Sending token to server...') - setTokenToTopic(currentToken) - setTokenSentToServer(true) - } else { - // console.log("Token already sent to server so won't send it again ") - } - }, []) - const promptNotifications = () => { - const messaging = getMessaging(app) - if (!('Notification' in window)) { - toggleModal() - setTokenSentToServer(true) - } else { - Notification.requestPermission().then((permission) => { - // console.log('Notification permission granted.') - toggleModal() - // Get Token - if (permission === 'granted') { - toast.success('You will receive regular updates from droidconKe') - getToken(messaging, { vapidKey: process.env.FIREBASE_PUBLIC_KEY }) - .then((token) => { - // console.log(token) - sendTokenToServer(token) - }) - // eslint-disable-next-line @typescript-eslint/no-unused-vars - .catch((err) => { - // console.log('An error occurred while retrieving token. ', err) - }) - } else if (permission === 'denied') { - toast.error("Notifications from droidconKe won't be sent to you") - // console.log('Unable to get permission to notify.') - } - }) - } - } - - const rejectPrompt = () => { - toggleModal() - setTokenSentToServer(true) - toast.error("Notifications from droidconKe won't be sent to you") - } - - const [isMessageSupported, setIsSupported] = useState(false) - useEffect(() => { - const isMessage = async () => { - setIsSupported(await isSupported()) - } - isMessage() - if (isMessageSupported && isClient) { - // console.log('Messaging Supported') - const messaging = getMessaging(app) - - if (Notification.permission === 'granted') { - // console.log('allowed') - getToken(messaging, { vapidKey: process.env.FIREBASE_PUBLIC_KEY }) - .then((token) => { - // console.log(token) - sendTokenToServer(token) - }) - // eslint-disable-next-line @typescript-eslint/no-unused-vars - .catch((err) => { - // console.log('An error occurred while retrieving token. ', err) - }) - } else if ( - // Notification.permission === 'blocked' || - Notification.permission === 'denied' - ) { - /* the user has previously denied push. Can't reprompt. */ - // console.log('denied') - } else if ( - Notification.permission === 'default' && - !isTokenSentToServer() - ) { - // console.log('default') - toggleModal() - } - // Callback fired if Instance ID token is updated. - // messaging.onTokenRefresh( () { - // getToken(messaging, { vapidKey: process.env.FIREBASE_PUBLIC_KEY }) - // .then( (refreshedToken) => { - // // console.log('Token refreshed.') - // // to the app server. - // setTokenSentToServer(false) - // // Send Instance ID token to app server. - // sendTokenToServer(refreshedToken) - // }) - // .catch( (err) => { - // // console.log('Unable to retrieve refreshed token ', err) - // setTokenSentToServer(false) - // }) - // }) - - // eslint-disable-next-line @typescript-eslint/no-unused-vars - onMessage(messaging, (payload) => { - // console.log('Message received. ', payload) - }) - } else { - // console.log('Not Supported') - } - }, [isMessageSupported, sendTokenToServer]) - - return ( -
-
-
- -
-
-

- DroidconKe want to show notifications! -

-
- - -
-
-
-
- notif -
-
- - Allow Notifications to get regular updates - -
-
-
-
-
- ) -} diff --git a/components/layouts/default.tsx b/components/layouts/default.tsx index c5f9aa2..0787001 100644 --- a/components/layouts/default.tsx +++ b/components/layouts/default.tsx @@ -4,7 +4,6 @@ import React, { ReactNode } from 'react' import { ThemeProvider } from '../../context/ThemeContext' import { Footer } from './components/Footer' import { NavBar } from './components/NavBar' -import { NotificationsPrompt } from './components/NotificationsPrompt' import { UpdatesAvailablePrompt } from './components/UpdatesAvailablePrompt' import { EventFeedback } from './components/EventFeedback' @@ -27,7 +26,6 @@ export default function Layout({ children }: { children: ReactNode }) {