From 5201cacc782ef678ea44479211273e5a401728bd Mon Sep 17 00:00:00 2001
From: Yen-chi Chen <mark86092@gmail.com>
Date: Thu, 20 Jun 2024 00:38:46 +0800
Subject: [PATCH] bugfix: fix ExpandedModal proptype warning (#1348)

Co-authored-by: Peter Shih <peteranny2@gmail.com>
---
 src/components/App/index.js                      | 13 +++++++------
 .../Questionnaire/CollapsedDrawer/index.js       | 16 +++++++++-------
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/components/App/index.js b/src/components/App/index.js
index 1319b3b20..26cbc9039 100644
--- a/src/components/App/index.js
+++ b/src/components/App/index.js
@@ -6,7 +6,8 @@ import StaticHelmet from 'common/StaticHelmet';
 import LoginModal from 'common/LoginModal';
 import useLocStateToastObserver from 'hooks/toastNotification/useLocStateToastObserver';
 import { STATE_SHARE } from 'common/ShareExpSection/shareLinkTo';
-
+import CollapsedDrawer from 'common/Questionnaire/CollapsedDrawer';
+import ExpandedModal from 'common/Questionnaire/ExpandedModal';
 import ToastNotification from '../ToastNotification/ToastNotification';
 import { AppRouteWithSubRoutes } from '../route';
 import styles from './App.module.css';
@@ -15,8 +16,6 @@ import Footer from './Footer';
 import ShareInterviewModal from '../ShareExperience/InterviewForm/TypeForm';
 import ShareSalaryWorkTimesModal from '../ShareExperience/TimeSalaryForm/TypeForm';
 import routes from '../../routes';
-import CollapsedDrawer from 'common/Questionnaire/CollapsedDrawer';
-import NetPromoter from 'common/Questionnaire/ExpandedModal';
 
 const useShare = () => {
   const location = useLocation();
@@ -64,9 +63,11 @@ const App = () => {
         hideProgressBar={share === STATE_SHARE.SALARY_WORK_TIME_NO_PROGRESS_BAR}
       />
       <LoginModal />
-      <CollapsedDrawer>
-        <NetPromoter />
-      </CollapsedDrawer>
+      <CollapsedDrawer
+        render={({ handleToggleModalOpen }) => (
+          <ExpandedModal handleToggleModalOpen={handleToggleModalOpen} />
+        )}
+      />
     </Fragment>
   );
 };
diff --git a/src/components/common/Questionnaire/CollapsedDrawer/index.js b/src/components/common/Questionnaire/CollapsedDrawer/index.js
index 969184a79..de7739a49 100644
--- a/src/components/common/Questionnaire/CollapsedDrawer/index.js
+++ b/src/components/common/Questionnaire/CollapsedDrawer/index.js
@@ -7,7 +7,7 @@ import { useDispatch, useSelector } from 'react-redux';
 
 const MILLISECONDS_OF_TWO_SUBMISSION_SPAN = 1000 * 60 * 60 * 24 * 30;
 
-const CollapsedDrawer = ({ title = '給我們回饋', children }) => {
+const CollapsedDrawer = ({ title, render }) => {
   const isOpen = useSelector(state => state.questionnaireExpandedModal.isOpen);
   const dispatch = useDispatch();
   const handleToggleModalOpen = useCallback(() => {
@@ -30,11 +30,9 @@ const CollapsedDrawer = ({ title = '給我們回饋', children }) => {
     }
   }
 
-  const childrenWithProps = React.Children.map(children, child =>
-    React.cloneElement(child, { handleToggleModalOpen }),
-  );
-
-  if (isOpen) return childrenWithProps;
+  if (isOpen) {
+    return render({ handleToggleModalOpen });
+  }
 
   return (
     <div className={styles.container} onClick={handleToggleModalOpen}>
@@ -44,8 +42,12 @@ const CollapsedDrawer = ({ title = '給我們回饋', children }) => {
 };
 
 CollapsedDrawer.propTypes = {
-  children: PropTypes.node.isRequired,
+  render: PropTypes.func.isRequired,
   title: PropTypes.string,
 };
 
+CollapsedDrawer.defaultProps = {
+  title: '給我們回饋',
+};
+
 export default CollapsedDrawer;