From c54c4022add4f4e576d5e3540e1a8c335023c32d Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Thu, 20 Jun 2024 10:36:49 +0530
Subject: [PATCH] Errors

---
 .../new/photos/components/DevSettings.tsx     | 25 ++++++++++++-------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/web/packages/new/photos/components/DevSettings.tsx b/web/packages/new/photos/components/DevSettings.tsx
index c8e2b4a7cd..826dab11b3 100644
--- a/web/packages/new/photos/components/DevSettings.tsx
+++ b/web/packages/new/photos/components/DevSettings.tsx
@@ -34,11 +34,14 @@ export const DevSettings: React.FC<DevSettingsProps> = ({ open, onClose }) => {
         if (reason != "backdropClick") onClose();
     };
 
-    const formik = useFormik({
+    const form = useFormik({
         initialValues: { apiOrigin: "" },
-        onSubmit: (values, { setSubmitting }) => {
+        onSubmit: (values, { setSubmitting, setErrors }) => {
             setTimeout(() => {
                 alert(JSON.stringify(values));
+                if (values.apiOrigin.startsWith("test")) {
+                    setErrors({ apiOrigin: "Testing indeed" });
+                }
                 setSubmitting(false);
             }, 400);
         },
@@ -51,7 +54,7 @@ export const DevSettings: React.FC<DevSettingsProps> = ({ open, onClose }) => {
             TransitionComponent={SlideTransition}
             maxWidth="xs"
         >
-            <form onSubmit={formik.handleSubmit}>
+            <form onSubmit={form.handleSubmit}>
                 <DialogTitle>{"Developer settings"}</DialogTitle>
                 <DialogContent>
                     <DialogContentText>
@@ -60,12 +63,16 @@ export const DevSettings: React.FC<DevSettingsProps> = ({ open, onClose }) => {
                             id="apiOrigin"
                             name="apiOrigin"
                             label="Server endpoint"
-                            value={formik.values.apiOrigin}
-                            onChange={formik.handleChange}
-                            onBlur={formik.handleBlur}
+                            placeholder="http://localhost:8080"
+                            value={form.values.apiOrigin}
+                            onChange={form.handleChange}
+                            onBlur={form.handleBlur}
                             error={
-                                formik.touched.apiOrigin &&
-                                !!formik.errors.apiOrigin
+                                form.touched.apiOrigin &&
+                                !!form.errors.apiOrigin
+                            }
+                            helperText={
+                                form.touched.apiOrigin && form.errors.apiOrigin
                             }
                         />
                     </DialogContentText>
@@ -75,7 +82,7 @@ export const DevSettings: React.FC<DevSettingsProps> = ({ open, onClose }) => {
                         type="submit"
                         color="accent"
                         fullWidth
-                        disabled={formik.isSubmitting}
+                        disabled={form.isSubmitting}
                         disableRipple
                         endIcon={<ArrowForward />}
                     >