From 2408cbcda795c74ba4f0be5977d0c41e88f6274d Mon Sep 17 00:00:00 2001
From: Vlad 2 <116202536+sktbrd@users.noreply.github.com>
Date: Sat, 21 Dec 2024 03:14:47 +0700
Subject: [PATCH] fix: ensure LinksInput handles array values correctly  (#534)

---
 .../components/molecules/LinksInput.tsx       | 174 ++++++++++--------
 1 file changed, 93 insertions(+), 81 deletions(-)

diff --git a/src/common/components/molecules/LinksInput.tsx b/src/common/components/molecules/LinksInput.tsx
index b0cdfb69..b6b2d16f 100644
--- a/src/common/components/molecules/LinksInput.tsx
+++ b/src/common/components/molecules/LinksInput.tsx
@@ -77,12 +77,15 @@ const LinksInput = forwardRef<HTMLInputElement, LinksInputProps>(
   (props, ref) => {
     const { value = [], onChange } = props;
 
+    // Initialize visibleFields state
     const [visibleFields, setVisibleFields] = useState(
-      value.map(() => false), // controls the visibility of additional inputs
+      Array.isArray(value) ? value.map(() => false) : [],
     );
 
+    // Handle link changes
     const handleLinkChange = useCallback(
       (index: number, newLink: Link) => {
+        if (!Array.isArray(value)) return; // Ensure value is an array
         const updatedLinks = [...value];
         updatedLinks[index] = newLink;
         onChange?.(updatedLinks);
@@ -90,6 +93,7 @@ const LinksInput = forwardRef<HTMLInputElement, LinksInputProps>(
       [value, onChange],
     );
 
+    // Add a new link
     const addNewLink = () => {
       const newLink = {
         text: "New Link",
@@ -102,7 +106,9 @@ const LinksInput = forwardRef<HTMLInputElement, LinksInputProps>(
       setVisibleFields([...visibleFields, true]);
     };
 
+    // Remove a link
     const removeLink = (index: number) => {
+      if (!Array.isArray(value)) return; // Ensure value is an array
       const updatedLinks = [...value];
       updatedLinks.splice(index, 1);
       onChange?.(updatedLinks);
@@ -112,98 +118,104 @@ const LinksInput = forwardRef<HTMLInputElement, LinksInputProps>(
       setVisibleFields(updatedVisibleFields);
     };
 
+    // Show additional fields for a link
     const showAdditionalFields = (index: number) => {
       const updatedVisibleFields = [...visibleFields];
       updatedVisibleFields[index] = true;
       setVisibleFields(updatedVisibleFields);
     };
 
+    // Render LinksInput component
     return (
       <Box>
-        {value.map((link, index) => (
-          <LinkContainer key={index}>
-            <Title>{link.text || `Link ${index + 1}`}</Title>
-            <SubTitle>URL {index + 1}</SubTitle>
-            <TextFieldRoot isActive={visibleFields[index]}>
-              <TextFieldSlot>
-                <FaLink color="lightgray" size={14} />
-              </TextFieldSlot>
-              <TextFieldInput
-                placeholder="Link URL"
-                value={link.url}
-                onChange={(e: any) => {
-                  handleLinkChange(index, { ...link, url: e.target.value });
-                  showAdditionalFields(index);
-                }}
-                onFocus={() => showAdditionalFields(index)}
-              />
-              <TextFieldSlot>
-                <p
-                  style={{
-                    color: "lightgray",
-                    cursor: "pointer",
-                    marginRight: "2px",
+        {Array.isArray(value) &&
+          value.map((link, index) => (
+            <LinkContainer key={index}>
+              <Title>{link.text || `Link ${index + 1}`}</Title>
+              <SubTitle>URL {index + 1}</SubTitle>
+              <TextFieldRoot isActive={visibleFields[index]}>
+                <TextFieldSlot>
+                  <FaLink color="lightgray" size={14} />
+                </TextFieldSlot>
+                <TextFieldInput
+                  placeholder="Link URL"
+                  value={link.url}
+                  onChange={(e: any) => {
+                    handleLinkChange(index, { ...link, url: e.target.value });
+                    showAdditionalFields(index);
                   }}
-                  onClick={() => removeLink(index)}
-                >
-                  x
-                </p>
-              </TextFieldSlot>
-            </TextFieldRoot>
-            {visibleFields[index] && (
-              <>
-                <SubTitle>Title</SubTitle>
-                <TextFieldRoot isActive={true}>
-                  <TextFieldSlot>
-                    <FaPencil color="lightgray" size={14} />
-                  </TextFieldSlot>
-                  <TextFieldInput
-                    placeholder="Link text"
-                    value={link.text}
-                    onChange={(e: any) =>
-                      handleLinkChange(index, { ...link, text: e.target.value })
-                    }
+                  onFocus={() => showAdditionalFields(index)}
+                />
+                <TextFieldSlot>
+                  <p
+                    style={{
+                      color: "lightgray",
+                      cursor: "pointer",
+                      marginRight: "2px",
+                    }}
+                    onClick={() => removeLink(index)}
+                  >
+                    x
+                  </p>
+                </TextFieldSlot>
+              </TextFieldRoot>
+              {visibleFields[index] && (
+                <>
+                  <SubTitle>Title</SubTitle>
+                  <TextFieldRoot isActive={true}>
+                    <TextFieldSlot>
+                      <FaPencil color="lightgray" size={14} />
+                    </TextFieldSlot>
+                    <TextFieldInput
+                      placeholder="Link text"
+                      value={link.text}
+                      onChange={(e: any) =>
+                        handleLinkChange(index, {
+                          ...link,
+                          text: e.target.value,
+                        })
+                      }
+                      onFocus={() => showAdditionalFields(index)}
+                    />
+                  </TextFieldRoot>
+                  <SubTitle>Avatar</SubTitle>
+                  <TextFieldRoot isActive={true}>
+                    <TextFieldSlot>
+                      {link.avatar ? (
+                        <Avatar style={{ width: "24px", height: "24px" }}>
+                          <AvatarImage src={link.avatar} alt={"choose image"} />
+                          <AvatarFallback>
+                            <span className="sr-only">{link.text}</span>
+                          </AvatarFallback>
+                        </Avatar>
+                      ) : (
+                        <FaImage color="lightgray" size={14} />
+                      )}
+                    </TextFieldSlot>
+                    <TextFieldInput
+                      placeholder="Avatar URL"
+                      value={link.avatar}
+                      onChange={(e: any) =>
+                        handleLinkChange(index, {
+                          ...link,
+                          avatar: e.target.value,
+                        })
+                      }
+                      onFocus={() => showAdditionalFields(index)}
+                    />
+                  </TextFieldRoot>
+                  <SubTitle>Description</SubTitle>
+                  <CSSInput
+                    value={link.description || ""}
                     onFocus={() => showAdditionalFields(index)}
-                  />
-                </TextFieldRoot>
-                <SubTitle>Avatar</SubTitle>
-                <TextFieldRoot isActive={true}>
-                  <TextFieldSlot>
-                    {link.avatar ? (
-                      <Avatar style={{ width: "24px", height: "24px" }}>
-                        <AvatarImage src={link.avatar} alt={"choose image"} />
-                        <AvatarFallback>
-                          <span className="sr-only">{link.text}</span>
-                        </AvatarFallback>
-                      </Avatar>
-                    ) : (
-                      <FaImage color="lightgray" size={14} />
-                    )}
-                  </TextFieldSlot>
-                  <TextFieldInput
-                    placeholder="Avatar URL"
-                    value={link.avatar}
-                    onChange={(e: any) =>
-                      handleLinkChange(index, {
-                        ...link,
-                        avatar: e.target.value,
-                      })
+                    onChange={(description) =>
+                      handleLinkChange(index, { ...link, description })
                     }
-                    onFocus={() => showAdditionalFields(index)}
                   />
-                </TextFieldRoot>
-                <SubTitle>Description</SubTitle>
-                <CSSInput
-                  value={link.description || ""}
-                  onFocus={() => showAdditionalFields(index)}
-                  onChange={(description) =>
-                    handleLinkChange(index, { ...link, description })
-                  }
-                />
-              </>
-            )}
-          </LinkContainer>
-        ))}
+                </>
+              )}
+            </LinkContainer>
+          ))}
         <AddLinkButton type="button" onClick={addNewLink}>
           <FaPlus style={{ marginRight: "5px" }} /> Add link
         </AddLinkButton>