217 add uv data on satellite page (#248)

* Zustand on satellite select #217 * UV data #217
NTNU-SmallSatLab · Apr 9, 2024 · 103889b · 103889b
1 parent 14f997a
commit 103889b
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 63 deletions.
diff --git a/frontend/src/app/satellites/[satelliteSlug]/page.tsx b/frontend/src/app/satellites/[satelliteSlug]/page.tsx
@@ -1,8 +1,16 @@
-export const runtime = "edge";
+import React from "react";
 import BlockRendererClient from "@/components/BlockRendererClient";
 import fetchSatelliteInfo from "@/lib/data/fetchSatelliteInfo";
 import { BlocksContent } from "@strapi/blocks-react-renderer";
 import RelatedProjectsAndSatellites from "@/components/RelatedProjectsAndSatellites";
+import SatelliteDataHome from "@/components/satelliteData/SatelliteDataHome";
+import { useSatelliteStore } from "@/lib/store";
+import SolarDataComponent from "@/components/SolarActivity/SolarData";
+function setSelectedSatelliteSlug(satelliteSlug: string) {
+    const setSelectedSatellite =
+        useSatelliteStore.getState().setSelectedSatellite;
+    setSelectedSatellite(satelliteSlug);
+}
 
 export interface SatelliteInfo {
     name: string;
@@ -23,44 +31,39 @@ export default async function SatelliteInfoPage({
 }: {
     params: { satelliteSlug: string };
 }) {
-    try {
-        const satelliteInfo: SatelliteInfo = await fetchSatelliteInfo({
-            params: params,
-        });
+    setSelectedSatelliteSlug(params.satelliteSlug);
+    const satelliteInfo: SatelliteInfo = await fetchSatelliteInfo({
+        params: params,
+    });
+
+    if (!satelliteInfo) return <div>Loading...</div>;
+
+    return (
+        <>
+            <SolarDataComponent></SolarDataComponent>
 
-        return (
             <div className="flex flex-col items-center">
                 <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>
+                <SatelliteDataHome />
                 <BlockRendererClient content={satelliteInfo.content} />
-                {satelliteInfo.relatedProjects?.length != 0 ? (
+                {satelliteInfo.relatedProjects?.length ? (
                     <h1 className="mb-2 mt-2 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) => {
-                            return (
-                                <RelatedProjectsAndSatellites
-                                    project={project}
-                                    key={project.id}
-                                />
-                            );
-                        },
+                        (project: ProjectOrSatellite) => (
+                            <RelatedProjectsAndSatellites
+                                project={project}
+                                key={project.id}
+                            />
+                        ),
                     )}
                 </div>
             </div>
-        );
-    } catch (error) {
-        console.error("Error fetching satellite info:", error);
-        return <div>Error fetching satellite info</div>;
-    }
+        </>
+    );
 }
diff --git a/frontend/src/app/satellites/page.tsx b/frontend/src/app/satellites/page.tsx
@@ -1,11 +1,7 @@
 export const runtime = "edge";
 import { gql } from "@/__generated__/gql";
 import { getClient } from "@/lib/ApolloClient";
-import Link from "next/link";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import SatelliteStatsTable from "@/components/satelliteData/SatelliteStatsTable";
-import Image from "next/image";
-import { OuiImage } from "@/components/fullBlogCard";
+import SatelliteCard from "@/components/ui/satelliteCard";
 
 const OUTSIDE_STRAPI_URL = process.env.OUTSIDE_STRAPI_URL;
 const GET_SATELLITES = gql(`
@@ -50,38 +46,12 @@ export default async function Satellites() {
                     let missionStatus =
                         satellite?.attributes?.missionStatus ?? "";
                     return (
-                        <Link
-                            href={"/satellites/" + satellite?.attributes?.name}
-                            className="w-1/1.5 m-1 transition-transform duration-300 ease-in-out hover:scale-110 hover:transform sm:m-4 md:w-1/3"
-                            key={satellite.id}
-                        >
-                            <Card className="flex h-full w-full flex-col">
-                                <CardHeader className="flex flex-col items-center justify-center">
-                                    <CardTitle>
-                                        {satellite?.attributes?.name}
-                                    </CardTitle>
-                                </CardHeader>
-                                <CardContent className="flex flex-col items-center">
-                                    <SatelliteStatsTable
-                                        satName={satelliteName}
-                                        missionStatus={missionStatus}
-                                    />
-                                    {previewImage ? (
-                                        <Image
-                                            src={previewImage}
-                                            alt={previewImage}
-                                            width={200}
-                                            height={0}
-                                            className="margin p-2"
-                                        />
-                                    ) : (
-                                        <div className="m-0 flex aspect-video max-h-full max-w-full items-center justify-center object-contain">
-                                            <OuiImage />
-                                        </div>
-                                    )}
-                                </CardContent>
-                            </Card>
-                        </Link>
+                        // eslint-disable-next-line react/jsx-key
+                        <SatelliteCard
+                            satelliteName={satelliteName}
+                            missionStatus={missionStatus}
+                            previewImage={previewImage}
+                        ></SatelliteCard>
                     );
                 })}
             </div>

diff --git a/frontend/src/components/SolarActivity/SolarData.tsx b/frontend/src/components/SolarActivity/SolarData.tsx
@@ -1,3 +1,4 @@
+"use client";
 import React, { useEffect, useRef, useState } from "react";
 import { Chart, registerables } from "chart.js";
 import { DateTime } from "luxon";

diff --git a/frontend/src/components/ui/satelliteCard.tsx b/frontend/src/components/ui/satelliteCard.tsx
@@ -0,0 +1,65 @@
+"use client";
+import React from "react";
+import Image from "next/image";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import SatelliteStatsTable from "@/components/satelliteData/SatelliteStatsTable";
+// Import OuiImage or your placeholder image component here
+import { OuiImage } from "@/components/fullBlogCard";
+//import { useSatelliteStore } from "@/lib/store";
+
+interface SatelliteCardProps {
+    satelliteName: string;
+    missionStatus: string;
+    previewImage?: string; // Optional
+}
+
+const SatelliteCard: React.FC<SatelliteCardProps> = ({
+    satelliteName,
+    missionStatus,
+    previewImage,
+}) => {
+    /*const setSelectedSatellite = useSatelliteStore(
+        (state) => state.setSelectedSatellite,
+    );*/
+
+    const handleSatelliteCardClick = (satelliteName: string) => () => {
+        //setSelectedSatellite(satelliteName);
+        window.location.href = `/satellites/${encodeURIComponent(satelliteName)}`;
+    };
+
+    return (
+        <div
+            onClick={handleSatelliteCardClick(satelliteName)}
+            className="w-1/1.5 m-1 transition-transform duration-300 ease-in-out hover:scale-110 hover:transform sm:m-4 md:w-1/3"
+        >
+            {" "}
+            {/* Ensure the link is clickable and accessible */}
+            <Card className="flex h-full w-full flex-col">
+                <CardHeader className="flex flex-col items-center justify-center">
+                    <CardTitle>{satelliteName}</CardTitle>
+                </CardHeader>
+                <CardContent className="flex flex-col items-center">
+                    <SatelliteStatsTable
+                        satName={satelliteName}
+                        missionStatus={missionStatus}
+                    />
+                    {previewImage ? (
+                        <Image
+                            src={previewImage}
+                            alt={satelliteName}
+                            width={200}
+                            height={200}
+                            className="margin p-2"
+                        />
+                    ) : (
+                        <div className="m-0 flex aspect-video max-h-full max-w-full items-center justify-center object-contain">
+                            <OuiImage />
+                        </div>
+                    )}
+                </CardContent>
+            </Card>
+        </div>
+    );
+};
+
+export default SatelliteCard;