feat: Add infinite loading to photo lists and album lists

cozy · Aug 10, 2023 · 02e44ca · 02e44ca
1 parent ce14aac
commit 02e44ca
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 62 deletions.
diff --git a/src/photos/components/LoadMore.jsx b/src/photos/components/LoadMore.jsx
@@ -0,0 +1,13 @@
+import React from 'react'
+
+import UILoadMore from 'cozy-ui/transpiled/react/LoadMore'
+
+const LoadMore = ({ label, fetchMore }) => {
+  return (
+    <div className="u-flex u-flex-justify-center u-mb-2">
+      <UILoadMore label={label} fetchMore={fetchMore} />
+    </div>
+  )
+}
+
+export { LoadMore }
diff --git a/src/photos/components/LoadMoreButton.jsx b/src/photos/components/LoadMoreButton.jsx
diff --git a/src/photos/components/PhotoBoard.jsx b/src/photos/components/PhotoBoard.jsx
@@ -8,7 +8,7 @@ import PhotoList from './PhotoList'
 import { EmptyPhotos } from 'components/Error/Empty'
 import Loading from './Loading'
 import ErrorComponent from 'components/Error/ErrorComponent'
-import LoadMoreButton from './LoadMoreButton'
+import { LoadMore } from 'photos/components/LoadMore'
 
 const PhotoBoard = ({
   lists,
@@ -65,11 +65,7 @@ const PhotoBoard = ({
         />
       ))}
       {hasMore && (
-        <LoadMoreButton
-          label={t('Board.load_more')}
-          width={width}
-          onClick={fetchMore}
-        />
+        <LoadMore label={t('Board.load_more')} fetchMore={fetchMore} />
       )}
     </div>
   )

diff --git a/src/photos/ducks/albums/components/AlbumsList.jsx b/src/photos/ducks/albums/components/AlbumsList.jsx
@@ -3,9 +3,10 @@ import styles from 'photos/styles/albumsList.styl'
 import React from 'react'
 import { Content } from 'cozy-ui/transpiled/react/Layout'
 import { translate } from 'cozy-ui/transpiled/react/I18n'
+
 import { EmptyPhotos } from 'components/Error/Empty'
-import LoadMoreButton from 'photos/components/LoadMoreButton'
 import AlbumItem from './AlbumItem'
+import { LoadMore } from 'photos/components/LoadMore'
 
 const FALLBACK_CREATION_DATE = null
 const sortByCreationDate = (a, b) => {
@@ -26,7 +27,7 @@ const AlbumsList = ({ data, hasMore, fetchMore, t }) =>
           <AlbumItem album={a} key={a.id} />
         ))}
         {hasMore && (
-          <LoadMoreButton label={t('Albums.load_more')} onClick={fetchMore} />
+          <LoadMore label={t('Albums.load_more')} fetchMore={fetchMore} />
         )}
       </div>
     </Content>

diff --git a/src/photos/styles/photoList.styl b/src/photos/styles/photoList.styl
@@ -89,11 +89,3 @@
     .pho-photo:hover
         .pho-photo-select
             opacity 1
-
-    .pho-list-morebutton
-        position relative
-        margin-bottom 2rem
-
-        button
-            margin  0 auto
-            display block