feat: refresh communities list (#1766)

also optimized virtual scrolling

src/features/community/list/AlphabetJump.tsx

@@ -22,7 +22,9 @@ const SpecialSection = {
 
 type SpecialSectionType = (typeof SpecialSection)[keyof typeof SpecialSection];
 
-type JumpItem = SpecialSectionType | string;
+type JumpValue = SpecialSectionType | string;
+
+type JumpItem = [JumpValue, number];
 
 const SECTIONS = [
   <IonIcon icon={menuOutline} key={0} />,
@@ -51,40 +53,46 @@ const SIMPLIFIED_SECTIONS = SECTIONS.reduce<typeof SECTIONS>(
   [],
 );
 
+const LOOKUP: Record<string, SpecialSectionType> = {
+  Moderator: SpecialSection.Moderated,
+  Favorites: SpecialSection.Favorited,
+} as const;
+
+function mapSeparatorsToJumpSections(
+  separators: { label: string; index: number }[],
+): JumpItem[] {
+  return compact(
+    separators.map(({ label, index }) => [LOOKUP[label] ?? label, index]),
+  );
+}
+
 interface AlphabetJumpProps {
   virtuaRef: RefObject<VListHandle>;
-  hasModerated: boolean;
-  hasFavorited: boolean;
-  letters: string[];
+  separators: { label: string; index: number }[];
 }
 
 export default function AlphabetJump({
   virtuaRef,
-  hasFavorited,
-  hasModerated,
-  letters,
+  separators,
 }: AlphabetJumpProps) {
   const containerElTopRef = useRef<DOMRect | undefined>();
   const scrollViewRef = useRef<HTMLElement | undefined>();
 
   const jumpTableLookup = useMemo(
     () =>
       buildJumpToTable(
-        compact([
-          SpecialSection.Home,
-          hasFavorited ? SpecialSection.Favorited : undefined,
-          hasModerated ? SpecialSection.Moderated : undefined,
-          ...letters,
-        ]),
-        compact([
-          SpecialSection.Home,
-          SpecialSection.Favorited,
-          SpecialSection.Moderated,
-          ...alphabetUpperCase,
-          "#",
-        ]),
+        compact(mapSeparatorsToJumpSections(separators)),
+        compact(
+          [
+            SpecialSection.Home,
+            SpecialSection.Favorited,
+            SpecialSection.Moderated,
+            ...alphabetUpperCase,
+            "#",
+          ].map((value, index) => [value, index]),
+        ),
       ),
-    [hasFavorited, hasModerated, letters],
+    [separators],
   );
 
   const containerRef = useRef<HTMLDivElement>(null);
@@ -150,8 +158,8 @@ function buildJumpToTable(partial: JumpItem[], all: JumpItem[]): number[] {
   let lastFound = 0;
 
   for (let i = 0; i < all.length; i++) {
-    const foundIndex = partial.findIndex((p) => p === all[i]);
-    if (foundIndex !== -1) lastFound = foundIndex;
+    const foundItem = partial.find((p) => p[0] === all[i]![0]);
+    if (foundItem) lastFound = foundItem[1];
     jumpToTable.push(lastFound);
   }
 

src/features/community/list/GuestCommunitiesList.tsx

@@ -1,8 +1,14 @@
+import { IonRefresher, IonRefresherContent } from "@ionic/react";
 import { Community } from "lemmy-js-client";
-import { useEffect, useState } from "react";
+import {
+  useEffect,
+  experimental_useEffectEvent as useEffectEvent,
+  useState,
+} from "react";
 
 import { clientSelector } from "#/features/auth/authSelectors";
 import { CenteredSpinner } from "#/features/shared/CenteredSpinner";
+import { isSafariFeedHackEnabled } from "#/routes/pages/shared/FeedContent";
 import { useAppSelector } from "#/store";
 
 import { CommunitiesListProps } from "./CommunitiesList";
@@ -19,29 +25,51 @@ const SHOW_LOCAL_ONLY = ["lemmynsfw.com"];
 export default function GuestCommunitiesList({ actor }: CommunitiesListProps) {
   const [communities, setCommunities] = useState<Community[] | undefined>();
   const client = useAppSelector(clientSelector);
+  const [isListAtTop, setIsListAtTop] = useState(true);
 
-  useEffect(() => {
-    (async () => {
+  async function update() {
+    let communities;
+
+    try {
+      ({ communities } = await client.listCommunities({
+        type_: SHOW_LOCAL_ONLY.includes(actor) ? "Local" : "All",
+        sort: "TopAll",
+        limit: 50,
+      }));
+    } catch (error) {
       setCommunities(undefined);
+      throw error;
+    }
+
+    setCommunities(communities.map((c) => c.community));
+  }
+
+  const updateEvent = useEffectEvent(update);
+
+  useEffect(() => {
+    setCommunities(undefined);
 
-      let communities;
-
-      try {
-        ({ communities } = await client.listCommunities({
-          type_: SHOW_LOCAL_ONLY.includes(actor) ? "Local" : "All",
-          sort: "TopAll",
-          limit: 50,
-        }));
-      } catch (error) {
-        setCommunities(undefined);
-        throw error;
-      }
-
-      setCommunities(communities.map((c) => c.community));
-    })();
+    updateEvent();
   }, [client, actor]);
 
   if (communities === undefined) return <CenteredSpinner />;
 
-  return <ResolvedCommunitiesList communities={communities} actor={actor} />;
+  return (
+    <>
+      <IonRefresher
+        slot="fixed"
+        onIonRefresh={(e) => {
+          updateEvent().finally(() => e.detail.complete());
+        }}
+        disabled={isSafariFeedHackEnabled && !isListAtTop}
+      >
+        <IonRefresherContent />
+      </IonRefresher>
+      <ResolvedCommunitiesList
+        communities={communities}
+        actor={actor}
+        onListAtTopChange={setIsListAtTop}
+      />
+    </>
+  );
 }

src/features/community/list/Item.tsx

@@ -0,0 +1,51 @@
+import { IonItemDivider } from "@ionic/react";
+
+import { useAppSelector } from "#/store";
+
+import CommunityListItem from "./items/CommunityListItem";
+import SpecialItem from "./items/SpecialItem";
+import { ItemType } from "./ResolvedCommunitiesList";
+
+import sharedStyles from "#/features/shared/shared.module.css";
+
+interface ItemProps {
+  item: ItemType;
+  actor: string;
+  line: boolean | undefined;
+}
+
+export default function Item({ item, actor, line }: ItemProps) {
+  const favorites = useAppSelector((state) => state.community.favorites);
+
+  switch (item.type) {
+    case "separator":
+      return (
+        <IonItemDivider className={sharedStyles.maxWidth}>
+          {item.value}
+        </IonItemDivider>
+      );
+    case "all":
+    case "home":
+    case "local":
+    case "mod":
+      return (
+        <SpecialItem
+          type={item.type}
+          actor={actor}
+          line={line}
+          className={sharedStyles.maxWidth}
+        />
+      );
+    case "community":
+    case "favorite":
+      return (
+        <CommunityListItem
+          community={item.value}
+          favorites={favorites}
+          removeAction="follow"
+          line={line}
+          className={sharedStyles.maxWidth}
+        />
+      );
+  }
+}

src/features/community/list/LoggedInCommunitiesList.tsx

@@ -1,25 +1,48 @@
+import { IonRefresher, IonRefresherContent } from "@ionic/react";
 import { compact, uniqBy } from "es-toolkit";
 import { CommunityFollowerView, CommunityView } from "lemmy-js-client";
+import { useState } from "react";
 
-import { useAppSelector } from "#/store";
+import { getSite } from "#/features/auth/siteSlice";
+import { isSafariFeedHackEnabled } from "#/routes/pages/shared/FeedContent";
+import { useAppDispatch, useAppSelector } from "#/store";
 
 import { CommunitiesListProps } from "./CommunitiesList";
 import ResolvedCommunitiesList from "./ResolvedCommunitiesList";
 
 export default function LoggedInCommunitiesList(props: CommunitiesListProps) {
+  const dispatch = useAppDispatch();
   const follows = useAppSelector(
     (state) => state.site.response?.my_user?.follows,
   );
-
   const communityByHandle = useAppSelector(
     (state) => state.community.communityByHandle,
   );
 
+  const [isListAtTop, setIsListAtTop] = useState(true);
+
+  async function refresh() {
+    await dispatch(getSite());
+  }
+
   return (
-    <ResolvedCommunitiesList
-      {...props}
-      communities={buildCommunities(follows, communityByHandle)}
-    />
+    <>
+      <IonRefresher
+        slot="fixed"
+        onIonRefresh={(e) => {
+          refresh().finally(() => e.detail.complete());
+        }}
+        disabled={isSafariFeedHackEnabled && !isListAtTop}
+      >
+        <IonRefresherContent />
+      </IonRefresher>
+
+      <ResolvedCommunitiesList
+        {...props}
+        communities={buildCommunities(follows, communityByHandle)}
+        onListAtTopChange={setIsListAtTop}
+      />
+    </>
   );
 }
 

src/features/community/list/ResolvedCommunitiesList.module.css

@@ -23,11 +23,11 @@
   }
 }
 
-.ionList {
-  height: 100%;
-}
-
-.vList {
+.virtualizerScrollView {
+  display: block;
+  overflow-y: auto;
+  contain: strict;
+  width: 100%;
   height: 100%;
 
   &::-webkit-scrollbar {