fix: do not render modal at all if no data (#2443)

* fix: do not render modal at all if no data * chore: update prettier
rolling-scopes · Feb 28, 2024 · 61fc52a · 61fc52a
1 parent a759aa9
commit 61fc52a
Show file tree

Hide file tree

Showing 13 changed files with 170 additions and 143 deletions.
diff --git a/client/src/components/Forms/ModalForm.tsx b/client/src/components/Forms/ModalForm.tsx
@@ -1,22 +1,21 @@
 import { ButtonProps, Form, Modal, Spin } from 'antd';
 import { FormInstance } from 'antd/es/form/Form';
-import * as React from 'react';
+import React from 'react';
 
-type Props = {
-  data: any;
+type Props<T> = React.PropsWithChildren<{
+  data: T;
   title?: string;
   submit: (arg: any) => void;
   cancel: (arg: any) => void;
   onChange?: (values: any) => void;
   getInitialValues?: (arg: any) => any;
-  children: any;
   loading?: boolean;
   okText?: string;
   form?: FormInstance;
   okButtonProps?: ButtonProps;
-};
+}>;
 
-export function ModalForm(props: Props) {
+export function ModalForm<T extends object>(props: Props<T>) {
   const antForm = Form.useForm()[0];
   const form = props.form || antForm;
 

diff --git a/client/src/components/StudentMentorModal.tsx b/client/src/components/StudentMentorModal.tsx
@@ -15,8 +15,12 @@ export function StudentMentorModal(props: Props) {
     props.onOk(values.studentGithubId, values.mentorGithubId);
   };
 
+  if (!props.visible) {
+    return null;
+  }
+
   return (
-    <ModalForm title="Student/Mentor" data={props.visible ? {} : null} submit={handleSubmit} cancel={props.onCancel}>
+    <ModalForm title="Student/Mentor" data={{}} submit={handleSubmit} cancel={props.onCancel}>
       <Row gutter={24}>
         <Col span={24}>
           <Form.Item

diff --git a/client/src/modules/CourseManagement/components/CourseTaskModal/index.tsx b/client/src/modules/CourseManagement/components/CourseTaskModal/index.tsx
@@ -87,6 +87,10 @@ export function CourseTaskModal(props: Props) {
     form.setFieldsValue({ type: task?.type });
   };
 
+  if (!data) {
+    return null;
+  }
+
   return (
     <ModalForm
       loading={loading}

diff --git a/client/src/modules/CourseManagement/components/CoursesListModal/index.tsx b/client/src/modules/CourseManagement/components/CoursesListModal/index.tsx
@@ -40,6 +40,10 @@ export function CoursesListModal(props: Props) {
     [courses],
   );
 
+  if (!props.data) {
+    return null;
+  }
+
   return (
     <ModalForm
       data={props.data}

diff --git a/client/src/modules/MentorRegistry/components/MentorRegistryTableContainer.tsx b/client/src/modules/MentorRegistry/components/MentorRegistryTableContainer.tsx
@@ -128,8 +128,9 @@ export const MentorRegistryTableContainer = ({
       ),
       ...combinedFilter.preferredCourses.map(
         preferredCourse =>
-          `${MentorsRegistryColumnName.PreferredCourses}: ${courses.find(course => course.id === preferredCourse)
-            ?.name}`,
+          `${MentorsRegistryColumnName.PreferredCourses}: ${
+            courses.find(course => course.id === preferredCourse)?.name
+          }`,
       ),
     ];
 

diff --git a/client/src/pages/admin/courses.tsx b/client/src/pages/admin/courses.tsx
@@ -112,7 +112,10 @@ function Page() {
     [modalAction, modalData, modalLoading],
   );
 
-  const renderModal = useCallback(() => {
+  const renderModal = () => {
+    if (modalData == null) {
+      return;
+    }
     const isUpdate = modalAction === 'update';
     return (
       <ModalForm
@@ -241,12 +244,12 @@ function Page() {
           label="Minimum Students per Mentor"
           rules={[{ min: 1, type: 'integer', message: 'Ensure that the input, if provided, is a positive integer.' }]}
         >
-          <InputNumber step={1} defaultValue={2} />
+          <InputNumber step={1} />
         </Form.Item>
 
         <Form.Item name="state" label="State">
           <Radio.Group>
-            <Radio value={null}>Active</Radio>
+            <Radio value="active">Active</Radio>
             <Radio value="planned">Planned</Radio>
             <Radio value="completed">Completed</Radio>
           </Radio.Group>
@@ -265,7 +268,7 @@ function Page() {
         </Form.Item>
       </ModalForm>
     );
-  }, [modalData, handleModalSubmit, isCopy, setIsCopy]);
+  };
 
   return (
     <AdminPageLayout title="Manage Courses" loading={loading} courses={allCourses}>
@@ -386,8 +389,9 @@ function getColumns(handleEditItem: any) {
 function getInitialValues(modalData: Partial<Course>) {
   return {
     ...modalData,
+    minStudentsPerMentor: modalData.minStudentsPerMentor || 2,
     inviteOnly: !!modalData.inviteOnly,
-    state: modalData.completed ? 'completed' : modalData.planned ? 'planned' : null,
+    state: modalData.completed ? 'completed' : modalData.planned ? 'planned' : 'active',
     registrationEndDate: modalData.registrationEndDate ? dayjs.utc(modalData.registrationEndDate) : null,
     range:
       modalData.startDate && modalData.endDate

diff --git a/client/src/pages/admin/discord-server.tsx b/client/src/pages/admin/discord-server.tsx
@@ -73,42 +73,43 @@ function Page() {
   );
 
   const renderModal = useCallback(
-    () => (
-      <ModalForm
-        data={modalData}
-        title="Discord Server"
-        submit={handleModalSubmit}
-        cancel={() => setModalData(null)}
-        getInitialValues={getInitialValues}
-        loading={modalLoading}
-      >
-        <Row gutter={24}>
-          <Col span={24}>
-            <Form.Item name="name" label="Name" rules={[{ required: true, message: 'Please enter server name' }]}>
-              <Input />
-            </Form.Item>
-          </Col>
-          <Col span={24}>
-            <Form.Item
-              name="gratitudeUrl"
-              label="Gratitude URL"
-              rules={[{ required: true, message: 'Please enter gratitude URL' }]}
-            >
-              <Input />
-            </Form.Item>
-          </Col>
-          <Col span={24}>
-            <Form.Item
-              name="mentorsChatUrl"
-              label="Mentors chat URL"
-              rules={[{ required: true, message: `Please enter mentors chat URL` }]}
-            >
-              <Input />
-            </Form.Item>
-          </Col>
-        </Row>
-      </ModalForm>
-    ),
+    () =>
+      modalData ? (
+        <ModalForm
+          data={modalData}
+          title="Discord Server"
+          submit={handleModalSubmit}
+          cancel={() => setModalData(null)}
+          getInitialValues={getInitialValues}
+          loading={modalLoading}
+        >
+          <Row gutter={24}>
+            <Col span={24}>
+              <Form.Item name="name" label="Name" rules={[{ required: true, message: 'Please enter server name' }]}>
+                <Input />
+              </Form.Item>
+            </Col>
+            <Col span={24}>
+              <Form.Item
+                name="gratitudeUrl"
+                label="Gratitude URL"
+                rules={[{ required: true, message: 'Please enter gratitude URL' }]}
+              >
+                <Input />
+              </Form.Item>
+            </Col>
+            <Col span={24}>
+              <Form.Item
+                name="mentorsChatUrl"
+                label="Mentors chat URL"
+                rules={[{ required: true, message: `Please enter mentors chat URL` }]}
+              >
+                <Input />
+              </Form.Item>
+            </Col>
+          </Row>
+        </ModalForm>
+      ) : null,
     [modalData, handleModalSubmit],
   );
 

diff --git a/client/src/pages/admin/events.tsx b/client/src/pages/admin/events.tsx
@@ -73,55 +73,57 @@ function Page() {
     [modalAction, modalData],
   );
 
-  const renderModal = useCallback(() => {
-    return (
-      <ModalForm
-        data={modalData}
-        title="Event"
-        submit={handleModalSubmit}
-        cancel={() => setModalData(null)}
-        getInitialValues={getInitialValues}
-      >
-        <Form.Item name="name" label="Name" rules={[{ required: true, message: 'Please enter event name' }]}>
-          <Input />
-        </Form.Item>
-        <Form.Item name="type" label="Event Type" rules={[{ required: true, message: 'Please select a type' }]}>
-          <Select>
-            {EVENT_TYPES.map(({ name, id }) => (
-              <Select.Option key={id} value={id}>
-                {name}
-              </Select.Option>
-            ))}
-          </Select>
-        </Form.Item>
-        <Form.Item
-          required
-          name="disciplineId"
-          label="Discipline"
-          rules={[{ required: true, message: 'Please select a discipline' }]}
+  const renderModal = useCallback(
+    () =>
+      modalData ? (
+        <ModalForm
+          data={modalData}
+          title="Event"
+          submit={handleModalSubmit}
+          cancel={() => setModalData(null)}
+          getInitialValues={getInitialValues}
         >
-          <Select>
-            {disciplines.map(({ id, name }) => (
-              <Select.Option key={id} value={id}>
-                {name}
-              </Select.Option>
-            ))}
-          </Select>
-        </Form.Item>
-
-        <Form.Item
-          name="descriptionUrl"
-          label="Description URL"
-          rules={[{ message: 'Please enter valid URL', pattern: urlPattern }]}
-        >
-          <Input />
-        </Form.Item>
-        <Form.Item name="description" label="Description">
-          <Input.TextArea />
-        </Form.Item>
-      </ModalForm>
-    );
-  }, [modalData]);
+          <Form.Item name="name" label="Name" rules={[{ required: true, message: 'Please enter event name' }]}>
+            <Input />
+          </Form.Item>
+          <Form.Item name="type" label="Event Type" rules={[{ required: true, message: 'Please select a type' }]}>
+            <Select>
+              {EVENT_TYPES.map(({ name, id }) => (
+                <Select.Option key={id} value={id}>
+                  {name}
+                </Select.Option>
+              ))}
+            </Select>
+          </Form.Item>
+          <Form.Item
+            required
+            name="disciplineId"
+            label="Discipline"
+            rules={[{ required: true, message: 'Please select a discipline' }]}
+          >
+            <Select>
+              {disciplines.map(({ id, name }) => (
+                <Select.Option key={id} value={id}>
+                  {name}
+                </Select.Option>
+              ))}
+            </Select>
+          </Form.Item>
+
+          <Form.Item
+            name="descriptionUrl"
+            label="Description URL"
+            rules={[{ message: 'Please enter valid URL', pattern: urlPattern }]}
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item name="description" label="Description">
+            <Input.TextArea />
+          </Form.Item>
+        </ModalForm>
+      ) : null,
+    [modalData],
+  );
 
   return (
     <AdminPageLayout title="Manage Events" loading={loading} courses={courses}>

diff --git a/client/src/pages/admin/mentor-registry.tsx b/client/src/pages/admin/mentor-registry.tsx
@@ -117,9 +117,13 @@ function Page() {
   );
 
   const renderModal = useCallback(() => {
+    const data = modalData?.record;
+    if (!data) {
+      return null;
+    }
     return (
       <ModalForm
-        data={modalData?.record}
+        data={data}
         title="Record"
         submit={handleModalSubmit}
         cancel={() => setModalData(null)}

diff --git a/client/src/pages/admin/user-group.tsx b/client/src/pages/admin/user-group.tsx
@@ -90,40 +90,41 @@ function Page() {
   );
 
   const renderModal = useCallback(
-    () => (
-      <ModalForm
-        data={modalData}
-        title="User Group"
-        submit={handleModalSubmit}
-        cancel={() => setModalData(null)}
-        getInitialValues={getInitialValues}
-        loading={modalLoading}
-      >
-        <Row gutter={24}>
-          <Col span={24}>
-            <Form.Item name="name" label="Name" rules={[{ required: true, message: 'Please enter user group name' }]}>
-              <Input />
-            </Form.Item>
-          </Col>
-          <Col span={24}>
-            <Form.Item name="users" label="Users" rules={[{ required: true, message: 'Please select users' }]}>
-              <UserSearch mode="multiple" searchFn={loadUsers} defaultValues={modalData?.users} />
-            </Form.Item>
-          </Col>
-          <Col span={24}>
-            <Form.Item name="roles" label="Roles" rules={[{ required: true, message: `Please select permissions` }]}>
-              <Select mode="tags">
-                {roles.map(role => (
-                  <Select.Option key={role} value={role}>
-                    {role}
-                  </Select.Option>
-                ))}
-              </Select>
-            </Form.Item>
-          </Col>
-        </Row>
-      </ModalForm>
-    ),
+    () =>
+      modalData ? (
+        <ModalForm
+          data={modalData}
+          title="User Group"
+          submit={handleModalSubmit}
+          cancel={() => setModalData(null)}
+          getInitialValues={getInitialValues}
+          loading={modalLoading}
+        >
+          <Row gutter={24}>
+            <Col span={24}>
+              <Form.Item name="name" label="Name" rules={[{ required: true, message: 'Please enter user group name' }]}>
+                <Input />
+              </Form.Item>
+            </Col>
+            <Col span={24}>
+              <Form.Item name="users" label="Users" rules={[{ required: true, message: 'Please select users' }]}>
+                <UserSearch mode="multiple" searchFn={loadUsers} defaultValues={modalData?.users} />
+              </Form.Item>
+            </Col>
+            <Col span={24}>
+              <Form.Item name="roles" label="Roles" rules={[{ required: true, message: `Please select permissions` }]}>
+                <Select mode="tags">
+                  {roles.map(role => (
+                    <Select.Option key={role} value={role}>
+                      {role}
+                    </Select.Option>
+                  ))}
+                </Select>
+              </Form.Item>
+            </Col>
+          </Row>
+        </ModalForm>
+      ) : null,
     [modalData, handleModalSubmit],
   );