From 9d9d0d2d6232a90cdabf8e019ec81cd932dbac4e Mon Sep 17 00:00:00 2001 From: Thibault <54189871+Asaren1070@users.noreply.github.com> Date: Mon, 14 Jul 2025 15:02:34 +0200 Subject: [PATCH] refactoring (#469) --- .../app/_homeComponents/GlobeWithStats.tsx | 2 +- .../{ => _infoSat}/satImage.tsx | 4 ++ .../{ => _infoSat}/satInfo.tsx | 6 ++- .../_infoSat/satParameters.tsx | 50 +++++++++++++++++++ .../{ => _infoSat}/satTabs.tsx | 46 ++++------------- .../{ => _infoSat}/satTelemetry.tsx | 4 ++ .../{ => _infoSat}/tabBars.tsx | 4 ++ .../app/satellites/[satelliteSlug]/page.tsx | 2 +- frontend/src/app/satellites/tabContext.tsx | 4 ++ .../{ => _PassOverFeat}/SatellitePassOver.tsx | 0 .../SatellitePassOverLocation.tsx | 0 .../SatellitePassOverTime.tsx | 0 frontend/src/lib/store.ts | 1 - 13 files changed, 84 insertions(+), 39 deletions(-) rename frontend/src/app/satellites/[satelliteSlug]/{ => _infoSat}/satImage.tsx (97%) rename frontend/src/app/satellites/[satelliteSlug]/{ => _infoSat}/satInfo.tsx (87%) create mode 100644 frontend/src/app/satellites/[satelliteSlug]/_infoSat/satParameters.tsx rename frontend/src/app/satellites/[satelliteSlug]/{ => _infoSat}/satTabs.tsx (60%) rename frontend/src/app/satellites/[satelliteSlug]/{ => _infoSat}/satTelemetry.tsx (98%) rename frontend/src/app/satellites/[satelliteSlug]/{ => _infoSat}/tabBars.tsx (92%) rename frontend/src/components/satelliteData/{ => _PassOverFeat}/SatellitePassOver.tsx (100%) rename frontend/src/components/satelliteData/{ => _PassOverFeat}/SatellitePassOverLocation.tsx (100%) rename frontend/src/components/satelliteData/{ => _PassOverFeat}/SatellitePassOverTime.tsx (100%) diff --git a/frontend/src/app/_homeComponents/GlobeWithStats.tsx b/frontend/src/app/_homeComponents/GlobeWithStats.tsx index cdd669e..2946ab8 100644 --- 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/frontend/src/app/satellites/[satelliteSlug]/satImage.tsx b/frontend/src/app/satellites/[satelliteSlug]/_infoSat/satImage.tsx similarity index 97% rename from frontend/src/app/satellites/[satelliteSlug]/satImage.tsx rename to frontend/src/app/satellites/[satelliteSlug]/_infoSat/satImage.tsx index b09e0e7..f2ad65a 100644 --- a/frontend/src/app/satellites/[satelliteSlug]/satImage.tsx +++ b/frontend/src/app/satellites/[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/frontend/src/app/satellites/[satelliteSlug]/satInfo.tsx b/frontend/src/app/satellites/[satelliteSlug]/_infoSat/satInfo.tsx similarity index 87% rename from frontend/src/app/satellites/[satelliteSlug]/satInfo.tsx rename to frontend/src/app/satellites/[satelliteSlug]/_infoSat/satInfo.tsx index 14434cb..9edb84c 100644 --- a/frontend/src/app/satellites/[satelliteSlug]/satInfo.tsx +++ b/frontend/src/app/satellites/[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 new file mode 100644 index 0000000..6022475 --- /dev/null +++ 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 ( +
+
+
+

NORAD ID:

+ {noradId ? ( + + {noradId} + + ) : ( + + No NORAD ID has been assigned yet{" "} + + )} +
+ +

+ {satAttributes?.massKg + ? "Mass: " + satAttributes?.massKg + " kg" + : null} +

+
+ {satAttributes?.missionStatus === "IN ORBIT" ? ( +
+ +
+ ) : null} +
+ ); +} diff --git a/frontend/src/app/satellites/[satelliteSlug]/satTabs.tsx b/frontend/src/app/satellites/[satelliteSlug]/_infoSat/satTabs.tsx similarity index 60% rename from frontend/src/app/satellites/[satelliteSlug]/satTabs.tsx rename to frontend/src/app/satellites/[satelliteSlug]/_infoSat/satTabs.tsx index 518406b..9422962 100644 --- a/frontend/src/app/satellites/[satelliteSlug]/satTabs.tsx +++ b/frontend/src/app/satellites/[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({
{selectedTab === "sat parameters" ? ( - // Render the parameters of the satellite -
-
-
-

NORAD ID:

- {noradId ? ( - - {noradId} - - ) : ( - - No NORAD ID has been assigned yet{" "} - - )} -
- -

- {satAttributes?.massKg - ? "Mass: " + satAttributes?.massKg + " kg" - : null} -

-
- {satAttributes?.missionStatus === "IN ORBIT" ? ( -
- -
- ) : null} -
+ ) : selectedTab === "satellite image" ? ( ) : selectedTab === "satellite telemetry" ? ( diff --git a/frontend/src/app/satellites/[satelliteSlug]/satTelemetry.tsx b/frontend/src/app/satellites/[satelliteSlug]/_infoSat/satTelemetry.tsx similarity index 98% rename from frontend/src/app/satellites/[satelliteSlug]/satTelemetry.tsx rename to frontend/src/app/satellites/[satelliteSlug]/_infoSat/satTelemetry.tsx index cefce3e..c5e53fc 100644 --- a/frontend/src/app/satellites/[satelliteSlug]/satTelemetry.tsx +++ b/frontend/src/app/satellites/[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/frontend/src/app/satellites/[satelliteSlug]/tabBars.tsx b/frontend/src/app/satellites/[satelliteSlug]/_infoSat/tabBars.tsx similarity index 92% rename from frontend/src/app/satellites/[satelliteSlug]/tabBars.tsx rename to frontend/src/app/satellites/[satelliteSlug]/_infoSat/tabBars.tsx index 1478028..e33588f 100644 --- a/frontend/src/app/satellites/[satelliteSlug]/tabBars.tsx +++ b/frontend/src/app/satellites/[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 index 39e77d4..5b13f73 100644 --- 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 index 617904f..2da5845 100644 --- 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/frontend/src/components/satelliteData/SatellitePassOver.tsx b/frontend/src/components/satelliteData/_PassOverFeat/SatellitePassOver.tsx similarity index 100% rename from frontend/src/components/satelliteData/SatellitePassOver.tsx rename to frontend/src/components/satelliteData/_PassOverFeat/SatellitePassOver.tsx diff --git a/frontend/src/components/satelliteData/SatellitePassOverLocation.tsx b/frontend/src/components/satelliteData/_PassOverFeat/SatellitePassOverLocation.tsx similarity index 100% rename from frontend/src/components/satelliteData/SatellitePassOverLocation.tsx rename to frontend/src/components/satelliteData/_PassOverFeat/SatellitePassOverLocation.tsx diff --git a/frontend/src/components/satelliteData/SatellitePassOverTime.tsx b/frontend/src/components/satelliteData/_PassOverFeat/SatellitePassOverTime.tsx similarity index 100% rename from frontend/src/components/satelliteData/SatellitePassOverTime.tsx rename to frontend/src/components/satelliteData/_PassOverFeat/SatellitePassOverTime.tsx diff --git a/frontend/src/lib/store.ts b/frontend/src/lib/store.ts index bd1c365..8c63e45 100644 --- a/frontend/src/lib/store.ts +++ b/frontend/src/lib/store.ts @@ -111,7 +111,6 @@ export const useLocationStore = create()((set) => ({ longitude: 10.421906, name: "Trondheim", }, - // Add more default locations if needed ], selectedLocation: {