From 5b0245aba63c418040df89b66391cac8064cd583 Mon Sep 17 00:00:00 2001 From: Mads Hermansen <119772939+madshermansen@users.noreply.github.com> Date: Tue, 2 Apr 2024 20:07:14 +0200 Subject: [PATCH] 132 style individual satellite page (#187) * feat(frontend): :sparkles: add image support gql query as well as styling changes * Refactor previewImage assignment in fetchSatelliteInfo.ts * Update fetchSatelliteInfo to handle missing previewImage * Refactor code to improve performance and readability * feat: 180-fikse-colored-background-sections-on-forntpage-maybe-seethrough-but-more-dark-idk * fix: Refactor previewImage URL assignment in fetchSatelliteInfo.ts --- frontend/src/__generated__/gql.ts | 10 +- frontend/src/__generated__/graphql.ts | 18 +-- .../app/satellites/[satelliteSlug]/page.tsx | 134 +++++++++++------- frontend/src/lib/data/fetchSatelliteInfo.ts | 57 +++++--- 4 files changed, 131 insertions(+), 88 deletions(-) diff --git a/frontend/src/__generated__/gql.ts b/frontend/src/__generated__/gql.ts index 3d27c28..74f96af 100644 --- a/frontend/src/__generated__/gql.ts +++ b/frontend/src/__generated__/gql.ts @@ -17,10 +17,10 @@ const documents = { "\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 }\n }\n }\n createdAt\n updatedAt\n publishedAt\n }\n }\n }\n}\n\n": types.MostRecentImagesDocument, "\nquery Projects($projectFilters: ProjectFiltersInput) {\n projects(filters: $projectFilters) {\n data {\n attributes {\n title\n description\n article\n satellites {\n data {\n id\n attributes {\n name\n previewImage {\n data {\n attributes {\n url\n }\n }\n }\n }\n }\n }\n slug\n coverImage {\n data {\n id\n attributes {\n url\n }\n }\n }\n }\n }\n }\n}": types.ProjectsDocument, "\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, - "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 }\n }\n }\n }\n ": types.Get_Satellite_InfoDocument, "\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, + "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, }; /** @@ -53,10 +53,6 @@ export function gql(source: "\nquery Projects($projectFilters: ProjectFiltersInp * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ export function gql(source: "\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 }"): (typeof 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 }"]; -/** - * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. - */ -export function gql(source: "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 }\n }\n }\n }\n "): (typeof documents)["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 }\n }\n }\n }\n "]; /** * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ @@ -69,6 +65,10 @@ 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"]; +/** + * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. + */ +export function gql(source: "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 "): (typeof documents)["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 "]; export function gql(source: string) { return (documents as any)[source] ?? {}; diff --git a/frontend/src/__generated__/graphql.ts b/frontend/src/__generated__/graphql.ts index 0680e98..99c7772 100644 --- a/frontend/src/__generated__/graphql.ts +++ b/frontend/src/__generated__/graphql.ts @@ -1419,13 +1419,6 @@ export type Get_ProjectsQueryVariables = Exact<{ [key: string]: never; }>; export type Get_ProjectsQuery = { __typename?: 'Query', projects?: { __typename?: 'ProjectEntityResponseCollection', data: Array<{ __typename?: 'ProjectEntity', id?: string | null, attributes?: { __typename?: 'Project', title: string, article?: any | null, slug: string, updatedAt?: any | null, publishedAt?: any | null, createdAt?: any | null, description?: string | null, satellites?: { __typename?: 'SatelliteRelationResponseCollection', data: Array<{ __typename?: 'SatelliteEntity', attributes?: { __typename?: 'Satellite', catalogNumberNORAD?: string | null } | null }> } | null, coverImage?: { __typename?: 'UploadFileEntityResponse', data?: { __typename?: 'UploadFileEntity', attributes?: { __typename?: 'UploadFile', url: string } | null } | null } | null } | null }> } | null }; -export type Get_Satellite_InfoQueryVariables = Exact<{ - filters?: InputMaybe; -}>; - - -export type Get_Satellite_InfoQuery = { __typename?: 'Query', satellites?: { __typename?: 'SatelliteEntityResponseCollection', data: Array<{ __typename?: 'SatelliteEntity', id?: string | null, attributes?: { __typename?: 'Satellite', celestrakURL?: string | null, catalogNumberNORAD?: string | null, content?: any | null, name: string, projects?: { __typename?: 'ProjectRelationResponseCollection', data: Array<{ __typename?: 'ProjectEntity', id?: string | null, attributes?: { __typename?: 'Project', title: string, slug: string, coverImage?: { __typename?: 'UploadFileEntityResponse', data?: { __typename?: 'UploadFileEntity', attributes?: { __typename?: 'UploadFile', url: string } | null } | null } | null } | null }> } | null } | null }> } | null }; - export type Get_SatellitesQueryVariables = Exact<{ [key: string]: never; }>; @@ -1445,12 +1438,19 @@ export type Get_ArticlesQueryVariables = Exact<{ export type Get_ArticlesQuery = { __typename?: 'Query', articles?: { __typename?: 'ArticleEntityResponseCollection', data: Array<{ __typename?: 'ArticleEntity', id?: string | null, attributes?: { __typename?: 'Article', title: string, datePublished: any, body: any, createdAt?: any | null, publishedAt?: any | null, slug: string, subtitle?: string | null, Tag?: Enum_Article_Tag | null, author?: { __typename?: 'AuthorEntityResponse', data?: { __typename?: 'AuthorEntity', attributes?: { __typename?: 'Author', name: string, avatar?: { __typename?: 'UploadFileEntityResponse', data?: { __typename?: 'UploadFileEntity', attributes?: { __typename?: 'UploadFile', url: string } | null } | null } | null } | null } | null } | null, coverImage?: { __typename?: 'UploadFileEntityResponse', data?: { __typename?: 'UploadFileEntity', attributes?: { __typename?: 'UploadFile', url: string } | null } | null } | null } | null }> } | null }; +export type Get_Satellite_InfoQueryVariables = Exact<{ + filters?: InputMaybe; +}>; + + +export type Get_Satellite_InfoQuery = { __typename?: 'Query', satellites?: { __typename?: 'SatelliteEntityResponseCollection', data: Array<{ __typename?: 'SatelliteEntity', id?: string | null, attributes?: { __typename?: 'Satellite', celestrakURL?: string | null, catalogNumberNORAD?: string | null, content?: any | null, name: string, projects?: { __typename?: 'ProjectRelationResponseCollection', data: Array<{ __typename?: 'ProjectEntity', id?: string | null, attributes?: { __typename?: 'Project', title: string, slug: string, coverImage?: { __typename?: 'UploadFileEntityResponse', data?: { __typename?: 'UploadFileEntity', attributes?: { __typename?: 'UploadFile', url: string } | null } | null } | null } | null }> } | null, previewImage?: { __typename?: 'UploadFileEntityResponse', data?: { __typename?: 'UploadFileEntity', attributes?: { __typename?: 'UploadFile', url: string } | null } | null } | null } | null }> } | null }; + export const ArticleWithSlugDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ArticleWithSlug"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"articlesFilters"}},"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":"filters"},"value":{"kind":"Variable","name":{"kind":"Name","value":"articlesFilters"}}}],"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":"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":"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":"datePublished"}},{"kind":"Field","name":{"kind":"Name","value":"subtitle"}},{"kind":"Field","name":{"kind":"Name","value":"title"}}]}}]}}]}}]}}]} 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":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"publishedAt"}}]}}]}}]}}]}}]} as unknown as DocumentNode; export const ProjectsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"Projects"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"projectFilters"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"ProjectFiltersInput"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"projects"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filters"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectFilters"}}}],"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":"description"}},{"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":"id"}},{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"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"}}]}}]}}]}}]}}]}}]}},{"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":"id"}},{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"url"}}]}}]}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode; 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_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"}}]}}]}}]}}]}}]}}]}}]} 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; \ No newline at end of file +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_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/satellites/[satelliteSlug]/page.tsx b/frontend/src/app/satellites/[satelliteSlug]/page.tsx index 02c2e30..51ac6cc 100644 --- a/frontend/src/app/satellites/[satelliteSlug]/page.tsx +++ b/frontend/src/app/satellites/[satelliteSlug]/page.tsx @@ -1,16 +1,17 @@ export const runtime = "edge"; import BlockRendererClient from "@/components/BlockRendererClient"; -import SatelliteFetcher from "@/components/map/SatelliteFetcher"; const HOST_URL = process.env.HOST_URL; import Link from "next/link"; import Image from "next/image"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import fetchSatelliteInfo from "@/lib/data/fetchSatelliteInfo"; import { BlocksContent } from "@strapi/blocks-react-renderer"; +import SatelliteDataTable from "@/components/satelliteData/SatelliteDataTable"; export interface SatelliteInfo { name: string; content: BlocksContent; + imageURL: string; relatedProjects?: Projects[]; } @@ -32,61 +33,86 @@ export default async function SatelliteInfoPage({ }); return ( -
- -

- {satelliteInfo.name} -

-
-

Altitude: {"1234"}km

-

Speed: {"1223"}km/s

-

Latitude: {"24.65"}°

-

Longitude: {"26.12"}°

-
- - {satelliteInfo.relatedProjects?.length != 0 ? ( -

- Related Projects +
+
+

+ {satelliteInfo.name}

- ) : null} +
+ {satelliteInfo.imageURL && ( + {satelliteInfo.imageURL} + )} + +
+
+
+

+ Map +

+
+ World Map +
+
+ +
+
+
+
+
+ {satelliteInfo.relatedProjects?.length != 0 ? ( +

+ Related Projects +

+ ) : null} - {satelliteInfo.relatedProjects?.map((project: Projects) => { - let coverImage = project.coverImage; - if (HOST_URL && coverImage != undefined) { - coverImage = HOST_URL + coverImage; - } - return ( - - - - - {project.title} - - - -
- {coverImage && ( - {coverImage} - )} -
- - - - ); - })} + {satelliteInfo.relatedProjects?.map((project: Projects) => { + let coverImage = project.coverImage; + if (HOST_URL && coverImage != undefined) { + coverImage = HOST_URL + coverImage; + } + return ( + + + + + {project.title} + + + +
+ {coverImage && ( + {coverImage} + )} +
+ + + + ); + })} +
); } catch (error) { diff --git a/frontend/src/lib/data/fetchSatelliteInfo.ts b/frontend/src/lib/data/fetchSatelliteInfo.ts index 9a8dd4c..d6a47f8 100644 --- a/frontend/src/lib/data/fetchSatelliteInfo.ts +++ b/frontend/src/lib/data/fetchSatelliteInfo.ts @@ -1,37 +1,46 @@ import { gql } from "@/__generated__/gql"; +const HOST_URL = process.env.HOST_URL; + import { Projects, SatelliteInfo } from "@/app/satellites/[satelliteSlug]/page"; import { getClient } from "../ApolloClient"; const GET_SATELLITE_INFO = gql(`query GET_SATELLITE_INFO($filters: SatelliteFiltersInput) { - satellites(filters: $filters) { - data { - id - attributes { - celestrakURL - catalogNumberNORAD - content - name - projects { - data { - attributes { - title - coverImage { - data { - attributes { - url - } + satellites(filters: $filters) { + data { + id + attributes { + celestrakURL + catalogNumberNORAD + content + name + projects { + data { + attributes { + title + coverImage { + data { + attributes { + url } } - slug } - id + slug } + id } } - } + previewImage { + data { + attributes { + url + } + } + } + } } } + } `); export default async function fetchSatelliteInfo({ @@ -68,10 +77,18 @@ export default async function fetchSatelliteInfo({ }, ); + let previewImage = + graphqlData?.data?.satellites?.data[0]?.attributes?.previewImage?.data + ?.attributes?.url ?? ""; + if (HOST_URL && previewImage != undefined) { + previewImage = HOST_URL + previewImage; + } + satelliteInfo = { name: graphqlData?.data?.satellites?.data[0]?.attributes?.name ?? "", content: graphqlData?.data?.satellites?.data[0]?.attributes?.content ?? "", + imageURL: previewImage ?? "", relatedProjects: projects ?? [], };