feat: Validate Google drive, but not sure how to use custom error msg

hackforla · Oct 9, 2023 · 748ac43 · 748ac43
1 parent 942b871
commit 748ac43
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 53 deletions.
diff --git a/client/src/components/data.js b/client/src/components/data.js
@@ -12,7 +12,8 @@ export const simpleInputs = [
     type: 'textarea',
     placeholder: 'Enter project description',
     value: /^[a-zA-Z0-9].{0,250}$/,
-    errorMessage: 'Description must start with alphanumeric characters, 250 char limit'
+    errorMessage:
+      'Description must start with alphanumeric characters, 250 char limit',
   },
   {
     label: 'Location',
@@ -34,24 +35,27 @@ export const simpleInputs = [
     label: 'GitHub URL',
     name: 'githubUrl',
     type: 'text',
-    placeholder: 'htttps://github.com/',
+    placeholder: 'https://github.com/',
   },
   {
     label: 'Slack Channel Link',
     name: 'slackUrl',
     type: 'text',
-    placeholder: 'htttps://slack.com/',
+    placeholder: 'https://slack.com/',
   },
   {
     label: 'Google Drive URL',
     name: 'googleDriveUrl',
     type: 'text',
-    placeholder: 'htttps://drive.google.com/',
+    placeholder: 'https://drive.google.com/',
+    validate: function (value) {
+      return value.startsWith('https://drive.google.com/');
+    },
   },
   {
     label: 'HFLA Website URL',
     name: 'hflaWebsiteUrl',
     type: 'text',
-    placeholder: 'htttps://hackforla.org/projects/',
+    placeholder: 'https://hackforla.org/projects/',
   },
-];
+];
diff --git a/client/src/components/manageProjects/editProject.js b/client/src/components/manageProjects/editProject.js
@@ -99,7 +99,8 @@ const EditProject = ({
         setFormData={setFormData}
       />
 
-      <TitledBox title="Recurring Events"
+      <TitledBox
+        title="Recurring Events"
         badge={
           <Box
             sx={{
@@ -147,9 +148,12 @@ const EditProject = ({
           <h2 className="event-alert">{eventAlert}</h2>
           <ul>
             {regularEventsState.map((event, index) => (
-
               // eslint-dis able-next-line no-underscore-dangle
-              <RegularEvent event={event} key={event._id} updateRegularEvent={updateRegularEvent} />
+              <RegularEvent
+                event={event}
+                key={event._id}
+                updateRegularEvent={updateRegularEvent}
+              />
             ))}
           </ul>
         </div>
@@ -161,17 +165,27 @@ const EditProject = ({
 function RegularEvent({ event, updateRegularEvent }) {
   return (
     <li key={`${event.event_id}`}>
-      <button type="button" onClick={async () => updateRegularEvent({ checkInReady: !event.checkInReady }, event.event_id)}>
+      <button
+        type="button"
+        onClick={async () =>
+          updateRegularEvent(
+            { checkInReady: !event.checkInReady },
+            event.event_id
+          )
+        }
+      >
         <div>{event.name}</div>
         <div className="event-list-details">
-          {`${event.dayOfTheWeek}, ${event.startTime} - ${event.endTime}; ${event.eventType}`} {`${new Date(event.raw.startTime).toLocaleDateString()}`}
+          {`${event.dayOfTheWeek}, ${event.startTime} - ${event.endTime}; ${event.eventType}`}{' '}
+          {`${new Date(event.raw.startTime).toLocaleDateString()}`}
+        </div>
+        <div className="event-list-description">
+          Is this event available for check in now?:{' '}
+          <strong>{`${event.checkInReady ? 'Yes' : 'No'}`}</strong>
         </div>
-        <div className="event-list-description">Is this event available for check in now?: <strong>{`${event.checkInReady ? "Yes" : "No"}`}</strong></div>
       </button>
     </li>
-  )
+  );
 }
 
-
-
 export default EditProject;
diff --git a/client/src/components/parts/form/ValidatedTextField.js b/client/src/components/parts/form/ValidatedTextField.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Grid, InputLabel, TextField } from "@mui/material";
+import { Box, Grid, InputLabel, TextField } from '@mui/material';
 
 /**
  * A validated text field component for forms.
@@ -26,45 +26,50 @@ function ValidatedTextField({
 }) {
   const registerObj = {
     ...register(input.name, {
-    required: `${input.name} is required`,
-    pattern:
-      input.name === 'location'
-        ? locationType === 'remote'
-          ? {
-              value: input.value,
-              message: input.errorMessage,
-            }
-          : {
-              value: input.addressValue,
-              message: input.addressError,
-            }
-        : { value: input.value, message: input.errorMessage },
-    }
-  )}
+      required: `${input.name} is required`,
+      pattern:
+        input.name === 'location'
+          ? locationType === 'remote'
+            ? {
+                value: input.value,
+                message: input.errorMessage,
+              }
+            : {
+                value: input.addressValue,
+                message: input.addressError,
+              }
+          : { value: input.value, message: input.errorMessage },
+      validate: (value) => {
+        if (input.validate) {
+          return input.validate(value);
+        } else return true;
+      },
+    }),
+  };
 
   return (
-  <Box sx={{ mb: 1 }} key={input.name}>
-    <Grid container alignItems="center">
-      <Grid item xs="auto" sx={{ pr: 3 }}>
-        <InputLabel
-          sx={{ width: 'max-content', ml: 0.5, mb: 0.5 }}
-          id={input.name}
-        >
-          {input.label}
-        </InputLabel>
+    <Box sx={{ mb: 1 }} key={input.name}>
+      <Grid container alignItems="center">
+        <Grid item xs="auto" sx={{ pr: 3 }}>
+          <InputLabel
+            sx={{ width: 'max-content', ml: 0.5, mb: 0.5 }}
+            id={input.name}
+          >
+            {input.label}
+          </InputLabel>
+        </Grid>
+        {input.name === 'location' && locationRadios}
       </Grid>
-      {input.name === 'location' && locationRadios}
-    </Grid>
-    <TextField
-      {...registerObj}
-      error={!!errors[input.name]}
-      type={input.type}
-      placeholder={input.placeholder}
-      helperText={`${errors[input.name]?.message || ' '}`}
-      disabled={isEdit ? !editMode : undefined} // handles edit mode for EditProjcet form
-    />
-  </Box>
+      <TextField
+        {...registerObj}
+        error={!!errors[input.name]}
+        type={input.type}
+        placeholder={input.placeholder}
+        helperText={`${errors[input.name]?.message || ' '}`}
+        disabled={isEdit ? !editMode : undefined} // handles edit mode for EditProjcet form
+      />
+    </Box>
   );
-};
+}
 
-export default ValidatedTextField;
+export default ValidatedTextField;