Add client-side validation, tooltip, go to link and design for Facebo…

…ok And Instagram contact field (#2203) * completed issue * fixed placeholders
hackforla · Sep 17, 2024 · 6c43cd5 · 6c43cd5
1 parent 726ef71
commit 6c43cd5
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 11 deletions.
diff --git a/client/src/components/Admin/OrganizationEdit.js b/client/src/components/Admin/OrganizationEdit.js
@@ -51,6 +51,13 @@ const validationSchema = Yup.object().shape({
   longitude: Yup.number().required("Longitude is required").min(-180).max(180),
   email: Yup.string().email("Invalid email address format"),
   hours: Yup.array().of(HourSchema),
+  instagram: Yup.string()
+    .transform((value, originalValue) => (originalValue === "" ? null : value))
+    .matches(
+      /^(?:@?[a-zA-Z0-9_.]{1,30})$/,
+      "Valid Instagram username required."
+    )
+    .nullable(),
   twitter: Yup.string()
     .transform((value, originalValue) => (originalValue === "" ? null : value))
     .matches(/^(?:@?[a-zA-Z0-9_]{1,15})$/, "Valid Twitter username required.")
@@ -65,6 +72,12 @@ const validationSchema = Yup.object().shape({
       "Valid Pinterest username is required."
     )
     .nullable(),
+  facebook: Yup.string()
+    .matches(
+      /^[a-zA-Z][a-zA-Z0-9.]{4,49}$/,
+      "Valid Facebook username required."
+    )
+    .nullable(),
 
   selectedCategoryIds: Yup.array().min(
     1,

diff --git a/client/src/components/Admin/OrganizationEdit/ContactDetails.js b/client/src/components/Admin/OrganizationEdit/ContactDetails.js
@@ -85,31 +85,45 @@ export default function ContactDetails({
         </Grid>
         <Grid item sm={6} xs={12}>
           <div>
-            <Label id="instagram" label="Instagram" />
-            <TextField
+            <Label
+              id="instagram"
+              label="Instagram"
+              tooltipTitle="Enter your Instagram username"
+              href="https://instagram.com/"
+              handle={values.instagram}
+            />
+            <CustomTextFieldComponent
               id="instagram"
               name="instagram"
-              placeholder="Instagram"
+              placeholder="Instagram username"
               value={values.instagram}
               onChange={handleChange}
               onBlur={handleBlur}
-              helperText={touched.instagram ? errors.instagram : ""}
-              error={touched.instagram && Boolean(errors.instagram)}
+              touched={touched.instagram}
+              errors={errors.instagram}
+              startAdornment="https://instagram.com/"
             />
           </div>
         </Grid>
         <Grid item sm={6} xs={12}>
           <div>
-            <Label id="facebook" label="Facebook" />
-            <TextField
+            <Label
+              id="facebook"
+              label="Facebook"
+              tooltipTitle="Enter your Facebook username"
+              href="https://facebook.com/"
+              handle={values.facebook}
+            />
+            <CustomTextFieldComponent
               id="facebook"
               name="facebook"
-              placeholder="Facebook"
+              placeholder="Facebook username"
               value={values.facebook}
               onChange={handleChange}
               onBlur={handleBlur}
-              helperText={touched.facebook ? errors.facebook : ""}
-              error={touched.facebook && Boolean(errors.facebook)}
+              touched={touched.facebook}
+              errors={errors.facebook}
+              startAdornment="https://facebook.com/"
             />
           </div>
         </Grid>
@@ -125,7 +139,7 @@ export default function ContactDetails({
             <CustomTextFieldComponent
               id="twitter"
               name="twitter"
-              placeholder="Twitter handle"
+              placeholder="Twitter username"
               value={values.twitter}
               onChange={handleChange}
               onBlur={handleBlur}