From f8cc8e085add2f62fd561f22556bb8b9560a6503 Mon Sep 17 00:00:00 2001 From: Mads Hermansen <119772939+madshermansen@users.noreply.github.com> Date: Wed, 3 Apr 2024 16:49:04 +0200 Subject: [PATCH] filter articles by tag (#194) * feat(frontend): :sparkles: add routehandling to not refresh components and add filters * refactor(frontend): :art: Refactor handleParameterChange function in BlogpageButtons component --- frontend/src/__generated__/gql.ts | 4 +- frontend/src/__generated__/graphql.ts | 3 +- frontend/src/app/blog/page.tsx | 2 + frontend/src/components/BlogPaginator.tsx | 54 +++++++++++++++++---- frontend/src/components/BlogpageButtons.tsx | 24 ++++++--- frontend/src/lib/data/fetchArticleInfo.tsx | 44 ++++++++++++----- 6 files changed, 102 insertions(+), 29 deletions(-) diff --git a/frontend/src/__generated__/gql.ts b/frontend/src/__generated__/gql.ts index 4610858..cbf1617 100644 --- a/frontend/src/__generated__/gql.ts +++ b/frontend/src/__generated__/gql.ts @@ -18,7 +18,7 @@ const documents = { "\n query GET_PROJECTS {\n projects(sort: [\"publishedAt:desc\"]) {\n data {\n id\n attributes {\n title\n article\n satellites {\n data {\n attributes {\n catalogNumberNORAD\n }\n }\n }\n slug\n coverImage {\n data {\n attributes {\n url\n }\n }\n }\n updatedAt\n publishedAt\n createdAt\n description\n }\n }\n }\n }": types.Get_ProjectsDocument, "\nquery GET_SATELLITES {\n satellites {\n data {\n id\n attributes {\n celestrakURL\n catalogNumberNORAD\n name\n previewImage {\n data {\n attributes {\n url\n }\n }\n }\n }\n }\n }\n }\n": types.Get_SatellitesDocument, "query Satellites($filters: SatelliteFiltersInput) {\n satellites(filters: $filters) {\n data {\n attributes {\n celestrakURL\n catalogNumberNORAD\n }\n }\n }\n }\n ": types.SatellitesDocument, - "\nquery GET_ARTICLES($pagination: PaginationArg) {\n articles(sort: [\"datePublished:desc\"], pagination: $pagination) {\n data {\n id\n attributes {\n author {\n data {\n attributes {\n name\n avatar {\n data {\n attributes {\n url\n }\n }\n }\n }\n }\n }\n title\n datePublished\n body\n coverImage {\n data {\n attributes {\n url\n }\n }\n }\n createdAt\n publishedAt\n slug\n subtitle\n Tag\n }\n }\n }\n}\n": types.Get_ArticlesDocument, + "\nquery GET_ARTICLES($pagination: PaginationArg, $filters: ArticleFiltersInput) {\n articles(sort: [\"datePublished:desc\"], pagination: $pagination, filters: $filters) {\n data {\n id\n attributes {\n author {\n data {\n attributes {\n name\n avatar {\n data {\n attributes {\n url\n }\n }\n }\n }\n }\n }\n title\n datePublished\n body\n coverImage {\n data {\n attributes {\n url\n }\n }\n }\n createdAt\n publishedAt\n slug\n subtitle\n Tag\n }\n }\n }\n}\n": types.Get_ArticlesDocument, "\nquery MostRecentImages {\n mostRecentImages(sort: [\"publishedAt:desc\"]) {\n data {\n attributes {\n mostRecentImage {\n data {\n attributes {\n url\n }\n }\n }\n satellite {\n data {\n attributes {\n catalogNumberNORAD\n name\n }\n }\n }\n createdAt\n updatedAt\n publishedAt\n }\n }\n }\n}\n\n": types.MostRecentImagesDocument, "query GET_SATELLITE_INFO($filters: SatelliteFiltersInput) {\n satellites(filters: $filters) {\n data {\n id\n attributes {\n celestrakURL\n catalogNumberNORAD\n content\n name\n projects {\n data {\n attributes {\n title\n coverImage {\n data {\n attributes {\n url\n }\n }\n }\n slug\n }\n id\n }\n }\n previewImage {\n data {\n attributes {\n url\n }\n }\n }\n }\n }\n }\n }\n ": types.Get_Satellite_InfoDocument, }; @@ -60,7 +60,7 @@ export function gql(source: "query Satellites($filters: SatelliteFiltersInput) { /** * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ -export function gql(source: "\nquery GET_ARTICLES($pagination: PaginationArg) {\n articles(sort: [\"datePublished:desc\"], pagination: $pagination) {\n data {\n id\n attributes {\n author {\n data {\n attributes {\n name\n avatar {\n data {\n attributes {\n url\n }\n }\n }\n }\n }\n }\n title\n datePublished\n body\n coverImage {\n data {\n attributes {\n url\n }\n }\n }\n createdAt\n publishedAt\n slug\n subtitle\n Tag\n }\n }\n }\n}\n"): (typeof documents)["\nquery GET_ARTICLES($pagination: PaginationArg) {\n articles(sort: [\"datePublished:desc\"], pagination: $pagination) {\n data {\n id\n attributes {\n author {\n data {\n attributes {\n name\n avatar {\n data {\n attributes {\n url\n }\n }\n }\n }\n }\n }\n title\n datePublished\n body\n coverImage {\n data {\n attributes {\n url\n }\n }\n }\n createdAt\n publishedAt\n slug\n subtitle\n Tag\n }\n }\n }\n}\n"]; +export function gql(source: "\nquery GET_ARTICLES($pagination: PaginationArg, $filters: ArticleFiltersInput) {\n articles(sort: [\"datePublished:desc\"], pagination: $pagination, filters: $filters) {\n data {\n id\n attributes {\n author {\n data {\n attributes {\n name\n avatar {\n data {\n attributes {\n url\n }\n }\n }\n }\n }\n }\n title\n datePublished\n body\n coverImage {\n data {\n attributes {\n url\n }\n }\n }\n createdAt\n publishedAt\n slug\n subtitle\n Tag\n }\n }\n }\n}\n"): (typeof documents)["\nquery GET_ARTICLES($pagination: PaginationArg, $filters: ArticleFiltersInput) {\n articles(sort: [\"datePublished:desc\"], pagination: $pagination, filters: $filters) {\n data {\n id\n attributes {\n author {\n data {\n attributes {\n name\n avatar {\n data {\n attributes {\n url\n }\n }\n }\n }\n }\n }\n title\n datePublished\n body\n coverImage {\n data {\n attributes {\n url\n }\n }\n }\n createdAt\n publishedAt\n slug\n subtitle\n Tag\n }\n }\n }\n}\n"]; /** * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ diff --git a/frontend/src/__generated__/graphql.ts b/frontend/src/__generated__/graphql.ts index c911c8e..f9c531a 100644 --- a/frontend/src/__generated__/graphql.ts +++ b/frontend/src/__generated__/graphql.ts @@ -1428,6 +1428,7 @@ export type SatellitesQuery = { __typename?: 'Query', satellites?: { __typename? export type Get_ArticlesQueryVariables = Exact<{ pagination?: InputMaybe; + filters?: InputMaybe; }>; @@ -1451,6 +1452,6 @@ export const ProjectsDocument = {"kind":"Document","definitions":[{"kind":"Opera export const Get_ProjectsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GET_PROJECTS"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"projects"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"sort"},"value":{"kind":"ListValue","values":[{"kind":"StringValue","value":"publishedAt:desc","block":false}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"article"}},{"kind":"Field","name":{"kind":"Name","value":"satellites"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"catalogNumberNORAD"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"coverImage"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"url"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"publishedAt"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"description"}}]}}]}}]}}]}}]} as unknown as DocumentNode; export const Get_SatellitesDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GET_SATELLITES"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"satellites"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"celestrakURL"}},{"kind":"Field","name":{"kind":"Name","value":"catalogNumberNORAD"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"previewImage"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"url"}}]}}]}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode; export const SatellitesDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"Satellites"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filters"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"SatelliteFiltersInput"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"satellites"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filters"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filters"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"celestrakURL"}},{"kind":"Field","name":{"kind":"Name","value":"catalogNumberNORAD"}}]}}]}}]}}]}}]} as unknown as DocumentNode; -export const Get_ArticlesDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GET_ARTICLES"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"pagination"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"PaginationArg"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"articles"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"sort"},"value":{"kind":"ListValue","values":[{"kind":"StringValue","value":"datePublished:desc","block":false}]}},{"kind":"Argument","name":{"kind":"Name","value":"pagination"},"value":{"kind":"Variable","name":{"kind":"Name","value":"pagination"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"author"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"url"}}]}}]}}]}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"datePublished"}},{"kind":"Field","name":{"kind":"Name","value":"body"}},{"kind":"Field","name":{"kind":"Name","value":"coverImage"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"url"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"publishedAt"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"subtitle"}},{"kind":"Field","name":{"kind":"Name","value":"Tag"}}]}}]}}]}}]}}]} as unknown as DocumentNode; +export const Get_ArticlesDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GET_ARTICLES"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"pagination"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"PaginationArg"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filters"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"ArticleFiltersInput"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"articles"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"sort"},"value":{"kind":"ListValue","values":[{"kind":"StringValue","value":"datePublished:desc","block":false}]}},{"kind":"Argument","name":{"kind":"Name","value":"pagination"},"value":{"kind":"Variable","name":{"kind":"Name","value":"pagination"}}},{"kind":"Argument","name":{"kind":"Name","value":"filters"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filters"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"author"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"url"}}]}}]}}]}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"datePublished"}},{"kind":"Field","name":{"kind":"Name","value":"body"}},{"kind":"Field","name":{"kind":"Name","value":"coverImage"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"url"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"publishedAt"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"subtitle"}},{"kind":"Field","name":{"kind":"Name","value":"Tag"}}]}}]}}]}}]}}]} as unknown as DocumentNode; export const MostRecentImagesDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"MostRecentImages"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"mostRecentImages"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"sort"},"value":{"kind":"ListValue","values":[{"kind":"StringValue","value":"publishedAt:desc","block":false}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"mostRecentImage"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"url"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"satellite"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"catalogNumberNORAD"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"publishedAt"}}]}}]}}]}}]}}]} as unknown as DocumentNode; export const Get_Satellite_InfoDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GET_SATELLITE_INFO"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filters"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"SatelliteFiltersInput"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"satellites"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filters"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filters"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"celestrakURL"}},{"kind":"Field","name":{"kind":"Name","value":"catalogNumberNORAD"}},{"kind":"Field","name":{"kind":"Name","value":"content"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"projects"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"coverImage"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"url"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"slug"}}]}},{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"previewImage"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"url"}}]}}]}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode; \ No newline at end of file diff --git a/frontend/src/app/blog/page.tsx b/frontend/src/app/blog/page.tsx index a1d0a95..aca55b8 100644 --- a/frontend/src/app/blog/page.tsx +++ b/frontend/src/app/blog/page.tsx @@ -25,10 +25,12 @@ export default async function BlogPage({ }) { const page = searchParams?.page; const currentPage = parseInt(page ?? "1", 10); + const tag = searchParams?.tag ?? null; const articles = (await fetchArticlePages({ currentPage: currentPage, pageSize: 7, + tag: tag, })) as BlogPost[]; return ( diff --git a/frontend/src/components/BlogPaginator.tsx b/frontend/src/components/BlogPaginator.tsx index 10d5c6b..b4358b8 100644 --- a/frontend/src/components/BlogPaginator.tsx +++ b/frontend/src/components/BlogPaginator.tsx @@ -9,39 +9,70 @@ import { PaginationNext, PaginationPrevious, } from "./ui/pagination"; -import { useSearchParams } from "next/navigation"; +import { useRouter, useSearchParams } from "next/navigation"; export default function BlogPaginator() { const searchParams = useSearchParams(); - + const router = useRouter(); + const tag = useSearchParams().get("tag"); const page = searchParams.get("page"); + let currentPage = parseInt(page ?? "1", 10); currentPage = currentPage > 1 ? currentPage : 1; + function handlePageChange(page: number) { + console.log(page); + if (page < 1) { + return; + } + if (tag === null) { + router.replace(`/blog?page=${page}`); + } else { + router.replace(`/blog?page=${page}&tag=${tag}`); + } + } + return ( {currentPage > 1 ? ( - + { + handlePageChange(currentPage - 1); + }} + href="#" + > {currentPage - 1} ) : null} - + { + handlePageChange(currentPage); + }} + href="#" + isActive + > {currentPage} - + { + handlePageChange(currentPage + 1); + }} + href="#" + > {currentPage + 1} @@ -49,7 +80,12 @@ export default function BlogPaginator() { - + { + handlePageChange(currentPage + 1); + }} + href="#" + /> diff --git a/frontend/src/components/BlogpageButtons.tsx b/frontend/src/components/BlogpageButtons.tsx index a403165..ddb342d 100644 --- a/frontend/src/components/BlogpageButtons.tsx +++ b/frontend/src/components/BlogpageButtons.tsx @@ -1,27 +1,39 @@ "use client"; import { useState } from "react"; import { Button } from "./ui/button"; +import { useRouter, useSearchParams } from "next/navigation"; export default function BlogpageButtons() { const [activeButton, setActiveButton] = useState("All Posts"); + const router = useRouter(); + const page = useSearchParams().get("currentPage"); + const currentPage = parseInt(page ?? "1", 10); + + const handleParameterChange = (tag: string) => { + setActiveButton(tag); + if (tag === "All Posts") router.replace(`/blog?page=${currentPage}`); + else { + router.replace(`/blog?page=${currentPage}&tag=${tag}`); + } + }; return (
diff --git a/frontend/src/lib/data/fetchArticleInfo.tsx b/frontend/src/lib/data/fetchArticleInfo.tsx index 9f2d196..1c718db 100644 --- a/frontend/src/lib/data/fetchArticleInfo.tsx +++ b/frontend/src/lib/data/fetchArticleInfo.tsx @@ -7,8 +7,8 @@ import { BlogPost } from "@/app/blog/page"; const HOST_URL = process.env.HOST_URL; const GET_ARTICLES = gql(` -query GET_ARTICLES($pagination: PaginationArg) { - articles(sort: ["datePublished:desc"], pagination: $pagination) { +query GET_ARTICLES($pagination: PaginationArg, $filters: ArticleFiltersInput) { + articles(sort: ["datePublished:desc"], pagination: $pagination, filters: $filters) { data { id attributes { @@ -50,22 +50,44 @@ query GET_ARTICLES($pagination: PaginationArg) { export default async function fetchArticlePages({ currentPage, pageSize, + tag, }: { currentPage: number; pageSize: number; + tag: string | null; }) { let firstArticle = true; - const graphqlData = await getClient().query({ - query: GET_ARTICLES, - variables: { - pagination: { - pageSize: pageSize, - page: currentPage, - }, - }, - }); + let graphqlData; + console.log(!tag); + + if (!tag) { + graphqlData = await getClient().query({ + query: GET_ARTICLES, + variables: { + pagination: { + pageSize: pageSize, + page: currentPage, + }, + }, + }); + } else { + graphqlData = await getClient().query({ + query: GET_ARTICLES, + variables: { + pagination: { + pageSize: pageSize, + page: currentPage, + }, + filters: { + Tag: { + contains: tag, + }, + }, + }, + }); + } if ( graphqlData.data === null || graphqlData.data === undefined ||