indexes list scroll

indexnetwork · Jul 1, 2024 · f787589 · f787589
1 parent 5dcc08c
commit f787589
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 49 deletions.
diff --git a/web-app/src/components/sections/IndexConversation/TabContainer/IndexItemsTab.tsx b/web-app/src/components/sections/IndexConversation/TabContainer/IndexItemsTab.tsx
@@ -19,18 +19,13 @@ import { useIndexConversation } from "../IndexConversationContext";
 const CONCURRENCY_LIMIT = 10;
 
 export default function IndexItemsTabSection() {
-  const {
-    setItemsState,
-    loading,
-    setLoading,
-    searchLoading,
-    fetchIndexItems,
-    fetchMoreIndexItems,
-  } = useIndexConversation();
+  const { setItemsState, searchLoading, fetchIndexItems, fetchMoreIndexItems } =
+    useIndexConversation();
   const { isCreator } = useRole();
   const {
     data: viewedIndex,
     items,
+    loading,
     addItemLoading,
   } = useAppSelector(selectIndex);
   const dispatch = useAppDispatch();
@@ -191,46 +186,48 @@ export default function IndexItemsTabSection() {
   // );
 
   return (
-    <Flex flexdirection="column" className="idxflex-grow-1">
-      {items.data && items.data.length > 0 && (
-        <FlexRow className={"mt-6"}>
-          <Col className="idxflex-grow-1">
-            <SearchInput
-              // onSearch={handleSearch}
-              debounceTime={300}
-              showClear
-              defaultValue={search}
-              loading={searchLoading}
-              placeholder="Search in this index"
-            />
-          </Col>
-        </FlexRow>
-      )}
-
-      {isCreator && (
-        <FlexRow>
-          <Col className="idxflex-grow-1 mt-6 pb-0">
-            <LinkInput
-              loading={addItemLoading}
-              onItemAdd={handleAddItem}
-              progress={progress}
-            />
-          </Col>
-        </FlexRow>
-      )}
-
-      <div key={viewedIndex?.id} className={"mb-4 mt-6"}>
-        <IndexItemList
-          items={items.data}
-          search={search}
-          hasMore={!!items.cursor}
-          removeItem={handleRemoveItem}
-          loadMore={() =>
-            viewedIndex &&
-            fetchMoreIndexItems(viewedIndex?.id, { resetCursor: false })
-          }
-        />
-      </div>
-    </Flex>
+    !loading && (
+      <Flex flexdirection="column" className="idxflex-grow-1">
+        {items.data && items.data.length > 0 && (
+          <FlexRow className={"mt-6"}>
+            <Col className="idxflex-grow-1">
+              <SearchInput
+                // onSearch={handleSearch}
+                debounceTime={300}
+                showClear
+                defaultValue={search}
+                loading={searchLoading}
+                placeholder="Search in this index"
+              />
+            </Col>
+          </FlexRow>
+        )}
+
+        {isCreator && (
+          <FlexRow>
+            <Col className="idxflex-grow-1 mt-6 pb-0">
+              <LinkInput
+                loading={addItemLoading}
+                onItemAdd={handleAddItem}
+                progress={progress}
+              />
+            </Col>
+          </FlexRow>
+        )}
+
+        <div key={viewedIndex?.id} className={"mb-4 mt-6"}>
+          <IndexItemList
+            items={items.data}
+            search={search}
+            hasMore={!!items.cursor}
+            removeItem={handleRemoveItem}
+            loadMore={() =>
+              viewedIndex &&
+              fetchMoreIndexItems(viewedIndex?.id, { resetCursor: false })
+            }
+          />
+        </div>
+      </Flex>
+    )
   );
 }
diff --git a/web-app/src/components/sections/IndexList.tsx b/web-app/src/components/sections/IndexList.tsx
@@ -21,13 +21,30 @@ const IndexListSection: FC = () => {
   const router = useRouter();
   const query = useSearchParams();
   const indexes = useAppSelector(selectIndexes);
+  const scrollPosition = useRef(0);
 
   const { setLeftTabKey, leftTabKey } = useApp();
 
   const { data: did } = useAppSelector(selectDID);
   const { data: viewedConversation } = useAppSelector(selectConversation);
 
   const prevProfileID = useRef(did?.id);
+  useEffect(() => {
+    const container = document.querySelector(".index-list");
+    const pos = localStorage.getItem("indexListScrollPosition");
+    container?.scrollTo(0, JSON.parse(pos || "0"));
+  }, [id]);
+
+  useEffect(() => {
+    const container = document.querySelector(".index-list");
+    container?.addEventListener("scroll", () => {
+      scrollPosition.current = container?.scrollTop || 0;
+      localStorage.setItem(
+        "indexListScrollPosition",
+        (container?.scrollTop || 0).toString(),
+      );
+    });
+  }, []);
 
   const leftSectionIndexes = useMemo(
     () =>