-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
202 fikse styling satellite page borders (#251)
* emoji * feat(frontend): commit for merge * feat(frontend): ✨ Refactor satellite page and add SatelliteStatsTableRow component * refactor(frontend): 🎨 Refactor SVG component and update table layout * build(ci/cd): 🚀 Add country-emoji package to frontend dependencies
- Loading branch information
Mads Hermansen
authored and
GitHub
committed
Apr 10, 2024
1 parent
b95948d
commit 1aa55dd
Showing
6 changed files
with
138 additions
and
43 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
80 changes: 80 additions & 0 deletions
80
frontend/src/components/satelliteData/SatelliteStatsTableRow.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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<SatelliteInfo | null>( | ||
| 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 ( | ||
| <tr> | ||
| <td className="px-6 py-4">Loading...</td> | ||
| <td className="px-6 py-4">Loading...</td> | ||
| <td className="px-6 py-4">Loading...</td> | ||
| <td className="px-6 py-4">Loading...</td> | ||
| <td className="px-6 py-4">Loading...</td> | ||
| </tr> | ||
| ); | ||
| } | ||
| return ( | ||
| <tr className="duration-150 hover:bg-white hover:text-black"> | ||
| <td className="px-6 py-4"> | ||
| <Link href={`/satellites/${satName}`} className="w-full"> | ||
| {satName} | ||
| </Link> | ||
| </td> | ||
| <td className="px-6 py-4"> | ||
| <Link href={`/satellites/${satName}`} className="w-full"> | ||
| {satelliteInfo.velocity + " km/s"} | ||
| </Link> | ||
| </td> | ||
| <td className="px-6 py-4"> | ||
| <Link href={`/satellites/${satName}`} className="w-full"> | ||
| {satelliteInfo.altitude + " km"} | ||
| </Link> | ||
| </td> | ||
| <td className="px-6 py-4"> | ||
| <Link href={`/satellites/${satName}`} className="w-full"> | ||
| {satelliteInfo.latitudeDeg + "° N"} | ||
| </Link> | ||
| </td> | ||
| <td className="px-6 py-4"> | ||
| <Link href={`/satellites/${satName}`} className="w-full"> | ||
| {satelliteInfo.longitudeDeg + "° E"} | ||
| </Link> | ||
| </td> | ||
| </tr> | ||
| ); | ||
| } |