Refactor environment variable access to use process.env for consistency across the application

Author: thediymaker

app/api/slurm/reservations/route.ts

@@ -1,12 +1,11 @@
 export const dynamic = 'force-dynamic';
 
 import { NextResponse } from "next/server";
-import { env } from "process";
 import { fetchSlurmData } from "@/lib/slurm-api";
 
 export async function GET() {
   const isEnabled =
-    String(env.MAINT_NOTIFICATIONS_ENABLED ?? "true").toLowerCase() === "true";
+    String(process.env.MAINT_NOTIFICATIONS_ENABLED ?? "true").toLowerCase() === "true";
 
   if (!isEnabled) {
     return NextResponse.json({ meta: { enabled: false }, reservations: [] });

app/layout.tsx

@@ -2,12 +2,11 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
 import { ThemeProvider } from "@/components/theme-provider";
-import { env } from "process";
 
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: `${env.CLUSTER_NAME} Supercomputer`,
+  title: `${process.env.CLUSTER_NAME} Supercomputer`,
   description: "A Slurm supercomputer dashboard.",
   icons: {
     icon: "/favicon.ico",

app/modules/page.tsx

@@ -1,5 +1,4 @@
 import Footer from "@/components/footer/footer";
-import { env } from "process";
 
 import Modules from "@/components/modules/modules";
 
@@ -8,7 +7,7 @@ export default function Dashboard() {
     <div className="mb-5">
       <div className="p-2 ml-2 mx-auto">
         <Modules />
-        <Footer cluster={env.CLUSTER_NAME} logo={env.CLUSTER_LOGO} />
+        <Footer cluster={process.env.CLUSTER_NAME} logo={process.env.CLUSTER_LOGO} />
       </div>
     </div>
   );

app/page.tsx

@@ -1,5 +1,4 @@
 import Footer from "@/components/footer/footer";
-import { env } from "process";
 
 import Nodes from "@/components/nodeCard/nodes";
 
@@ -8,7 +7,7 @@ export default function Dashboard() {
     <div className="mb-5">
       <div className="p-2 ml-2 mx-auto">
         <Nodes />
-        <Footer cluster={env.CLUSTER_NAME} logo={env.CLUSTER_LOGO} />
+        <Footer cluster={process.env.CLUSTER_NAME} logo={process.env.CLUSTER_LOGO} />
       </div>
     </div>
   );

app/rewind/page.tsx

@@ -1,13 +1,12 @@
 import Footer from "@/components/footer/footer";
 import Rewind from "@/components/rewind/rewind";
-import { env } from "process";
 
 export default function Dashboard() {
   return (
     <div className="mb-5">
       <div className="p-2 ml-2 mx-auto">
         <Rewind />
-        <Footer cluster={env.CLUSTER_NAME} logo={env.CLUSTER_LOGO} />
+        <Footer cluster={process.env.CLUSTER_NAME} logo={process.env.CLUSTER_LOGO} />
       </div>
     </div>
   );

lib/slurm-api.ts

@@ -1,5 +1,3 @@
-import { env } from "process";
-
 type SlurmApiType = 'slurm' | 'slurmdb';
 
 interface FetchSlurmOptions {
@@ -17,14 +15,14 @@ export async function fetchSlurmData(endpoint: string, options: FetchSlurmOption
 
   const { type = 'slurm', revalidate = 30, method = 'GET', body } = finalOptions;
 
-  const protocol = env.SLURM_PROTOCOL || 'http';
-  const baseUrl = `${protocol}://${env.SLURM_SERVER}:6820/${type}/${env.SLURM_API_VERSION}`;
+  const protocol = process.env.SLURM_PROTOCOL || 'http';
+  const baseUrl = `${protocol}://${process.env.SLURM_SERVER}:6820/${type}/${process.env.SLURM_API_VERSION}`;
 
   const fetchOptions: RequestInit = {
     method,
     headers: {
-      "X-SLURM-USER-NAME": `${env.SLURM_API_ACCOUNT}`,
-      "X-SLURM-USER-TOKEN": `${env.SLURM_API_TOKEN}`,
+      "X-SLURM-USER-NAME": `${process.env.SLURM_API_ACCOUNT}`,
+      "X-SLURM-USER-TOKEN": `${process.env.SLURM_API_TOKEN}`,
       ...(body ? { "Content-Type": "application/json" } : {}),
     },
     next: {