feat: move notification form to debug

decentraland · Sep 29, 2023 · 554c2ad · 554c2ad
1 parent c5d4eba
commit 554c2ad
Show file tree

Hide file tree

Showing 2 changed files with 103 additions and 13 deletions.
diff --git a/src/components/Debug/Notifications.tsx b/src/components/Debug/Notifications.tsx
@@ -0,0 +1,88 @@
+import { useState } from 'react'
+
+import { Button } from 'decentraland-ui/dist/components/Button/Button'
+import { Field } from 'decentraland-ui/dist/components/Field/Field'
+import { SelectField } from 'decentraland-ui/dist/components/SelectField/SelectField'
+
+import { Governance } from '../../clients/Governance'
+import { NotificationType } from '../../utils/notifications'
+import Heading from '../Common/Typography/Heading'
+import { ContentSection } from '../Layout/ContentLayout'
+
+interface Props {
+  className?: string
+}
+
+export default function Notifications({ className }: Props) {
+  const [notificationType, setNotificationType] = useState(NotificationType.TARGET)
+  const [notificationAddress, setNotificationAddress] = useState('')
+  const [notificationTitle, setNotificationTitle] = useState('')
+  const [notificationBody, setNotificationBody] = useState('')
+  const [notificationURL, setNotificationURL] = useState('')
+  const [isSendingNotification, setIsSendingNotification] = useState(false)
+
+  const handleSendNotification = async (e: any) => {
+    e.preventDefault()
+    setIsSendingNotification(true)
+
+    try {
+      await Governance.get().sendNotification(
+        notificationAddress,
+        notificationTitle,
+        notificationBody,
+        notificationType,
+        notificationURL
+      )
+      setNotificationAddress('')
+      setNotificationTitle('')
+      setNotificationBody('')
+      setNotificationURL('')
+    } catch (error) {
+      console.log('Error sending notification', error)
+    }
+
+    setIsSendingNotification(false)
+  }
+
+  return (
+    <div className={className}>
+      <ContentSection>
+        <form onSubmit={handleSendNotification}>
+          <Heading size="sm">Send announcement notification</Heading>
+          <SelectField
+            value={notificationType}
+            onChange={(_, { value }) => setNotificationType(Number(value))}
+            options={[
+              { text: 'Target', value: NotificationType.TARGET },
+              { text: 'Broadcast', value: NotificationType.BROADCAST },
+            ]}
+          />
+          {notificationType === NotificationType.TARGET && (
+            <Field
+              value={notificationAddress}
+              required
+              placeholder="Address (0x...)"
+              onChange={(e) => setNotificationAddress(e.target.value)}
+            />
+          )}
+          <Field
+            value={notificationTitle}
+            required
+            placeholder="Title"
+            onChange={(e) => setNotificationTitle(e.target.value)}
+          />
+          <Field
+            value={notificationBody}
+            required
+            placeholder="Body"
+            onChange={(e) => setNotificationBody(e.target.value)}
+          />
+          <Field value={notificationURL} placeholder="URL" onChange={(e) => setNotificationURL(e.target.value)} />
+          <Button primary loading={isSendingNotification}>
+            Send
+          </Button>
+        </form>
+      </ContentSection>
+    </div>
+  )
+}
diff --git a/src/pages/debug.tsx b/src/pages/debug.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import useAuthContext from 'decentraland-gatsby/dist/context/Auth/useAuthContext'
 import { Container } from 'decentraland-ui/dist/components/Container/Container'
 
@@ -10,6 +8,7 @@ import BudgetsUpdate from '../components/Debug/BudgetsUpdate'
 import EnvStatus from '../components/Debug/EnvStatus'
 import ErrorReporting from '../components/Debug/ErrorReporting'
 import HttpStatus from '../components/Debug/HttpStatus'
+import Notifications from '../components/Debug/Notifications'
 import Snapshot from '../components/Debug/Snapshot'
 import TriggerFunction from '../components/Debug/TriggerFunction'
 import LogIn from '../components/Layout/LogIn'
@@ -27,17 +26,20 @@ export default function DebugPage() {
   }
 
   return (
-    <Container className="DebugPage">
+    <>
       <Navigation activeTab={NavigationTab.Debug} />
-      <Heading size="sm">{'Version'}</Heading>
-      <Text>{process.env.GATSBY_VERSION_NUMBER}</Text>
-      <BudgetsUpdate className="DebugPage__Section" />
-      <HttpStatus className="DebugPage__Section" />
-      <BadgesAdmin className="DebugPage__Section" />
-      <Snapshot className="DebugPage__Section" />
-      <EnvStatus className="DebugPage__Section" />
-      <TriggerFunction className="DebugPage__Section" />
-      <ErrorReporting className="DebugPage__Section" />
-    </Container>
+      <Container className="DebugPage">
+        <Heading size="sm">{'Version'}</Heading>
+        <Text>{process.env.GATSBY_VERSION_NUMBER}</Text>
+        <BudgetsUpdate className="DebugPage__Section" />
+        <HttpStatus className="DebugPage__Section" />
+        <BadgesAdmin className="DebugPage__Section" />
+        <Snapshot className="DebugPage__Section" />
+        <EnvStatus className="DebugPage__Section" />
+        <TriggerFunction className="DebugPage__Section" />
+        <ErrorReporting className="DebugPage__Section" />
+        <Notifications className="DebugPage__Section" />
+      </Container>
+    </>
   )
 }