get viewer name for MoreOptions

apps/kampus/app/pano/PanoFeed.tsx

@@ -30,14 +30,14 @@ const fragment = graphql`
 `;
 
 const viewerFragment = graphql`
-  fragment PanoFeed_viewer on Actor {
-    displayName
+  fragment PanoFeed_viewer on Viewer {
+    ...PostItem_viewer
   }
 `;
 
 interface Props {
   panoFeed: PanoFeedFragment$key;
-  panoViewer: PanoFeed_viewer$key | null;
+  panoViewer: PanoFeed_viewer$key;
 }
 
 export function PanoFeed(props: Props) {
@@ -46,7 +46,6 @@ export function PanoFeed(props: Props) {
     props.panoFeed
   );
   const viewer = useFragment(viewerFragment, props.panoViewer);
-  console.log(viewer, "-------------------viewer");
 
   const feed = data.panoFeed;
 
@@ -70,7 +69,7 @@ export function PanoFeed(props: Props) {
             return null;
           }
 
-          return <PostItem key={edge.node.id} post={edge.node} />;
+          return <PostItem key={edge.node.id} post={edge.node} viewerRef={viewer} />;
         })}
 
         <div className="flex gap-2">

apps/kampus/app/pano/PostListContainer.tsx

@@ -16,21 +16,18 @@ const query = graphql`
   query PostListContainerQuery {
     viewer {
       ...PanoFeedFragment
-      actor {
-        ...PanoFeed_viewer
-      }
+      ...PanoFeed_viewer
     }
   }
 `;
 
 export const PostListContainer = (props: Props) => {
   const queryRef = useSerializablePreloadedQuery(props.preloadedQuery);
   const data = usePreloadedQuery(query, queryRef);
-  console.log(data);
 
   if (!data.viewer) {
     return null;
   }
 
-  return <PanoFeed panoFeed={data.viewer} panoViewer={data.viewer.actor} />;
+  return <PanoFeed panoFeed={data.viewer} panoViewer={data.viewer} />;
 };

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

@@ -22,26 +22,37 @@ import {
 } from "@kampus/ui-next";
 
 import { MoreOptions_post$key } from "./__generated__/MoreOptions_post.graphql";
+import { MoreOptions_viewer$key } from "./__generated__/MoreOptions_viewer.graphql";
 
 interface Props {
   post: MoreOptions_post$key;
+  viewerRef: MoreOptions_viewer$key | null;
 }
 
-const moreOptionsPostFragment = graphql`
-  fragment MoreOptions_post on PanoPost {
-    id
-    owner {
-      username
-    }
-  }
-`;
+const useMoreOptionsPostFragment = (key: MoreOptions_post$key | null) =>
+  useFragment(
+    graphql`
+      fragment MoreOptions_post on PanoPost {
+        id
+        owner {
+          username
+        }
+      }
+    `,
+    key
+  );
 
-// const moreOptionsViewerFragment = graphql`
-//   fragment MoreOptions_viewer on Actor {
-//     displayName
-//     id
-//   }
-// `;
+const useMoreOptionsViewerFragment = (key: MoreOptions_viewer$key | null) =>
+  useFragment(
+    graphql`
+      fragment MoreOptions_viewer on Viewer {
+        actor {
+          displayName
+        }
+      }
+    `,
+    key
+  );
 
 function canUserEdit(session?: any, owner?: any) {
   if (!owner) return false;
@@ -52,15 +63,15 @@ function canUserEdit(session?: any, owner?: any) {
 }
 
 export const MoreOptionsDropdown = (props: Props) => {
-  const post = useFragment(moreOptionsPostFragment, props.post);
-  // const viewer = useFragment(moreOptionsViewerFragment, props.viewer);
+  const post = useMoreOptionsPostFragment(props.post);
+  const viewer = useMoreOptionsViewerFragment(props.viewerRef);
   const { toast } = useToast();
 
   const ownerItems: JSX.Element[] = [];
   // if (canUserEdit(session, post.owner?.username)) {
   ownerItems.push(
     <DropdownMenuItem key="edit">
-      <Link href={`/post/${post.id}/edit`}>Düzenle</Link>
+      <Link href={`/post/${post?.id}/edit`}>Düzenle</Link>
     </DropdownMenuItem>
   );
   ownerItems.push(
@@ -83,7 +94,7 @@ export const MoreOptionsDropdown = (props: Props) => {
           {canUserEdit({ user: { name: "can" } }, "can") && (
             <>
               <DropdownMenuItem key="edit">
-                <Link href={`/post/${post.id}/edit`}>Düzenle</Link>
+                <Link href={`/post/${post?.id}/edit`}>Düzenle</Link>
               </DropdownMenuItem>
               <DialogTrigger asChild>
                 <DropdownMenuItem>Sil</DropdownMenuItem>

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

@@ -7,6 +7,7 @@ import { cn } from "@kampus/ui-next/utils";
 
 import { TimeAgo } from "~/../../packages/ui";
 import { type PostItem_post$key } from "./__generated__/PostItem_post.graphql";
+import { type PostItem_viewer$key } from "./__generated__/PostItem_viewer.graphql";
 import { MoreOptionsDropdown } from "./MoreOptions";
 import { UpvoteButton } from "./PostUpvoteButton";
 
@@ -46,13 +47,25 @@ const usePanoPostFragment = (key: PostItem_post$key | null) =>
     key
   );
 
+const usePanoViewerFragment = (key: PostItem_viewer$key | null) =>
+  useFragment(
+    graphql`
+      fragment PostItem_viewer on Viewer {
+        ...MoreOptions_viewer
+      }
+    `,
+    key
+  );
+
 interface PostItemProps {
   post: PostItem_post$key;
+  viewerRef: PostItem_viewer$key;
   showContent?: boolean;
 }
 
 export const PostItem = (props: PostItemProps) => {
   const post = usePanoPostFragment(props.post);
+  const viewer = usePanoViewerFragment(props.viewerRef);
 
   if (!post) {
     return null;
@@ -77,7 +90,7 @@ export const PostItem = (props: PostItemProps) => {
             <Link href={`/pano/post/${post.id}`}>0 yorum</Link> |
           </div>
           <TimeAgo date={new Date(post.createdAt as string)} />
-          <MoreOptionsDropdown key={post.id} post={post} />
+          <MoreOptionsDropdown key={post.id} post={post} viewerRef={viewer} />
         </div>
       </div>
     </section>