Issue 1426 - Source validation on the claim form

public/locales/en/sources.json

@@ -4,5 +4,6 @@
     "sourceCardButton": "Access the source",
     "sourceCreateCTAButton": "Create source",
     "sourcesCreateSuccess": "Source created successfully",
-    "sourcesCreateError": "Error while creating the source"
+    "sourcesCreateError": "Error while creating the source",
+    "sourceInvalid": "The font is no longer available"
 }

public/locales/pt/sources.json

@@ -4,5 +4,6 @@
     "sourceCardButton": "Acesse a fonte",
     "sourceCreateCTAButton": "Incluir fonte",
     "sourcesCreateSuccess": "Fonte criado com sucesso",
-    "sourcesCreateError": "Erro ao criar a fonte"
+    "sourcesCreateError": "Erro ao criar a fonte",
+    "sourceInvalid": "A fonte não está mais disponível"
 }

server/source/source.controller.ts

@@ -103,6 +103,23 @@
         );
     }
 
+    @ApiTags("source")
+    @Get("/check-source")
+    async checkSpurce(@Query() query) {
+        try {
+            const result = await fetch(query.source, {
+                method: "GET",
+            });
+            if (result.ok) {
+                return { status: 200, message: "Link válido"};
+            } else {
+                return { status: 404, message: "Link inválido"};
+            }
+        } catch (error) {
+            return { status: 500, message: "Erro interno ao verificar o link"};
+        }
+     }
+
     @IsPublic()
     @ApiTags("source")
     @Get("api/source")

src/api/sourceApi.ts

@@ -93,11 +93,22 @@ const getById = (id, t, params = {}) => {
         });
 };
 
+    const checkSource = (source) => {
+        return axios.get('/check-source', {params: {source}})
+        .then((response) => {
+            return response.data;
+        })
+        .catch(() => {
+            message.error("error");
+        });
+    }
+
 const SourceApi = {
     getByTargetId,
     createSource,
     get,
     getById,
+    checkSource,
 };
 
 export default SourceApi;

src/components/Claim/CreateClaim/BaseClaimForm.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Checkbox, Form, Row } from "antd";
+import { Checkbox, Form, Row, message } from "antd";
 import moment from "moment";
 import { useTranslation } from "next-i18next";
 import { useRouter } from "next/router";
@@ -10,6 +10,7 @@ import Input from "../../AletheiaInput";
 import Button, { ButtonType } from "../../Button";
 import DatePickerInput from "../../Form/DatePickerInput";
 import SourceInput from "../../Source/SourceInput";
+import SourceApi from "../../../api/sourceApi";
 
 interface BaseClaimFormProps {
     content?: React.ReactNode;
@@ -46,7 +47,29 @@ const BaseClaimForm = ({
         setDisableSubmit(!hasRecaptcha);
     };
 
-    const onFinish = () => {
+    const checkLink = async (url) => {
+
+        try {
+            const request = await SourceApi.checkSource(url);
+            if (request?.status === 200) {
+                return true;
+            } else {
+                message.error(t("sources:sourceInvalid"));
+                return false;
+            }
+        } catch (error) {
+            message.error(t("sources:sourceInvalid"));
+            return false;
+        }
+    }
+
+    const onFinish = async () => {
+
+        const validSource = await Promise.all(
+            sources.map((source) => checkLink(source)));
+
+            if (validSource.includes(false)) return;
+
         const values = {
             title,
             date,

src/components/Source/ClaimSourceListItem.tsx

@@ -1,9 +1,31 @@
-import { Col, List } from "antd";
-
+import { Col, List, message } from "antd";
 import React from "react";
+import { useState } from "react";
+import SourceApi from "../../api/sourceApi";
+import { useTranslation } from "next-i18next";
 
 const ClaimSourceListItem = ({ source, index }) => {
     const { href } = source;
+    const [linkValid, setLinkValid] = useState(null);
+    const { t } = useTranslation();
+
+    const checkLink = async (url) => {
+
+        try {
+            const request = await SourceApi.checkSource(url);
+
+            if (request?.status === 200) {
+                setLinkValid(true);
+                window.open(url, "_blank", "noopener noreferrer");
+            } else {
+                setLinkValid(false);
+                message.error(t("sources:sourceInvalid"));
+            }
+        } catch (error) {
+            setLinkValid(false);
+            message.error(t("sources:sourceInvalid"));
+        }
+    };
 
     return (
         <Col className="source">
@@ -12,15 +34,22 @@ const ClaimSourceListItem = ({ source, index }) => {
                     <span style={{ marginRight: 4 }}>
                         {source?.props?.sup || source?.sup || index}.
                     </span>
-                    <a href={href} target="_blank" rel="noopener noreferrer">
+                    <a href={"#"}
+                    onClick={(e) => { 
+                        e.preventDefault();
+                        checkLink(href);
+                    }}>
                         {href}
                     </a>
                 </List.Item>
             ) : (
                 <List.Item id={source}>
                     {/* TODO: Remove this ternary when source migration is done */}
                     {index}.{" "}
-                    <a href={source} target="_blank" rel="noopener noreferrer">
+                    <a href={"#"} onClick={(e) => {
+                        e.preventDefault();
+                        checkLink(source);
+                    }}>
                         {source}
                     </a>
                 </List.Item>