Feat/fAIr V3 Prep

frontend/.env.sample

@@ -6,7 +6,12 @@ VITE_BASE_API_URL = "http://localhost:8000/api/v1/"
 
 # Authentication: "legacy" or "hanko"
 VITE_AUTH_PROVIDER = "legacy"
-# VITE_HANKO_URL = "https://dev.login.hotosm.org"
+
+
+# The Hanko authentication URL for user authentication.
+# Data type: String (e.g., "https://dev.login.hotosm.org").
+# Default value: "https://dev.login.hotosm.org".
+VITE_HANKO_URL = "https://dev.login.hotosm.org"
 
 # The matomo application ID.
 # Data type: Positive Integer (e.g., 0).
@@ -225,35 +230,35 @@ VITE_MAXIMUM_ORTHO_SKEW_TOLEARANCE_AND_MAX_ANGLE_CHANGE_IN_DEGREES = 45
 # Data type: String (e.g., "#247DCACC").
 # Note: Colors must be hex codes or valid colors. e.g red, green, #fff.
 # Default value: "#D73434".
-PREDICTIONS_RESULTS_POINT_FILL_COLOR = "#34D77C"
+VITE_PREDICTIONS_RESULTS_POINT_FILL_COLOR = "#34D77C"
 
 # The outline color for the prediction requests points.
 # Data type: String (e.g., "#247DCACC").
 # Note: Colors must be hex codes or valid colors. e.g red, green, #fff.
 # Default value: "#D73434".
-PREDICTIONS_RESULTS_POINT_OUTLINE_COLOR = "#34D77C"
+VITE_PREDICTIONS_RESULTS_POINT_OUTLINE_COLOR = "#34D77C"
 
 
 #The URL to fetch the latest fair updates.
 # Data type: String
 # Default value: "https://raw.githubusercontent.com/hotosm/fAIr/develop/docs/assets/fair-updates.json".
-FAIR_VIDEO_UPDATES_URL = "https://raw.githubusercontent.com/hotosm/fAIr/develop/docs/assets/fair-updates.json";
+VITE_FAIR_VIDEO_UPDATES_URL = "https://raw.githubusercontent.com/hotosm/fAIr/develop/docs/assets/fair-updates.json";
 
 #FAIR Youtube Backup Video URL to use when invalid youtube url is returned.
 # Data type: String
 # Default value: "https://www.youtube.com/embed/N2_9Bvm05_0?si=to_2aoeRCW3APmmZ".
-FAIR_VIDEO_BACKUP_URL = "https://www.youtube.com/embed/N2_9Bvm05_0?si=to_2aoeRCW3APmmZ"
+VITE_FAIR_VIDEO_BACKUP_URL = "https://www.youtube.com/embed/N2_9Bvm05_0?si=to_2aoeRCW3APmmZ"
 
 
 # The number of required MapSwipe validations for a prediction to be considered valid.
 # Data type: Positive Integer (e.g., 4).
 # Default value: 4.
-MAPSWIPE_VERIFICATION_NUMBER = 4
+VITE_MAPSWIPE_VERIFICATION_NUMBER = 4
 
 # The group size for MapSwipe projects.
 # Data type: Positive Integer (e.g., 25).
 # Default value: 25.
-MAPSWIPE_GROUP_SIZE = 25
+VITE_MAPSWIPE_GROUP_SIZE = 25
 
 
 # The Hanko authentication token for user authentication. ####### ONLY NEEDED IN DEVELOPMENT ENVIRONMENT. ########

frontend/src/app/router.tsx

@@ -1,4 +1,5 @@
 import { APPLICATION_ROUTES } from "@/constants";
+import { isNavigationRouteEnabled } from "@/constants/general";
 import { MainErrorFallback } from "@/components/errors";
 import {
   ModelFormsLayout,
@@ -10,13 +11,34 @@ import {
   Navigate,
   RouterProvider,
   createBrowserRouter,
+  useLocation,
 } from "react-router-dom";
 import { ModelsProvider } from "@/app/providers/models-provider";
 import { NuqsAdapter } from "nuqs/adapters/react-router/v6";
 
+const RouteAvailabilityGuard = ({ children }: React.PropsWithChildren) => {
+  const location = useLocation();
+
+  if (!isNavigationRouteEnabled(location.pathname)) {
+    return (
+      <Navigate
+        to={APPLICATION_ROUTES.NOTFOUND}
+        replace
+        state={{ from: location.pathname }}
+      />
+    );
+  }
+
+  return children;
+};
+
 const router = createBrowserRouter([
   {
-    element: <RootLayout />,
+    element: (
+      <RouteAvailabilityGuard>
+        <RootLayout />
+      </RouteAvailabilityGuard>
+    ),
     children: [
       /**
        * Landing page route starts

frontend/src/components/ui/banner/banner.tsx

@@ -12,7 +12,7 @@ type TBannerResponse = {
 
 const fetchBanner = async (): Promise<TBannerResponse[]> => {
   const { data } = await apiClient.get(API_ENDPOINTS.GET_BANNER);
-  return data;
+  return data.results;
 };
 
 const Banner = () => {

frontend/src/config/env.ts

@@ -105,8 +105,8 @@ export const ENVS = {
   PREDICTIONS_RESULTS_POINT_OUTLINE_COLOR:
     env.VITE_PREDICTIONS_RESULTS_POINT_OUTLINE_COLOR,
 
-  FAIR_YOUTUBE_UPDATES_URL: env.FAIR_VIDEO_UPDATES_URL,
-  FAIR_VIDEO_BACKUP_URL: env.FAIR_VIDEO_BACKUP_URL,
+  FAIR_YOUTUBE_UPDATES_URL: env.VITE_FAIR_VIDEO_UPDATES_URL,
+  FAIR_VIDEO_BACKUP_URL: env.VITE_FAIR_VIDEO_BACKUP_URL,
   MAPSWIPE_VERIFICATION_NUMBER: env.VITE_MAPSWIPE_VERIFICATION_NUMBER,
   MAPSWIPE_GROUP_SIZE: env.VITE_MAPSWIPE_GROUP_SIZE,
   FAIR_STAC_CATALOG_BASE_URL: env.VITE_FAIR_STAC_CATALOG_BASE_URL,

frontend/src/constants/general.ts

@@ -6,12 +6,12 @@ export const navLinks: TNavBarLinks = [
   {
     title: SHARED_CONTENT.navbar.routes.exploreModels,
     href: APPLICATION_ROUTES.MODELS,
-    active: true,
+    active: false,
   },
   {
     title: SHARED_CONTENT.navbar.routes.exploreDatasets,
     href: APPLICATION_ROUTES.DATASETS,
-    active: true,
+    active: false,
     children: [
       {
         title: "Training Datasets",
@@ -40,6 +40,21 @@ export const navLinks: TNavBarLinks = [
   },
 ];
 
+/**
+ * Determines whether a URL is available according to the navigation config.
+ *
+ * A disabled top-level item also disables every route below its URL. This keeps
+ * a hidden navigation item from still being accessible by pasting its URL.
+ */
+export const isNavigationRouteEnabled = (pathname: string): boolean => {
+  return !navLinks.some((link) => {
+    if (link.active || !link.href) return false;
+
+    const route = link.href.replace(/\/$/, "");
+    return pathname === route || pathname.startsWith(`${route}/`);
+  });
+};
+
 type TFooterGroupLinks = {
   groupOne: TFooterLinks;
   groupTwo: TFooterLinks;
@@ -50,17 +65,17 @@ export const footerLinks: TFooterGroupLinks = {
     {
       title: "explore models",
       route: APPLICATION_ROUTES.MODELS,
-      active: true,
+      active: false,
     },
     {
       title: "Training datasets",
       route: APPLICATION_ROUTES.DATASETS,
-      active: true,
+      active: false,
     },
     {
       title: "AI Predictions",
       route: APPLICATION_ROUTES.AI_PREDICTIONS,
-      active: true,
+      active: false,
     },
     {
       title: "learn",