Add URL validation and saving functionality to PersonalPreferences co…

…mponent

packages/volto-hydra/src/customizations/components/manage/Preferences/PersonalPreferences.jsx

@@ -18,12 +18,8 @@ import languages from '@plone/volto/constants/Languages';
 import { changeLanguage } from '@plone/volto/actions';
 import { toGettextLang } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
-
-const urls = {
-  URL1: 'http://localhost:3000',
-  URL2: 'http://localhost:3001',
-  URL3: 'http://localhost:3002',
-};
+import getSavedURLs from '../../../../utils/getSavedURLs';
+import isValidUrl from '../../../../utils/isValidUrl';
 
 const messages = defineMessages({
   personalPreferences: {
@@ -98,6 +94,7 @@ class PersonalPreferences extends Component {
     super(props);
     this.onCancel = this.onCancel.bind(this);
     this.onSubmit = this.onSubmit.bind(this);
+    this.urls = getSavedURLs();
     this.state = {
       hidden: true,
     };
@@ -118,8 +115,31 @@ class PersonalPreferences extends Component {
       });
     }
     toast.success(
-      <Toast success title={this.props.intl.formatMessage(messages.saved)} />,
+      <Toast
+        success
+        content={''}
+        title={this.props.intl.formatMessage(messages.saved)}
+      />,
     );
+    if (data.urlCheck) {
+      if (!isValidUrl(data.url)) {
+        toast.error(
+          <Toast
+            error
+            content={'Please enter a valid URL or select URL from the options.'}
+            title={'Invalid Entered URL!'}
+          />,
+        );
+        return;
+      }
+      const urlList = [...new Set([this.urls, data.url])];
+      this.props.cookies.set('saved_urls', urlList.join(','), {
+        expires: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000), // 7 Days
+      });
+      console.log('data.url', data.url);
+    } else {
+      console.log('data.urls', data.urls);
+    }
     this.props.closeMenu();
   }
 
@@ -130,7 +150,6 @@ class PersonalPreferences extends Component {
    */
   onCancel() {
     this.props.closeMenu();
-    toast.error(<Toast error title={'Invalid Entered URL!.'} />);
   }
 
   /**
@@ -140,6 +159,7 @@ class PersonalPreferences extends Component {
    */
   render() {
     const { cookies } = this.props;
+    const urls = this.urls;
     return (
       <Form
         formData={{
@@ -156,7 +176,7 @@ class PersonalPreferences extends Component {
             {
               id: 'frontend',
               title: 'Frontend',
-              fields: ['urls', 'urlCheck', 'url'],
+              fields: ['urls', 'url', 'urlCheck'],
             },
           ],
           properties: {
@@ -174,7 +194,7 @@ class PersonalPreferences extends Component {
               ),
               title: this.props.intl.formatMessage(messages.frontendUrls),
               type: 'string',
-              choices: map(keys(urls), (url) => [url, urls[url]]),
+              choices: map(urls, (url) => [url, url]),
               mode: !this.state.hidden ? 'hidden' : '',
             },
             urlCheck: {

packages/volto-hydra/src/utils/getSavedURLs.js

@@ -0,0 +1,33 @@
+import Cookies from 'js-cookie';
+import isValidUrl from './isValidUrl';
+
+/**
+ * Get the default URL(s) from the environment
+ * @returns {Array} URL(s) from the environment
+ */
+export const getURlsFromEnv = () => {
+  const presetUrlsString =
+    process.env['RAZZLE_DEFAULT_IFRAME_URL'] ||
+    (typeof window !== 'undefined' &&
+      window.env['RAZZLE_DEFAULT_IFRAME_URL']) ||
+    'http://localhost:3002'; // fallback if env is not set
+
+  const presetUrls = presetUrlsString.split(',');
+  return presetUrls;
+};
+
+/**
+ * Get the saved URLs from the cookies
+ * @returns {Array} Saved URLs
+ */
+const getSavedURLs = () => {
+  const urls = Cookies.get('saved_urls')
+    ? Cookies.get('saved_urls').split(',')
+    : [];
+  const savedUrls = [
+    ...new Set([...urls, ...getURlsFromEnv()]), // Merge saved URLs with default URLs make sure they are unique
+  ];
+  return savedUrls.filter(isValidUrl);
+};
+
+export default getSavedURLs;

packages/volto-hydra/src/utils/isValidUrl.js

@@ -1,6 +1,11 @@
-export default function isValidUrl(string) {
+/**
+ * Check if the URL is valid
+ * @param {URL} string
+ * @returns bool
+ */
+export default function isValidUrl(url) {
   try {
-    new URL(string);
+    new URL(url);
     return true;
   } catch (error) {
     return false;