i had it right the first time, also make it prettier

codeday · Jul 18, 2024 · bff2178 · bff2178
1 parent ca1d16e
commit bff2178
Showing 1 changed file with 6 additions and 4 deletions.
diff --git a/src/pages/events/[event]/notification.js b/src/pages/events/[event]/notification.js
@@ -2,10 +2,11 @@ import React, { useState } from "react";
 import Page from "../../../components/Page";
 import Breadcrumbs from "../../../components/Breadcrumbs";
 import { useToasts } from "@codeday/topo/utils";
-import {Heading, Text, TextInput, Textarea, Checkbox, Button} from "@codeday/topo/Atom";
+import {Heading, Text, TextInput, Textarea, Checkbox, Button, FormErrorMessage} from "@codeday/topo/Atom";
 import {getSession} from "next-auth/react";
 import {SendNotification, getEventQuery} from "./notification.gql"
 import {useFetcher, getFetcher} from "../../../fetch";
+import Alert from "../../../components/Alert";
 
 const MAX_SMS_LENGTH = 280
 
@@ -38,15 +39,16 @@ export default function Notification({event}) {
  mb={2}
  />
  <Textarea
- placeholder={`SMS/WhatsApp Body (Max ${MAX_SMS_LENGTH} char})`}
+ placeholder={`SMS/WhatsApp Body (Max ${MAX_SMS_LENGTH} char)`}
  value={smsBody}
  onChange={(e) => setSmsBody(e.target.value)}
  mb={2}
  isInvalid={smsBody.length > MAX_SMS_LENGTH}
  />
+ { smsBody.length > MAX_SMS_LENGTH ? <Alert>SMS/WhatsApp Body must be {MAX_SMS_LENGTH} characters or less</Alert> : <></>}
  <Button
  isLoading={isLoading}
- disabled={smsBody.length <= MAX_SMS_LENGTH && !(smsBody || (emailBody && emailSubject))}
+ isDisabled={(smsBody.length >= MAX_SMS_LENGTH) || !(smsBody || (emailBody && emailSubject))}
  onClick={async () => {
  success(`Notification sent.`);
  setIsLoading(true);
@@ -65,7 +67,7 @@ export default function Notification({event}) {
  setIsLoading(false);
  }}
  >
- Send
+ Send {smsBody.length}
  </Button>
  <Checkbox ml={2} mt={2} checked={guardian} onChange={(e) => setGuardian(e.target.checked)}>Send to guardian instead.</Checkbox>
  </Page>