From 65c764e12d35728a122e1ac24fbf9151bc7e8d9b Mon Sep 17 00:00:00 2001
From: okatu-loli <CN_QianShi@hotmail.com>
Date: Tue, 24 Sep 2024 18:17:43 +0800
Subject: [PATCH] feat: Reduce code duplication in form item rendering

---
 web/src/auth/SignupPage.js | 244 ++++++-------------------------------
 1 file changed, 36 insertions(+), 208 deletions(-)

diff --git a/web/src/auth/SignupPage.js b/web/src/auth/SignupPage.js
index 17186e72..75574628 100644
--- a/web/src/auth/SignupPage.js
+++ b/web/src/auth/SignupPage.js
@@ -50,6 +50,38 @@ const formItemLayout = {
   },
 };
 
+const renderFormItem = (signupItem) => {
+  const commonProps = {
+    name: signupItem.name.toLowerCase(),
+    label: signupItem.label || signupItem.name,
+    rules: [
+      {
+        required: signupItem.required,
+        message: i18next.t(`signup:Please input your ${signupItem.label || signupItem.name}!`),
+      },
+    ],
+  };
+
+  if (!signupItem.type || signupItem.type === "Input") {
+    return (
+      <Form.Item {...commonProps}>
+        <Input placeholder={signupItem.placeholder} />
+      </Form.Item>
+    );
+  } else if (signupItem.type === "Single Choice" || signupItem.type === "Multiple Choices") {
+    return (
+      <Form.Item {...commonProps}>
+        <Select
+          mode={signupItem.type === "Multiple Choices" ? "multiple" : "single"}
+          placeholder={signupItem.placeholder}
+          showSearch={false}
+          options={signupItem.options.map(option => ({label: option, value: option}))}
+        />
+      </Form.Item>
+    );
+  }
+};
+
 export const tailFormItemLayout = {
   wrapperCol: {
     xs: {
@@ -694,217 +726,13 @@ class SignupPage extends React.Component {
 
       );
     } else if (signupItem.name === "Gender") {
-      if (!signupItem.type) {
-        return (
-          <Form.Item
-            name={signupItem.name.toLowerCase()}
-            label={signupItem.label ? signupItem.label : signupItem.name}
-            rules={[
-              {
-                required: signupItem.required,
-                message: i18next.t(`signup:Please input your ${signupItem.label || signupItem.name}!`),
-              },
-            ]}
-          >
-            <Input placeholder={signupItem.placeholder} />
-          </Form.Item>
-        );
-      }
-      if (!signupItem.type || signupItem.type === "Input") {
-        return (
-          <Form.Item
-            name={signupItem.name.toLowerCase()}
-            label={signupItem.label ? signupItem.label : signupItem.name}
-            rules={[
-              {
-                required: signupItem.required,
-                message: i18next.t(`signup:Please input your ${signupItem.label}!`),
-              },
-            ]}
-          >
-            <Input placeholder={signupItem.placeholder} />
-          </Form.Item>
-        );
-      } else if (signupItem.type === "Single Choice" || signupItem.type === "Multiple Choices") {
-        return (
-          <Form.Item
-            name={signupItem.name.toLowerCase()}
-            label={signupItem.label ? signupItem.label : signupItem.name}
-            rules={[
-              {
-                required: signupItem.required,
-                message: i18next.t(`Please select your ${signupItem.label || signupItem.name}!`),
-              },
-            ]}
-          >
-            <Select
-              mode={signupItem.type === "Multiple Choices" ? "multiple" : "single"}
-              placeholder={signupItem.placeholder}
-              showSearch={false}
-              options={signupItem.options.map(option => ({label: option, value: option}))}
-            />
-          </Form.Item>
-        );
-      }
+      return renderFormItem(signupItem);
     } else if (signupItem.name === "Bio") {
-      if (!signupItem.type || signupItem === "") {
-        return (
-          <Form.Item
-            name={signupItem.name.toLowerCase()}
-            label={signupItem.label ? signupItem.label : signupItem.name}
-            rules={[
-              {
-                required: signupItem.required,
-                message: i18next.t(`signup:Please input your ${signupItem.label || signupItem.name}!`),
-              },
-            ]}
-          >
-            <Input placeholder={signupItem.placeholder} />
-          </Form.Item>
-        );
-      }
-      if (!signupItem.type || signupItem.type === "Input") {
-        return (
-          <Form.Item
-            name={signupItem.name.toLowerCase()}
-            label={signupItem.label ? signupItem.label : signupItem.name}
-            rules={[
-              {
-                required: signupItem.required,
-                message: i18next.t(`signup:Please input your ${signupItem.label}!`),
-              },
-            ]}
-          >
-            <Input placeholder={signupItem.placeholder} />
-          </Form.Item>
-        );
-      } else if (signupItem.type === "Single Choice" || signupItem.type === "Multiple Choices") {
-        return (
-          <Form.Item
-            name={signupItem.name.toLowerCase()}
-            label={signupItem.label ? signupItem.label : signupItem.name}
-            rules={[
-              {
-                required: signupItem.required,
-                message: i18next.t(`Please select your ${signupItem.label || signupItem.name}!`),
-              },
-            ]}
-          >
-            <Select
-              mode={signupItem.type === "Multiple Choices" ? "multiple" : "single"}
-              placeholder={signupItem.placeholder}
-              showSearch={false}
-              options={signupItem.options.map(option => ({label: option, value: option}))}
-            />
-          </Form.Item>
-        );
-      }
+      return renderFormItem(signupItem);
     } else if (signupItem.name === "Tag") {
-      if (!signupItem.type) {
-        return (
-          <Form.Item
-            name={signupItem.name.toLowerCase()}
-            label={signupItem.label ? signupItem.label : signupItem.name}
-            rules={[
-              {
-                required: signupItem.required,
-                message: i18next.t(`signup:Please input your ${signupItem.label || signupItem.name}!`),
-              },
-            ]}
-          >
-            <Input placeholder={signupItem.placeholder} />
-          </Form.Item>
-        );
-      }
-      if (!signupItem.type || signupItem.type === "Input") {
-        return (
-          <Form.Item
-            name={signupItem.name.toLowerCase()}
-            label={signupItem.label ? signupItem.label : signupItem.name}
-            rules={[
-              {
-                required: signupItem.required,
-                message: i18next.t(`signup:Please input your ${signupItem.label}!`),
-              },
-            ]}
-          >
-            <Input placeholder={signupItem.placeholder} />
-          </Form.Item>
-        );
-      } else if (signupItem.type === "Single Choice" || signupItem.type === "Multiple Choices") {
-        return (
-          <Form.Item
-            name={signupItem.name.toLowerCase()}
-            label={signupItem.label ? signupItem.label : signupItem.name}
-            rules={[
-              {
-                required: signupItem.required,
-                message: i18next.t(`Please select your ${signupItem.label || signupItem.name}!`),
-              },
-            ]}
-          >
-            <Select
-              mode={signupItem.type === "Multiple Choices" ? "multiple" : "single"}
-              placeholder={signupItem.placeholder}
-              showSearch={false}
-              options={signupItem.options.map(option => ({label: option, value: option}))}
-            />
-          </Form.Item>
-        );
-      }
+      return renderFormItem(signupItem);
     } else if (signupItem.name === "Education") {
-      if (!signupItem.type) {
-        return (
-          <Form.Item
-            name={signupItem.name.toLowerCase()}
-            label={signupItem.label ? signupItem.label : signupItem.name}
-            rules={[
-              {
-                required: signupItem.required,
-                message: i18next.t(`signup:Please input your ${signupItem.label || signupItem.name}!`),
-              },
-            ]}
-          >
-            <Input placeholder={signupItem.placeholder} />
-          </Form.Item>
-        );
-      }
-      if (!signupItem.type || signupItem.type === "Input") {
-        return (
-          <Form.Item
-            name={signupItem.name.toLowerCase()}
-            label={signupItem.label ? signupItem.label : signupItem.name}
-            rules={[
-              {
-                required: signupItem.required,
-                message: i18next.t(`signup:Please input your ${signupItem.label}!`),
-              },
-            ]}
-          >
-            <Input placeholder={signupItem.placeholder} />
-          </Form.Item>
-        );
-      } else if (signupItem.type === "Single Choice" || signupItem.type === "Multiple Choices") {
-        return (
-          <Form.Item
-            name={signupItem.name.toLowerCase()}
-            label={signupItem.label ? signupItem.label : signupItem.name}
-            rules={[
-              {
-                required: signupItem.required,
-                message: i18next.t(`Please select your ${signupItem.label || signupItem.name}!`),
-              },
-            ]}
-          >
-            <Select
-              mode={signupItem.type === "Multiple Choices" ? "multiple" : "single"}
-              placeholder={signupItem.placeholder}
-              showSearch={false}
-              options={signupItem.options.map(option => ({label: option, value: option}))}
-            />
-          </Form.Item>
-        );
-      }
+      return renderFormItem(signupItem);
     }
   }