From 2770090d84d84c223fc4db84a360641b45373360 Mon Sep 17 00:00:00 2001
From: Michael Quigley <michael@quigley.com>
Date: Tue, 19 Nov 2024 21:39:33 -0500
Subject: [PATCH] better idiom (#221)

---
 agent/agentUi/src/NewAccessModal.tsx | 9 +++++----
 agent/agentUi/src/NewShareModal.tsx  | 7 ++++---
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/agent/agentUi/src/NewAccessModal.tsx b/agent/agentUi/src/NewAccessModal.tsx
index 9470c6e6..7fc94cfe 100644
--- a/agent/agentUi/src/NewAccessModal.tsx
+++ b/agent/agentUi/src/NewAccessModal.tsx
@@ -3,6 +3,7 @@ import {useFormik} from "formik";
 import {GetAgentApi} from "./model/api.ts";
 import {Box, Button, Modal, TextField, Typography} from "@mui/material";
 import {modalStyle} from "./model/theme.ts";
+import * as React from "react";
 
 interface NewAccessModalProps {
     close: () => void;
@@ -10,7 +11,7 @@ interface NewAccessModalProps {
 }
 
 const NewAccessModal = ({ close, isOpen }: NewAccessModalProps) => {
-    const [errorMessage, setErrorMessage] = useState(<></>);
+    const [errorMessage, setErrorMessage] = useState(null as React.JSX.Element);
 
     const newAccessForm = useFormik({
         initialValues: {
@@ -18,14 +19,14 @@ const NewAccessModal = ({ close, isOpen }: NewAccessModalProps) => {
             bindAddress: "",
         },
         onSubmit: v => {
-            setErrorMessage(<></>);
+            setErrorMessage(null as React.JSX.Element);
             GetAgentApi().agentAccessPrivate(v)
                 .then(r => {
                     close();
                 })
                 .catch(e => {
                     e.response.json().then(ex => {
-                        setErrorMessage(<p>{ex.message}</p>);
+                        setErrorMessage(<span>{ex.message}</span>);
                         console.log(ex.message);
                     })
                 });
@@ -38,7 +39,7 @@ const NewAccessModal = ({ close, isOpen }: NewAccessModalProps) => {
                   <Typography>
                       <h2>Access...</h2>
                   </Typography>
-                  {errorMessage}
+                  <Typography color={"red"}><h3>{errorMessage}</h3></Typography>
                   <form onSubmit={newAccessForm.handleSubmit}>
                       <TextField
                           fullWidth
diff --git a/agent/agentUi/src/NewShareModal.tsx b/agent/agentUi/src/NewShareModal.tsx
index e14b2b77..d9d4ff66 100644
--- a/agent/agentUi/src/NewShareModal.tsx
+++ b/agent/agentUi/src/NewShareModal.tsx
@@ -3,6 +3,7 @@ import {GetAgentApi} from "./model/api.ts";
 import {useState} from "react";
 import {Box, Button, Checkbox, FormControlLabel, MenuItem, Modal, TextField, Typography} from "@mui/material";
 import {modalStyle} from "./model/theme.ts";
+import * as React from "react";
 
 interface NewShareModalProps {
     close: () => void;
@@ -10,7 +11,7 @@ interface NewShareModalProps {
 }
 
 const NewShareModal = ({ close, isOpen }: NewShareModalProps) => {
-    const [errorMessage, setErrorMessage] = useState(<></>);
+    const [errorMessage, setErrorMessage] = useState(null as React.JSX.Element);
 
     const form = useFormik({
         initialValues: {
@@ -20,7 +21,7 @@ const NewShareModal = ({ close, isOpen }: NewShareModalProps) => {
             insecure: false,
         },
         onSubmit: v => {
-            setErrorMessage(<></>);
+            setErrorMessage(null as React.JSX.Element);
             switch(v.shareMode) {
                 case "public":
                     GetAgentApi().agentSharePublic(v)
@@ -29,7 +30,7 @@ const NewShareModal = ({ close, isOpen }: NewShareModalProps) => {
                         })
                         .catch(e => {
                             e.response().json().then(ex => {
-                                setErrorMessage(<p>{ex.message}</p>);
+                                setErrorMessage(<span>{ex.message}</span>);
                                 console.log(ex.message);
                             })
                         });