From 1aa55dd89574182b1faa85ab5bf626ccc842b887 Mon Sep 17 00:00:00 2001 From: Mads Hermansen <119772939+madshermansen@users.noreply.github.com> Date: Wed, 10 Apr 2024 16:39:39 +0200 Subject: [PATCH] 202 fikse styling satellite page borders (#251) * emoji * feat(frontend): commit for merge * feat(frontend): :sparkles: Refactor satellite page and add SatelliteStatsTableRow component * refactor(frontend): :art: Refactor SVG component and update table layout * build(ci/cd): :rocket: Add country-emoji package to frontend dependencies --- frontend/package-lock.json | 6 ++ frontend/package.json | 1 + frontend/src/app/satellites/page.tsx | 70 +++++++--------- .../satelliteData/SatelliteDataHome.tsx | 5 +- .../satelliteData/SatelliteStatsTable.tsx | 19 +++++ .../satelliteData/SatelliteStatsTableRow.tsx | 80 +++++++++++++++++++ 6 files changed, 138 insertions(+), 43 deletions(-) create mode 100644 frontend/src/components/satelliteData/SatelliteStatsTableRow.tsx diff --git a/frontend/package-lock.json b/frontend/package-lock.json index cb021ff..161349f 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -32,6 +32,7 @@ "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", "cmdk": "0.2.0", + "country-emoji": "^1.5.6", "framer-motion": "^11.0.24", "globe.gl": "^2.32.2", "gsap": "^3.12.5", @@ -9988,6 +9989,11 @@ } } }, + "node_modules/country-emoji": { + "version": "1.5.6", + "resolved": "https://registry.npmjs.org/country-emoji/-/country-emoji-1.5.6.tgz", + "integrity": "sha512-pSB8OOROfimFc2bcN+H41DuzXYIod/JQ6SgF4pYXkRCm9f8uF1JAJ0vXPhenug6xkpt3Gv33mdypMXB49CJWRA==" + }, "node_modules/country-regex": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/country-regex/-/country-regex-1.1.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index 83ca60d..5fe8005 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -40,6 +40,7 @@ "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", "cmdk": "0.2.0", + "country-emoji": "^1.5.6", "framer-motion": "^11.0.24", "globe.gl": "^2.32.2", "gsap": "^3.12.5", diff --git a/frontend/src/app/satellites/page.tsx b/frontend/src/app/satellites/page.tsx index b332521..eae274a 100644 --- a/frontend/src/app/satellites/page.tsx +++ b/frontend/src/app/satellites/page.tsx @@ -1,13 +1,6 @@ import { gql } from "@/__generated__/gql"; +import SatelliteStatsTableRow from "@/components/satelliteData/SatelliteStatsTableRow"; import { getClient } from "@/lib/ApolloClient"; -import SatelliteCard from "@/components/ui/satelliteCard"; -import { - PageHeader, - PageHeaderAndSubtitle, - PageSubtitle, -} from "@/components/PageHeader"; - -const STRAPI_URL = process.env.STRAPI_URL; const GET_SATELLITES = gql(` query GET_SATELLITES { satellites { @@ -38,38 +31,35 @@ export default async function Satellites() { }); return ( -
- - Satellites - - Theese are all the satellites we have worked on. - - -
- {graphqlData?.data?.satellites?.data?.map( - (satellite: any) => { - let previewImage = - satellite?.attributes?.previewImage?.data - ?.attributes?.url; - if (STRAPI_URL && previewImage != undefined) { - previewImage = STRAPI_URL + previewImage; - } - let satelliteName = - satellite?.attributes?.name ?? ""; - let missionStatus = - satellite?.attributes?.missionStatus ?? ""; - return ( - // eslint-disable-next-line react/jsx-key - - ); - }, - )} -
+
+

+ Satellites +

+ + + + + + + + + + + + {graphqlData?.data?.satellites?.data?.map( + (satellite: any) => { + let satelliteName = + satellite?.attributes?.name ?? ""; + return ( + + ); + }, + )} + +
SatelliteSpeedAltitudeLatitudeLongitude
); } catch (error) { diff --git a/frontend/src/components/satelliteData/SatelliteDataHome.tsx b/frontend/src/components/satelliteData/SatelliteDataHome.tsx index d0b26b3..3284b0e 100644 --- a/frontend/src/components/satelliteData/SatelliteDataHome.tsx +++ b/frontend/src/components/satelliteData/SatelliteDataHome.tsx @@ -2,6 +2,7 @@ import { useState, useEffect } from "react"; import { convertSatrec, SatelliteInfo } from "@/lib/convertSatrec"; import { useSatelliteStore } from "@/lib/store"; +import { flag } from "country-emoji"; const updateInterval = 50; @@ -82,11 +83,9 @@ export default function SatelliteDataHome() { {satelliteInfo ? "Above " + satelliteInfo.country : "Loading..."} + {satelliteInfo && " " + flag(satelliteInfo.country)}

-
-

Flag Icon

-
); diff --git a/frontend/src/components/satelliteData/SatelliteStatsTable.tsx b/frontend/src/components/satelliteData/SatelliteStatsTable.tsx index 1f18fae..769eef3 100644 --- a/frontend/src/components/satelliteData/SatelliteStatsTable.tsx +++ b/frontend/src/components/satelliteData/SatelliteStatsTable.tsx @@ -86,3 +86,22 @@ export default function SatelliteStatsTable({ ); } + +import type { SVGProps } from "react"; + +export function MaterialSymbolsSpeedOutline(props: SVGProps) { + return ( + + + + ); +} diff --git a/frontend/src/components/satelliteData/SatelliteStatsTableRow.tsx b/frontend/src/components/satelliteData/SatelliteStatsTableRow.tsx new file mode 100644 index 0000000..b2678bf --- /dev/null +++ b/frontend/src/components/satelliteData/SatelliteStatsTableRow.tsx @@ -0,0 +1,80 @@ +"use client"; +import { useState, useEffect } from "react"; +import { convertSatrec, SatelliteInfo } from "@/lib/convertSatrec"; +import { useSatelliteStore } from "@/lib/store"; +import Link from "next/link"; + +const updateInterval = 10; + +export default function SatelliteStatsTableRow({ + satName, +}: { + satName: string; +}) { + const { satelliteData, fetchAndSetSatelliteData } = useSatelliteStore(); + const [satelliteInfo, setSatelliteInfo] = useState( + null, + ); + + // Fetch satellite data on component mount + useEffect(() => { + fetchAndSetSatelliteData(satName); + }, [fetchAndSetSatelliteData, satName]); + + // Update satellite info every `updateInterval` ms + useEffect(() => { + const intervalId = setInterval(() => { + // Access satellite data by name + const satData = satelliteData[satName]; + if (satData) { + const updatedInfo = convertSatrec(satData.satrec, satData.name); + setSatelliteInfo(updatedInfo); + } + }, updateInterval); + + // Clear interval on component unmount + return () => clearInterval(intervalId); + }, [satelliteData, satName]); + + // Display loading message if satellite info is not available + if (!satelliteInfo) { + return ( + + Loading... + Loading... + Loading... + Loading... + Loading... + + ); + } + return ( + + + + {satName} + + + + + {satelliteInfo.velocity + " km/s"} + + + + + {satelliteInfo.altitude + " km"} + + + + + {satelliteInfo.latitudeDeg + "° N"} + + + + + {satelliteInfo.longitudeDeg + "° E"} + + + + ); +}