WiP on infinite scroll

Author: jrief

client/browser/FileSelectDialog.tsx

@@ -7,6 +7,7 @@ import React, {
 	useRef,
 	useState,
 } from 'react';
+import {InView} from 'react-intersection-observer';
 import {Tooltip} from 'react-tooltip';
 import FigureLabels from '../common/FigureLabels';
 import FileUploader	 from '../common/FileUploader';
@@ -50,25 +51,40 @@ function Figure(props) {
 
 
 const FilesList = memo((props: any) => {
-	const {files, selectFile} = props;
+	const {files, numFiles, selectFile} = props;
+	const [{offset, limit}, setOffset] = useState({offset: 0, limit: 10});
 
-	console.log('FolderList', files);
+	console.log('FolderList', numFiles, files);
+
+	function loadMore(inView, entry) {
+		if (inView) {
+			console.log('load more:', entry.target);
+		}
+	}
 
 	return (
 		<ul className="files-browser">{
 		files.length === 0 ?
-			<li className="status">{gettext("Empty folder")}</li> :
-		files.map(file => (
+			<li className="status">{gettext("Empty folder")}</li> : (
+			<>{files.map(file => (
 			<li key={file.id} onClick={() => selectFile(file)}><Figure {...file} /></li>
-		))}
-		</ul>
+			))}
+			{numFiles > files.length && <InView as="li" onChange={loadMore} />}
+			</>
+		)}</ul>
 	);
 });
 
 
 export default function FileSelectDialog(props) {
 	const {realm, baseUrl, csrfToken, selectFile} = props;
-	const [structure, setStructure] = useState({root_folder: null, last_folder: null, files: null, labels: []});
+	const [structure, setStructure] = useState({
+		root_folder: null,
+		last_folder: null,
+		files: null,
+		num_files: 0,
+		labels: [],
+	});
 	const [uploadedFile, setUploadedFile] = useState(null);
 	const ref = useRef(null);
 	const uploaderRef = useRef(null);
@@ -115,6 +131,7 @@ export default function FileSelectDialog(props) {
 			root_folder: structure.root_folder,
 			last_folder: folderId,
 			files: null,
+			num_files: 0,
 			labels: structure.labels,
 		};
 		const response = await fetch(fetchUrl);
@@ -170,7 +187,7 @@ export default function FileSelectDialog(props) {
 				>{
 					structure.files === null ?
 					<div className="status">{gettext("Loading files…")}</div> :
-					<FilesList files={structure.files} selectFile={selectFile} />
+					<FilesList files={structure.files} numFiles={structure.num_files} selectFile={selectFile} />
 				}</FileUploader>
 			</div>
 			</>}

finder/browser/views.py

@@ -134,13 +134,18 @@ def list(self, request, folder_id):
         """
         List all the files of the given folder.
         """
-        folder = FolderModel.objects.get(id=folder_id)
         request.session['finder.last_folder'] = str(folder_id)
+        offset = int(request.GET.get('offset', 0))
+        limit = int(request.GET.get('limit', 10))
         lookup = lookup_by_label(request)
         unified_queryset = FileModel.objects.filter_unified(parent_id=folder_id, is_folder=False, **lookup)
+        num_files = unified_queryset.count()
         unified_queryset = sort_by_attribute(request, unified_queryset)
         annotate_unified_queryset(unified_queryset)
-        return {'files': list(unified_queryset)}
+        return {
+            'files': list(unified_queryset),  # [offset:limit]
+            'num_files': num_files,
+        }
 
     def search(self, request, folder_id):
         """

package.json

@@ -20,6 +20,7 @@
     "esbuild-plugin-svgr": "^2.1.0",
     "react-h5-audio-player": "^3.9.3",
     "react-image-crop": "^11.0.7",
+    "react-intersection-observer": "^9.13.1",
     "react-player": "^2.16.0",
     "react-tooltip": "^5.28.0",
     "request": "^2.88.2",