WIP

alchemy-fr · Mar 27, 2024 · 400c906 · 400c906
1 parent 1ddc2dc
commit 400c906
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 15 deletions.
diff --git a/databox/client/src/components/AssetList/AssetList.tsx b/databox/client/src/components/AssetList/AssetList.tsx
@@ -65,7 +65,6 @@ export default function AssetList<Item extends AssetOrAssetContainer>({
     ...selectionActionsProps
 }: Props<Item>) {
     const [selection, setSelectionPrivate] = React.useState<Item[]>([]);
-    const [loadingMore, setLoadingMore] = React.useState(false);
     const [layout, setLayout] = React.useState<Layout>(
         defaultLayout ?? Layout.Grid
     );
@@ -192,6 +191,7 @@ export default function AssetList<Item extends AssetOrAssetContainer>({
             }}
         >
             <div
+                className={assetClasses.scrollable}
                 style={{
                     width: '100%',
                     height: '100%',
@@ -233,13 +233,8 @@ export default function AssetList<Item extends AssetOrAssetContainer>({
 
                     {loadMore ? (
                         <LoadMoreButton
-                            loading={loadingMore}
-                            onClick={() => {
-                                setLoadingMore(true);
-                                loadMore().finally(() => {
-                                    setLoadingMore(false);
-                                });
-                            }}
+                            onClick={loadMore}
+                            pages={pages}
                         />
                     ) : (
                         ''

diff --git a/databox/client/src/components/AssetList/Layouts/Masonry/MasonryLayout.tsx b/databox/client/src/components/AssetList/Layouts/Masonry/MasonryLayout.tsx
@@ -107,7 +107,7 @@ export default function MasonryLayout<Item extends AssetOrAssetContainer>({
 
     return (
         <Box sx={layoutSx} key={d.thumbSize.toString()}>
-            <Masonry spacing={0}>
+            <Masonry spacing={0.5}>
                 {pages.map(page => {
                     return page.map(item => {
                         const asset: Asset = itemToAsset

diff --git a/databox/client/src/components/AssetList/LoadMoreButton.tsx b/databox/client/src/components/AssetList/LoadMoreButton.tsx
@@ -3,17 +3,61 @@ import {LoadingButton} from '@mui/lab';
 import ArrowCircleDownIcon from '@mui/icons-material/ArrowCircleDown';
 import {VoidFunction} from '../../lib/utils.ts';
 import {useTranslation} from 'react-i18next';
+import {AssetOrAssetContainer} from "../../types.ts";
+import React from "react";
+import assetClasses from "./classes.ts";
 
-type Props = {
-    loading: boolean;
+type Props<Item extends AssetOrAssetContainer> = {
     onClick: VoidFunction;
+    pages: Item[][];
 };
 
-export default function LoadMoreButton({onClick, loading}: Props) {
+export default function LoadMoreButton<Item extends AssetOrAssetContainer>({onClick, pages}: Props<Item>) {
     const {t} = useTranslation();
+    const [loading, setLoading] = React.useState(false);
+    const ref = React.useRef<HTMLDivElement>();
+    const loadingRef = React.useRef(false);
+    const scrollableNode = ref.current?.closest(`.${assetClasses.scrollable}`);
+
+    const doLoad = React.useCallback(() => {
+        if (loadingRef.current) {
+            return;
+        }
+        loadingRef.current = true;
+        setLoading(true);
+        onClick();
+    }, [onClick]);
+
+    React.useEffect(() => {
+        setLoading(false);
+        loadingRef.current = false;
+    }, [pages]);
+
+    React.useLayoutEffect(() => {
+        if (pages[0]) {
+            scrollableNode?.scrollTo({top: 0, left: 0});
+        }
+    }, [pages[0], scrollableNode]);
+
+    React.useEffect(() => {
+        if (scrollableNode) {
+            const onScrollEnd = (e: HTMLElementEventMap['scroll']) => {
+                const {scrollTop, scrollHeight, clientHeight} = e.currentTarget as HTMLDivElement;
+                if (clientHeight < scrollHeight && scrollTop + clientHeight >= scrollHeight - 20) {
+                    doLoad();
+                }
+            };
+            scrollableNode.addEventListener('scroll', onScrollEnd);
+
+            return () => {
+                scrollableNode.removeEventListener('scroll', onScrollEnd);
+            }
+        }
+    }, [doLoad, scrollableNode]);
 
     return (
         <Box
+            ref={ref}
             sx={{
                 textAlign: 'center',
                 my: 4,
@@ -22,7 +66,7 @@ export default function LoadMoreButton({onClick, loading}: Props) {
             <LoadingButton
                 loading={loading}
                 startIcon={<ArrowCircleDownIcon />}
-                onClick={onClick}
+                onClick={doLoad}
                 variant="contained"
                 color="secondary"
             >

diff --git a/databox/client/src/components/AssetList/classes.ts b/databox/client/src/components/AssetList/classes.ts
@@ -18,6 +18,7 @@ const assetClasses = {
     collectionList: 'asset-collection-list',
     privacy: 'asset-privacy',
     fileIcon: 'asset-file-icon',
+    scrollable: 'asset-scrollable',
 };
 
 export default assetClasses;
diff --git a/databox/client/src/components/Basket/BasketMenuItem.tsx b/databox/client/src/components/Basket/BasketMenuItem.tsx
@@ -76,7 +76,7 @@ export default function BasketMenuItem({
                         primary={
                             data.titleHighlight ||
                             data.title ||
-                            t('basket.default.title', 'Basket')
+                            t('basket.default.title', 'My Basket')
                         }
                     />
                 </ListItemButton>

diff --git a/databox/client/src/components/Basket/BasketSwitcher.tsx b/databox/client/src/components/Basket/BasketSwitcher.tsx
@@ -74,7 +74,7 @@ export default function BasketSwitcher<Item extends AssetOrAssetContainer>({
                     )
                 }
             >
-                {current?.title || t('basket.default.title', 'Basket')}
+                {current?.title || t('basket.default.title', 'My Basket')}
                 {current?.assetCount ? (
                     <>
                         {' '}

diff --git a/lib/php/core-bundle/DependencyInjection/AlchemyCoreExtension.php b/lib/php/core-bundle/DependencyInjection/AlchemyCoreExtension.php
@@ -17,6 +17,8 @@
 use Symfony\Component\HttpFoundation\Session\Storage\Handler\RedisSessionHandler;
 use Symfony\Component\HttpKernel\DependencyInjection\Extension;
 use Symfony\Component\HttpKernel\Exception\AccessDeniedHttpException;
+use Symfony\Component\HttpKernel\Exception\HttpException;
+use Symfony\Component\HttpKernel\Exception\MethodNotAllowedHttpException;
 use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;
 use Symfony\Component\HttpKernel\Exception\TooManyRequestsHttpException;
 use Symfony\Component\HttpKernel\Exception\UnauthorizedHttpException;
@@ -149,6 +151,8 @@ public function prepend(ContainerBuilder $container): void
                         ValidationException::class,
                         UnauthorizedHttpException::class,
                         AccessDeniedException::class,
+                        HttpException::class,
+                        MethodNotAllowedHttpException::class,
                     ],
                 ]
             ]);
-Original file line number
+Diff line change
@@ Expand Up @@
                         )
                     }
                 >
-                    {current?.title || t('basket.default.title', 'Basket')}
+                    {current?.title || t('basket.default.title', 'My Basket')}
                     {current?.assetCount ? (
                         <>
                             {' '}
@@ Expand Down @@