From 242ed6162e971d5631ba98ce80340acca723ef78 Mon Sep 17 00:00:00 2001 From: Can Sirin <8138047+cansirin@users.noreply.github.com> Date: Thu, 10 Aug 2023 21:33:57 -0700 Subject: [PATCH] feat(apps/pano): use relay in post more options --- apps/kampus/app/pano/PanoFeed.tsx | 12 +- apps/kampus/app/pano/PostListContainer.tsx | 6 +- .../PanoFeedPaginationQuery.graphql.ts | 15 ++- .../__generated__/PanoFeed_viewer.graphql.ts | 42 +++++++ .../PostListContainerQuery.graphql.ts | 74 +++++++++--- .../pano/features/post-list/MoreOptions.tsx | 109 ++++++++++-------- .../app/pano/features/post-list/PostItem.tsx | 6 +- .../__generated__/MoreOptions_post.graphql.ts | 63 ++++++++++ .../__generated__/PostItem_post.graphql.ts | 11 +- 9 files changed, 264 insertions(+), 74 deletions(-) create mode 100644 apps/kampus/app/pano/__generated__/PanoFeed_viewer.graphql.ts create mode 100644 apps/kampus/app/pano/features/post-list/__generated__/MoreOptions_post.graphql.ts diff --git a/apps/kampus/app/pano/PanoFeed.tsx b/apps/kampus/app/pano/PanoFeed.tsx index 661e7a6e..5b9d0daf 100644 --- a/apps/kampus/app/pano/PanoFeed.tsx +++ b/apps/kampus/app/pano/PanoFeed.tsx @@ -1,9 +1,10 @@ import { Suspense, useCallback } from "react"; -import { graphql, usePaginationFragment } from "react-relay"; +import { graphql, useFragment, usePaginationFragment } from "react-relay"; import { Button } from "@kampus/ui-next"; import { PostItem } from "~/app/pano/features/post-list/PostItem"; +import { PanoFeed_viewer$key } from "./__generated__/PanoFeed_viewer.graphql"; import { type PanoFeedFragment$key } from "./__generated__/PanoFeedFragment.graphql"; const fragment = graphql` @@ -28,8 +29,15 @@ const fragment = graphql` } `; +const viewerFragment = graphql` + fragment PanoFeed_viewer on Actor { + displayName + } +`; + interface Props { panoFeed: PanoFeedFragment$key; + panoViewer: PanoFeed_viewer$key | null; } export function PanoFeed(props: Props) { @@ -37,6 +45,8 @@ export function PanoFeed(props: Props) { fragment, props.panoFeed ); + const viewer = useFragment(viewerFragment, props.panoViewer); + console.log(viewer, "-------------------viewer"); const feed = data.panoFeed; diff --git a/apps/kampus/app/pano/PostListContainer.tsx b/apps/kampus/app/pano/PostListContainer.tsx index eee9c796..c96f1d55 100644 --- a/apps/kampus/app/pano/PostListContainer.tsx +++ b/apps/kampus/app/pano/PostListContainer.tsx @@ -16,6 +16,9 @@ const query = graphql` query PostListContainerQuery { viewer { ...PanoFeedFragment + actor { + ...PanoFeed_viewer + } } } `; @@ -23,10 +26,11 @@ const query = graphql` export const PostListContainer = (props: Props) => { const queryRef = useSerializablePreloadedQuery(props.preloadedQuery); const data = usePreloadedQuery(query, queryRef); + console.log(data); if (!data.viewer) { return null; } - return ; + return ; }; diff --git a/apps/kampus/app/pano/__generated__/PanoFeedPaginationQuery.graphql.ts b/apps/kampus/app/pano/__generated__/PanoFeedPaginationQuery.graphql.ts index e6de5cd9..1133daed 100644 --- a/apps/kampus/app/pano/__generated__/PanoFeedPaginationQuery.graphql.ts +++ b/apps/kampus/app/pano/__generated__/PanoFeedPaginationQuery.graphql.ts @@ -1,5 +1,5 @@ /** - * @generated SignedSource<<09ed6683c9184c2f89dbaad228142867>> + * @generated SignedSource<<721d372d9c0d61484976ff4a06abe9e0>> * @lightSyntaxTransform * @nogrep */ @@ -215,7 +215,14 @@ return { "name": "displayName", "storageKey": null }, - (v2/*: any*/) + (v2/*: any*/), + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "username", + "storageKey": null + } ], "storageKey": null }, @@ -289,12 +296,12 @@ return { ] }, "params": { - "cacheID": "4ca0994c46e6a44f1dc573f87eb2c3b6", + "cacheID": "a62d5eaf7fdd72aabe8f4b44402e9534", "id": null, "metadata": {}, "name": "PanoFeedPaginationQuery", "operationKind": "query", - "text": "query PanoFeedPaginationQuery(\n $after: String\n $before: String\n $first: Int = 10\n $last: Int\n) {\n viewer {\n ...PanoFeedFragment_pbnwq\n }\n}\n\nfragment PanoFeedFragment_pbnwq on Viewer {\n panoFeed(first: $first, after: $after, last: $last, before: $before) {\n edges {\n cursor\n node {\n id\n ...PostItem_post\n __typename\n }\n }\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n }\n}\n\nfragment PostItem_post on PanoPost {\n id\n title\n content\n url\n createdAt\n site\n ...PostUpvoteButton_post\n owner {\n displayName\n id\n }\n}\n\nfragment PostUpvoteButton_post on PanoPost {\n id\n isUpvotedByViewer\n upvoteCount\n}\n" + "text": "query PanoFeedPaginationQuery(\n $after: String\n $before: String\n $first: Int = 10\n $last: Int\n) {\n viewer {\n ...PanoFeedFragment_pbnwq\n }\n}\n\nfragment MoreOptions_post on PanoPost {\n id\n owner {\n username\n id\n }\n}\n\nfragment PanoFeedFragment_pbnwq on Viewer {\n panoFeed(first: $first, after: $after, last: $last, before: $before) {\n edges {\n cursor\n node {\n id\n ...PostItem_post\n __typename\n }\n }\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n }\n}\n\nfragment PostItem_post on PanoPost {\n id\n title\n content\n url\n createdAt\n site\n ...PostUpvoteButton_post\n owner {\n displayName\n id\n }\n ...MoreOptions_post\n}\n\nfragment PostUpvoteButton_post on PanoPost {\n id\n isUpvotedByViewer\n upvoteCount\n}\n" } }; })(); diff --git a/apps/kampus/app/pano/__generated__/PanoFeed_viewer.graphql.ts b/apps/kampus/app/pano/__generated__/PanoFeed_viewer.graphql.ts new file mode 100644 index 00000000..57438047 --- /dev/null +++ b/apps/kampus/app/pano/__generated__/PanoFeed_viewer.graphql.ts @@ -0,0 +1,42 @@ +/** + * @generated SignedSource<<6909702fcff66160abb20fbbfeab1e64>> + * @lightSyntaxTransform + * @nogrep + */ + +/* tslint:disable */ +/* eslint-disable */ +// @ts-nocheck + +import { Fragment, ReaderFragment } from 'relay-runtime'; +import { FragmentRefs } from "relay-runtime"; +export type PanoFeed_viewer$data = { + readonly displayName: string | null; + readonly " $fragmentType": "PanoFeed_viewer"; +}; +export type PanoFeed_viewer$key = { + readonly " $data"?: PanoFeed_viewer$data; + readonly " $fragmentSpreads": FragmentRefs<"PanoFeed_viewer">; +}; + +const node: ReaderFragment = { + "argumentDefinitions": [], + "kind": "Fragment", + "metadata": null, + "name": "PanoFeed_viewer", + "selections": [ + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "displayName", + "storageKey": null + } + ], + "type": "Actor", + "abstractKey": "__isActor" +}; + +(node as any).hash = "d899f3d2a551aba8616408feb294eb54"; + +export default node; diff --git a/apps/kampus/app/pano/__generated__/PostListContainerQuery.graphql.ts b/apps/kampus/app/pano/__generated__/PostListContainerQuery.graphql.ts index 967966b2..dd07a0a1 100644 --- a/apps/kampus/app/pano/__generated__/PostListContainerQuery.graphql.ts +++ b/apps/kampus/app/pano/__generated__/PostListContainerQuery.graphql.ts @@ -1,5 +1,5 @@ /** - * @generated SignedSource<> + * @generated SignedSource<> * @lightSyntaxTransform * @nogrep */ @@ -13,6 +13,9 @@ import { FragmentRefs } from "relay-runtime"; export type PostListContainerQuery$variables = {}; export type PostListContainerQuery$data = { readonly viewer: { + readonly actor: { + readonly " $fragmentSpreads": FragmentRefs<"PanoFeed_viewer">; + } | null; readonly " $fragmentSpreads": FragmentRefs<"PanoFeedFragment">; } | null; }; @@ -35,6 +38,20 @@ v1 = { "kind": "ScalarField", "name": "id", "storageKey": null +}, +v2 = { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "displayName", + "storageKey": null +}, +v3 = { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "__typename", + "storageKey": null }; return { "fragment": { @@ -55,6 +72,22 @@ return { "args": null, "kind": "FragmentSpread", "name": "PanoFeedFragment" + }, + { + "alias": null, + "args": null, + "concreteType": null, + "kind": "LinkedField", + "name": "actor", + "plural": false, + "selections": [ + { + "args": null, + "kind": "FragmentSpread", + "name": "PanoFeed_viewer" + } + ], + "storageKey": null } ], "storageKey": null @@ -166,24 +199,19 @@ return { "name": "owner", "plural": false, "selections": [ + (v2/*: any*/), + (v1/*: any*/), { "alias": null, "args": null, "kind": "ScalarField", - "name": "displayName", + "name": "username", "storageKey": null - }, - (v1/*: any*/) + } ], "storageKey": null }, - { - "alias": null, - "args": null, - "kind": "ScalarField", - "name": "__typename", - "storageKey": null - } + (v3/*: any*/) ], "storageKey": null } @@ -240,6 +268,24 @@ return { "key": "PanoFeedFragment__panoFeed", "kind": "LinkedHandle", "name": "panoFeed" + }, + { + "alias": null, + "args": null, + "concreteType": null, + "kind": "LinkedField", + "name": "actor", + "plural": false, + "selections": [ + (v3/*: any*/), + { + "kind": "TypeDiscriminator", + "abstractKey": "__isActor" + }, + (v2/*: any*/), + (v1/*: any*/) + ], + "storageKey": null } ], "storageKey": null @@ -247,16 +293,16 @@ return { ] }, "params": { - "cacheID": "18eb8eaf3693895b2efd987ddc3b9362", + "cacheID": "03884b4e86f1ba9d6723df79bf407499", "id": null, "metadata": {}, "name": "PostListContainerQuery", "operationKind": "query", - "text": "query PostListContainerQuery {\n viewer {\n ...PanoFeedFragment\n }\n}\n\nfragment PanoFeedFragment on Viewer {\n panoFeed(first: 10) {\n edges {\n cursor\n node {\n id\n ...PostItem_post\n __typename\n }\n }\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n }\n}\n\nfragment PostItem_post on PanoPost {\n id\n title\n content\n url\n createdAt\n site\n ...PostUpvoteButton_post\n owner {\n displayName\n id\n }\n}\n\nfragment PostUpvoteButton_post on PanoPost {\n id\n isUpvotedByViewer\n upvoteCount\n}\n" + "text": "query PostListContainerQuery {\n viewer {\n ...PanoFeedFragment\n actor {\n __typename\n ...PanoFeed_viewer\n id\n }\n }\n}\n\nfragment MoreOptions_post on PanoPost {\n id\n owner {\n username\n id\n }\n}\n\nfragment PanoFeedFragment on Viewer {\n panoFeed(first: 10) {\n edges {\n cursor\n node {\n id\n ...PostItem_post\n __typename\n }\n }\n pageInfo {\n endCursor\n hasNextPage\n hasPreviousPage\n startCursor\n }\n }\n}\n\nfragment PanoFeed_viewer on Actor {\n __isActor: __typename\n displayName\n}\n\nfragment PostItem_post on PanoPost {\n id\n title\n content\n url\n createdAt\n site\n ...PostUpvoteButton_post\n owner {\n displayName\n id\n }\n ...MoreOptions_post\n}\n\nfragment PostUpvoteButton_post on PanoPost {\n id\n isUpvotedByViewer\n upvoteCount\n}\n" } }; })(); -(node as any).hash = "38254b185df77d46946b76194dd61219"; +(node as any).hash = "1a56ce0599346554f35cba75e9ef0e29"; export default node; diff --git a/apps/kampus/app/pano/features/post-list/MoreOptions.tsx b/apps/kampus/app/pano/features/post-list/MoreOptions.tsx index 66955884..f685cedd 100644 --- a/apps/kampus/app/pano/features/post-list/MoreOptions.tsx +++ b/apps/kampus/app/pano/features/post-list/MoreOptions.tsx @@ -1,7 +1,8 @@ "use client"; -import { useRouter } from "next/navigation"; +import Link from "next/link"; import { MoreHorizontal } from "lucide-react"; +import { graphql, useFragment } from "react-relay"; import { Button, @@ -20,53 +21,55 @@ import { useToast, } from "@kampus/ui-next"; +import { MoreOptions_post$key } from "./__generated__/MoreOptions_post.graphql"; + interface Props { - post: Post; - shareUrl: string; + post: MoreOptions_post$key; } -type Post = { - __typename?: "PanoPost"; - content: string; - createdAt: string; - id: string; - owner: string; - title: string; - url: string; -}; -type User = { - username: string; -}; +const moreOptionsPostFragment = graphql` + fragment MoreOptions_post on PanoPost { + id + owner { + username + } + } +`; -function canUserEdit(user: User, post: Post) { - console.log(user, post); - return true; -} +// const moreOptionsViewerFragment = graphql` +// fragment MoreOptions_viewer on Actor { +// displayName +// id +// } +// `; -export const MoreOptionsDropdown = ({ post, shareUrl }: Props) => { - const user = { username: "John Doe" }; - console.log(post, shareUrl); +function canUserEdit(session?: any, owner?: any) { + if (!owner) return false; + if (!session) return false; - const router = useRouter(); + const username = session.user?.name; + return username === owner; +} + +export const MoreOptionsDropdown = (props: Props) => { + const post = useFragment(moreOptionsPostFragment, props.post); + // const viewer = useFragment(moreOptionsViewerFragment, props.viewer); const { toast } = useToast(); const ownerItems: JSX.Element[] = []; - if (canUserEdit(user, post)) { - ownerItems.push( - router.push(`/posts/${post.id}/edit`)} key="edit"> - Düzenle - - ); - ownerItems.push( - - Sil - - ); - ownerItems.push(); - } - - // // FIXME: below appears to be redundant, is it? - // const menuItems = [...ownerItems]; + // if (canUserEdit(session, post.owner?.username)) { + ownerItems.push( + + Düzenle + + ); + ownerItems.push( + + Sil + + ); + ownerItems.push(); + // } return ( @@ -77,16 +80,26 @@ export const MoreOptionsDropdown = ({ post, shareUrl }: Props) => { - {ownerItems} + {canUserEdit({ user: { name: "can" } }, "can") && ( + <> + + Düzenle + + + Sil + + + + )} { - toast({ - description: "Link kopyalandı", - }); - }} - > - Linki kopyala - + onSelect={() => { + toast({ + description: "Link kopyalandı", + }); + }} + > + Linki kopyala + diff --git a/apps/kampus/app/pano/features/post-list/PostItem.tsx b/apps/kampus/app/pano/features/post-list/PostItem.tsx index 0fa7f3a3..e3f98c46 100644 --- a/apps/kampus/app/pano/features/post-list/PostItem.tsx +++ b/apps/kampus/app/pano/features/post-list/PostItem.tsx @@ -7,10 +7,9 @@ import { cn } from "@kampus/ui-next/utils"; import { TimeAgo } from "~/../../packages/ui"; import { type PostItem_post$key } from "./__generated__/PostItem_post.graphql"; +import { MoreOptionsDropdown } from "./MoreOptions"; import { UpvoteButton } from "./PostUpvoteButton"; -// import { MoreOptionsDropdown } from "./MoreOptions"; - interface LinkProps { href: string; children: string; @@ -34,7 +33,6 @@ const usePanoPostFragment = (key: PostItem_post$key | null) => content url createdAt - id site ...PostUpvoteButton_post @@ -42,6 +40,7 @@ const usePanoPostFragment = (key: PostItem_post$key | null) => owner @required(action: LOG) { displayName @required(action: LOG) } + ...MoreOptions_post } `, key @@ -78,6 +77,7 @@ export const PostItem = (props: PostItemProps) => { 0 yorum | + diff --git a/apps/kampus/app/pano/features/post-list/__generated__/MoreOptions_post.graphql.ts b/apps/kampus/app/pano/features/post-list/__generated__/MoreOptions_post.graphql.ts new file mode 100644 index 00000000..0c6bf70e --- /dev/null +++ b/apps/kampus/app/pano/features/post-list/__generated__/MoreOptions_post.graphql.ts @@ -0,0 +1,63 @@ +/** + * @generated SignedSource<<789c3dcce5dd3bfead2297a6ac6667d5>> + * @lightSyntaxTransform + * @nogrep + */ + +/* tslint:disable */ +/* eslint-disable */ +// @ts-nocheck + +import { Fragment, ReaderFragment } from 'relay-runtime'; +import { FragmentRefs } from "relay-runtime"; +export type MoreOptions_post$data = { + readonly id: string; + readonly owner: { + readonly username: string; + } | null; + readonly " $fragmentType": "MoreOptions_post"; +}; +export type MoreOptions_post$key = { + readonly " $data"?: MoreOptions_post$data; + readonly " $fragmentSpreads": FragmentRefs<"MoreOptions_post">; +}; + +const node: ReaderFragment = { + "argumentDefinitions": [], + "kind": "Fragment", + "metadata": null, + "name": "MoreOptions_post", + "selections": [ + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "id", + "storageKey": null + }, + { + "alias": null, + "args": null, + "concreteType": "User", + "kind": "LinkedField", + "name": "owner", + "plural": false, + "selections": [ + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "username", + "storageKey": null + } + ], + "storageKey": null + } + ], + "type": "PanoPost", + "abstractKey": null +}; + +(node as any).hash = "9d3d7c45939c77a59da8a5829f1aa5c2"; + +export default node; diff --git a/apps/kampus/app/pano/features/post-list/__generated__/PostItem_post.graphql.ts b/apps/kampus/app/pano/features/post-list/__generated__/PostItem_post.graphql.ts index a1c7259d..d7bae815 100644 --- a/apps/kampus/app/pano/features/post-list/__generated__/PostItem_post.graphql.ts +++ b/apps/kampus/app/pano/features/post-list/__generated__/PostItem_post.graphql.ts @@ -1,5 +1,5 @@ /** - * @generated SignedSource<> + * @generated SignedSource<> * @lightSyntaxTransform * @nogrep */ @@ -20,7 +20,7 @@ export type PostItem_post$data = { readonly site: string | null; readonly title: string; readonly url: string | null; - readonly " $fragmentSpreads": FragmentRefs<"PostUpvoteButton_post">; + readonly " $fragmentSpreads": FragmentRefs<"MoreOptions_post" | "PostUpvoteButton_post">; readonly " $fragmentType": "PostItem_post"; } | null; export type PostItem_post$key = { @@ -108,12 +108,17 @@ const node: ReaderFragment = { }, "action": "LOG", "path": "owner" + }, + { + "args": null, + "kind": "FragmentSpread", + "name": "MoreOptions_post" } ], "type": "PanoPost", "abstractKey": null }; -(node as any).hash = "2722b74002976e15c158a0be92853b78"; +(node as any).hash = "40952525253258c86b4d4320cf4279a0"; export default node;