some frontend stuff

gladly-team · Aug 29, 2023 · b8c3039 · b8c3039
1 parent 51c3ab9
commit b8c3039
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 6 deletions.
diff --git a/src/components/AddShortcut.js b/src/components/AddShortcut.js
@@ -50,6 +50,15 @@ const addProtocolToURLIfNeeded = (url) => {
   return url
 }
 
+const isValidUrl = urlString=> {
+  try { 
+    return Boolean(new URL(urlString)); 
+  }
+  catch(e){ 
+    return false; 
+  }
+}
+
 const AddShortcut = ({
   onCancel,
   onSave,
@@ -59,6 +68,7 @@ const AddShortcut = ({
 }) => {
   const [name, setName] = useState(existingName)
   const [url, setUrl] = useState(existingUrl)
+  const [formErrors, setFormErrors] = useState({})
   useEffect(() => setName(existingName), [existingName])
   useEffect(() => setUrl(existingUrl), [existingUrl])
   const classes = useStyles()
@@ -67,17 +77,52 @@ const AddShortcut = ({
     setUrl(existingUrl)
     onCancel()
   }
+  const validateName = (newName) => {
+    const newErrors = {
+      ...formErrors
+    }
+    console.log(name)
+    if (newName.length === 0) {
+      console.log(name)
+      newErrors.name = 'Shortcut name cannot be empty.'
+    } else {
+      delete newErrors['name']
+    }
+    setFormErrors(newErrors)
+  }
+  const validateUrl = (newUrl) => {
+    const newErrors = {
+      ...formErrors
+    }
+    if (newUrl.length === 0) {
+      newErrors.url = 'URL cannot be empty.'
+    } else if (!isValidUrl(addProtocolToURLIfNeeded(url))) {
+      newErrors.url = 'URL is not valid.'
+    } else {
+      delete newErrors['url']
+    }
+    setFormErrors(newErrors)
+  }
+  const validateForm = () => {
+    validateName()
+    validateUrl()
+  }
   const onSaveClick = () => {
     const newUrl = addProtocolToURLIfNeeded(url)
+    if (validateForm()) {
+      return
+    }
     onSave(existingId, name, newUrl)
     setName(name)
     setUrl(newUrl)
   }
   const changeName = (e) => {
     setName(e.target.value)
+    validateName(e.target.value)
   }
   const changeUrl = (e) => {
     setUrl(e.target.value)
+    validateUrl(e.target.value)
   }
   return (
     <Notification
@@ -100,8 +145,8 @@ const AddShortcut = ({
               label="Name"
               value={name}
               onChange={changeName}
-              error={name.length === 0}
-              helperText={name.length === 0 && 'Bookmark name cannot be empty.'}
+              error={!!formErrors.name}
+              helperText={formErrors.name}
               className={classes.textField}
             />
             <TextField
@@ -110,8 +155,8 @@ const AddShortcut = ({
               label="URL"
               value={url}
               onChange={changeUrl}
-              error={url.length === 0}
-              helperText={url.length === 0 && 'URL cannot be empty.'}
+              error={!!formErrors.url}
+              helperText={formErrors.url}
               className={classes.textField}
             />
           </div>
@@ -130,8 +175,8 @@ const AddShortcut = ({
             onClick={onSaveClick}
             className={classes.yesButton}
             variant="contained"
-            disabled={name.length === 0 || url.length === 0}
             disableElevation
+            disabled={Object.keys(formErrors).length === 0}
           >
             Save
           </Button>

diff --git a/src/pages/account.js b/src/pages/account.js
@@ -376,7 +376,7 @@ const Account = ({ data: fallbackData }) => {
         {localStorageFeaturesManager.getFeatureValue(LAUNCH_BOOKMARKS) !==
           'false' && (
           <AccountItem
-            name="Bookmarks"
+            name="Shortcuts"
             actionButton={
               <Switch
                 checked={bookmarks}