Added maintenance page

client/api/queries.ts

@@ -55,6 +55,7 @@ export const useCheckBackEndHealthStatus = () => {
   return useQuery({
     queryKey: ["healthcheck"],
     queryFn: () => checkBackEndHealthStatus(),
+    refetchOnWindowFocus: true,
   });
 };
 

client/api/system.ts

@@ -3,9 +3,37 @@ import { ApiResponse, HealthCheckData, HttpMethod } from "@/interfaces";
 import { fetchApi } from "@/lib/api-helper";
 
 export const checkBackEndHealthStatus = (): Promise<ApiResponse<HealthCheckData>> => {
-  return fetchApi<ApiResponse<HealthCheckData>>("/v1/healthcheck", {
-    method: HttpMethod.GET,
-  });
+  return fetchApi<ApiResponse<HealthCheckData>>(
+    "/v1/healthcheck",
+    {
+      method: HttpMethod.GET,
+      timeout: 60000,
+    },
+    {
+      data: {
+        uptime: 0,
+        responseTime: [],
+        message: "Service unavailable",
+        timeStamp: Date.now(),
+        openaiStatus: {
+          name: "OpenAI",
+          status: "Outage",
+          message: "Service unavailable",
+        },
+        prismaStatus: {
+          name: "Prisma",
+          status: "Outage",
+          message: "Service unavailable",
+        },
+        apiStatus: {
+          name: "API",
+          status: "Outage",
+          message: "Service unavailable",
+        },
+      },
+      success: false,
+    },
+  );
 };
 
 export const subscribeToNewsletter = (email: string): Promise<any> => {

client/app/(account)/(routes)/diys/diys.tsx

@@ -71,7 +71,7 @@ function Diys() {
               </div>
             </div>
             <TabsContent value="all">
-              <Card x-chunk="dashboard-06-chunk-0">
+              <Card className="bg-transparent" x-chunk="dashboard-06-chunk-0">
                 <CardHeader>
                   <CardTitle>DIYS Project Ideas</CardTitle>
                   <CardDescription>Check out your DIYS projects</CardDescription>

client/app/maintenance/page.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import type { Metadata } from "next";
+import { useRouter } from "next/navigation";
+
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+
+export const metadata: Metadata = {
+  title: "Maintenance",
+  description: "Under Maintenance",
+  keywords: ["Maintenance", "Under Maintenance"],
+  metadataBase: new URL("https://www.diyspire.com/maintenance"),
+  applicationName: "DIYspire",
+  robots: {
+    index: false,
+    follow: false,
+    googleBot: {
+      index: false,
+      follow: false,
+    },
+  },
+};
+
+export default function Page() {
+  const { refresh } = useRouter();
+
+  return (
+    <div className="flex min-h-screen items-center justify-center py-5 sm:py-10">
+      <div className="p-6 text-center">
+        <Label className="mb-2 block text-2xl font-bold">Under Maintenance</Label>
+        <Label className="text-md my-4 block">You can try to refresh the page to see if the issue is resolved.</Label>
+        <div className="mt-4 flex flex-col space-y-2">
+          <Button onClick={refresh} className="w-full border px-4 py-2">
+            Refresh
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

client/constants/index.ts

@@ -312,4 +312,4 @@ export const statusDown: ApiResponse<HealthCheckData> = {
   },
 };
 
-export const accountRoutes: string[] = ["generate", "dashboard", "profile", "account", "project-detail", "diys"];
+export const accountRoutes: string[] = ["generate", "dashboard", "profile", "account", "project-detail", "diys", "settings", "maintenance"];

client/context/tanstackContext.tsx

@@ -7,7 +7,7 @@ export default function TanstackQueryProvider({ children }: { children: React.Re
   const [queryClient] = useState(
     () =>
       new QueryClient({
-        defaultOptions: { queries: { retry: 2, refetchOnMount: false } },
+        defaultOptions: { queries: { retry: 2, refetchOnMount: false, refetchOnWindowFocus: false } },
       }),
   );
   return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;

client/interfaces/index.ts

@@ -1,3 +1,5 @@
+import type { AxiosRequestConfig } from "axios";
+
 export interface FAQ {
   id: string;
   question: string;
@@ -250,7 +252,7 @@ export enum HttpMethod {
   DELETE = "DELETE",
 }
 
-export type FetchApiOptions = {
+export type FetchApiOptions = AxiosRequestConfig & {
   method?: HttpMethod;
   body?: object;
   queryParams?: Record<string, string | number | boolean | string[] | number[] | undefined>;

client/lib/api-helper.ts

@@ -64,7 +64,7 @@ api.interceptors.response.use(
   },
 );
 
-export const fetchApi = async <T>(endpoint: string, options: FetchApiOptions = {}): Promise<T> => {
+export const fetchApi = async <T>(endpoint: string, options: FetchApiOptions = {}, defaultResponse?: T): Promise<T> => {
   const { method = HttpMethod.GET, body, queryParams, accessToken } = options;
 
   if (method === HttpMethod.GET && body) {
@@ -84,11 +84,17 @@ export const fetchApi = async <T>(endpoint: string, options: FetchApiOptions = {
       paramsSerializer: (params) => serializeParams(params),
       data: body,
       headers: headers,
+      ...options,
     });
 
     return response.data;
   } catch (error: any) {
     console.error("API Error: ", error.message);
-    throw error;
+
+    if (defaultResponse !== undefined) {
+      return defaultResponse;
+    } else {
+      throw error;
+    }
   }
 };

client/next.config.js

@@ -4,6 +4,23 @@ const nextConfig = {
   images: {
     domains: ["images.unsplash.com", "via.placeholder.com"],
   },
+  redirects: async () => {
+    return process.env.NEXT_PUBLIC_SHOW_MAINTENANCE === "true"
+      ? [
+          {
+            source: "/((?!maintenance).*)",
+            destination: "/maintenance",
+            permanent: false,
+          },
+        ]
+      : [
+          {
+            source: "/maintenance",
+            destination: "/",
+            permanent: false,
+          },
+        ];
+  },
 };
 
 module.exports = nextConfig;