refactoring (#469)

NTNU-SmallSatLab · Jul 14, 2025 · 9d9d0d2 · 9d9d0d2
1 parent 7ca2847
commit 9d9d0d2
Show file tree

Hide file tree

Showing 13 changed files with 84 additions and 39 deletions.
diff --git a/frontend/src/app/_homeComponents/GlobeWithStats.tsx b/frontend/src/app/_homeComponents/GlobeWithStats.tsx
@@ -2,7 +2,7 @@
 import SatelliteSelector from "./SatelliteSelector";
 import SatelliteDataHome from "@/components/satelliteData/SatelliteDataHome";
 import dynamic from "next/dynamic";
-import SatellitePassOver from "@/components/satelliteData/SatellitePassOver";
+import SatellitePassOver from "@/components/satelliteData/_PassOverFeat/SatellitePassOver";
 
 const SatelliteGlobeNoSSR = dynamic(() => import("./SatelliteGlobe"), {
     ssr: false,

diff --git a/...p/satellites/[satelliteSlug]/satImage.tsx → ...tes/[satelliteSlug]/_infoSat/satImage.tsx b/...p/satellites/[satelliteSlug]/satImage.tsx → ...tes/[satelliteSlug]/_infoSat/satImage.tsx
@@ -4,6 +4,10 @@ import { useSatelliteStore } from "@/lib/store";
 import { SatelliteNumber } from "@/lib/store";
 import Image from "next/image";
 
+/**
+ * This component renders the satellite image, fetching it from a backend service and displaying it.
+ */
+
 export default function SatImage({
     STRAPI_URL,
     noradID,

diff --git a/...pp/satellites/[satelliteSlug]/satInfo.tsx → ...ites/[satelliteSlug]/_infoSat/satInfo.tsx b/...pp/satellites/[satelliteSlug]/satInfo.tsx → ...ites/[satelliteSlug]/_infoSat/satInfo.tsx
@@ -3,7 +3,11 @@ import React from "react";
 import SatTabs from "./satTabs";
 import { SatAttributes } from "@/lib/utils";
 import TabBar from "./tabBars";
-import { TabProvider } from "../tabContext";
+import { TabProvider } from "../../tabContext";
+
+/**
+ * This component renders the satellite information view, including tabs for parameters, image, and telemetry.
+ */
 
 export default function SatInfo({
     satAttributes,

diff --git a/frontend/src/app/satellites/[satelliteSlug]/_infoSat/satParameters.tsx b/frontend/src/app/satellites/[satelliteSlug]/_infoSat/satParameters.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import SatelliteDataHome from "@/components/satelliteData/SatelliteDataHome";
+import { SatelliteNumber } from "@/lib/store";
+
+/**
+ * This component renders the satellite parameters, including NORAD ID and mass.
+ */
+export default function SatParameters({
+    satAttributes,
+    noradId,
+}: {
+    satAttributes: any | undefined;
+    noradId: number | undefined;
+}) {
+    return (
+        <div className="z-10 flex w-full flex-col border-gray-600 xl:border-r-2">
+            <div className="border-b border-gray-600 bg-black p-5">
+                <div className="flex flex-row">
+                    <p>NORAD ID: </p>
+                    {noradId ? (
+                        <a
+                            href={`https://www.n2yo.com/satellite/?s=${noradId}`}
+                            target="_blank"
+                            className="ml-2 underline"
+                        >
+                            {noradId}
+                        </a>
+                    ) : (
+                        <span className="ml-2">
+                            No NORAD ID has been assigned yet{" "}
+                        </span>
+                    )}
+                </div>
+
+                <p className="text-gray-400">
+                    {satAttributes?.massKg
+                        ? "Mass: " + satAttributes?.massKg + " kg"
+                        : null}
+                </p>
+            </div>
+            {satAttributes?.missionStatus === "IN ORBIT" ? (
+                <div>
+                    <SatelliteDataHome
+                        satelliteNum={noradId as SatelliteNumber}
+                    />
+                </div>
+            ) : null}
+        </div>
+    );
+}
diff --git a/...pp/satellites/[satelliteSlug]/satTabs.tsx → ...ites/[satelliteSlug]/_infoSat/satTabs.tsx b/...pp/satellites/[satelliteSlug]/satTabs.tsx → ...ites/[satelliteSlug]/_infoSat/satTabs.tsx
@@ -1,18 +1,22 @@
 "use client";
 import React, { useEffect, useState } from "react";
-import SatelliteDataHome from "@/components/satelliteData/SatelliteDataHome";
 import { SatelliteNumber } from "@/lib/store";
 import { SatAttributes } from "@/lib/utils";
-import { useTabContext } from "../tabContext";
+import { useTabContext } from "../../tabContext";
 import SatImage from "./satImage";
-import Render3DMod from "../render3DMod";
+import Render3DMod from "../../render3DMod";
 import Image from "next/image";
 import dynamic from "next/dynamic";
+import SatParameters from "./satParameters";
 
 const SatTelemetry = dynamic(() => import("./satTelemetry"), {
     ssr: false,
 });
 
+/* This component renders the tabs for satellite information, including parameters, image, and telemetry.
+It uses the `useTabContext` to manage the selected tab and displays the appropriate content based
+*/
+
 export default function SatTabs({
     satAttributes,
     STRAPI_URL,
@@ -43,38 +47,10 @@ export default function SatTabs({
         <div className="flex w-full flex-col border-2 border-gray-600 xl:flex-row">
             <div className="z-10 flex w-full flex-col border-gray-600 xl:border-r-2">
                 {selectedTab === "sat parameters" ? (
-                    // Render the parameters of the satellite
-                    <div className="z-10 flex w-full flex-col border-gray-600 xl:border-r-2">
-                        <div className="border-b border-gray-600 bg-black p-5">
-                            <div className="flex flex-row">
-                                <p>NORAD ID: </p>
-                                {noradId ? (
-                                    <a
-                                        href={`https://www.n2yo.com/satellite/?s=${noradId}`}
-                                        target="_blank"
-                                        className="ml-2 underline"
-                                    >
-                                        {noradId}
-                                    </a>
-                                ) : (
-                                    <span className="ml-2">
-                                        No NORAD ID has been assigned yet{" "}
-                                    </span>
-                                )}
-                            </div>
-
-                            <p className="text-gray-400">
-                                {satAttributes?.massKg
-                                    ? "Mass: " + satAttributes?.massKg + " kg"
-                                    : null}
-                            </p>
-                        </div>
-                        {satAttributes?.missionStatus === "IN ORBIT" ? (
-                            <div>
-                                <SatelliteDataHome satelliteNum={noradId} />
-                            </div>
-                        ) : null}
-                    </div>
+                    <SatParameters
+                        satAttributes={satAttributes}
+                        noradId={noradId}
+                    />
                 ) : selectedTab === "satellite image" ? (
                     <SatImage STRAPI_URL={STRAPI_URL} noradID={noradId} />
                 ) : selectedTab === "satellite telemetry" ? (

diff --git a/...tellites/[satelliteSlug]/satTelemetry.tsx → ...[satelliteSlug]/_infoSat/satTelemetry.tsx b/...tellites/[satelliteSlug]/satTelemetry.tsx → ...[satelliteSlug]/_infoSat/satTelemetry.tsx
@@ -5,6 +5,10 @@ import { SatelliteNumber } from "@/lib/store";
 import HighchartsReact from "highcharts-react-official";
 import Highcharts from "highcharts";
 
+/**
+ * This component renders the satellite telemetry data, including battery voltage, current, panel temperatures, and uptime.
+ */
+
 export default function SatTelemetry({
     STRAPI_URL,
     noradID,

diff --git a/...pp/satellites/[satelliteSlug]/tabBars.tsx → ...ites/[satelliteSlug]/_infoSat/tabBars.tsx b/...pp/satellites/[satelliteSlug]/tabBars.tsx → ...ites/[satelliteSlug]/_infoSat/tabBars.tsx
@@ -2,6 +2,10 @@
 import React from "react";
 import { useTabContext } from "@/app/satellites/tabContext";
 
+/**
+ * This component renders the tab bar for satellite information, allowing users to switch between parameters, image, and telemetry tabs.
+ */
+
 export default function TabBar() {
     const { selectedTab, setSelectedTab } = useTabContext();
     return (

diff --git a/frontend/src/app/satellites/[satelliteSlug]/page.tsx b/frontend/src/app/satellites/[satelliteSlug]/page.tsx
@@ -12,7 +12,7 @@ import { SatelliteNumber } from "@/lib/store";
 import { graphql } from "@/lib/tada/graphql";
 import { getClient } from "@/lib/ApolloClient";
 import OrbitDataGraph from "./orbitDataGraph";
-import SatInfo from "./satInfo";
+import SatInfo from "./_infoSat/satInfo";
 import { SatAttributes } from "@/lib/utils";
 
 export interface ProjectOrSatellite {

diff --git a/frontend/src/app/satellites/tabContext.tsx b/frontend/src/app/satellites/tabContext.tsx
@@ -1,6 +1,10 @@
 "use client";
 import React, { createContext, useContext, useState, ReactNode } from "react";
 
+/**
+ * This file provides a context for managing the selected tab in the satellite information view.
+ */
+
 type TabType = "sat parameters" | "satellite image" | "satellite telemetry";
 
 interface TabContextType {

diff --git a/...nents/satelliteData/SatellitePassOver.tsx → ...eData/_PassOverFeat/SatellitePassOver.tsx b/...nents/satelliteData/SatellitePassOver.tsx → ...eData/_PassOverFeat/SatellitePassOver.tsx
diff --git a/...telliteData/SatellitePassOverLocation.tsx → ...assOverFeat/SatellitePassOverLocation.tsx b/...telliteData/SatellitePassOverLocation.tsx → ...assOverFeat/SatellitePassOverLocation.tsx
diff --git a/...s/satelliteData/SatellitePassOverTime.tsx → ...a/_PassOverFeat/SatellitePassOverTime.tsx b/...s/satelliteData/SatellitePassOverTime.tsx → ...a/_PassOverFeat/SatellitePassOverTime.tsx
diff --git a/frontend/src/lib/store.ts b/frontend/src/lib/store.ts
@@ -111,7 +111,6 @@ export const useLocationStore = create<LocationStore>()((set) => ({
             longitude: 10.421906,
             name: "Trondheim",
         },
-        // Add more default locations if needed
     ],
 
     selectedLocation: {