fix(piefed): don't fail on unknown sort, hide unsupported features (#2064)

Author: aeharding

package.json

@@ -115,7 +115,7 @@
     "rehype-remark": "^10.0.1",
     "remark-parse": "^11.0.0",
     "remark-stringify": "^11.0.0",
-    "threadiverse": "^0.3.4",
+    "threadiverse": "^0.4.1",
     "ua-parser-js": "^2.0.3",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.0.0",

pnpm-lock.yaml

@@ -2,6 +2,7 @@ import { createSelector, createSlice, PayloadAction } from "@reduxjs/toolkit";
 import {
   GetSiteResponse,
   ProviderInfo,
+  ThreadiverseClient,
   UnsupportedSoftwareError,
 } from "threadiverse";
 
@@ -192,3 +193,12 @@ function getSiteReqId(instance: string, handle: string | undefined) {
 
   return `${instance}-${handle}`;
 }
+
+export const modeSelector = createSelector(
+  [(state: RootState) => state.site.software],
+  (software) => {
+    return software
+      ? ThreadiverseClient.resolveClient(software)?.mode
+      : undefined;
+  },
+);

src/features/auth/siteSlice.ts

@@ -88,7 +88,7 @@ export default function Comments({
 
   const sortParams = useFeedSortParams("comments", sort);
 
-  const ready = !!sortParams;
+  const ready = sortParams !== undefined;
 
   const preservePositionFromBottomInScrollView =
     usePreservePositionFromBottomInScrollView(

src/features/comment/inTree/Comments.tsx

@@ -1,5 +1,3 @@
-import { VgerTopSort } from "#/features/feed/sort/topSorts";
-
 import styles from "./EndPost.module.css";
 
 export interface EndPostProps {
@@ -30,7 +28,7 @@ export default function EndPost({
       if (sortDuration)
         return (
           <div className={styles.container}>
-            No posts in {feedName} for last {sortDuration}.
+            No posts in {feedName} for last {sortDuration.toLowerCase()}.
           </div>
         );
 
@@ -48,32 +46,3 @@ export default function EndPost({
 
   return renderError();
 }
-
-export function getSortDuration(
-  sort: VgerTopSort | string | undefined,
-): string | undefined {
-  switch (sort as VgerTopSort) {
-    case "TopDay":
-      return "day";
-    case "TopHour":
-      return "hour";
-    case "TopMonth":
-      return "month";
-    case "TopNineMonths":
-      return "9 months";
-    case "TopSixHour":
-      return "6 hours";
-    case "TopSixMonths":
-      return "6 months";
-    case "TopThreeMonths":
-      return "3 months";
-    case "TopTwelveHour":
-      return "12 hours";
-    case "TopWeek":
-      return "week";
-    case "TopYear":
-      return "year";
-    case "TopAll":
-      return "all time";
-  }
-}

src/features/feed/endItems/EndPost.tsx

@@ -38,13 +38,20 @@ import { VgerPostSortType, VgerPostSortTypeByMode } from "./PostSort";
 import { VgerSearchSortType, VgerSearchSortTypeByMode } from "./SearchSort";
 import { isTopSort, topSortToDuration, VgerTopSort } from "./topSorts";
 
-interface VgerSorts {
+interface VgerSortsByContext {
   posts: VgerPostSortType;
   comments: VgerCommentSortType;
   search: VgerSearchSortType;
   communities: VgerCommunitySortType;
 }
 
+interface VgerSortsByContextByMode {
+  posts: VgerPostSortTypeByMode;
+  comments: VgerCommentSortTypeByMode;
+  search: VgerSearchSortTypeByMode;
+  communities: VgerCommunitySortTypeByMode;
+}
+
 interface Sorts {
   posts: PostSortType;
   comments: CommentSortType;
@@ -57,13 +64,21 @@ export type FeedSortContext = "posts" | "comments" | "search" | "communities";
 export default function useFeedSort<Context extends FeedSortContext>(
   context: Context,
   feed?: AnyFeed | undefined,
-  overrideSort?: VgerSorts[Context],
+  overrideSort?:
+    | VgerSortsByContextByMode[Context]
+    | VgerSortsByContext[Context],
 ) {
-  type Sort = VgerSorts[Context];
+  type Sort = VgerSortsByContext[Context];
 
   const dispatch = useAppDispatch();
   const mode = useMode();
 
+  function getOverrideSort(mode: ThreadiverseMode): Sort | null | undefined {
+    if (typeof overrideSort === "string") return overrideSort;
+    if (!mode) return undefined;
+    return (overrideSort?.[mode] as Sort) ?? null;
+  }
+
   const feedSort = useAppSelector(getFeedSortSelectorBuilder(feed, context)) as
     | Sort
     | null
@@ -77,11 +92,12 @@ export default function useFeedSort<Context extends FeedSortContext>(
         .rememberCommunitySort,
   );
 
-  const [sort, _setSort] = useState<Sort | undefined>(
-    !rememberCommunitySort
-      ? (overrideSort ?? defaultSort)
-      : (feedSort ?? overrideSort),
-  );
+  const [sort, _setSort] = useState<Sort | null | undefined>(() => {
+    if (!mode) return undefined;
+    if (!rememberCommunitySort) return getOverrideSort(mode) ?? defaultSort;
+    if (feedSort) return feedSort;
+    return getOverrideSort(mode);
+  });
 
   useEffect(() => {
     (async () => {
@@ -151,31 +167,46 @@ function findFeedContext(
   }
 }
 
+/**
+ * @param context What kind of feed is this?
+ * @param sort The Voyager sort to convert to threadiverse sort params
+ * @returns The sort, null if loaded but no result. Null if still loading async.
+ */
 export function useFeedSortParams<Context extends FeedSortContext>(
   context: Context,
-  sort: VgerSorts[Context] | undefined,
-): Sorts[Context] | undefined {
+  sort: VgerSortsByContext[Context] | null | undefined,
+): Sorts[Context] | null | undefined {
   const mode = useMode();
 
-  if (!sort || !mode) return;
+  if (!mode) return undefined; // not loaded
+  if (!sort) return null; // loaded, but not found
 
-  return convertSortToLemmyParams(context, sort, mode);
+  return convertSortToLemmyParams(context, sort, mode) ?? null;
 }
 
 function convertSortToLemmyParams<Context extends FeedSortContext>(
   context: Context,
-  sort: VgerSorts[Context],
+  sort: VgerSortsByContext[Context],
   mode: ThreadiverseMode,
 ) {
   switch (context) {
     case "posts":
-      return convertPostSortToParams(sort as VgerSorts["posts"], mode);
+      return convertPostSortToParams(sort as VgerSortsByContext["posts"], mode);
     case "comments":
-      return convertCommentSortToParams(sort as VgerSorts["comments"], mode);
+      return convertCommentSortToParams(
+        sort as VgerSortsByContext["comments"],
+        mode,
+      );
     case "search":
-      return convertSearchSortToParams(sort as VgerSearchSortType, mode);
+      return convertSearchSortToParams(
+        sort as VgerSortsByContext["search"],
+        mode,
+      );
     case "communities":
-      return convertCommunitySortToParams(sort as VgerCommunitySortType, mode);
+      return convertCommunitySortToParams(
+        sort as VgerSortsByContext["communities"],
+        mode,
+      );
   }
 }
 

src/features/feed/sort/useFeedSort.tsx

@@ -2,6 +2,7 @@ import { createSelector, createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { FederatedInstances } from "threadiverse";
 
 import { clientSelector, urlSelector } from "#/features/auth/authSelectors";
+import { KNOWN_SOFTWARE } from "#/helpers/threadiverse";
 import { db } from "#/services/db";
 import { customBackOff } from "#/services/lemmy";
 import { AppDispatch, RootState } from "#/store";
@@ -45,32 +46,22 @@ export const {
 
 export default instancesSlice.reducer;
 
-export const knownInstancesSelector = createSelector(
+export const knownInstancesSelectorBySoftware = createSelector(
   [
     (state: RootState) => state.instances.knownInstances,
     (state: RootState) => state.auth.connectedInstance,
+    (state: RootState) => state.site.software,
   ],
-  (knownInstances, connectedInstance) => {
-    if (!knownInstances || knownInstances === "pending")
-      return [connectedInstance];
-
-    return [
-      connectedInstance,
-      ...knownInstances.linked
-        .filter((instance) => instance.software === "lemmy")
-        .map((instance) => instance.domain),
-    ];
-  },
-);
+  (knownInstances, connectedInstance, software) => {
+    const initialResult = { [software?.name ?? "lemmy"]: [connectedInstance] };
 
-export const knownPiefedInstancesSelector = createSelector(
-  [(state: RootState) => state.instances.knownInstances],
-  (knownInstances) => {
-    if (!knownInstances || knownInstances === "pending") return [];
+    if (!knownInstances || knownInstances === "pending") return initialResult;
 
-    return knownInstances.linked
-      .filter((instance) => instance.software === "piefed")
-      .map((instance) => instance.domain);
+    return groupKnownInstancesBySoftware(
+      knownInstances,
+      KNOWN_SOFTWARE,
+      initialResult,
+    );
   },
 );
 
@@ -122,3 +113,28 @@ export const getInstances =
 
     dispatch(receivedInstances(federated_instances));
   };
+
+export type InstancesBySoftware = Record<string, string[]>;
+
+function groupKnownInstancesBySoftware(
+  knownInstances: FederatedInstances,
+  knownSoftware: string[],
+  initialResult?: InstancesBySoftware,
+): InstancesBySoftware {
+  const result: InstancesBySoftware = {
+    ...Object.fromEntries(knownSoftware.map((software) => [software, []])),
+    ...initialResult,
+  };
+
+  for (const instance of knownInstances.linked) {
+    if (!instance.software) continue;
+
+    const potentialInstanceSoftwareArr = result[instance.software];
+
+    if (!potentialInstanceSoftwareArr) continue;
+
+    potentialInstanceSoftwareArr.push(instance.domain);
+  }
+
+  return result;
+}

src/features/instances/instancesSlice.tsx

@@ -16,6 +16,7 @@ import {
   buildUserLinkFromHandle,
 } from "#/helpers/appLinkBuilder";
 import { useBuildGeneralBrowseLink } from "#/helpers/routes";
+import { useMode } from "#/helpers/threadiverse";
 
 import AutoResolvePostComment from "./AutoResolvePostComment";
 
@@ -25,6 +26,7 @@ interface SearchOptionsProps {
 
 export default function SearchOptions({ search }: SearchOptionsProps) {
   const buildGeneralBrowseLink = useBuildGeneralBrowseLink();
+  const mode = useMode();
   const { determineObjectTypeFromUrl, redirectToLemmyObjectIfNeeded } =
     useLemmyUrlHandler();
 
@@ -56,12 +58,14 @@ export default function SearchOptions({ search }: SearchOptionsProps) {
           <IonIcon icon={albumsOutline} color="primary" slot="start" />
           <IonLabel className="ion-text-nowrap">Posts with “{search}”</IonLabel>
         </IonItem>
-        <IonItem routerLink={buildSearchCommentsLink(search)}>
-          <IonIcon icon={chatbubbleOutline} color="primary" slot="start" />
-          <IonLabel className="ion-text-nowrap">
-            Comments with “{search}”
-          </IonLabel>
-        </IonItem>
+        {mode !== "piefed" && (
+          <IonItem routerLink={buildSearchCommentsLink(search)}>
+            <IonIcon icon={chatbubbleOutline} color="primary" slot="start" />
+            <IonLabel className="ion-text-nowrap">
+              Comments with “{search}”
+            </IonLabel>
+          </IonItem>
+        )}
         <IonItem routerLink={buildSearchCommunitiesLink(search)}>
           <IonIcon icon={searchOutline} color="primary" slot="start" />
           <IonLabel className="ion-text-nowrap">