From e9ef5bed284ce32bca79211df3e7f918b79efd9b Mon Sep 17 00:00:00 2001
From: Mads Hermansen <119772939+madshermansen@users.noreply.github.com>
Date: Tue, 2 Apr 2024 18:22:33 +0200
Subject: [PATCH] refactor individual satellites page (#176)

* refactor(frontend): :art: create interfaces for SatelliteInfo and Projects

* refactor(frontend): :art: Prettier write

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

* refactor(frontend): :art: prettier write

* refactor: build fix

* build: typing

* fix(frontend):
---
 frontend/src/app/blog/[articleSlug]/page.tsx  |   2 +-
 .../src/app/projects/[projectSlug]/page.tsx   |   2 +-
 frontend/src/app/projects/page.tsx            |   2 +-
 .../app/satellites/[satelliteSlug]/page.tsx   | 174 +++++++-----------
 frontend/src/app/satellites/page.tsx          |   2 +-
 .../src/components/map/SatelliteFetcher.tsx   |   2 +-
 frontend/src/lib/data/fetchSatelliteInfo.ts   |  79 ++++++++
 7 files changed, 147 insertions(+), 116 deletions(-)
 create mode 100644 frontend/src/lib/data/fetchSatelliteInfo.ts

diff --git a/frontend/src/app/blog/[articleSlug]/page.tsx b/frontend/src/app/blog/[articleSlug]/page.tsx
index 3ff6e6a..ed51f56 100644
--- a/frontend/src/app/blog/[articleSlug]/page.tsx
+++ b/frontend/src/app/blog/[articleSlug]/page.tsx
@@ -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>
diff --git a/frontend/src/app/projects/[projectSlug]/page.tsx b/frontend/src/app/projects/[projectSlug]/page.tsx
index 5351766..5467184 100644
--- a/frontend/src/app/projects/[projectSlug]/page.tsx
+++ b/frontend/src/app/projects/[projectSlug]/page.tsx
@@ -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;
diff --git a/frontend/src/app/projects/page.tsx b/frontend/src/app/projects/page.tsx
index a5e9a35..70c11a4 100644
--- a/frontend/src/app/projects/page.tsx
+++ b/frontend/src/app/projects/page.tsx
@@ -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;
 
diff --git a/frontend/src/app/satellites/[satelliteSlug]/page.tsx b/frontend/src/app/satellites/[satelliteSlug]/page.tsx
index 9e7f128..02c2e30 100644
--- a/frontend/src/app/satellites/[satelliteSlug]/page.tsx
+++ b/frontend/src/app/satellites/[satelliteSlug]/page.tsx
@@ -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) {
diff --git a/frontend/src/app/satellites/page.tsx b/frontend/src/app/satellites/page.tsx
index 084665f..d506021 100644
--- a/frontend/src/app/satellites/page.tsx
+++ b/frontend/src/app/satellites/page.tsx
@@ -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;
diff --git a/frontend/src/components/map/SatelliteFetcher.tsx b/frontend/src/components/map/SatelliteFetcher.tsx
index 4bba0b5..6fc4209 100644
--- a/frontend/src/components/map/SatelliteFetcher.tsx
+++ b/frontend/src/components/map/SatelliteFetcher.tsx
@@ -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");
diff --git a/frontend/src/lib/data/fetchSatelliteInfo.ts b/frontend/src/lib/data/fetchSatelliteInfo.ts
new file mode 100644
index 0000000..9a8dd4c
--- /dev/null
+++ b/frontend/src/lib/data/fetchSatelliteInfo.ts
@@ -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;
+}