- only show notification target when necessary

- store firebase token correctly
- show readable name for notification target when and type

components/NotificationTargets/NotificationTargetForm.tsx

@@ -3,9 +3,11 @@
 import { useState } from 'react'
 import { Button, Form } from 'react-bootstrap'
 import api from '../../api/ApiHelper'
+import askForNotificationPermissons from '../../utils/NotificationPermisson'
+import { getNotficationWhenEnumAsString, getNotificationTypeAsString } from '../../utils/NotificationUtils'
 
-const TYPE_OPTIONS = ['WEBHOOK', 'DISCORD', 'DiscordWebhook', 'FIREBASE', 'EMAIL', 'InGame']
-const WHEN_OPITIONS = ['NEVER', 'AFTER_FAIL', 'ALWAYS']
+const TYPE_OPTIONS: NotificationType[] = ['WEBHOOK', 'DISCORD', 'DiscordWebhook', 'FIREBASE', 'EMAIL', 'InGame']
+const WHEN_OPITIONS: NotificationWhen[] = ['NEVER', 'AFTER_FAIL', 'ALWAYS']
 
 interface Props {
     type: 'CREATE' | 'UPDATE'
@@ -15,23 +17,38 @@ interface Props {
 
 function NotificationTargetForm(props: Props) {
     let [name, setName] = useState<string>(props.defaultNotificationTarget?.name || '')
-    let [type, setType] = useState<'WEBHOOK' | 'DISCORD' | 'DiscordWebhook' | 'FIREBASE' | 'EMAIL' | 'InGame'>(
+    let [type, setType] = useState<'WEBHOOK' | 'DISCORD' | 'DiscordWebhook' | 'FIREBASE' | 'EMAIL' | 'InGame' | number>(
         props.defaultNotificationTarget?.type || 'FIREBASE'
     )
     let [target, setTarget] = useState<string | null>(props.defaultNotificationTarget?.target || null)
-    let [when, setWhen] = useState<'NEVER' | 'AFTER_FAIL' | 'ALWAYS'>(props.defaultNotificationTarget?.when || 'ALWAYS')
+    let [when, setWhen] = useState<'NEVER' | 'AFTER_FAIL' | 'ALWAYS' | number>(props.defaultNotificationTarget?.when || 'ALWAYS')
     let [disabled, setDisabled] = useState(false)
 
-    function addNotificationTarget() {
+    async function addNotificationTarget() {
+        console.log(when)
+        let targetToSend = target
+
+        if (type === 'FIREBASE') {
+            if (localStorage.getItem('fcmToken') === null) {
+                let token = await askForNotificationPermissons()
+                await api.setToken(token)
+                localStorage.setItem('fcmToken', token)
+                targetToSend = token
+            } else {
+                targetToSend = localStorage.getItem('fcmToken') as string
+            }
+        }
+
         setDisabled(true)
         let notificationTarget: NotificationTarget = {
             id: props.defaultNotificationTarget?.id,
             name: name,
             type: type,
-            target: target,
+            target: targetToSend,
             when: when,
             useCount: 0
         }
+
         let updateOrCreateFunction = props.type === 'CREATE' ? api.addNotificationTarget : api.updateNotificationTarget
         updateOrCreateFunction(notificationTarget)
             .then(newTarget => {
@@ -54,21 +71,23 @@ function NotificationTargetForm(props: Props) {
                     <Form.Select defaultValue={type} onChange={e => setType(e.target.value as any)}>
                         {TYPE_OPTIONS.map(type => (
                             <option value={type} key={type}>
-                                {type}
+                                {getNotificationTypeAsString(type)}
                             </option>
                         ))}
                     </Form.Select>
                 </Form.Group>
-                <Form.Group className="mb-3">
-                    <Form.Label>Target</Form.Label>
-                    <Form.Control defaultValue={target || undefined} type="text" onChange={e => setTarget(e.target.value)} placeholder="Enter target" />
-                </Form.Group>
+                {type === 'WEBHOOK' || type === 'DiscordWebhook' ? (
+                    <Form.Group className="mb-3">
+                        <Form.Label>Target</Form.Label>
+                        <Form.Control defaultValue={target || undefined} type="text" onChange={e => setTarget(e.target.value)} placeholder="Enter target" />
+                    </Form.Group>
+                ) : null}
                 <Form.Group className="mb-3">
                     <Form.Label>When</Form.Label>
                     <Form.Select defaultValue={when} onChange={e => setWhen(e.target.value as any)}>
                         {WHEN_OPITIONS.map(when => (
                             <option value={when} key={when}>
-                                {when}
+                                {getNotficationWhenEnumAsString(when)}
                             </option>
                         ))}
                     </Form.Select>

components/NotificationTargets/NotificationTargets.tsx

@@ -7,6 +7,7 @@ import NotificationTargetForm from './NotificationTargetForm'
 import DeleteIcon from '@mui/icons-material/Delete'
 import EditIcon from '@mui/icons-material/Edit'
 import { getLoadingElement } from '../../utils/LoadingUtils'
+import { getNotficationWhenEnumAsString, getNotificationTypeAsString } from '../../utils/NotificationUtils'
 
 function NotificationTargets() {
     let [notificationTargets, setNotificationTargets] = useState<NotificationTarget[]>([])
@@ -93,8 +94,8 @@ function NotificationTargets() {
                                     <td className="ellipse" style={{ maxWidth: '250px' }} title={target.target || ''}>
                                         {target.target}
                                     </td>
-                                    <td>{target.type}</td>
-                                    <td>{target.when}</td>
+                                    <td>{getNotificationTypeAsString(target.type as number)}</td>
+                                    <td>{getNotficationWhenEnumAsString(target.when as number)}</td>
                                     <td>{target.useCount || 0}</td>
                                     <td>
                                         <Button

components/SubscribeButton/SubscribeButton.tsx

@@ -53,14 +53,15 @@ function SubscribeButton(props: Props) {
     let [selectedNotificationTargets, setSelectedNotificationTargets] = useState<NotificationTarget[]>([])
     let [isLoadingNotificationTargets, setIsLoadingNotificationTargets] = useState(false)
 
-    function onSubscribe() {
+    async function onSubscribe() {
         trackEvent({ action: 'subscribed', category: 'subscriptions' })
         setShowDialog(false)
         // Set price to 0 per default for item subscriptions
         // This happens if a user only selects a filter and leaves the price field empty
         if (props.type === 'item' && !price) {
             price = '0'
         }
+
         api.subscribe(props.topic, getSubscriptionTypes(), selectedNotificationTargets, price ? parseInt(price) : undefined, itemFilter)
             .then(() => {
                 toast.success(props.successMessage || 'Notifier successfully created!', {
@@ -113,14 +114,6 @@ function SubscribeButton(props: Props) {
 
     function onLogin() {
         setIsLoggedIn(true)
-        askForNotificationPermissons().then(token => {
-            api.setToken(token).then(() => {
-                if (props.type === 'auction') {
-                    onSubscribe()
-                    setShowDialog(false)
-                }
-            })
-        })
     }
 
     function isNotifyDisabled() {

global.d.ts

@@ -632,10 +632,14 @@ interface Transaction {
     timeStamp: Date
 }
 
+type NotificationType = 'WEBHOOK' | 'DISCORD' | 'DiscordWebhook' | 'FIREBASE' | 'EMAIL' | 'InGame' | 'DiscordWebhook'
+
+type NotificationWhen = 'NEVER' | 'AFTER_FAIL' | 'ALWAYS'
+
 interface NotificationTarget {
     id: number | undefined
-    type: 'WEBHOOK' | 'DISCORD' | 'DiscordWebhook' | 'FIREBASE' | 'EMAIL' | 'InGame'
-    when: 'NEVER' | 'AFTER_FAIL' | 'ALWAYS'
+    type: NotificaitonType | number
+    when: NotificationWhen | number
     target: string | null
     name: string | null
     useCount: number

utils/NotificationPermisson.tsx

@@ -18,7 +18,7 @@ export default function askForNotificationPermissons(): Promise<string> {
                     vapidKey: 'BESZjJEHTRUVz5_8NW-jjOToWiSJFZHDzK9AYZP6No8cqGHkP7UQ_1XnEPqShuQtGj8lvtjBlkfoV86m_PadW30'
                 })
                 .then((token: string) => {
-                    localStorage.fcmToken = token
+                    localStorage.setItem('fcmToken', token)
                     resolve(token)
                 })
         }

utils/NotificationUtils.tsx

@@ -35,3 +35,44 @@ export default function registerNotificationCallback(router) {
         cacheUtils.setIntoCache('auctionDetails', JSON.stringify(auction.uuid), auction, 60)
     }
 }
+
+export function getNotificationTypeAsString(type: NotificationType | number): string {
+    switch (type) {
+        case 1:
+        case 'WEBHOOK':
+            return 'Webhook'
+        case 2:
+        case 'DISCORD':
+            return 'Discord'
+        case 3:
+        case 'DiscordWebhook':
+            return 'Discord Webhook'
+        case 4:
+        case 'FIREBASE':
+            return 'Firebase'
+        case 5:
+        case 'EMAIL':
+            return 'E-Mail'
+        case 6:
+        case 'InGame':
+            return 'InGame'
+        default:
+            return 'Unknown'
+    }
+}
+
+export function getNotficationWhenEnumAsString(when: NotificationWhen | number): string {
+    switch (when) {
+        case 0:
+        case 'NEVER':
+            return 'Never'
+        case 1:
+        case 'AFTER_FAIL':
+            return 'After fail'
+        case 2:
+        case 'ALWAYS':
+            return 'Always'
+        default:
+            return 'Never'
+    }
+}