Skip to content

Commit

Permalink
refactor individual satellites page (#176)
Browse files Browse the repository at this point in the history
* refactor(frontend): 🎨 create interfaces for SatelliteInfo and Projects

* refactor(frontend): 🎨 Prettier write

* refactor(frontend): 🚑 Fix type annotations in page.tsx files

* refactor(frontend): 🎨 prettier write

* refactor: build fix

* build: typing

* fix(frontend):
  • Loading branch information
Mads Hermansen authored and GitHub committed Apr 2, 2024
1 parent 2865f46 commit e9ef5be
Show file tree
Hide file tree
Showing 7 changed files with 147 additions and 116 deletions.
2 changes: 1 addition & 1 deletion frontend/src/app/blog/[articleSlug]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ export default async function Page({
{// Get initials from author name
authorName
?.split(" ")
.map((name) => name[0])
.map((name: any) => name[0])
.join("")}
</AvatarFallback>
</Avatar>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/app/projects/[projectSlug]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ export default async function Page({
)}
<div className="mx-10 mt-4 flex flex-wrap justify-center gap-4 md:justify-start">
{graphqlData.data.projects?.data[0].attributes?.satellites?.data.map(
(satellite) => {
(satellite: any) => {
let coverImage =
satellite.attributes?.previewImage?.data?.attributes
?.url;
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/app/projects/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ export default async function ProjectsPage() {
</div>

<div className="mx-10 mt-4 flex flex-wrap justify-center gap-4 md:justify-start">
{graphqlData.data.projects.data.map((project) => {
{graphqlData.data.projects.data.map((project: any) => {
let coverImage =
project?.attributes?.coverImage?.data?.attributes?.url;

Expand Down
174 changes: 63 additions & 111 deletions frontend/src/app/satellites/[satelliteSlug]/page.tsx
Original file line number Diff line number Diff line change
@@ -1,140 +1,92 @@
export const runtime = "edge";
import { gql } from "@/__generated__/gql";
import { getClient } from "@/lib/ApolloClient";
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";

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
}
}
}
slug
}
id
}
}
}
}
}
}
`);
export interface SatelliteInfo {
name: string;
content: BlocksContent;
relatedProjects?: Projects[];
}

export interface Projects {
id: string;
title: string;
coverImage: string;
slug: string;
}

export default async function SatelliteInfoPage({
params,
}: {
params: { satelliteSlug: string };
}) {
const filters = {
name: {
eq: params.satelliteSlug,
},
};
try {
const graphqlData = await getClient().query({
query: GET_SATELLITE_INFO,
variables: {
filters: filters,
},
const satelliteInfo: SatelliteInfo = await fetchSatelliteInfo({
params: params,
});
console.log(
graphqlData.data.satellites?.data[0].attributes?.projects?.data,
);

return (
<div className="flex flex-col items-center">
<SatelliteFetcher
useExampleData={true}
filterList={[
graphqlData?.data?.satellites?.data[0].attributes
?.name || "",
]}
filterList={[satelliteInfo.name]}
/>
{graphqlData?.data?.satellites?.data.map((satellite) => (
<div key={satellite.id} className="w-1/2 text-center">
<h1 className="mb-4 text-4xl">
{satellite?.attributes?.name}
</h1>
<div className="gap-1">
<h1>Altitude: {"1234"}km</h1>
<h1>Speed: {"1223"}km/s</h1>
<h1>Latitude: {"24.65"}°</h1>
<h1>Longitude: {"26.12"}°</h1>
</div>
<BlockRendererClient
content={satellite?.attributes?.content}
/>
</div>
))}
{graphqlData.data.satellites?.data[0].attributes?.projects?.data
.length != 0 && (
<h1 className="mt-4 text-2xl font-bold">
{satelliteInfo.name}
</h1>
<div className="gap-1">
<h1>Altitude: {"1234"}km</h1>
<h1>Speed: {"1223"}km/s</h1>
<h1>Latitude: {"24.65"}°</h1>
<h1>Longitude: {"26.12"}°</h1>
</div>
<BlockRendererClient content={satelliteInfo.content} />
{satelliteInfo.relatedProjects?.length != 0 ? (
<h1 className="mb-2 mt-2 text-xl font-bold">
Related Projects
</h1>
)}
<div className="mx-10 mt-4 flex flex-wrap justify-center gap-4 md:justify-start">
{graphqlData.data.satellites?.data[0].attributes?.projects?.data.map(
(project) => {
let coverImage =
project.attributes?.coverImage?.data?.attributes
?.url;
) : null}

if (HOST_URL && coverImage != undefined) {
coverImage = HOST_URL + coverImage;
}
return (
<Link
className="m-1 transition-transform duration-300 ease-in-out hover:scale-110 hover:transform sm:m-4"
href={
"/projects/" + project?.attributes?.slug
}
key={project.id}
>
<Card className="md:w-68 flex h-full w-64 flex-col lg:w-72">
<CardHeader>
<CardTitle className="mb-2 mt-2 text-center text-xl font-bold">
{project?.attributes?.title}
</CardTitle>
</CardHeader>
<CardContent>
<div className="h-48">
{coverImage && (
<Image
className="max-h-full max-w-full object-contain"
src={coverImage}
alt={coverImage}
width={500}
height={0}
/>
)}
</div>
</CardContent>
</Card>
</Link>
);
},
)}
</div>
{satelliteInfo.relatedProjects?.map((project: Projects) => {
let coverImage = project.coverImage;
if (HOST_URL && coverImage != undefined) {
coverImage = HOST_URL + coverImage;
}
return (
<Link
className="m-1 transition-transform duration-300 ease-in-out hover:scale-110 hover:transform sm:m-4"
href={"/projects/" + project.slug}
key={project.id}
>
<Card className="md:w-68 flex h-full w-64 flex-col lg:w-72">
<CardHeader>
<CardTitle className="mb-2 mt-2 text-center text-xl font-bold">
{project.title}
</CardTitle>
</CardHeader>
<CardContent>
<div className="h-48">
{coverImage && (
<Image
className="max-h-full max-w-full object-contain"
src={coverImage}
alt={coverImage}
width={500}
height={0}
/>
)}
</div>
</CardContent>
</Card>
</Link>
);
})}
</div>
);
} catch (error) {
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/app/satellites/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export default async function Satellites() {

return (
<div className="mx-10 mt-4 flex flex-wrap justify-center gap-4 md:justify-start">
{graphqlData?.data?.satellites?.data?.map((satellite) => {
{graphqlData?.data?.satellites?.data?.map((satellite: any) => {
let previewImage =
satellite?.attributes?.previewImage?.data?.attributes
?.url;
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/map/SatelliteFetcher.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export default async function SatelliteFetcher({
}

const satelliteUrls = graphqlData?.data?.satellites?.data.map(
(satEntity) => {
(satEntity: any) => {
const celestrakURL = satEntity?.attributes?.celestrakURL;
if (celestrakURL) {
return celestrakURL.replace(/FORMAT=[^&]*/, "FORMAT=TLE");
Expand Down
79 changes: 79 additions & 0 deletions frontend/src/lib/data/fetchSatelliteInfo.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
import { gql } from "@/__generated__/gql";
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
}
}
}
slug
}
id
}
}
}
}
}
}
`);

export default async function fetchSatelliteInfo({
params,
}: {
params: { satelliteSlug: string };
}) {
let satelliteInfo: SatelliteInfo;

const filters = {
name: {
eq: params.satelliteSlug,
},
};

const graphqlData = await getClient().query({
query: GET_SATELLITE_INFO,
variables: {
filters: filters,
},
});

let projects: Projects[] = [];

graphqlData?.data?.satellites?.data[0]?.attributes?.projects?.data.map(
(project: any) => {
projects.push({
id: project.id,
title: project.attributes?.title,
coverImage:
project.attributes?.coverImage?.data?.attributes?.url,
slug: project.attributes?.slug,
});
},
);

satelliteInfo = {
name: graphqlData?.data?.satellites?.data[0]?.attributes?.name ?? "",
content:
graphqlData?.data?.satellites?.data[0]?.attributes?.content ?? "",
relatedProjects: projects ?? [],
};

return satelliteInfo;
}

0 comments on commit e9ef5be

Please sign in to comment.