refactor: improve extra sources input and unify verification request form types

Author: LuizFNJ

src/components/Form/DynamicInput.tsx

@@ -14,20 +14,24 @@ import colors from "../../styles/colors";
 import ReportTypeSelect from "../VerificationRequest/verificationRequestForms/formInputs/ReportTypeSelect";
 import ImpactAreaSelect from "../VerificationRequest/verificationRequestForms/formInputs/ImpactAreaSelect";
 import InputExtraSourcesList from "../VerificationRequest/verificationRequestForms/formInputs/InputExtraSourcesList";
+import { Topic } from "../../types/Topic";
+import { SourceType } from "../../types/Source";
 
 const VisualEditor = lazy(() => import("../Collaborative/VisualEditor"));
 
+export type UnifiedDefaultValue = Topic | SourceType[] | string
+
 interface DynamicInputProps {
     fieldName: string;
     type: string;
     placeholder: string;
-    value: string | [];
+    value: UnifiedDefaultValue;
     onChange: any;
     addInputLabel: string;
-    defaultValue: string | [];
+    defaultValue: UnifiedDefaultValue;
     "data-cy": string;
     extraProps: any;
-    disabledDate?: any;
+    disabledDate?: boolean;
     disabled?: boolean;
 }
 
@@ -87,7 +91,7 @@ const DynamicInput = (props: DynamicInputProps) => {
         case "sourceList":
             return (
                 <InputExtraSourcesList
-                    value={props.value}
+                    sources={props.value}
                     onChange={props.onChange}
                     disabled={props.disabled}
                     placeholder={props.placeholder}

src/components/VerificationRequest/verificationRequestForms/DynamicVerificationRequestForm.tsx

@@ -5,18 +5,16 @@ import moment from "moment";
 import DynamicForm from "../../Form/DynamicForm";
 import SharedFormFooter from "../../SharedFormFooter";
 import editVerificationRequestForm from "./fieldLists/EditVerificationRequestForm";
+import { IDynamicVerificationRequestForm } from "../../../types/VerificationRequest";
 
-interface IDynamicVerificationRequestForm {
-    data?: any,
-    onSubmit: any,
-    isLoading: any,
-    setRecaptchaString: any,
-    hasCaptcha: any,
-    isEdit: any,
-    extrafields?: any,
-}
-
-const DynamicVerificationRequestForm = ({ data, onSubmit, isLoading, setRecaptchaString, hasCaptcha, isEdit }: IDynamicVerificationRequestForm) => {
+const DynamicVerificationRequestForm = ({
+    data,
+    onSubmit,
+    isLoading,
+    setRecaptchaString,
+    hasCaptcha,
+    isEdit,
+}: IDynamicVerificationRequestForm) => {
     const {
         handleSubmit,
         control,

src/components/VerificationRequest/verificationRequestForms/EditVerificationRequestView.tsx

@@ -1,24 +1,17 @@
 import React, { useState } from "react";
-import { VerificationRequest } from "../../../types/VerificationRequest";
+import { IEditVerificationRequestDrawer } from "../../../types/VerificationRequest";
 import { useTranslation } from "react-i18next";
 import { Divider, Grid } from "@mui/material";
 import verificationRequestApi from "../../../api/verificationRequestApi";
 import LargeDrawer from "../../LargeDrawer";
 import DynamicVerificationRequestForm from "./DynamicVerificationRequestForm";
 
-interface EditVerificationRequestDrawerProps {
-    open: boolean;
-    onClose: () => void;
-    verificationRequest: VerificationRequest;
-    onSave: (updatedRequest: VerificationRequest) => void;
-}
-
-const EditVerificationRequestDrawer: React.FC<EditVerificationRequestDrawerProps> = ({
+const EditVerificationRequestDrawer = ({
     open,
     onClose,
     verificationRequest,
     onSave,
-}) => {
+}: IEditVerificationRequestDrawer) => {
     const { t } = useTranslation();
     const [recaptchaString, setRecaptchaString] = useState("");
     const hasCaptcha = !!recaptchaString;
@@ -68,4 +61,4 @@ const EditVerificationRequestDrawer: React.FC<EditVerificationRequestDrawerProps
     )
 };
 
-export default EditVerificationRequestDrawer;
+export default EditVerificationRequestDrawer;

src/components/VerificationRequest/verificationRequestForms/formInputs/InputExtraSourcesList.tsx

@@ -1,105 +1,105 @@
-import React, { useState, useEffect } from "react";
-import { Box, Grid } from "@mui/material";
+import React, { useState } from "react";
+import { Grid } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
 import DeleteIcon from "@mui/icons-material/Delete";
 import { useTranslation } from "next-i18next";
 import AletheiaButton, { ButtonType } from "../../../Button";
 import AletheiaInput from "../../../AletheiaInput";
+import { IInputExtraSourcesList } from "../../../../types/VerificationRequest";
+import { SourceType } from "../../../../types/Source";
 
-interface IInputExtraSourcesList {
-  value: any;
-  onChange: (value: any[]) => void;
-  disabled: boolean;
-  placeholder: string;
-}
+const formatSources = (sources: SourceType[]) => {
+    const sourceArray = Array.isArray(sources) ? sources : [];
+    if (sourceArray.length === 0) return [createEmptySource()];
 
-const InputExtraSourcesList = ({ value, onChange, disabled, placeholder }: IInputExtraSourcesList) => {
-  const { t } = useTranslation();
+    return sourceArray.map((source) => ({
+        id: source._id,
+        href: typeof source === "object" ? source.href : source || "",
+        isNewSource: !!(typeof source === "object" ? source.href : source),
+    }));
+};
 
-  const [items, setItems] = useState(() => {
-    const initialArray = Array.isArray(value) ? value : [];
-    if (initialArray.length === 0) return [{ id: Math.random(), text: "", isOriginal: false }];
+const createEmptySource = () => ({
+    id: Math.random().toString(),
+    href: "",
+    isNewSource: false
+});
 
-    return initialArray.map((item) => {
-      const isObject = typeof item === "object" && item !== null;
-      const textValue = isObject ? item.href : item;
-      return {
-        id: item._id || Math.random(),
-        text: textValue || "",
-        isOriginal: !!textValue,
-      };
-    });
-  });
+const InputExtraSourcesList = ({ sources, onChange, disabled, placeholder }: IInputExtraSourcesList) => {
+    const { t } = useTranslation();
+    const [sourcesList, setSourcesList] = useState(() => formatSources(sources as SourceType[]));
 
-  useEffect(() => {
-    handleNotifyChange(items);
-  }, []);
+    const handleSubmit = (hrefsList: typeof sourcesList) => {
+        const updatedHrefs = [...new Set(hrefsList.map(source => source.href.trim()).filter(Boolean))];
+        onChange(updatedHrefs);
+    };
 
-  const handleNotifyChange = (newItems: any[]) => {
-    setItems(newItems);
-    const uniqueTexts = Array.from(
-      new Set(
-        newItems
-          .map(i => i.text.trim())
-          .filter(text => text !== "")
-      )
-    );
+    const updateSources = (id: string, newHref: string) => {
+        const newHrefList = sourcesList.map(source => source.id === id ? { ...source, href: newHref } : source);
+        setSourcesList(newHrefList);
+        handleSubmit(newHrefList);
+    };
 
-    onChange(uniqueTexts);
-  };
+    const addField = () => {
+        if (disabled) return;
+        const newHrefList = [...sourcesList, createEmptySource()];
+        setSourcesList(newHrefList);
+        handleSubmit(newHrefList);
+    };
 
-  const addField = () => {
-    if (disabled) return;
-    handleNotifyChange([...items, { id: Math.random(), text: "", isOriginal: false }]);
-  };
+    const removeField = (id: string, index: number) => {
+        if (disabled || index === 0) return;
+        const newHrefList = sourcesList.filter((source) => source.id !== id);
 
-  const removeField = (id: any) => {
-    const index = items.findIndex((item) => item.id === id);
-    if (disabled || index === 0) return;
-    handleNotifyChange(items.filter((item) => item.id !== id));
-  };
+        setSourcesList(newHrefList);
+        handleSubmit(newHrefList);
+    };
 
-  const updateField = (id: any, newText: string) => {
-    const updatedItems = items.map((item) =>
-      item.id === id ? { ...item, text: newText } : item
-    );
-    handleNotifyChange(updatedItems);
-  };
+    return (
+        <Grid container justifyContent="center">
+            {sourcesList.map((source, index) => (
+                <Grid item
+                    key={source.id}
+                    style={{
+                        display: "flex",
+                        width: "100%",
+                        gap: 12,
+                        marginTop: 12
+                    }}
+                >
+                    <AletheiaInput
+                        value={source.href}
+                        disabled={disabled || (index === 0 && source.isNewSource)}
+                        onChange={(newHref) => updateSources(source.id, newHref.target.value)}
+                        placeholder={t(placeholder)}
+                        white="true"
+                    />
 
-  return (
-    <Grid container>
-      {items.map((item, index) => (
-        <Box key={item.id} sx={{ display: "flex", width: "100%", gap: 1, mt: 1 }}>
-          <AletheiaInput
-            value={item.text}
-            disabled={disabled || (index === 0 && item.isOriginal)}
-            onChange={(e) => updateField(item.id, e.target.value)}
-            placeholder={t(placeholder)}
-            white="true"
-          />
+                    {!disabled && index !== 0 && (
+                        <AletheiaButton
+                            onClick={() => removeField(source.id, index)}
+                            style={{ minWidth: "40px" }}
+                        >
+                            <DeleteIcon fontSize="small" />
+                        </AletheiaButton>
+                    )}
+                </Grid>
+            ))}
 
-          {!disabled && index !== 0 && (
-            <AletheiaButton
-              onClick={() => removeField(item.id)}
-              style={{ minWidth: "40px" }}
-            >
-              <DeleteIcon fontSize="small" />
-            </AletheiaButton>
-          )}
-        </Box>
-      ))}
-
-      {!disabled && (
-        <AletheiaButton
-          type={ButtonType.blue}
-          onClick={addField}
-          style={{ marginTop: "8px" }}
-        >
-          <AddIcon fontSize="small" />
-        </AletheiaButton>
-      )}
-    </Grid>
-  );
+            {!disabled && (
+                <Grid item>
+                    <AletheiaButton
+                        type={ButtonType.blue}
+                        onClick={addField}
+                        style={{ marginTop: 12 }}
+                    >
+                        <AddIcon fontSize="small" />
+                        {t("sourceForm:addNewSourceButton")}
+                    </AletheiaButton>
+                </Grid>
+            )}
+        </Grid>
+    );
 };
 
-export default InputExtraSourcesList;
+export default InputExtraSourcesList;

src/components/VerificationRequest/verificationRequestForms/formInputs/ReportTypeSelect.tsx

@@ -4,45 +4,46 @@ import { ContentModelEnum } from "../../../../types/enums";
 import { SelectInput } from "../../../Form/ClaimReviewSelect";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { IReportTypeSelect } from "../../../../types/VerificationRequest";
 
 const ReportTypeSelect = ({
-  onChange,
-  defaultValue,
-  placeholder,
-  style = {},
-  isDisabled,
-}) => {
-  const [value, setValue] = useState(defaultValue || "");
-  const { t } = useTranslation();
+    onChange,
+    defaultValue,
+    placeholder,
+    style = {},
+    isDisabled,
+}: IReportTypeSelect) => {
+    const [value, setValue] = useState(defaultValue || "");
+    const { t } = useTranslation();
 
-  const onChangeSelect = (e) => {
-    setValue(e.target.value);
-  };
+    const onChangeSelect = (e) => {
+        setValue(e.target.value);
+    };
 
-  useEffect(() => {
-    onChange(value || undefined);
-  }, [value, onChange]);
+    useEffect(() => {
+        onChange(value || undefined);
+    }, [value, onChange]);
 
-  return (
-    <FormControl fullWidth>
-      <SelectInput
-        displayEmpty
-        onChange={onChangeSelect}
-        value={value}
-        style={style}
-        disabled={isDisabled}
-      >
-        <MenuItem value="" disabled>
-          {placeholder}
-        </MenuItem>
-        {Object.values(ContentModelEnum).map((option) => (
-          <MenuItem key={option} value={option}>
-            {t(`claimForm:${option}`)}
-          </MenuItem>
-        ))}
-      </SelectInput>
-    </FormControl>
-  );
+    return (
+        <FormControl fullWidth>
+            <SelectInput
+                displayEmpty
+                onChange={onChangeSelect}
+                value={value}
+                style={style}
+                disabled={isDisabled}
+            >
+                <MenuItem value="" disabled>
+                    {placeholder}
+                </MenuItem>
+                {Object.values(ContentModelEnum).map((option) => (
+                    <MenuItem key={option} value={option}>
+                        {t(`claimForm:${option}`)}
+                    </MenuItem>
+                ))}
+            </SelectInput>
+        </FormControl>
+    );
 };
 
 export default ReportTypeSelect;