From d6e373fbe40d834f26a7bda2c5134735e9327f0b Mon Sep 17 00:00:00 2001
From: QuentinHsu <xuquentinyang@gmail.com>
Date: Tue, 2 Apr 2024 10:58:21 +0800
Subject: [PATCH 1/2] fix(helpers): add key prop to Tag components

---
 web/src/helpers/render.js | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/web/src/helpers/render.js b/web/src/helpers/render.js
index a71215e..f490a72 100644
--- a/web/src/helpers/render.js
+++ b/web/src/helpers/render.js
@@ -10,37 +10,45 @@ export function renderText(text, limit) {
 
 export function renderGroup(group) {
   if (group === '') {
-    return <Tag size='large'>default</Tag>;
+    return (
+      <Tag size='large' key={group}>
+        default
+      </Tag>
+    );
   }
   let groups = group.split(',');
   groups.sort();
   return (
-    <>
+    <span key={group}>
       {groups.map((group) => {
         if (group === 'vip' || group === 'pro') {
           return (
-            <Tag size='large' color='yellow'>
+            <Tag size='large' color='yellow' key={group}>
               {group}
             </Tag>
           );
         } else if (group === 'svip' || group === 'premium') {
           return (
-            <Tag size='large' color='red'>
+            <Tag size='large' color='red' key={group}>
               {group}
             </Tag>
           );
         }
         if (group === 'default') {
-          return <Tag size='large'>{group}</Tag>;
+          return (
+            <Tag size='large' key={group}>
+              {group}
+            </Tag>
+          );
         } else {
           return (
-            <Tag size='large' color={stringToColor(group)}>
+            <Tag size='large' color={stringToColor(group)} key={group}>
               {group}
             </Tag>
           );
         }
       })}
-    </>
+    </span>
   );
 }
 

From 3e90b6d516c4613044d293a84e3a35ca53333cfa Mon Sep 17 00:00:00 2001
From: QuentinHsu <xuquentinyang@gmail.com>
Date: Tue, 2 Apr 2024 13:16:02 +0800
Subject: [PATCH 2/2] refactor(helpers): renderGroup function

---
 web/src/helpers/render.js | 60 ++++++++++++++++-----------------------
 1 file changed, 25 insertions(+), 35 deletions(-)

diff --git a/web/src/helpers/render.js b/web/src/helpers/render.js
index f490a72..cd1f8d9 100644
--- a/web/src/helpers/render.js
+++ b/web/src/helpers/render.js
@@ -8,46 +8,36 @@ export function renderText(text, limit) {
   return text;
 }
 
+/**
+ * Render group tags based on the input group string
+ * @param {string} group - The input group string
+ * @returns {JSX.Element} - The rendered group tags
+ */
 export function renderGroup(group) {
   if (group === '') {
-    return (
-      <Tag size='large' key={group}>
-        default
-      </Tag>
-    );
+    return <Tag size='large' key='default'>default</Tag>;
   }
-  let groups = group.split(',');
-  groups.sort();
+
+  const tagColors = {
+    'vip': 'yellow',
+    'pro': 'yellow',
+    'svip': 'red',
+    'premium': 'red'
+  };
+
+  const groups = group.split(',').sort();
+
   return (
     <span key={group}>
-      {groups.map((group) => {
-        if (group === 'vip' || group === 'pro') {
-          return (
-            <Tag size='large' color='yellow' key={group}>
-              {group}
-            </Tag>
-          );
-        } else if (group === 'svip' || group === 'premium') {
-          return (
-            <Tag size='large' color='red' key={group}>
-              {group}
-            </Tag>
-          );
-        }
-        if (group === 'default') {
-          return (
-            <Tag size='large' key={group}>
-              {group}
-            </Tag>
-          );
-        } else {
-          return (
-            <Tag size='large' color={stringToColor(group)} key={group}>
-              {group}
-            </Tag>
-          );
-        }
-      })}
+      {groups.map((group) => (
+        <Tag
+          size='large'
+          color={tagColors[group] || stringToColor(group)}
+          key={group}
+        >
+          {group}
+        </Tag>
+      ))}
     </span>
   );
 }