434 change view for de orbited satellite (#436)

* fix: fixing that the database was not complete locally

* fix: Change view for de-orbited satellite

* fix: Change view for de-orbited satellite

* fix: trying to fix the CI

* fix: another try to fix the CI

frontend/src/app/_homeComponents/GlobeWithStats.tsx

@@ -17,7 +17,7 @@ export default function GlobeWithStats() {
             <div className="flex min-h-[calc(100vh-73px)] flex-col gap-0 bg-black md:flex-row">
                 <div className="z-10 flex flex-col border-b-2 border-l-2 border-r-2 border-t-2 border-gray-600 bg-black">
                     <SatelliteSelector />
-                    <SatelliteDataHome />
+                    <SatelliteDataHome satelliteNum={null} />
                 </div>
 
                 <div className="relative z-0 h-full w-full grow overflow-x-hidden border-b-2 border-l-2 border-r-2 border-t-0 border-gray-600 bg-black md:border-l-0 md:border-t-2 xl:w-2/3">

frontend/src/app/satellites/[satelliteSlug]/_orbitDataGraphComponents/ScrollBarThumb.tsx

@@ -87,7 +87,7 @@ const ScrollBarThumb: React.FC<ScrollBarThumbProps> = ({
             window.removeEventListener("mouseup", handleMouseUp);
             window.removeEventListener("mousemove", handleMouseMove);
         };
-    }, [scrollBarThumbWidth, svgContainerRect]);
+    }, [scrollBarThumbWidth, svgContainerRect, handleChartScroll]);
 
     const handleMouseDown = (
         e: React.MouseEvent<SVGRectElement, MouseEvent>,

frontend/src/app/satellites/[satelliteSlug]/launchDateCountDown.tsx

@@ -3,6 +3,8 @@ import React, { useState, useEffect } from "react";
 
 export type LaunchDateCountDownProps = {
     launchDate: string | Date | undefined;
+    missionStatus: string | undefined | null;
+    orbitalData: any;
 };
 
 /**
@@ -14,6 +16,8 @@ export type LaunchDateCountDownProps = {
  */
 const LaunchDateCountDown: React.FC<LaunchDateCountDownProps> = ({
     launchDate: launchDateString,
+    missionStatus: status,
+    orbitalData: orbitalData,
 }) => {
     const [displayTime, setDisplayTime] = useState<string[]>([
         "0 days",
@@ -23,15 +27,18 @@ const LaunchDateCountDown: React.FC<LaunchDateCountDownProps> = ({
     ]);
     const [hasLaunched, setHasLaunched] = useState<boolean | undefined>(true);
     const [columns, setColumns] = useState<string>("grid grid-cols-4");
+    const isMissionStatusInOrbit = status === "IN ORBIT";
 
     useEffect(() => {
         if (!launchDateString) return;
 
         const launchDate = new Date(launchDateString);
-
         const intervalId = setInterval(() => {
             const now = new Date();
-            const differenceReal = launchDate.getTime() - now.getTime();
+            const timeForDifference = isMissionStatusInOrbit
+                ? now.getTime()
+                : new Date(orbitalData[orbitalData.length - 1].epoch).getTime();
+            const differenceReal = launchDate.getTime() - timeForDifference;
             const difference = Math.abs(differenceReal);
 
             const days = Math.floor(difference / (1000 * 60 * 60 * 24));
@@ -53,7 +60,7 @@ const LaunchDateCountDown: React.FC<LaunchDateCountDownProps> = ({
         }, 1000);
 
         return () => clearInterval(intervalId);
-    }, [launchDateString]);
+    }, [launchDateString, isMissionStatusInOrbit, orbitalData]);
 
     if (hasLaunched == undefined || launchDateString == undefined) {
         return <></>;
@@ -62,7 +69,11 @@ const LaunchDateCountDown: React.FC<LaunchDateCountDownProps> = ({
         <>
             <div className="text-grey-400 pt-10 text-center text-4xl tracking-widest">
                 {hasLaunched ? (
-                    <p>TIME SINCE LAUNCH</p>
+                    isMissionStatusInOrbit ? (
+                        <p>TIME SINCE LAUNCH</p>
+                    ) : (
+                        <p>TIME IN ORBIT</p>
+                    )
                 ) : (
                     <p>TIME UNTIL LAUNCH</p>
                 )}

frontend/src/app/satellites/[satelliteSlug]/orbitDataGraph.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useLayoutEffect, useRef } from "react";
+import React, { useState, useLayoutEffect, useRef, useCallback } from "react";
 import {
     XAxis,
     CartesianGrid,
@@ -109,43 +109,49 @@ const OrbitDataGraph: React.FC<OrbitDataProps> = ({
     };
 
     // Callback function for updating the chart when the scrollbar thumb is moved
-    const handleChartScroll = (
-        thumbX: number,
-        svgContainerRect: ScrollBarThumbProps["svgContainerRect"],
-    ) => {
-        // Ratio of the thumb left border position to the svg container width
-        const dateRatio =
-            (thumbX - svgContainerRect.topLeft) / svgContainerRect.width;
-        // Taking the last date of the data period (first date is the launch date)
-        const lastDataDate = new Date(
-            orbitalData[orbitalData.length - 1].epoch.slice(0, 23) + "Z",
-        );
-        // Calculating the displayed period in milliseconds
-        const displayedPeriodMs = lastDataDate.getTime() - launchDate.getTime();
-        // Calculating the first and last date of the chart
-        const firstChartDate = new Date(
-            launchDate.getTime() + displayedPeriodMs * dateRatio,
-        );
-        const lastChartDate = new Date(firstChartDate);
-        lastChartDate.setMonth(
-            firstChartDate.getMonth() + scrollBarTimeFrame.current,
-        );
-        // Filtering the data to display only the data in the selected period
-        const filteredData = orbitalData
-            .filter((data: any) => {
-                const dataDate = new Date(data.epoch.slice(0, 23) + "Z");
-                return dataDate >= firstChartDate && dataDate <= lastChartDate;
-            })
-            .map((data: any) => {
-                return {
-                    ...data,
-                    semiMajorAxis: data.semiMajorAxis - 6371,
-                    epoch: new Date(data.epoch.slice(0, 23) + "Z"),
-                };
-            });
+    const handleChartScroll = useCallback(
+        (
+            thumbX: number,
+            svgContainerRect: ScrollBarThumbProps["svgContainerRect"],
+        ) => {
+            // Ratio of the thumb left border position to the svg container width
+            const dateRatio =
+                (thumbX - svgContainerRect.topLeft) / svgContainerRect.width;
+            // Taking the last date of the data period (first date is the launch date)
+            const lastDataDate = new Date(
+                orbitalData[orbitalData.length - 1].epoch.slice(0, 23) + "Z",
+            );
+            // Calculating the displayed period in milliseconds
+            const displayedPeriodMs =
+                lastDataDate.getTime() - launchDate.getTime();
+            // Calculating the first and last date of the chart
+            const firstChartDate = new Date(
+                launchDate.getTime() + displayedPeriodMs * dateRatio,
+            );
+            const lastChartDate = new Date(firstChartDate);
+            lastChartDate.setMonth(
+                firstChartDate.getMonth() + scrollBarTimeFrame.current,
+            );
+            // Filtering the data to display only the data in the selected period
+            const filteredData = orbitalData
+                .filter((data: any) => {
+                    const dataDate = new Date(data.epoch.slice(0, 23) + "Z");
+                    return (
+                        dataDate >= firstChartDate && dataDate <= lastChartDate
+                    );
+                })
+                .map((data: any) => {
+                    return {
+                        ...data,
+                        semiMajorAxis: data.semiMajorAxis - 6371,
+                        epoch: new Date(data.epoch.slice(0, 23) + "Z"),
+                    };
+                });
 
-        setChartData(filteredData);
-    };
+            setChartData(filteredData);
+        },
+        [orbitalData, launchDate, scrollBarTimeFrame, setChartData],
+    );
 
     // Layout effect to track the size of the container and update the svg size
     useLayoutEffect(() => {
@@ -188,9 +194,7 @@ const OrbitDataGraph: React.FC<OrbitDataProps> = ({
         updateSize();
 
         return () => window.removeEventListener("resize", updateSize);
-    }, []);
-
-    console.log("orbitalData", orbitalData);
+    }, [handleChartScroll, months]);
 
     return (
         <>

frontend/src/app/satellites/[satelliteSlug]/page.tsx

@@ -58,7 +58,7 @@ export default async function SatelliteInfoPage({
 
     // Get the satellite attributes
     let satAttributes = graphqlData?.data?.satellites?.data[0]?.attributes;
-
+    console.log("satAttributes", satAttributes);
     // If the satellite is not found return a message
     if (!satAttributes?.catalogNumberNORAD) {
         return <div className="flex justify-center">Satellite not found</div>;
@@ -74,8 +74,6 @@ export default async function SatelliteInfoPage({
         imageURL = STRAPI_URL + satelliteImage;
     }
 
-    console.log("satAttributes", satAttributes);
-
     return (
         <>
             <div className="flex flex-col items-center">
@@ -114,9 +112,17 @@ export default async function SatelliteInfoPage({
                                         : null}
                                 </p>
                             </div>
-                            <div>
-                                <SatelliteDataHome />
-                            </div>
+
+                            {satAttributes.missionStatus === "IN ORBIT" ? (
+                                <div>
+                                    {" "}
+                                    <SatelliteDataHome
+                                        satelliteNum={
+                                            satAttributes?.catalogNumberNORAD
+                                        }
+                                    />
+                                </div>
+                            ) : null}
                         </div>
                         {/* Image container */}
                         <div className="w-full border-t-2 border-gray-600 xl:border-t-0">
@@ -140,12 +146,14 @@ export default async function SatelliteInfoPage({
                     <div className="w-full">
                         <LaunchDateCountDown
                             launchDate={satAttributes?.launchDate}
+                            missionStatus={satAttributes?.missionStatus}
+                            orbitalData={satAttributes?.historicalOrbitalData}
                         ></LaunchDateCountDown>
                     </div>
                 ) : null}
 
                 {/* Container for map */}
-                {noradId ? (
+                {noradId && satAttributes.missionStatus === "IN ORBIT" ? (
                     <div className="mt-6 w-full">
                         <Map2d satNum={noradId} />
                     </div>

frontend/src/components/satelliteData/SatelliteDataHome.tsx

@@ -1,24 +1,32 @@
 "use client";
 import { useState, useEffect } from "react";
 import { convertSatrec, SatelliteInfo } from "@/lib/convertSatrec";
-import { useSatelliteStore } from "@/lib/store";
+import { SatelliteNumber, useSatelliteStore } from "@/lib/store";
 import { flag } from "country-emoji";
-
 const updateInterval = 50; // in ms
 
 /**
  * Renders the SatelliteDataHome component.
  * This component displays information about a selected satellite, such as velocity, altitude, latitude, longitude, and country.
  */
-export default function SatelliteDataHome() {
-    const { selectedSatellite, satNumToEntry } = useSatelliteStore();
+export default function SatelliteDataHome({
+    satelliteNum,
+}: {
+    satelliteNum: string | null;
+}) {
+    const { selectedSatellite, setSelectedSatellite, satNumToEntry } =
+        useSatelliteStore();
     const [satelliteInfo, setSatelliteInfo] = useState<SatelliteInfo | null>(
         null,
     );
 
     // Update satellite info every `updateInterval` ms
     useEffect(() => {
         const intervalId = setInterval(() => {
+            if (satelliteNum) {
+                const satelliteNumber = parseInt(satelliteNum, 10);
+                setSelectedSatellite(satelliteNumber as SatelliteNumber);
+            }
             if (selectedSatellite) {
                 // Access satellite data by name
                 const satData = satNumToEntry[selectedSatellite];
@@ -32,10 +40,9 @@ export default function SatelliteDataHome() {
                 }
             }
         }, updateInterval);
-
-        // Clear interval on component unmount
+        // Clear interval on component unmounts
         return () => clearInterval(intervalId);
-    }, [satNumToEntry, selectedSatellite]);
+    }, [satNumToEntry, selectedSatellite, satelliteNum, setSelectedSatellite]);
 
     return (
         <div>