Open reason registration popup on deniel

KanzaTahreem · May 28, 2023 · c14ecff · c14ecff
1 parent fa1c552
commit c14ecff
Show file tree

Hide file tree

Showing 6 changed files with 164 additions and 47 deletions.
diff --git a/src/components/ApplicationList.jsx b/src/components/ApplicationList.jsx
@@ -8,6 +8,7 @@ import InvestChange from './InvestChange';
 import Container from './Container';
 import { useSelector } from 'react-redux';
 import { updateApprovalStatus } from '../redux/clientsDataReducer';
+import RegisterReason from './RegisterReason';
 
 const ApplicationList = ({displayPopup, closePopup}) => {
   const tabItems = [
@@ -45,19 +46,32 @@ const ApplicationList = ({displayPopup, closePopup}) => {
     displayPopup('No applications selected', closePopup, null);
   }
 
-  const onClose = () => setModal(<></>);
+  const closeRegisterReason = () => {
+    setApprovalStatusSelectedItem("승인상태 변경");
+    setPrevApprovalStatusSelectedItem(null);
+    setModal(<></>);
+  };
+
+  const closeInvestChange = () => {
+    setModal(<></>);
+  }
 
   const openModal = (name) => {
     if (name === "InvestChange") {
-      setModal(<Modal><Container><InvestChange onClose={onClose} /></Container></Modal>)
+      setModal(<Modal><Container><InvestChange onClose={closeInvestChange} /></Container></Modal>)
+    } else if (name === "RegisterReason") {
+      setModal(<Modal><Container><RegisterReason onClose={closeRegisterReason} /></Container></Modal>)
     }
   }
 
   const updateSelectedItemAndClose = (changeItem) => {
     if(changeItem) {
       getClientsDataChecked().forEach((application) => {
-        console.log(application)
-        dispatchApprovalStatusUpdate(application.serial, approvalStatusSelectedItem)
+        if (approvalStatusSelectedItem === "승인거부") {
+          openModal("RegisterReason")
+        } else {
+          dispatchApprovalStatusUpdate(application.serial, approvalStatusSelectedItem)
+        }
       });
       setPrevApprovalStatusSelectedItem(approvalStatusSelectedItem);
     } else {

diff --git a/src/components/InputField.jsx b/src/components/InputField.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+const InputField = ({text, placeholder}) => {
+  return (
+    <div>
+      <label htmlFor="text">{text}</label>
+      <input type="text" name="text" placeholder={placeholder} />
+    </div>
+  );
+}
+
+export default InputField;
diff --git a/src/components/RegisterReason.jsx b/src/components/RegisterReason.jsx
@@ -1,45 +1,29 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { HiXMark } from 'react-icons/hi2';
 import Checkbox from './Checkbox';
 import styles from '../styles/modal.module.css';
+import { useSelector, useDispatch } from 'react-redux';
+import { resetRegisterModal, toggleCheckbox, updateTextarea } from '../redux/registerReducer';
+import InputField from './InputField';
+import { resolvePath } from 'react-router-dom';
 
-const RegisterReason = ({ displayPopup, closePopup }) => {
-  const [reasons, setReasons] = useState({
-    checkboxes: {
-      '서류 식별 불가': false,
-      '필수 서류 누락': false,
-      '서류의 내용이 등록된 회원정보와 다름': false,
-      '서류에 누락된 내용이 있음 (필수정보, 회사직인, 본인날인, 본인서명 등)': false,
-      '서류의 유효기간이 초과됨': false,
-      '직접 입력': false,
-    },
-    textarea: '',
-  });
+const RegisterReason = ({ displayPopup, closePopup, onClose }) => {
+  const dispatch = useDispatch();
+  const checkboxes = useSelector((state) => state.register.checkboxes);
+  const textarea = useSelector((state) => state.register.textarea)
 
   const handleCheckboxChange = (label) => {
-    setReasons((prevReasons) => ({
-      checkboxes: {
-        ...Object.keys(prevReasons.checkboxes).reduce((acc, key) => {
-          acc[key] = key === label ? !prevReasons.checkboxes[key] : false;
-          return acc;
-        }, {}),
-      },
-      textarea: prevReasons.textarea,
-    }));
+    dispatch(toggleCheckbox(label));
   };
 
   const handleTextareaChange = (event) => {
     const value = event.target.value;
-    setReasons((prevReasons) => ({
-      ...prevReasons,
-      textarea: value,
-    }));
+    dispatch(updateTextarea(value));
   };
 
   const handleSave = (event) => {
     event.preventDefault();
 
-    const { checkboxes, textarea } = reasons;
     const isAnyCheckboxChecked = Object.values(checkboxes).includes(true);
 
     if ((!isAnyCheckboxChecked && textarea.trim() === '') || (checkboxes['직접 입력'] && textarea.trim() === '')) {
@@ -49,43 +33,41 @@ const RegisterReason = ({ displayPopup, closePopup }) => {
     }
   };
 
+  const cancelPopup = () => {
+    dispatch(resetRegisterModal())
+    onClose();
+  }
+
   return (
     <section className={styles.register_reason}>
       <div>
         <h1 className={styles.title}>투자유형 변경</h1>
-        <HiXMark className={styles.xmark} />
+        <HiXMark className={styles.xmark}  onClick={cancelPopup} />
       </div>
       <div className={styles.model_content}>
         <form>
-          <div>
-            <label htmlFor="text">회원번호</label>
-            <input type="text" name="text" placeholder="abc111, abc222" />
-          </div>
-          <div>
-            <label htmlFor="text">회원명/법인명</label>
-            <input type="text" name="text" placeholder="김길동, ㈜가나다라투자" />
-          </div>
+          <InputField text={"회원번호"} placeholder={"abc111, abc222"} />
+          <InputField text={"회원명/법인명"} placeholder={"김길동, ㈜가나다라투자"} />
           <div>
             <label htmlFor="text">승인거부 사유</label>
             <div className={styles.checkbox_wrapper}>
-              {Object.entries(reasons.checkboxes).map(([label, checked]) => (
+              {Object.entries(checkboxes).map(([label, checked]) => (
                 <Checkbox
                   key={label}
                   label={label}
                   checked={checked}
                   onChange={() => handleCheckboxChange(label)}
                   disabled={
-                    (Object.values(reasons.checkboxes).some((value) => value) && !checked) ||
+                    (Object.values(checkboxes).some((value) => value) && !checked) ||
                     (label === '직접 입력' && checked)
                   }
                 />
               ))}
-
               <textarea
                 onChange={handleTextareaChange}
-                className={`${styles.add_reason} ${reasons.checkboxes['직접 입력'] ? styles.textarea_enabled : ''}`}
+                className={`${styles.add_reason} ${checkboxes['직접 입력'] ? styles.textarea_enabled : ''}`}
                 placeholder="사유 입력"
-                disabled={!reasons.checkboxes['직접 입력']}
+                disabled={!checkboxes['직접 입력']}
               ></textarea>
             </div>
           </div>
@@ -95,7 +77,7 @@ const RegisterReason = ({ displayPopup, closePopup }) => {
         <button className={styles.save_btn} onClick={handleSave}>
           저장
         </button>
-        <button className={styles.cancel_btn}>취소</button>
+        <button className={styles.cancel_btn} onClick={cancelPopup}>취소</button>
       </div>
     </section>
   );

diff --git a/src/components/TableRow.jsx b/src/components/TableRow.jsx
@@ -39,7 +39,7 @@ const TableRow = ({ item, displayPopup, closePopup, key }) => {
 
   const onCheckBoxChange = (e) => {
     if (checkboxDisabled()) {
-      const message = approvalStatus === '승인완료' ? '이미 승인 완료된 회원입니다.' : '이미 승인 거부된 회원입니다';
+      const message = approvalStatus === '승인완료' ? 'You are already an approved member.' : 'You have already been denied approval.';
       displayPopup(message, closePopup, null)
     } else {
       handleCheckboxChange();

diff --git a/src/redux/investmentReducer.js b/src/redux/investmentReducer.js
@@ -0,0 +1,54 @@
+export const SET_SELECTED_ITEM = 'investChange/SET_SELECTED_ITEM';
+export const SET_UPLOADED_FILES = 'investChange/SET_UPLOADED_FILES';
+export const REMOVE_UPLOADED_FILE = 'investChange/REMOVE_UPLOADED_FILE';
+
+export const setSelectedItem = (item) => {
+  return {
+    type: SET_SELECTED_ITEM,
+    payload: item,
+  };
+};
+
+export const setUploadedFiles = (files) => {
+  return {
+    type: SET_UPLOADED_FILES,
+    payload: files,
+  };
+};
+
+export const removeUploadedFile = (fileIndex) => {
+  return {
+    type: REMOVE_UPLOADED_FILE,
+    payload: fileIndex,
+  };
+};
+
+const initialState = {
+  selectedItem: null,
+  uploadedFiles: [],
+};
+
+const investmentReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case SET_SELECTED_ITEM:
+      return {
+        ...state,
+        selectedItem: action.payload,
+      };
+    case SET_UPLOADED_FILES:
+      return {
+        ...state,
+        uploadedFiles: action.payload,
+      };
+    case REMOVE_UPLOADED_FILE:
+      const fileIndex = action.payload;
+      return {
+        ...state,
+        uploadedFiles: state.uploadedFiles.filter((_f, index) => index !== fileIndex),
+      };
+    default:
+      return state;
+  }
+};
+
+export default investmentReducer;
diff --git a/src/redux/registerReducer.js b/src/redux/registerReducer.js
@@ -0,0 +1,55 @@
+export const TOGGLE_CHECKBOX = 'registerReason/TOGGLE_CHECKBOX';
+export const UPDATE_TEXTAREA = 'registerReason/UPDATE_TEXTAREA';
+export const RESET_REGISTER_MODAL = 'registerReason/RESET_REGISTER_MODAL';
+
+export const toggleCheckbox = (label) => ({
+  type: TOGGLE_CHECKBOX,
+  payload: label,
+});
+
+export const resetRegisterModal = () => ({
+  type: RESET_REGISTER_MODAL
+});
+
+export const updateTextarea = (value) => ({
+  type: UPDATE_TEXTAREA,
+  payload: value,
+});
+
+
+const initialState = {
+  checkboxes: {
+    '서류 식별 불가': false,
+    '필수 서류 누락': false,
+    '서류의 내용이 등록된 회원정보와 다름': false,
+    '서류에 누락된 내용이 있음 (필수정보, 회사직인, 본인날인, 본인서명 등)': false,
+    '서류의 유효기간이 초과됨': false,
+    '직접 입력': false,
+  },
+  textarea: '',
+};
+
+const registerReasonReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case TOGGLE_CHECKBOX:
+      const { payload: label } = action;
+      const checkboxes = {};
+
+      // Set the clicked checkbox to true, and others to false
+      Object.keys(state.checkboxes).forEach((key) => {
+        checkboxes[key] = key === label;
+      });
+
+      return { ...state, checkboxes };
+
+    case UPDATE_TEXTAREA:
+      return { ...state, textarea: action.payload };
+
+      case RESET_REGISTER_MODAL:
+        return initialState;
+    default:
+      return state;
+  }
+};
+
+export default registerReasonReducer;