267 add url test to resources

firebase-functions/functions/index.js

@@ -1,6 +1,7 @@
 const admin = require("firebase-admin");
 const { translate } = require("./translate");
 const { createDraftDoi, updateDraftDoi, deleteDraftDoi } = require("./datacite");
+const { checkURLActive } = require("./serverUtils");
 const { notifyReviewer, notifyUser } = require("./notify");
 const {
   updatesRecordCreate,
@@ -23,3 +24,4 @@ exports.regenerateXMLforRecord = regenerateXMLforRecord;
 exports.createDraftDoi = createDraftDoi;
 exports.deleteDraftDoi = deleteDraftDoi;
 exports.updateDraftDoi = updateDraftDoi;
+exports.checkURLActive = checkURLActive;

firebase-functions/functions/serverUtils.js

@@ -0,0 +1,25 @@
+const functions = require("firebase-functions");
+const fetch = require('node-fetch');
+
+// Function to check if a given URL is active
+exports.checkURLActive = functions.https.onCall(async (data) => {
+    let url = data;
+    functions.logger.log('Received URL:', url);
+
+    if (!url) {
+        throw new functions.https.HttpsError('invalid-argument', 'The function must be called with one argument "url".');
+    }
+
+    // Prepend 'http://' if the URL does not start with 'http://' or 'https://'
+    if (!url.startsWith('http://') && !url.startsWith('https://')) {
+        url = 'http://' + url;
+    }
+
+    try {
+        const response = await fetch(url, {method: "HEAD" });
+        return response.ok; // Return true if response is OK, otherwise false
+    } catch (error) {
+        console.error('Error in checkURLActive:', error); // Log the error for debugging
+        return false; // Return false if an error occurs 
+    }
+})

src/components/FormComponents/Resources.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useContext, useState, useEffect, useCallback } from "react";
 import {
   Add,
   Delete,
@@ -11,14 +11,40 @@ import { En, Fr, I18n } from "../I18n";
 
 import BilingualTextInput from "./BilingualTextInput";
 import RequiredMark from "./RequiredMark";
-import { deepCopy } from "../../utils/misc";
+import { deepCopy, debounce } from "../../utils/misc";
+import { validateURL } from "../../utils/validate";
 import { QuestionText, paperClass, SupplementalText } from "./QuestionStyles";
-
-const validateURL = (url) => !url || validator.isURL(url);
+import { UserContext } from "../../providers/UserProvider";
 
 const Resources = ({ updateResources, resources, disabled }) => {
+
+  const { checkURLActive } = useContext(UserContext);
+
+  const [urlIsActive, setUrlIsActive] = useState(false);
   const emptyResource = { url: "", name: "", description: { en: "", fr: "" } };
 
+  const debouncedcheckURLActive = useCallback(
+    debounce(checkURLActive, 500),
+    [checkURLActive]
+  );
+
+  useEffect(() => {
+    resources.forEach((resource, index) => {
+      if (resource.url && validateURL(resource.url)) {
+        debouncedcheckURLActive(resource.url)
+          .then((isActive) => {
+            setUrlIsActive((prevStatus) => ({ ...prevStatus, [index]: isActive }));
+          })
+          .catch(() => {
+                      setUrlIsActive((prevStatus) => ({ ...prevStatus, [index]: false }));
+          });
+      } else {
+              // URL is empty, set isActive to true 
+              setUrlIsActive((prevStatus) => ({ ...prevStatus, [index]: true }));
+            }
+    });
+  }, [resources, debouncedcheckURLActive]);
+
   function addResource() {
     updateResources(resources.concat(deepCopy(emptyResource)));
   }
@@ -35,13 +61,15 @@ const Resources = ({ updateResources, resources, disabled }) => {
     resources.splice(newIndex, 0, element);
     updateResources(resources);
   }
+
   const nameLabel = <I18n en="Name" fr="Titre" />;
   const descriptionLabel = <I18n en="Description" fr="Description" />;
 
   return (
     <div>
-      {resources.map((dist = deepCopy(emptyResource), i) => {
-        const urlIsValid = !dist.url || validateURL(dist.url);
+      {resources.map((resourceItem = deepCopy(emptyResource), i) => {
+        const urlIsValid = !resourceItem.url || validateURL(resourceItem.url);
+
         function handleResourceChange(key) {
           return (e) => {
             const newValue = [...resources];
@@ -58,11 +86,11 @@ const Resources = ({ updateResources, resources, disabled }) => {
                     <En>Enter a name for the resource</En>
                     <Fr>Entrez un titre pour la ressource</Fr>
                   </I18n>
-                  <RequiredMark passes={dist.name?.en || dist.name?.fr} />
+                  <RequiredMark passes={resourceItem.name?.en || resourceItem.name?.fr} />
                 </QuestionText>
                 <BilingualTextInput
                   label={nameLabel}
-                  value={dist.name}
+                  value={resourceItem.name}
                   onChange={handleResourceChange("name")}
                   fullWidth
                   disabled={disabled}
@@ -75,7 +103,7 @@ const Resources = ({ updateResources, resources, disabled }) => {
                     <Fr>Entrez l'URL de la ressource</Fr>
                   </I18n>
 
-                  <RequiredMark passes={validator.isURL(dist.url)} />
+                  <RequiredMark passes={validator.isURL(resourceItem.url)} />
                   <SupplementalText>
                     <I18n>
                       <En>
@@ -99,11 +127,12 @@ const Resources = ({ updateResources, resources, disabled }) => {
 
                 <TextField
                   helperText={
-                    !urlIsValid && <I18n en="Invalid URL" fr="URL non valide" />
+                    (!urlIsValid && <I18n en="Invalid URL" fr="URL non valide" />)
+                    || (urlIsActive[i] && urlIsActive[i].data === false && <I18n en="URL is not active" fr="L'URL n'est pas active" />)
                   }
-                  error={!urlIsValid}
+                  error={!urlIsValid || (urlIsActive[i] && urlIsActive[i].data === false)}
                   label="URL"
-                  value={dist.url}
+                  value={resourceItem.url}
                   onChange={handleResourceChange("url")}
                   fullWidth
                   disabled={disabled}
@@ -119,7 +148,7 @@ const Resources = ({ updateResources, resources, disabled }) => {
                 <BilingualTextInput
                   name="description"
                   label={descriptionLabel}
-                  value={dist.description}
+                  value={resourceItem.description}
                   onChange={handleResourceChange("description")}
                   disabled={disabled}
                 />

src/providers/UserProvider.jsx

@@ -87,6 +87,7 @@ class UserProvider extends FormClassTemplate {
     const createDraftDoi = firebase.functions().httpsCallable("createDraftDoi");
     const updateDraftDoi = firebase.functions().httpsCallable("updateDraftDoi");
     const deleteDraftDoi = firebase.functions().httpsCallable("deleteDraftDoi");
+    const checkURLActive = firebase.functions().httpsCallable("checkURLActive");
 
     return (
       <UserContext.Provider
@@ -98,6 +99,7 @@ class UserProvider extends FormClassTemplate {
           createDraftDoi,
           updateDraftDoi,
           deleteDraftDoi,
+          checkURLActive,
         }}
       >
         {children}

src/utils/misc.js

@@ -4,6 +4,36 @@ export function deepCopy(obj) {
 export function deepEquals(obj1, obj2) {
   return JSON.stringify(obj1) === JSON.stringify(obj2);
 }
+
+/**
+ * Creates a debounced version of a function.
+ * 
+ * @param {Function} mainFunction - The function to debounce.
+ * @param {number} delay - The amount of time (in milliseconds) to delay.
+ * @return {Function} A debounced version of the specified function.
+ */
+export const debounce = (mainFunction, delay) => {
+  let timer;
+
+  const debouncedFunction = (...args) => {
+    // Return a promise that resolves or rejects based on the mainFunction's execution
+    return new Promise((resolve, reject) => {
+      // Clear existing timer to reset the debounce period
+      clearTimeout(timer);
+
+      // Set a new timer to delay the execution of mainFunction
+      timer = setTimeout(() => {
+        // Execute mainFunction and handle its promise
+        Promise.resolve(mainFunction(...args))
+          .then(resolve)
+          .catch(reject);
+      }, delay);
+    });
+  };
+
+  return debouncedFunction;
+}
+
 /*
 Convert firebase to javascript, mostly just used to get real array elements
 */