From 3beca2f40b308cc02cc7f6c2830bdfb6fc3e60b2 Mon Sep 17 00:00:00 2001
From: Tsu-ba-me <ynho.li.aa.e@gmail.com>
Date: Fri, 12 Aug 2022 14:39:29 -0400
Subject: [PATCH] fix(striker-ui): extend message group as necessary

---
 striker-ui/components/MessageGroup.tsx | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/striker-ui/components/MessageGroup.tsx b/striker-ui/components/MessageGroup.tsx
index c1c28b89..331a32e5 100644
--- a/striker-ui/components/MessageGroup.tsx
+++ b/striker-ui/components/MessageGroup.tsx
@@ -36,33 +36,37 @@ const MessageGroup = forwardRef<
     },
     ref,
   ) => {
-    const { keys: messageKeys, init: initialMessages } = useMemo(
+    const { keys: messageKeys } = useMemo(
       () =>
         Array.from({ length: count }).reduce<{
           keys: string[];
-          init: undefined[];
         }>(
           (previous) => {
-            const { keys, init } = previous;
+            const { keys } = previous;
 
             keys.push(uuidv4());
-            init.push(undefined);
 
             return previous;
           },
-          { keys: [], init: [] },
+          { keys: [] },
         ),
       [count],
     );
 
-    const [messages, setMessages] =
-      useState<Array<Message | undefined>>(initialMessages);
+    const [messages, setMessages] = useState<Array<Message | undefined>>([]);
 
     const setMessage = useCallback((index: number, message?: Message) => {
       setMessages((previous) => {
-        previous.splice(index, 1, message);
+        const result = [...previous];
+        const diff = index + 1 - result.length;
 
-        return [...previous];
+        if (diff > 0) {
+          result.push(...Array.from({ length: diff }, () => undefined));
+        }
+
+        result.splice(index, 1, message);
+
+        return result;
       });
     }, []);