Add comments to code (#406)

* add comments

* cleanup files

* cleanup mission statement

* move featuredprojects fetch into component

* remove empty file

* clean up satellite page

* add JSDoc comments to a lot of stuff

* bugfix missionStatus on satellites not in orbit. Also, more comments

* finish commenting

* more comments & cleanup

* 373 bug cannot scroll on phones because of globe (#404)

* fix globe phone scroll, set proper featured image height, fix scrollindicator position

* fix zero norad id bug

* remove unnecessary code

* remove scroll indicator if user scrolls down beyond it

* fix merge issues

* fix typo

* run prettier

* remove gsap

frontend/package.json

@@ -19,7 +19,6 @@
     "dependencies": {
         "@apollo/client": "^3.9.0-alpha.5",
         "@apollo/experimental-nextjs-app-support": "^0.7.0",
-        "@gsap/react": "^2.1.0",
         "@radix-ui/react-avatar": "^1.0.4",
         "@radix-ui/react-dialog": "^1.0.5",
         "@radix-ui/react-dropdown-menu": "^2.0.6",
@@ -47,7 +46,6 @@
         "framer-motion": "^11.0.24",
         "globe.gl": "^2.32.2",
         "gql.tada": "^1.6.2",
-        "gsap": "^3.12.5",
         "lucide-react": "^0.314.0",
         "luxon": "^3.4.4",
         "next": "14.1.0",

frontend/src/app/_homeComponents/FeaturedImage.tsx

@@ -5,34 +5,10 @@ import { getClient } from "@/lib/ApolloClient";
 
 const STRAPI_URL = process.env.BACKEND_INTERNAL_URL;
 
-const GET_FEATURED_IMAGE = graphql(`
-    query FeaturedImage {
-        featuredImage {
-            data {
-                attributes {
-                    description
-                    featuredImage {
-                        data {
-                            attributes {
-                                url
-                            }
-                        }
-                    }
-                    satellite {
-                        data {
-                            attributes {
-                                name
-                                slug
-                            }
-                        }
-                    }
-                    title
-                }
-            }
-        }
-    }
-`);
-
+/**
+ * Retrieves the featured image data from the GraphQL API and renders it on the page.
+ * @returns The JSX element representing the featured image component.
+ */
 export default async function featuredImage() {
     const graphqlData = await getClient().query({
         query: GET_FEATURED_IMAGE,
@@ -85,3 +61,31 @@ export default async function featuredImage() {
         </div>
     );
 }
+
+const GET_FEATURED_IMAGE = graphql(`
+    query FeaturedImage {
+        featuredImage {
+            data {
+                attributes {
+                    description
+                    featuredImage {
+                        data {
+                            attributes {
+                                url
+                            }
+                        }
+                    }
+                    satellite {
+                        data {
+                            attributes {
+                                name
+                                slug
+                            }
+                        }
+                    }
+                    title
+                }
+            }
+        }
+    }
+`);

frontend/src/app/_homeComponents/FeaturedProjects.tsx

@@ -1,11 +1,15 @@
-import fetchFeaturedProjects from "@/lib/data/fetchFeaturedProjects";
 import Link from "next/link";
 import { Button } from "@components/shadcn/button";
 import CardWithContent from "@components/shared/CardWithContent";
 import { PagePaddingOnlyHorizontal } from "@/components/layout/PageLayout";
+import { graphql } from "@/lib/tada/graphql";
+import { getClient } from "@lib/ApolloClient";
 
 const STRAPI_URL = process.env.BACKEND_INTERNAL_URL;
 
+/**
+ * Displays the title and text content from Strapi, alongside three featured projects as cards.
+ */
 export default async function FeaturedProjects() {
     const featuredProjects = await fetchFeaturedProjects();
 
@@ -69,3 +73,70 @@ export default async function FeaturedProjects() {
         </PagePaddingOnlyHorizontal>
     );
 }
+
+const GET_FEATURED_PROJECTS = graphql(`
+    query HomeFeaturedProjects {
+        homeFeaturedProjects {
+            data {
+                attributes {
+                    title
+                    textContent
+                    featuredProject1 {
+                        data {
+                            attributes {
+                                title
+                                previewImage {
+                                    data {
+                                        attributes {
+                                            url
+                                        }
+                                    }
+                                }
+                                slug
+                            }
+                        }
+                    }
+                    featuredProject2 {
+                        data {
+                            attributes {
+                                title
+                                previewImage {
+                                    data {
+                                        attributes {
+                                            url
+                                        }
+                                    }
+                                }
+                                slug
+                            }
+                        }
+                    }
+                    featuredProject3 {
+                        data {
+                            attributes {
+                                title
+                                previewImage {
+                                    data {
+                                        attributes {
+                                            url
+                                        }
+                                    }
+                                }
+                                slug
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+`);
+
+async function fetchFeaturedProjects() {
+    const client = getClient();
+    const { data } = await client.query({
+        query: GET_FEATURED_PROJECTS,
+    });
+
+    return data.homeFeaturedProjects?.data?.attributes;
+}

frontend/src/app/_homeComponents/GlobeWithStats.tsx

@@ -7,6 +7,10 @@ const SatelliteGlobeNoSSR = dynamic(() => import("./SatelliteGlobe"), {
     ssr: false,
 });
 
+/**
+ * Renders a 3D Globe with statistics next to it.
+ * Allows the user to select a satellite to view.
+ */
 export default function GlobeWithStats() {
     return (
         <>

frontend/src/components/ui/hero.tsx → frontend/src/app/_homeComponents/Hero.tsx

@@ -7,6 +7,10 @@ interface HeroProps extends React.HTMLAttributes<HTMLDivElement> {
     className?: string;
 }
 
+/**
+ * Represents a Hero component that displays a title, description, and optional image.
+ * Spans the whole height of the viewport.
+ */
 const Hero = React.forwardRef<HTMLDivElement, HeroProps>(
     ({ title, description, imageUrl, className, children, ...props }, ref) => (
         <div

frontend/src/app/_homeComponents/MissionStatement.tsx

@@ -1,8 +1,13 @@
-import fetchMissionStatement from "@/lib/data/fetchMissionStatement";
-
-import Hero from "@/components/ui/hero";
+import Hero from "./Hero";
 import { PagePaddingOnlyHorizontal } from "@/components/layout/PageLayout";
+import { graphql } from "@/lib/tada/graphql";
+import { getClient } from "@lib/ApolloClient";
 
+/**
+ * Retrieves the mission statement and renders it on the page.
+ * Rendered as a big Hero component with a title and description.
+ * Spans the whole height of the viewport.
+ */
 export default async function MissionStatement() {
     const missionStatement = await fetchMissionStatement();
 
@@ -23,3 +28,32 @@ export default async function MissionStatement() {
         </PagePaddingOnlyHorizontal>
     );
 }
+
+const GET_MISSION_STATEMENT = graphql(`
+    query HomeMissionStatement {
+        homeMissionStatement {
+            data {
+                attributes {
+                    title
+                    textContent
+                }
+            }
+        }
+    }
+`);
+
+async function fetchMissionStatement() {
+    const client = getClient(); // Ensure getClient properly typed to return ApolloClient
+    const response = await client.query({
+        // This ensures that TypeScript expects the right structure
+        query: GET_MISSION_STATEMENT,
+    });
+
+    const missionStatement =
+        response.data.homeMissionStatement?.data?.attributes;
+
+    return {
+        title: missionStatement?.title,
+        textContent: missionStatement?.textContent,
+    };
+}

frontend/src/app/_homeComponents/SatDropdown.tsx

@@ -5,6 +5,11 @@ import { cn } from "@/lib/utils";
 import { satLoaderById } from "@/lib/getSatelliteData";
 import { SatelliteNumber } from "@/lib/store";
 import { useSatelliteStore } from "@/lib/store";
+
+/**
+ * Renders a dropdown menu to select a satellite.
+ * Allows the user to select a satellite by NORAD ID or from a list of satellites.
+ */
 export default function SatDropdown() {
     const selectedSatellite = useSatelliteStore(
         (state) => state.selectedSatellite,

frontend/src/app/_homeComponents/SatelliteGlobe.tsx

@@ -17,6 +17,11 @@ interface initpostype {
     satNumber: number;
 }
 
+/**
+ * Renders a 3D globe with satellite positions and allows interaction with the satellites.
+ * Uses the globe.gl library to render the globe and satellites.
+ * https://github.com/vasturiano/globe.gl
+ */
 export default function SatelliteGlobe() {
     const chart = useRef<HTMLDivElement>(null);
     const globeRef = useRef<GlobeInstance>();
@@ -30,6 +35,7 @@ export default function SatelliteGlobe() {
     // Initialize the globe
     useEffect(() => {
         if (chart.current && !globeRef.current) {
+            // Create the globe instance
             globeRef.current = Globe()(chart.current)
                 .globeImageUrl("/images/earth-blue-marble.jpg")
                 .backgroundImageUrl("/images/night-sky.png")
@@ -57,6 +63,7 @@ export default function SatelliteGlobe() {
                 }
             });
 
+            // Enable globe controls
             globeRef.current.controls().enabled = true;
             globeRef.current.controls().enableZoom = false;
             globeRef.current.controls().enablePan = false;

frontend/src/app/_homeComponents/SatelliteSelector.tsx

@@ -2,6 +2,10 @@
 import React from "react";
 import SatDropdown from "./SatDropdown";
 
+/**
+ * Renders the SatelliteSelector component.
+ * Allows the user to select a satellite to view.
+ */
 export default function SatelliteSelector() {
     return (
         <div className="m-0 w-full border-b border-gray-600 p-0">

frontend/src/app/_homeComponents/ScrollIndicator.tsx

@@ -4,23 +4,9 @@ import React, { useEffect, useRef } from "react";
 import type { SVGProps } from "react";
 import { inView } from "framer-motion";
 
-export function UiwDown(props: SVGProps<SVGSVGElement>) {
-    return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="1em"
-            height="1em"
-            viewBox="0 0 20 20"
-            {...props}
-        >
-            <path
-                fill="currentColor"
-                d="M10.103 12.778L16.81 6.08a.69.69 0 0 1 .99.012a.726.726 0 0 1-.012 1.012l-7.203 7.193a.69.69 0 0 1-.985-.006L2.205 6.72a.727.727 0 0 1 0-1.01a.69.69 0 0 1 .99 0z"
-            ></path>
-        </svg>
-    );
-}
-
+/**
+ * Renders a arrow pointing down to indicate that the user can scroll down.
+ */
 export default function ScrollIndicator() {
     const ref = useRef<HTMLDivElement>(null);
     const { scrollYProgress } = useScroll({
@@ -57,3 +43,20 @@ export default function ScrollIndicator() {
         </motion.div>
     );
 }
+
+export function UiwDown(props: SVGProps<SVGSVGElement>) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="1em"
+            height="1em"
+            viewBox="0 0 20 20"
+            {...props}
+        >
+            <path
+                fill="currentColor"
+                d="M10.103 12.778L16.81 6.08a.69.69 0 0 1 .99.012a.726.726 0 0 1-.012 1.012l-7.203 7.193a.69.69 0 0 1-.985-.006L2.205 6.72a.727.727 0 0 1 0-1.01a.69.69 0 0 1 .99 0z"
+            ></path>
+        </svg>
+    );
+}