Use updated job alert API

Original bug report / Project repo

Changes overview

• The dysfunctional legacy API re-implemented and moved to a new address (apis.embl.de/jobalert);
• Added handling of HTTPO response codes;
• IMPORTANT: the API is now pointing to production Talentlink (there are no job records in the test one).

TODO

• Review changes;
• Unblock test page and make sure job alerts can be set up - you should receive an e-mail from TalentLink;
• Update production accordingly.

src/components/alerts/Alerts.jsx

@@ -30,6 +30,7 @@ export function Alerts() {
   });
 
   const [subscriptionState, setSubscriptionState] = useState("pending");
+  const [validationError, setValidationError] = useState(null);
 
   const onSubmit = () => {
     // formRef.current.submit();
@@ -37,17 +38,22 @@ export function Alerts() {
     const params = new URLSearchParams(formData);
     // console.log("params", params);
     fetch(
-      `https://www.embl.de/jobs/searchjobs/index.php?${params.toString()}`,
+      `https://apis.embl.de/jobalert/legacy/jobalert/?${params.toString()}`,
       {
         method: "GET",
-        mode: "no-cors",
       }
     )
-      .then(() => {
+      .then((response) => {
+        if (response.status !== 200)
+          throw new Error(`${response.status} ${response.statusText}`);
         setSubscriptionState("success");
       })
-      .catch(() => {
+      .catch((error) => {
+        console.log(error.message);
         setSubscriptionState("error");
+        if (error.message.startsWith("422")) {
+          setValidationError("Validation Error");
+        }
       });
   };
 
@@ -118,12 +124,21 @@ export function Alerts() {
 
           <div className="vf-stack">
             <h1 className="vf-intro__heading ">Error</h1>
-            <p className="vf-lede">There was a technical error.</p>
-
-            <p className="vf-intro__text">
-              This problem means that the service you are trying to access is
-              currently unavailable. Please try again later.
-            </p>
+            {validationError ? (
+              <>
+                <p className="vf-lede">There was a validation error.</p>
+                <p className="vf-intro__text">
+                    Please check your details and try again.
+                </p>
+              </> ) :
+              <>
+                  <p className="vf-lede">There was a technical error.</p>
+                  <p className="vf-intro__text">
+                      This problem means that the service you are trying to access
+                      currently unavailable. Please try again later.
+                  </p>
+              </>
+            }
           </div>
         </section>
       )}
@@ -150,7 +165,6 @@ export function Alerts() {
               */}
             </div>
           </section>
-          {/* form 
           <section className="vf-intro | embl-grid embl-grid--has-centered-content">
             <div></div>
             <div className="vf-content">
@@ -315,7 +329,6 @@ export function Alerts() {
               </form>
             </div>
           </section>
-          */}
         </>
       )}
       <EmblFooter />