diff --git a/apps/kampus/app/pano/PanoFeed.tsx b/apps/kampus/app/pano/PanoFeed.tsx index 7fee70e7..fdfaf347 100644 --- a/apps/kampus/app/pano/PanoFeed.tsx +++ b/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) { })}
- -
diff --git a/apps/kampus/app/pano/PostListContainer.tsx b/apps/kampus/app/pano/PostListContainer.tsx index d3a93228..c10b62e9 100644 --- a/apps/kampus/app/pano/PostListContainer.tsx +++ b/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 } } diff --git a/apps/kampus/app/pano/__generated__/PanoFeedFragment.graphql.ts b/apps/kampus/app/pano/__generated__/PanoFeedFragment.graphql.ts index fae43885..c9727bec 100644 --- a/apps/kampus/app/pano/__generated__/PanoFeedFragment.graphql.ts +++ b/apps/kampus/app/pano/__generated__/PanoFeedFragment.graphql.ts @@ -1,5 +1,5 @@ /** - * @generated SignedSource<<845cce7dd6f615c692812a518c6c92de>> + * @generated SignedSource<> * @lightSyntaxTransform * @nogrep */ @@ -45,7 +45,12 @@ return { "name": "before" }, { - "defaultValue": 10, + "defaultValue": null, + "kind": "LocalArgument", + "name": "filter" + }, + { + "defaultValue": 20, "kind": "LocalArgument", "name": "first" }, @@ -87,7 +92,13 @@ return { "selections": [ { "alias": "panoFeed", - "args": null, + "args": [ + { + "kind": "Variable", + "name": "filter", + "variableName": "filter" + } + ], "concreteType": "PanoPostConnection", "kind": "LinkedField", "name": "__PanoFeedFragment__panoFeed_connection", @@ -201,6 +212,6 @@ return { }; })(); -(node as any).hash = "169d642e0dd7ef004b6ba9327f096aca"; +(node as any).hash = "e8ff3d9e17828afbcf005f38a17a3264"; export default node; diff --git a/apps/kampus/app/pano/__generated__/PanoFeedPaginationQuery.graphql.ts b/apps/kampus/app/pano/__generated__/PanoFeedPaginationQuery.graphql.ts index 61757032..7d29bdf3 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<<2f2d885113d9534aa68e642c78458ee8>> + * @generated SignedSource<> * @lightSyntaxTransform * @nogrep */ @@ -10,9 +10,11 @@ import { ConcreteRequest, Query } from 'relay-runtime'; import { FragmentRefs } from "relay-runtime"; +export type PanoPostFilter = "ACTIVE" | "MOST_COMMENTED" | "MOST_UPVOTED" | "OWNED" | "%future added value"; export type PanoFeedPaginationQuery$variables = { after?: string | null; before?: string | null; + filter?: PanoPostFilter | null; first?: number | null; last?: number | null; }; @@ -39,7 +41,12 @@ var v0 = [ "name": "before" }, { - "defaultValue": 10, + "defaultValue": null, + "kind": "LocalArgument", + "name": "filter" + }, + { + "defaultValue": 20, "kind": "LocalArgument", "name": "first" }, @@ -60,6 +67,11 @@ v1 = [ "name": "before", "variableName": "before" }, + { + "kind": "Variable", + "name": "filter", + "variableName": "filter" + }, { "kind": "Variable", "name": "first", @@ -296,7 +308,9 @@ return { { "alias": null, "args": (v1/*: any*/), - "filters": null, + "filters": [ + "filter" + ], "handle": "connection", "key": "PanoFeedFragment__panoFeed", "kind": "LinkedHandle", @@ -308,16 +322,16 @@ return { ] }, "params": { - "cacheID": "5d8b1976de94f5cb82d7e26a7afab6c4", + "cacheID": "bfd0b49ea530948253e68370ab0cacbe", "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 MoreOptions_post on PanoPost {\n id\n owner {\n displayName\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 commentCount\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" + "text": "query PanoFeedPaginationQuery(\n $after: String\n $before: String\n $filter: PanoPostFilter\n $first: Int = 20\n $last: Int\n) {\n viewer {\n ...PanoFeedFragment_4zM71\n }\n}\n\nfragment MoreOptions_post on PanoPost {\n id\n owner {\n displayName\n id\n }\n}\n\nfragment PanoFeedFragment_4zM71 on Viewer {\n panoFeed(first: $first, after: $after, last: $last, before: $before, filter: $filter) {\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 commentCount\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 = "169d642e0dd7ef004b6ba9327f096aca"; +(node as any).hash = "e8ff3d9e17828afbcf005f38a17a3264"; export default node; diff --git a/apps/kampus/app/pano/__generated__/PostListContainerQuery.graphql.ts b/apps/kampus/app/pano/__generated__/PostListContainerQuery.graphql.ts index 783a75e5..198081f2 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 */ @@ -10,7 +10,10 @@ import { ConcreteRequest, Query } from 'relay-runtime'; import { FragmentRefs } from "relay-runtime"; -export type PostListContainerQuery$variables = {}; +export type PanoPostFilter = "ACTIVE" | "MOST_COMMENTED" | "MOST_UPVOTED" | "OWNED" | "%future added value"; +export type PostListContainerQuery$variables = { + filter?: PanoPostFilter | null; +}; export type PostListContainerQuery$data = { readonly viewer: { readonly " $fragmentSpreads": FragmentRefs<"PanoFeedFragment" | "PanoFeed_viewer">; @@ -23,27 +26,40 @@ export type PostListContainerQuery = { const node: ConcreteRequest = (function(){ var v0 = [ + { + "defaultValue": null, + "kind": "LocalArgument", + "name": "filter" + } +], +v1 = { + "kind": "Variable", + "name": "filter", + "variableName": "filter" +}, +v2 = [ + (v1/*: any*/), { "kind": "Literal", "name": "first", - "value": 10 + "value": 20 } ], -v1 = { +v3 = { "alias": null, "args": null, "kind": "ScalarField", "name": "id", "storageKey": null }, -v2 = { +v4 = { "alias": null, "args": null, "kind": "ScalarField", "name": "displayName", "storageKey": null }, -v3 = { +v5 = { "alias": null, "args": null, "kind": "ScalarField", @@ -52,7 +68,7 @@ v3 = { }; return { "fragment": { - "argumentDefinitions": [], + "argumentDefinitions": (v0/*: any*/), "kind": "Fragment", "metadata": null, "name": "PostListContainerQuery", @@ -66,7 +82,9 @@ return { "plural": false, "selections": [ { - "args": null, + "args": [ + (v1/*: any*/) + ], "kind": "FragmentSpread", "name": "PanoFeedFragment" }, @@ -84,7 +102,7 @@ return { }, "kind": "Request", "operation": { - "argumentDefinitions": [], + "argumentDefinitions": (v0/*: any*/), "kind": "Operation", "name": "PostListContainerQuery", "selections": [ @@ -98,7 +116,7 @@ return { "selections": [ { "alias": null, - "args": (v0/*: any*/), + "args": (v2/*: any*/), "concreteType": "PanoPostConnection", "kind": "LinkedField", "name": "panoFeed", @@ -127,7 +145,7 @@ return { "name": "node", "plural": false, "selections": [ - (v1/*: any*/), + (v3/*: any*/), { "alias": null, "args": null, @@ -192,12 +210,12 @@ return { "name": "owner", "plural": false, "selections": [ - (v2/*: any*/), - (v1/*: any*/) + (v4/*: any*/), + (v3/*: any*/) ], "storageKey": null }, - (v3/*: any*/) + (v5/*: any*/) ], "storageKey": null } @@ -256,12 +274,14 @@ return { ] } ], - "storageKey": "panoFeed(first:10)" + "storageKey": null }, { "alias": null, - "args": (v0/*: any*/), - "filters": null, + "args": (v2/*: any*/), + "filters": [ + "filter" + ], "handle": "connection", "key": "PanoFeedFragment__panoFeed", "kind": "LinkedHandle", @@ -275,9 +295,9 @@ return { "name": "actor", "plural": false, "selections": [ - (v3/*: any*/), - (v2/*: any*/), - (v1/*: any*/) + (v5/*: any*/), + (v4/*: any*/), + (v3/*: any*/) ], "storageKey": null } @@ -287,16 +307,16 @@ return { ] }, "params": { - "cacheID": "046307bf078e70e6dddbc19cdbf24f9f", + "cacheID": "4382e79fc6bd8612b3dc7f6453323f65", "id": null, "metadata": {}, "name": "PostListContainerQuery", "operationKind": "query", - "text": "query PostListContainerQuery {\n viewer {\n ...PanoFeedFragment\n ...PanoFeed_viewer\n }\n}\n\nfragment MoreOptions_post on PanoPost {\n id\n owner {\n displayName\n id\n }\n}\n\nfragment MoreOptions_viewer on Viewer {\n actor {\n __typename\n displayName\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 Viewer {\n ...PostItem_viewer\n}\n\nfragment PostItem_post on PanoPost {\n id\n title\n content\n url\n createdAt\n site\n commentCount\n ...PostUpvoteButton_post\n owner {\n displayName\n id\n }\n ...MoreOptions_post\n}\n\nfragment PostItem_viewer on Viewer {\n ...MoreOptions_viewer\n actor {\n __typename\n displayName\n id\n }\n}\n\nfragment PostUpvoteButton_post on PanoPost {\n id\n isUpvotedByViewer\n upvoteCount\n}\n" + "text": "query PostListContainerQuery(\n $filter: PanoPostFilter\n) {\n viewer {\n ...PanoFeedFragment_Vt7Yj\n ...PanoFeed_viewer\n }\n}\n\nfragment MoreOptions_post on PanoPost {\n id\n owner {\n displayName\n id\n }\n}\n\nfragment MoreOptions_viewer on Viewer {\n actor {\n __typename\n displayName\n id\n }\n}\n\nfragment PanoFeedFragment_Vt7Yj on Viewer {\n panoFeed(first: 20, filter: $filter) {\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 Viewer {\n ...PostItem_viewer\n}\n\nfragment PostItem_post on PanoPost {\n id\n title\n content\n url\n createdAt\n site\n commentCount\n ...PostUpvoteButton_post\n owner {\n displayName\n id\n }\n ...MoreOptions_post\n}\n\nfragment PostItem_viewer on Viewer {\n ...MoreOptions_viewer\n actor {\n __typename\n displayName\n id\n }\n}\n\nfragment PostUpvoteButton_post on PanoPost {\n id\n isUpvotedByViewer\n upvoteCount\n}\n" } }; })(); -(node as any).hash = "246fd8479a18172b183f288ff6f3e842"; +(node as any).hash = "9c74048afe10dcf77c1f05b47a2da9ae"; export default node; diff --git a/apps/kampus/app/pano/features/post-filter/PanoFilterLink.tsx b/apps/kampus/app/pano/features/post-filter/PanoFilterLink.tsx index 9ff1beef..57522795 100644 --- a/apps/kampus/app/pano/features/post-filter/PanoFilterLink.tsx +++ b/apps/kampus/app/pano/features/post-filter/PanoFilterLink.tsx @@ -9,20 +9,16 @@ const createQueryString = (key: string, value: string) => { return searchParams.toString(); }; -export function PanoFilterLink({ - query, - children, - activeQuery, -}: { - query: string; - activeQuery: PanoPostFilterType; +interface Props { + isActive: boolean; + filter: PanoPostFilterType; children: React.ReactNode; -}) { - const isActive = query === activeQuery; +} +export function PanoFilterLink({ isActive, children, filter }: Props) { return ( {children} diff --git a/apps/kampus/app/pano/features/post-filter/PostSortFilters.tsx b/apps/kampus/app/pano/features/post-filter/PostSortFilters.tsx index 53cb2267..b631bfa0 100644 --- a/apps/kampus/app/pano/features/post-filter/PostSortFilters.tsx +++ b/apps/kampus/app/pano/features/post-filter/PostSortFilters.tsx @@ -11,19 +11,19 @@ import { type PanoPostFilterType, } from "~/app/pano/features/post-filter/utils"; -export const PostSortFilters = () => { - const searchParams = useSearchParams(); - let filterQuery = searchParams.get("filter") ?? "all"; - - if (!isPanoPostSortFilter(filterQuery)) { - console.log(filterQuery); - filterQuery = "all"; - } +interface Props { + selected: PanoPostFilterType; +} +export const PostSortFilters = (props: Props) => { return (
- {Object.entries(filters).map(([query, label]) => ( - + {Object.entries(filters).map(([filter, label]) => ( + {label} ))} diff --git a/apps/kampus/app/pano/features/post-filter/utils.ts b/apps/kampus/app/pano/features/post-filter/utils.ts index e0cb7976..adf04936 100644 --- a/apps/kampus/app/pano/features/post-filter/utils.ts +++ b/apps/kampus/app/pano/features/post-filter/utils.ts @@ -1,13 +1,12 @@ -export type PanoPostFilterType = "all" | "active" | "hot" | "liked" | "my-posts"; +export const filters = { + ALL: "hepsi", + ACTIVE: "en son yorumlananlar", + MOST_COMMENTED: "en cok yorumlananlar", + MOST_UPVOTED: "en cok oylananlar", + OWNED: "başlıklarım", +} as const; -export const filters: Record = { - all: "hepsi", - active: "en son yorumlananlar", - hot: "en fazla yorum almışlar", - liked: "beğendiklerim", - "my-posts": "başlıklarım", -}; +export type PanoPostFilterType = keyof typeof filters; -export const DEFAULT_FILTER_PATH = "/posts?filter=all"; export const isPanoPostSortFilter = (x: unknown): x is PanoPostFilterType => Object.keys(filters).some((filter) => filter === x); diff --git a/apps/kampus/app/pano/features/post-list/PostItem.tsx b/apps/kampus/app/pano/features/post-list/PostItem.tsx index 5aeeb7f7..04d295a4 100644 --- a/apps/kampus/app/pano/features/post-list/PostItem.tsx +++ b/apps/kampus/app/pano/features/post-list/PostItem.tsx @@ -85,15 +85,17 @@ export const PostItem = (props: PostItemProps) => { - - {post.title} - +
+ + {post.title} + + +
{post.site ?? ""} -
diff --git a/apps/kampus/app/pano/page.tsx b/apps/kampus/app/pano/page.tsx index 751c6e31..51378b2d 100644 --- a/apps/kampus/app/pano/page.tsx +++ b/apps/kampus/app/pano/page.tsx @@ -1,15 +1,33 @@ import loadSerializableQuery from "@kampus/relay/load-serializable-query"; import { PostSortFilters } from "~/app/pano/features/post-filter/PostSortFilters"; -import query, { type PostListContainerQuery } from "./__generated__/PostListContainerQuery.graphql"; +import query, { + type PanoPostFilter, + type PostListContainerQuery, +} from "./__generated__/PostListContainerQuery.graphql"; +import { type PanoPostFilterType } from "./features/post-filter/utils"; import { PostListContainer } from "./PostListContainer"; -export default async function PostsPage() { - const preloadedQuery = await loadSerializableQuery(query, {}); +const normalizeFilter = (query?: string): PanoPostFilterType | null => { + if (!query) { + return null; + } + + return ["MOST_COMMENTED", "MOST_UPVOTED", "ACTIVE", "OWNED"].includes(query) + ? (query as PanoPostFilterType) + : null; +}; + +export default async function PostsPage({ searchParams }: { searchParams: { filter?: string } }) { + const normalized = normalizeFilter(searchParams.filter); + + const preloadedQuery = await loadSerializableQuery(query, { + filter: normalized as PanoPostFilter | null, + }); return (
- +
);