Handled show list (#1463)

fix: handled show list
myriadsocial · Sep 16, 2022 · f979791 · f979791
1 parent b4a2594
commit f979791
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 39 deletions.
diff --git a/src/components/Expericence/ModalAddToPost/ModalAddToPost.provider.tsx b/src/components/Expericence/ModalAddToPost/ModalAddToPost.provider.tsx
@@ -1,6 +1,6 @@
 import {InformationCircleIcon} from '@heroicons/react/outline';
 
-import React, {useCallback, useState} from 'react';
+import React, {useCallback, useState, useEffect} from 'react';
 import InfiniteScroll from 'react-infinite-scroll-component';
 import {useSelector} from 'react-redux';
 
@@ -24,7 +24,6 @@ import {useStyles} from './ModalAddToPost.styles';
 import {Empty} from 'components/atoms/Empty';
 import ShowIf from 'components/common/show-if.component';
 import {Skeleton} from 'src/components/Expericence';
-import {Loading} from 'src/components/atoms/Loading';
 import {Modal} from 'src/components/atoms/Modal';
 import {useExperienceHook} from 'src/hooks/use-experience-hook';
 import {WrappedExperience} from 'src/interfaces/experience';
@@ -105,6 +104,12 @@ export const ModalAddToPostProvider: React.ComponentType<ModalAddPostExperienceP
     addPostsToExperience,
     loading,
   } = useExperienceHook();
+
+  useEffect(() => {
+    if (Boolean(user) && userExperiencesMeta.currentPage < userExperiencesMeta.totalPageCount)
+      loadNextUserExperience();
+  }, [user, userExperiencesMeta]);
+
   const [postId, setPostId] = useState<string | null>(null);
   const [open, setOpen] = useState(false);
   const [isSelectAll, setIsSelectAll] = useState(false);
@@ -170,8 +175,6 @@ export const ModalAddToPostProvider: React.ComponentType<ModalAddPostExperienceP
     }
   };
 
-  console.log({userExperiences});
-
   return (
     <>
       <ModalAddToPostContext.Provider value={addPostToExperience}>
@@ -213,37 +216,32 @@ export const ModalAddToPostProvider: React.ComponentType<ModalAddPostExperienceP
           <div></div>
         </div>
 
-        <div id="selectable-list-experiences" className={styles.experienceList}>
-          {loading ? (
-            <Loading />
-          ) : (
-            <InfiniteScroll
-              scrollableTarget="selectable-list-experiences"
-              dataLength={
-                userExperiences.filter(ar => ar.userId === user?.id && ar.subscribed === false)
-                  .length
-              }
-              hasMore={
-                Boolean(user)
-                  ? userExperiencesMeta.currentPage < userExperiencesMeta.totalPageCount
-                  : false
-              }
-              next={handleLoadNextPage}
-              loader={<Skeleton />}>
-              {userExperiences
-                .filter(ar => ar.userId === user?.id && ar.subscribed === false)
-                .map(item => {
-                  return (
-                    <ExperienceItem
-                      key={item.id}
-                      item={item}
-                      selectedExperience={selectedExperience}
-                      handleSelectExperience={handleSelectExperience}
-                    />
-                  );
-                })}
-            </InfiniteScroll>
-          )}
+        <div id="selectable-experience-list" className={styles.experienceList}>
+          <InfiniteScroll
+            scrollableTarget="selectable-experience-list"
+            dataLength={
+              userExperiences.filter(ar => ar.userId === user?.id && ar.subscribed === false).length
+            }
+            hasMore={
+              Boolean(user)
+                ? userExperiencesMeta.currentPage < userExperiencesMeta.totalPageCount
+                : false
+            }
+            next={handleLoadNextPage}
+            loader={<Skeleton />}>
+            {userExperiences
+              .filter(ar => ar.userId === user?.id && ar.subscribed === false)
+              .map(item => {
+                return (
+                  <ExperienceItem
+                    key={item.id}
+                    item={item}
+                    selectedExperience={selectedExperience}
+                    handleSelectExperience={handleSelectExperience}
+                  />
+                );
+              })}
+          </InfiniteScroll>
 
           <ShowIf condition={userExperiences.filter(ar => ar.userId === user?.id).length === 0}>
             <div className={styles.containerEmpty}>

diff --git a/src/components/Expericence/ModalAddToPost/ModalAddToPost.styles.tsx b/src/components/Expericence/ModalAddToPost/ModalAddToPost.styles.tsx
@@ -67,11 +67,11 @@ export const useStyles = makeStyles((theme: Theme) =>
       marginBottom: theme.spacing(0.5),
     },
     experienceList: {
-      maxHeight: '329px',
+      maxHeight: 'fit-content',
       gap: '8px',
       marginBottom: theme.spacing(1.5),
       alignItems: 'center',
-      overflow: 'scroll',
+      //overflow: 'scroll',
     },
     experienceCard: {
       display: 'flex',

diff --git a/src/components/ExperienceList/ExperienceList.tsx b/src/components/ExperienceList/ExperienceList.tsx
@@ -64,8 +64,6 @@ export const ExperienceList: React.FC<ExperienceListProps> = props => {
     viewPostList(TimelineType.EXPERIENCE, userExperience);
   };
 
-  console.log({experiences});
-
   return (
     <div className={classes.root}>
       {experiences.map(item => (