backend coupling , refresh encapsulation , empty data / error fallbac…

…k options

.env

@@ -1 +1,2 @@
-"VITE_BACKEND_PORT=9000" 
+VITE_BACKEND_PORT=9000
+VITE_API_TIMEOUT=5000

package.json

@@ -28,11 +28,14 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "cmdk": "^1.0.0",
+    "dotenv": "^16.4.5",
     "lucide-react": "^0.371.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-query": "^3.39.3",
     "react-router-dom": "^6.16.0",
     "react-wrap-balancer": "^1.1.0",
+    "sonner": "^1.4.41",
     "tailwind-merge": "^1.14.0",
     "tailwindcss-animate": "^1.0.7"
   },

src/App.tsx

@@ -2,13 +2,30 @@ import { RouterProvider } from "react-router-dom";
 import { ThemeProvider } from "./contexts/ThemeContext";
 import { router } from "./Router";
 import { TooltipProvider } from "@/components/ui/tooltip";
+import { toast, Toaster } from "sonner";
+import { QueryClient, QueryClientProvider } from "react-query";
 
 export default function App() {
+  const queryClient = new QueryClient();
+  queryClient.setDefaultOptions({
+    queries: {
+      onError: (error: unknown) => {
+        if (error instanceof Error) {
+          toast.error(`Something went wrong: ${error.message}`);
+        }
+      },
+      staleTime: 10000,
+      refetchOnWindowFocus: "always",
+    },
+  });
   return (
     <ThemeProvider>
-      <TooltipProvider>
-        <RouterProvider router={router} />
-      </TooltipProvider>
+      <QueryClientProvider client={queryClient}>
+        <TooltipProvider>
+          <Toaster richColors closeButton />
+          <RouterProvider router={router} />
+        </TooltipProvider>
+      </QueryClientProvider>
     </ThemeProvider>
   );
 }

src/Router.tsx

@@ -6,7 +6,7 @@ import NoMatch from "./modules/fallback/NoMatch";
 import ClustersPage from "@/modules/clusters/clusters-list/ClustersPage";
 import { appConfig } from "@/config/app";
 import { ClusterInfo } from "@/modules/clusters/cluster-information/ClusterInfo";
-const defaultTab = appConfig.sveltosType;
+const defaultTab = appConfig.defaultType;
 const defaultPage = appConfig.defaultPage;
 export const router = createBrowserRouter(
   [

src/api-client/apiClient.ts

@@ -1,6 +1,14 @@
 import axios from "axios";
+import { toast } from "sonner";
 
 const client = axios.create({
-  baseURL: import.meta.env.VITE_SVELTOS_API_BASE_URL,
-  timeout: 1000,
+  baseURL: "/api",
+  timeout: import.meta.env.VITE_API_TIMEOUT,
 });
+
+client.interceptors.request.use(function (config) {
+  config.headers["Content-Type"] = "application/json";
+  return config;
+});
+
+export default client;

src/components/layouts/Header.tsx

@@ -29,7 +29,7 @@ import {
   AccordionTrigger,
 } from "@/components/ui/accordion";
 import { ModeToggle } from "@/components/mode-toggle";
-import { Badge } from "@/components/ui/badge";
+
 
 export function Header() {
   const [open, setOpen] = useState(false);
@@ -99,7 +99,7 @@ export function Header() {
                     cn(
                       "text-sm font-medium flex items-center transition-colors hover:text-primary",
                       isActive
-                        ? "bg-slate-100 dark:bg-slate-700 p-2 rounded hover:text-main-500 "
+                        ? "bg-slate-100 dark:bg-slate-800 p-2 rounded hover:text-main-500 "
                         : "text-foreground/60 hover:text-primary",
                     )
                   }

src/components/ui/PageHeading.tsx

@@ -2,6 +2,7 @@ import { CardsFilterToolbar } from "@/modules/clusters/clusters-list/components/
 interface PageHeadingProps {
   title: string;
   description: string;
+
 }
 export const PageHeading = ({ title, description }: PageHeadingProps) => {
   return (
@@ -12,10 +13,6 @@ export const PageHeading = ({ title, description }: PageHeadingProps) => {
             <h2 className="text-2xl font-bold tracking-tight">{title}</h2>
             <p className="text-muted-foreground w-2/3">
               {description}
-              <a href="#" className="text-main-500 hover:text-main-800">
-                Retry
-              </a>{" "}
-              or{" "}
               <a
                 href="https://projectsveltos.github.io/sveltos/"
                 className="text-main-500 hover:text-main-800"

src/components/ui/RefreshButton.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+import { Button, ButtonProps } from "@/components/ui/button";
+import { useIsFetching, useQueryClient } from "react-query";
+
+import { RefreshCcw } from "lucide-react";
+
+const RefreshButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+
+    const queryClient = useQueryClient();
+    const isFetching = useIsFetching();
+    const handleRefresh = () =>{
+         queryClient.refetchQueries();
+    };
+    return (
+      <Button
+        variant={"outline"}
+        disabled={isFetching> 0}
+        onClick={handleRefresh}
+       className={className}
+        ref={ref}
+      >
+        <>
+
+
+        {isFetching>0 ?    <RefreshCcw className="w-4 h-4 animate-spin mr-2" />  : <RefreshCcw className="w-4 h-4 mr-2" />}
+        Refresh
+        </>
+      </Button>
+    );
+  },
+);
+RefreshButton.displayName = "Button";
+
+export { RefreshButton  };