Fix BookingList and MultipleSelect issues

aelassas · Apr 16, 2024 · 6a021e8 · 6a021e8
1 parent 90dc833
commit 6a021e8
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 15 deletions.
diff --git a/backend/src/components/BookingList.tsx b/backend/src/components/BookingList.tsx
@@ -100,12 +100,15 @@ const BookingList = ({
   const [loading, setLoading] = useState(false)
 
   useEffect(() => {
-    setPage(paginationModel.page)
-    setPageSize(paginationModel.pageSize)
+    if (!env.isMobile()) {
+      setPage(paginationModel.page)
+      setPageSize(paginationModel.pageSize)
+    }
   }, [paginationModel])
 
   const fetchData = async (_page: number, _user?: movininTypes.User) => {
     try {
+      console.log('fetch')
       const _pageSize = env.isMobile() ? env.BOOKINGS_MOBILE_PAGE_SIZE : pageSize
 
       if (agencies && statuses) {
@@ -187,13 +190,13 @@ const BookingList = ({
   }, [bookingUser])
 
   useEffect(() => {
-    if (agencies && statuses) {
+    if (agencies && statuses && loggedUser) {
       fetchData(page, user)
     }
   }, [page]) // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
-    if (agencies && statuses) {
+    if (agencies && statuses && loggedUser) {
       if (page === 0) {
         fetchData(0, user)
       } else {
@@ -342,7 +345,7 @@ const BookingList = ({
   }
 
   useEffect(() => {
-    if (agencies && statuses) {
+    if (agencies && statuses && loggedUser) {
       const _columns = getColumns()
       setColumns(_columns)
 

diff --git a/backend/src/components/MultipleSelect.tsx b/backend/src/components/MultipleSelect.tsx
@@ -262,7 +262,7 @@ const MultipleSelect = ({
         renderOption={(props, option) => {
           if (type === movininTypes.RecordType.User) {
             return (
-              <li {...props} className={`${props.className} ms-option`}>
+              <li {...props} key={option._id} className={`${props.className} ms-option`}>
                 <span className="option-image">
                   {option.image ? <Avatar src={movininHelper.joinURL(env.CDN_USERS, option.image)} className="avatar-medium" /> : <AccountCircle className="avatar-medium" color="disabled" />}
                 </span>
@@ -271,7 +271,7 @@ const MultipleSelect = ({
             )
           } if (type === movininTypes.RecordType.Agency) {
             return (
-              <li {...props} className={`${props.className} ms-option`}>
+              <li {...props} key={option._id} className={`${props.className} ms-option`}>
                 <span className="option-image agency-ia">
                   <img src={movininHelper.joinURL(env.CDN_USERS, option.image)} alt={option.name} />
                 </span>
@@ -280,7 +280,7 @@ const MultipleSelect = ({
             )
           } if (type === movininTypes.RecordType.Location) {
             return (
-              <li {...props} className={`${props.className} ms-option`}>
+              <li {...props} key={option._id} className={`${props.className} ms-option`}>
                 <span className="option-image">
                   <LocationIcon />
                 </span>
@@ -289,7 +289,7 @@ const MultipleSelect = ({
             )
           } if (type === movininTypes.RecordType.Property) {
             return (
-              <li {...props} className={`${props.className} ms-option`}>
+              <li {...props} key={option._id} className={`${props.className} ms-option`}>
                 <span className="option-image property-ia">
                   <img
                     src={movininHelper.joinURL(env.CDN_PROPERTIES, option.image)}
@@ -305,7 +305,7 @@ const MultipleSelect = ({
           }
 
           return (
-            <li {...props} className={`${props.className} ms-option`}>
+            <li {...props} key={option._id} className={`${props.className} ms-option`}>
               <span>{option.name}</span>
             </li>
           )

diff --git a/frontend/src/components/BookingList.tsx b/frontend/src/components/BookingList.tsx
@@ -97,12 +97,15 @@ const BookingList = ({
   const [cancelRequestProcessing, setCancelRequestProcessing] = useState(false)
 
   useEffect(() => {
-    setPage(paginationModel.page)
-    setPageSize(paginationModel.pageSize)
+    if (!env.isMobile()) {
+      setPage(paginationModel.page)
+      setPageSize(paginationModel.pageSize)
+    }
   }, [paginationModel])
 
   const fetchData = async (_page: number, _user?: movininTypes.User) => {
     try {
+      console.log('fetch')
       const _pageSize = env.isMobile() ? env.BOOKINGS_MOBILE_PAGE_SIZE : pageSize
 
       if (agencies && statuses) {
@@ -184,13 +187,13 @@ const BookingList = ({
   }, [bookingUser])
 
   useEffect(() => {
-    if (agencies && statuses) {
+    if (agencies && statuses && user) {
       fetchData(page, user)
     }
   }, [page]) // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
-    if (agencies && statuses) {
+    if (agencies && statuses && user) {
       if (page === 0) {
         fetchData(0, user)
       } else {
@@ -315,7 +318,7 @@ const BookingList = ({
   }
 
   useEffect(() => {
-    if (agencies && statuses) {
+    if (agencies && statuses && user) {
       const _columns = getColumns()
       setColumns(_columns)