From d824a5fbb7714b3bf27448dbc3bf74d10949ea56 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20Alexander=20Str=C3=B8mseng?=
 <magnus.stromseng@gmail.com>
Date: Mon, 15 Apr 2024 14:08:36 +0200
Subject: [PATCH] 262 vise norad pa satelitt siden (#298)

* fix conditional rendering of related projects

* add norad id to page

* fix merge conflicts and borders

* fix more borders

* fix even more borders
---
 frontend/src/app/page.tsx                     |  2 +-
 .../app/satellites/[satelliteSlug]/page.tsx   | 54 ++++++++++---------
 .../satelliteData/SatelliteDataHome.tsx       |  2 +-
 frontend/src/lib/data/fetchSatelliteInfo.ts   |  3 ++
 4 files changed, 35 insertions(+), 26 deletions(-)

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 3fa7c81..f23b569 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -31,7 +31,7 @@ export default async function Home() {
                 </div>
 
                 {/* Globe Container */}
-                <div className="z-0 w-full overflow-x-hidden border-2 border-gray-600 xl:w-2/3 ">
+                <div className="z-0 w-full overflow-x-hidden border-2 border-t-0 border-gray-600 xl:w-2/3 xl:border-t-2">
                     <div className="flex h-full items-center justify-center ">
                         <SatelliteGlobeNoSSR />
                     </div>
diff --git a/frontend/src/app/satellites/[satelliteSlug]/page.tsx b/frontend/src/app/satellites/[satelliteSlug]/page.tsx
index 87001b1..d77f3a7 100644
--- a/frontend/src/app/satellites/[satelliteSlug]/page.tsx
+++ b/frontend/src/app/satellites/[satelliteSlug]/page.tsx
@@ -10,6 +10,7 @@ export interface SatelliteInfo {
     name: string;
     content: BlocksContent;
     relatedProjects?: ProjectOrSatellite[];
+    noradId: string | undefined;
 }
 
 export interface ProjectOrSatellite {
@@ -33,23 +34,28 @@ export default async function SatelliteInfoPage({
 
     return (
         <>
-            <div className="flex w-full flex-col items-center ">
+            <div className="flex flex-col items-center ">
+                <h1 className="mb-2 self-start text-4xl font-bold">
+                    {satelliteInfo.name}
+                </h1>
                 {/* Container for satname, stats and sat image */}
-                <div className="flex w-full flex-col bg-gray-600 p-0.5 xl:flex-row">
+                <div className="flex w-full flex-col border-2 border-gray-600 xl:flex-row">
                     {/* Stats Container */}
-                    <div className="z-10 flex w-full flex-col">
-                        <div className="bg-black p-5">
-                            <h1 className="text-xl font-bold tracking-wide">
-                                {satelliteInfo.name}
-                            </h1>
-                        </div>
-                        <div className="mt-0.5">
+                    <div className="z-10 flex w-full flex-col border-gray-600 xl:border-r-2">
+                        {satelliteInfo.noradId ? (
+                            <div className="grow basis-0 border-b border-gray-600 bg-black p-5">
+                                <h1 className="text-xl font-bold tracking-wide">
+                                    {satelliteInfo.noradId}
+                                </h1>
+                                <p className="text-gray-400">NORAD ID</p>
+                            </div>
+                        ) : null}
+                        <div>
                             <SatelliteDataHome />
                         </div>
                     </div>
-
                     {/* Image container */}
-                    <div className="z-0 ml-0.5 w-full">
+                    <div className="w-full border-t-2 border-gray-600 xl:border-t-0">
                         <div className="flex h-full w-full items-center justify-center bg-black">
                             <h1>Satellite Image</h1>
                         </div>
@@ -68,22 +74,22 @@ export default async function SatelliteInfoPage({
             </div>
 
             {/* Related projects */}
-            <div className="mt-8 flex w-full flex-col items-center">
-                {satelliteInfo.relatedProjects?.length != 0 ? (
+            {satelliteInfo.relatedProjects?.length != 0 ? (
+                <div className="mt-8 flex w-full flex-col items-center">
                     <h1 className="text-xl font-bold">Related Projects</h1>
-                ) : null}
 
-                <div className="mx-10 mt-4 flex flex-wrap justify-center gap-4 md:justify-start">
-                    {satelliteInfo.relatedProjects?.map(
-                        (project: ProjectOrSatellite) => (
-                            <RelatedProjectsAndSatellites
-                                project={project}
-                                key={project.id}
-                            />
-                        ),
-                    )}
+                    <div className="mx-10 mt-4 flex flex-wrap justify-center gap-4 md:justify-start">
+                        {satelliteInfo.relatedProjects?.map(
+                            (project: ProjectOrSatellite) => (
+                                <RelatedProjectsAndSatellites
+                                    project={project}
+                                    key={project.id}
+                                />
+                            ),
+                        )}
+                    </div>
                 </div>
-            </div>
+            ) : null}
         </>
     );
 }
diff --git a/frontend/src/components/satelliteData/SatelliteDataHome.tsx b/frontend/src/components/satelliteData/SatelliteDataHome.tsx
index a0eb254..687c5d4 100644
--- a/frontend/src/components/satelliteData/SatelliteDataHome.tsx
+++ b/frontend/src/components/satelliteData/SatelliteDataHome.tsx
@@ -77,7 +77,7 @@ export default function SatelliteDataHome() {
                 </div>
             </div>
 
-            <div className="border-t border-gray-600 bg-black p-5 xl:border-b-2">
+            <div className="border-t border-gray-600 bg-black p-5">
                 <div>
                     <p className="text-xl font-medium">
                         {satelliteInfo
diff --git a/frontend/src/lib/data/fetchSatelliteInfo.ts b/frontend/src/lib/data/fetchSatelliteInfo.ts
index b4d7399..0626061 100644
--- a/frontend/src/lib/data/fetchSatelliteInfo.ts
+++ b/frontend/src/lib/data/fetchSatelliteInfo.ts
@@ -77,6 +77,9 @@ export default async function fetchSatelliteInfo({
         content:
             graphqlData?.data?.satellites?.data[0]?.attributes?.content ?? "",
         relatedProjects: projects ?? [],
+        noradId:
+            graphqlData?.data?.satellites?.data[0]?.attributes
+                ?.catalogNumberNORAD ?? undefined,
     };
 
     return satelliteInfo;