wip

apps/kampus/app/pano/features/post-list/PostItem.tsx

@@ -13,13 +13,13 @@ import { UpvoteButton } from "./PostUpvoteButton";
 
 interface LinkProps {
   href: string;
-  title: string;
+  children: string;
   className?: string;
 }
 
-const Link = ({ href, title, className }: LinkProps) => {
+const Link = ({ href, children: title, className }: LinkProps) => {
   return (
-    <NextLink className={cn("text-muted-foreground hover:underline", className)} href={href}>
+    <NextLink className={cn("hover:underline", className)} href={href}>
       {title}
     </NextLink>
   );
@@ -35,6 +35,7 @@ const usePanoPostFragment = (key: PostItem_post$key | null) =>
         url
         createdAt
         id
+        site
 
         owner {
           username
@@ -44,10 +45,10 @@ const usePanoPostFragment = (key: PostItem_post$key | null) =>
     key
   );
 
-type PostItemProps = {
+interface PostItemProps {
   post: PostItem_post$key;
   showContent?: boolean;
-};
+}
 
 export const PostItem = (props: PostItemProps) => {
   const post = usePanoPostFragment(props.post);
@@ -57,21 +58,26 @@ export const PostItem = (props: PostItemProps) => {
   }
 
   return (
-    <div className="mr-1 flex h-full gap-1 border-l-2">
-      <div className="ml-1 flex h-full">
-        <UpvoteButton upvoteCount={5} isUpvoted={false} disabled={false} isVoting={false} />
-      </div>
+    <section className="flex h-full items-center gap-2 rounded">
+      <UpvoteButton upvoteCount={5} isUpvoted={false} disabled={false} isVoting={false} />
+
       <div className="flex w-full flex-col justify-center">
         <div className="flex items-center gap-1 align-baseline">
-          <Link title={post.title} href={post.url ?? ""} />
-          <Link className="text-sm" title={post.site ?? ""} href={post.url ?? ""} />
+          <Link className="font-semibold" href={post.url ?? ""}>
+            {post.title}
+          </Link>
+          <Link className="text-sm" href={post.url ?? ""}>
+            {post.site ?? ""}
+          </Link>
         </div>
         <div className="flex items-center gap-1 text-sm">
           <div>@{post.owner?.username} |</div>
-          <div>{<Link title="0 yorum" href={`/pano/post/${post.id}/`} />} |</div>
+          <div>
+            <Link href={`/pano/post/${post.id}`}>0 yorum</Link> |
+          </div>
           <TimeAgo date={new Date(post.createdAt as string)} />
         </div>
       </div>
-    </div>
+    </section>
   );
 };

apps/kampus/app/pano/features/post-list/PostUpvoteButton.tsx

@@ -16,11 +16,9 @@ export const UpvoteButton = (props: UpvoteProps) => {
   const combinedStyle = cn(upvoteStyle, opacity);
 
   return (
-    <Button className="flex h-full items-center pt-3" variant="ghost">
-      <div className="flex flex-col items-center justify-center">
-        <Triangle className={combinedStyle} size={12} />
-        {`${props.upvoteCount}`}
-      </div>
+    <Button className="flex h-full flex-col" variant="outline">
+      <Triangle className={combinedStyle} size={12} />
+      {props.upvoteCount}
     </Button>
   );
 };

apps/kampus/app/pano/posts/AllPosts.tsx

@@ -9,10 +9,20 @@ import { type AllPostsPaginationQuery } from "./__generated__/AllPostsPagination
 
 const fragment = graphql`
   fragment AllPostsFragment on Query
-  @argumentDefinitions(after: { type: "String" }, first: { type: "Int", defaultValue: 2 })
+  @argumentDefinitions(
+    after: { type: "String" }
+    first: { type: "Int", defaultValue: 2 }
+    before: { type: "String" }
+    last: { type: "Int" }
+  )
   @refetchable(queryName: "AllPostsPaginationQuery") {
     pano {
-      allPosts(first: $first, after: $after) @connection(key: "AllPostFragment_pano_allPosts") {
+      allPosts(first: $first, after: $after, last: $last, before: $before)
+        @connection(key: "AllPostFragment_pano_allPosts") {
+        pageInfo {
+          startCursor
+          endCursor
+        }
         edges {
           cursor
           node {
@@ -29,20 +39,27 @@ interface Props {
 }
 
 export function AllPosts(props: Props) {
-  const { data, loadNext, isLoadingNext, refetch, hasNext } = usePaginationFragment<
+  const { data, refetch, hasNext, hasPrevious } = usePaginationFragment<
     AllPostsPaginationQuery,
     AllPostsFragment$key
   >(fragment, props.allPosts);
 
-  const loadMore = useCallback(() => {
-    console.log({ isLoadingNext, hasNext });
-    if (!isLoadingNext && hasNext) {
-      loadNext(2);
+  const allPosts = data.pano.allPosts;
+
+  const loadPrevPage = useCallback(() => {
+    if (allPosts?.pageInfo.startCursor && hasPrevious) {
+      refetch({ before: allPosts.pageInfo.startCursor, last: 2 });
+    }
+  }, [allPosts?.pageInfo.startCursor, hasPrevious, refetch]);
+
+  const loadNextPage = useCallback(() => {
+    if (allPosts?.pageInfo.endCursor && hasNext) {
+      refetch({ after: allPosts.pageInfo.endCursor, first: 2 });
     }
-  }, [hasNext, isLoadingNext, loadNext]);
+  }, [allPosts?.pageInfo.endCursor, hasNext, refetch]);
 
   return (
-    <section>
+    <section className="flex flex-col gap-4">
       {data?.pano.allPosts?.edges?.map((edge) => {
         if (!edge?.node) {
           return null;
@@ -55,19 +72,12 @@ export function AllPosts(props: Props) {
         return <PostItem key={edge.cursor} post={edge.node} />;
       })}
 
-      <div>
-        <Button onClick={loadMore} disabled={isLoadingNext}>
-          {isLoadingNext ? "Loading..." : "Load More"}
+      <div className="flex gap-2">
+        <Button variant="secondary" onClick={loadPrevPage} disabled={!hasPrevious}>
+          {"< Prev"}
         </Button>
-        <Button
-          type="button"
-          onClick={(e) => {
-            e.preventDefault();
-            refetch({ first: 5 });
-          }}
-          disabled={isLoadingNext}
-        >
-          Refetch with 5 items
+        <Button variant="secondary" onClick={loadNextPage} disabled={!hasNext}>
+          {"Next >"}
         </Button>
       </div>
     </section>