Pano feed filters

apps/gql/schema/resolvers/index.ts

@@ -97,12 +97,56 @@ export const resolvers = {
 
       return transformUser(user);
     },
-    panoFeed: async (_, args, { loaders }) => {
-      const posts = await loaders.pano.post.all.load(
-        new ConnectionKey(null, parseConnectionArgs(args), { orderBy: { createdAt: "desc" } })
-      );
+    panoFeed: async (_, args, { loaders, pasaport: { session } }) => {
+      switch (args.filter) {
+        case "MOST_COMMENTED": {
+          const posts = await loaders.pano.post.all.load(
+            new ConnectionKey(null, parseConnectionArgs(args), {
+              orderBy: { comments: { _count: "desc" } },
+            })
+          );
+
+          return transformPanoPostConnection(posts);
+        }
+        case "ACTIVE": {
+          const posts = await loaders.pano.post.all.load(
+            new ConnectionKey(null, parseConnectionArgs(args), {
+              include: { comments: { orderBy: { createdAt: "desc" } } },
+              orderBy: { createdAt: "desc" },
+            })
+          );
+
+          return transformPanoPostConnection(posts);
+        }
+        case "MOST_UPVOTED": {
+          const posts = await loaders.pano.post.all.load(
+            new ConnectionKey(null, parseConnectionArgs(args), {
+              orderBy: { upvotes: { _count: "desc" } },
+            })
+          );
+
+          return transformPanoPostConnection(posts);
+        }
+        case "OWNED": {
+          if (!session?.user?.id) {
+            return null;
+          }
 
-      return transformPanoPostConnection(posts);
+          return transformPanoPostConnection(
+            await loaders.pano.post.byUserID.load(
+              new ConnectionKey(session.user.id, parseConnectionArgs(args), {
+                orderBy: { createdAt: "desc" },
+              })
+            )
+          );
+        }
+        default: {
+          const posts = await loaders.pano.post.all.load(
+            new ConnectionKey(null, parseConnectionArgs(args), { orderBy: { createdAt: "desc" } })
+          );
+          return transformPanoPostConnection(posts);
+        }
+      }
     },
   },
 

apps/gql/schema/schema.graphql

@@ -109,11 +109,17 @@ type PanoQuery {
 }
 
 enum PanoPostFilter {
-  ALL
-  HOT
-  LIKED
+  # Return list of posts that's ordered by their most recent comment.
   ACTIVE
-  SELF
+
+  # Return a list of posts that's ordered by their comment count.
+  MOST_COMMENTED
+
+  # Return a list of posts that's ordered by their upvote count.
+  MOST_UPVOTED
+
+  # Return viewer's posts
+  OWNED
 }
 
 type PanoPost implements Node & Upvotable {

apps/gql/schema/types.generated.ts

@@ -208,7 +208,7 @@ export type PanoPostEdge = {
 
 export type PanoPostError = InvalidInput | NotAuthorized;
 
-export type PanoPostFilter = "ACTIVE" | "ALL" | "HOT" | "LIKED" | "SELF";
+export type PanoPostFilter = "ACTIVE" | "MOST_COMMENTED" | "MOST_UPVOTED" | "OWNED";
 
 export type PanoQuery = {
   __typename?: "PanoQuery";

apps/kampus/app/pano/PanoFeed.tsx

@@ -12,12 +12,13 @@ const fragment = graphql`
   fragment PanoFeedFragment on Viewer
   @argumentDefinitions(
     after: { type: "String" }
-    first: { type: "Int", defaultValue: 10 }
+    first: { type: "Int", defaultValue: 20 }
     before: { type: "String" }
     last: { type: "Int" }
+    filter: { type: "PanoPostFilter" }
   )
   @refetchable(queryName: "PanoFeedPaginationQuery") {
-    panoFeed(first: $first, after: $after, last: $last, before: $before)
+    panoFeed(first: $first, after: $after, last: $last, before: $before, filter: $filter)
       @connection(key: "PanoFeedFragment__panoFeed") {
       __id
       edges {
@@ -82,10 +83,10 @@ export function PanoFeed(props: Props) {
           })}
 
           <div className="flex gap-2">
-            <Button variant="secondary" onClick={() => loadPrevious(10)} disabled={!hasPrevious}>
+            <Button variant="secondary" onClick={() => loadPrevious(20)} disabled={!hasPrevious}>
               {"< Prev"}
             </Button>
-            <Button variant="secondary" onClick={() => loadNext(10)} disabled={!hasNext}>
+            <Button variant="secondary" onClick={() => loadNext(20)} disabled={!hasNext}>
               {"Next >"}
             </Button>
           </div>

apps/kampus/app/pano/PostListContainer.tsx

@@ -13,9 +13,9 @@ interface Props {
 }
 
 const query = graphql`
-  query PostListContainerQuery {
+  query PostListContainerQuery($filter: PanoPostFilter) {
     viewer {
-      ...PanoFeedFragment
+      ...PanoFeedFragment @arguments(filter: $filter)
       ...PanoFeed_viewer
     }
   }