fix: auto fetch more items in dashboard page , project list , dataset…

… page for big screens (#255) * Auto fetch more * Update src/components/molecules/Settings/SettingPage/index.tsx Co-authored-by: KaWaite <34051327+KaWaite@users.noreply.github.com> * Update src/components/molecules/Common/AssetModal/AssetContainer/index.tsx Co-authored-by: KaWaite <34051327+KaWaite@users.noreply.github.com> * Update src/components/molecules/Common/AssetModal/AssetContainer/index.tsx Co-authored-by: KaWaite <34051327+KaWaite@users.noreply.github.com> * pr-fixes2 * pr-fixes3 * Update src/util/infinite-scroll.ts Co-authored-by: KaWaite <34051327+KaWaite@users.noreply.github.com> * Update src/components/molecules/Dashboard/index.tsx Co-authored-by: KaWaite <34051327+KaWaite@users.noreply.github.com> * pr-fix2 Co-authored-by: nina992 <nouralali992@gmail.com> Co-authored-by: KaWaite <34051327+KaWaite@users.noreply.github.com>
reearth · Jul 1, 2022 · fb8bf98 · fb8bf98
1 parent fd46316
commit fb8bf98
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 21 deletions.
diff --git a/src/components/molecules/Common/AssetModal/AssetContainer/index.tsx b/src/components/molecules/Common/AssetModal/AssetContainer/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import { useEffect, useRef } from "react";
 
 import Button from "@reearth/components/atoms/Button";
 import Divider from "@reearth/components/atoms/Divider";
@@ -11,7 +11,7 @@ import AssetDeleteModal from "@reearth/components/molecules/Common/AssetModal/As
 import { useT } from "@reearth/i18n";
 import { styled } from "@reearth/theme";
 import { metricsSizes } from "@reearth/theme/metrics";
-import { handleScroll } from "@reearth/util/handleScroll";
+import { autoFillPage, onScrollToBottom } from "@reearth/util/infinite-scroll";
 
 import AssetCard from "../AssetCard";
 import AssetListItem from "../AssetListItem";
@@ -100,6 +100,11 @@ const AssetContainer: React.FC<Props> = ({
     onRemove,
     onSearch,
   });
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (wrapperRef.current && !isLoading && hasMoreAssets) autoFillPage(wrapperRef, onGetMore);
+  }, [hasMoreAssets, isLoading, onGetMore]);
 
   return (
     <Wrapper>
@@ -170,7 +175,8 @@ const AssetContainer: React.FC<Props> = ({
           </Template>
         ) : (
           <AssetListWrapper
-            onScroll={e => !isLoading && hasMoreAssets && handleScroll(e, onGetMore)}>
+            ref={wrapperRef}
+            onScroll={e => !isLoading && hasMoreAssets && onScrollToBottom(e, onGetMore)}>
             <AssetList layoutType={layoutType}>
               {layoutType === "list"
                 ? assets?.map(a => (

diff --git a/src/components/molecules/Dashboard/index.tsx b/src/components/molecules/Dashboard/index.tsx
@@ -1,8 +1,8 @@
-import { ReactNode } from "react";
+import { ReactNode, useEffect, useRef } from "react";
 
 import Loading from "@reearth/components/atoms/Loading";
 import { styled } from "@reearth/theme";
-import { handleScroll } from "@reearth/util/handleScroll";
+import { autoFillPage, onScrollToBottom } from "@reearth/util/infinite-scroll";
 
 export * from "./types";
 
@@ -23,11 +23,19 @@ const Dashboard: React.FC<Props> = ({
   hasMoreProjects,
   onGetMoreProjects,
 }) => {
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (wrapperRef.current && !isLoading && hasMoreProjects)
+      autoFillPage(wrapperRef, onGetMoreProjects);
+  }, [hasMoreProjects, isLoading, onGetMoreProjects]);
+
   return (
     <Wrapper
       className={className}
+      ref={wrapperRef}
       onScroll={e => {
-        !isLoading && hasMoreProjects && handleScroll(e, onGetMoreProjects);
+        !isLoading && hasMoreProjects && onScrollToBottom(e, onGetMoreProjects);
       }}>
       {header}
       <Content>

diff --git a/src/components/molecules/Settings/SettingPage/index.tsx b/src/components/molecules/Settings/SettingPage/index.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Link } from "react-router-dom";
 
 import Icon from "@reearth/components/atoms/Icon";
@@ -7,7 +7,7 @@ import Header, { Props } from "@reearth/components/molecules/Common/Header";
 import ProjectMenu from "@reearth/components/molecules/Common/ProjectMenu";
 import Navigation from "@reearth/components/molecules/Settings/Navigation";
 import { styled } from "@reearth/theme";
-import { handleScroll } from "@reearth/util/handleScroll";
+import { autoFillPage, onScrollToBottom } from "@reearth/util/infinite-scroll";
 
 export type SettingPageProps = {
   loading?: boolean;
@@ -30,6 +30,12 @@ const SettingPage: React.FC<SettingPageProps> = ({
     setIsOpen(o => !o);
   };
 
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (wrapperRef.current && !loading && hasMoreItems) autoFillPage(wrapperRef, onScroll);
+  }, [hasMoreItems, loading, onScroll]);
+
   return (
     <Wrapper>
       <StyledHeader
@@ -47,8 +53,9 @@ const SettingPage: React.FC<SettingPageProps> = ({
         }
       />
       <BodyWrapper
+        ref={wrapperRef}
         onScroll={e => {
-          !loading && hasMoreItems && handleScroll(e, onScroll);
+          !loading && hasMoreItems && onScrollToBottom(e, onScroll);
         }}>
         <LeftWrapper>
           <Navigation team={currentTeam} project={currentProject} />

diff --git a/src/util/handleScroll.ts b/src/util/handleScroll.ts
diff --git a/src/util/infinite-scroll.ts b/src/util/infinite-scroll.ts
@@ -0,0 +1,23 @@
+import { MutableRefObject } from "react";
+
+export function autoFillPage(
+  ref: MutableRefObject<HTMLDivElement | undefined | null>,
+  onLoadMore?: () => void,
+) {
+  if (ref.current && ref.current?.scrollHeight <= document.documentElement.clientHeight) {
+    onLoadMore?.();
+  }
+}
+
+export function onScrollToBottom(
+  { currentTarget }: React.UIEvent<HTMLDivElement, UIEvent>,
+  onLoadMore?: () => void,
+  threshold = 5,
+) {
+  if (
+    currentTarget.scrollTop + currentTarget.clientHeight >=
+    currentTarget.scrollHeight - threshold
+  ) {
+    onLoadMore?.();
+  }
+}