Chore belindas nextjs update api evironment (#525)

* update API environment address with .env file support * change file name * change wording for clarity
SeattleColleges · Aug 3, 2024 · 5ff3ec9 · 5ff3ec9
1 parent 808d5e2
commit 5ff3ec9
Show file tree

Hide file tree

Showing 18 changed files with 43 additions and 43 deletions.
diff --git a/.env.sample b/.env.sample
@@ -0,0 +1,4 @@
+# Copy and create new .env file
+# Public API URL: https://belindascloset.com/api
+# Local API URL: http://localhost:3001/api  // localhost port and Nest.js listener port value need to match
+API_URL=http://localhost:3001/api
diff --git a/app/add-product-page/page.tsx b/app/add-product-page/page.tsx
@@ -22,9 +22,8 @@ import {
   ProductSizePantsInseamList,
 } from "./product-prop-list";
 import UnauthorizedPageMessage from "@/components/UnauthorizedPageMessage";
-// WARNING: You won't be able to connect to local backend unless you remove the env variable below.
-const URL =
-  process.env.BELINDAS_CLOSET_PUBLIC_API_URL || "http://localhost:3000/api";
+
+const URL = process.env.BELINDAS_CLOSET_PUBLIC_API_URL;
 
 const AddProduct = () => {
   const [productType, setProductType] = useState<string>("");

diff --git a/app/archived-products-page/page.tsx b/app/archived-products-page/page.tsx
@@ -5,8 +5,8 @@ import ProductCard from "@/components/ProductCard";
 import logo from "@/public/belinda-images/logo.png";
 import { Container, Grid, Typography } from "@mui/material";
 import UnauthorizedPageMessage from "@/components/UnauthorizedPageMessage";
-// WARNING: You won't be able to connect to local backend unless you remove the env variable below.
-const URL = process.env.BELINDAS_CLOSET_PUBLIC_API_URL || "http://localhost:3000/api";
+
+const URL = process.env.BELINDAS_CLOSET_PUBLIC_API_URL;
 const placeholderImg = logo;
 interface Product {
   _id: string;

diff --git a/app/auth/change-password-page/page.tsx b/app/auth/change-password-page/page.tsx
@@ -21,9 +21,8 @@ import ErrorAlert from "@/components/ErrorAlert";
 import SuccessAlert from "@/components/SuccessAlert";
 import { useRouter } from "next/navigation";
 import UnauthorizedPageMessage from "@/components/UnauthorizedPageMessage";
-// WARNING: You won't be able to connect to local backend unless you remove the env variable below.
-const URL =
-  process.env.BELINDAS_CLOSET_PUBLIC_API_URL || "http://localhost:3000/api";
+
+const URL = process.env.BELINDAS_CLOSET_PUBLIC_API_URL;
 
 const ChangePasswordPage = () => {
   const [password, setPassword] = useState({

diff --git a/app/auth/reset-password-page/page.tsx b/app/auth/reset-password-page/page.tsx
@@ -14,9 +14,8 @@ import {
   TextField,
   Typography,
 } from "@mui/material";
-// WARNING: You won't be able to connect to local backend unless you remove the env variable below.
-const URL =
-  process.env.BELINDAS_CLOSET_PUBLIC_API_URL || "http://localhost:3000/api";
+
+const URL = process.env.BELINDAS_CLOSET_PUBLIC_API_URL;
 
 const ResetPasswordPage = () => {
   const [password, setPassword] = useState({

diff --git a/app/auth/sign-in/page.tsx b/app/auth/sign-in/page.tsx
@@ -16,8 +16,11 @@ import {
   useMediaQuery,
 } from "@mui/material";
 import useAuth from "@/hooks/useAuth";
-// WARNING: You won't be able to connect to local backend unless you remove the env variable below.
-const URL = process.env.BELINDAS_CLOSET_PUBLIC_API_URL || "http://localhost:3000/api";
+// Check env.local file to update API address
+const URL = process.env.BELINDAS_CLOSET_PUBLIC_API_URL;
+if (URL?.includes('localhost')) {
+  console.log('Dev API Address: ',URL)
+}
 
 const Signin = () => {
   const [error, setError] = useState("");

diff --git a/app/auth/sign-up/page.tsx b/app/auth/sign-up/page.tsx
@@ -11,9 +11,11 @@ import { Link as MuiLink } from "@mui/material";
 import ErrorAlert from "@/components/ErrorAlert";
 import SuccessAlert from "@/components/SuccessAlert";
 import { useRouter } from "next/navigation";
-// WARNING: You won't be able to connect to local backend unless you remove the env variable below.
-const URL =
-  process.env.BELINDAS_CLOSET_PUBLIC_API_URL || "http://localhost:3000/api";
+// Check env.local file to update API address
+const URL = process.env.BELINDAS_CLOSET_PUBLIC_API_URL;
+if (URL?.includes('localhost')) {
+  console.log('Dev API Address: ',URL)
+}
 
 const SignUp = () => {
   // handling user's incoming info

diff --git a/app/category-page/[categoryId]/page.tsx b/app/category-page/[categoryId]/page.tsx
@@ -4,9 +4,9 @@ import React, { useState, useEffect, Dispatch, SetStateAction } from "react";
 import ProductCard from "@/components/ProductCard";
 import logo from "@/public/belinda-images/logo.png";
 import { Container, Grid, Typography } from "@mui/material";
-// WARNING: You won't be able to connect to local backend unless you remove the env variable below.
+
 const URL =
-  process.env.BELINDAS_CLOSET_PUBLIC_API_URL || "http://localhost:3000/api";
+  process.env.BELINDAS_CLOSET_PUBLIC_API_URL;
 const placeholderImg = logo;
 interface Product {
   _id: string;

diff --git a/app/category-page/[categoryId]/products/[productId]/page.tsx b/app/category-page/[categoryId]/products/[productId]/page.tsx
@@ -3,9 +3,9 @@
 import React, { useState, useEffect } from "react";
 import { CircularProgress } from "@mui/material";
 import ProductDetailDisplay from "../[productId]/ProductDetailDisplay";
-// WARNING: You won't be able to connect to local backend unless you remove the env variable below.
+
 const URL =
-  process.env.BELINDAS_CLOSET_PUBLIC_API_URL || "http://localhost:3000/api";
+  process.env.BELINDAS_CLOSET_PUBLIC_API_URL;
 interface Product {
   _id: string;
   productType: string[];

diff --git a/app/category-page/all-products/page.tsx b/app/category-page/all-products/page.tsx
@@ -4,8 +4,8 @@ import React, { useState, useEffect, Dispatch, SetStateAction } from "react";
 import ProductCard from "@/components/ProductCard";
 import logo from "@/public/belinda-images/logo.png";
 import { Container, Grid, Typography } from "@mui/material";
-// WARNING: You won't be able to connect to local backend unless you remove the env variable below.
-const URL = process.env.BELINDAS_CLOSET_PUBLIC_API_URL || "http://localhost:3000/api";
+
+const URL = process.env.BELINDAS_CLOSET_PUBLIC_API_URL;
 const placeholderImg = logo;
 interface Product {
   _id: string;

diff --git a/app/edit-user-role-page/page.tsx b/app/edit-user-role-page/page.tsx
@@ -3,9 +3,8 @@ import React, { useState, useEffect } from "react";
 import UserCard from "../../components/UserCard";
 import { Stack, Typography } from "@mui/material";
 import UnauthorizedPageMessage from "@/components/UnauthorizedPageMessage";
-// WARNING: You won't be able to connect to local backend unless you remove the env variable below.
-const URL =
-  process.env.BELINDAS_CLOSET_PUBLIC_API_URL || "http://localhost:3000/api";
+
+const URL = process.env.BELINDAS_CLOSET_PUBLIC_API_URL;
 
 /**
  * Represents a user.

diff --git a/app/profile/page.tsx b/app/profile/page.tsx
@@ -6,8 +6,8 @@ import { Box, Button, Stack, Typography, useMediaQuery, useTheme } from "@mui/ma
 import EditUserDetailsDialog from "@/components/EditUserDetailsDialog";
 import { useRouter } from "next/navigation";
 import UnauthorizedPageMessage from "@/components/UnauthorizedPageMessage";
-// WARNING: You won't be able to connect to local backend unless you remove the env variable below.
-const URL = process.env.BELINDAS_CLOSET_PUBLIC_API_URL || "http://localhost:3000/api";
+
+const URL = process.env.BELINDAS_CLOSET_PUBLIC_API_URL;
 
 /**
  * Represents a user.

diff --git a/components/ConfirmArchiveDialog.tsx b/components/ConfirmArchiveDialog.tsx
@@ -7,9 +7,8 @@ import React, { useState } from "react";
 import { Product } from "@/app/category-page/[categoryId]/products/[productId]/ProductDetailDisplay";
 import Snackbar from "@mui/material/Snackbar";
 import { useMediaQuery, useTheme } from "@mui/material";
-// WARNING: You won't be able to connect to local backend unless you remove the env variable below.
-const URL =
-  process.env.BELINDAS_CLOSET_PUBLIC_API_URL || "http://localhost:3000/api";
+
+const URL =  process.env.BELINDAS_CLOSET_PUBLIC_API_URL;
 /**
  * Props for the ConfirmArchiveDialog component.
  */

diff --git a/components/ConfirmDeleteDialog.tsx b/components/ConfirmDeleteDialog.tsx
@@ -7,9 +7,8 @@ import React, { useState } from "react";
 import { Product } from "@/app/category-page/[categoryId]/products/[productId]/ProductDetailDisplay";
 import Snackbar, { SnackbarOrigin } from "@mui/material/Snackbar";
 import { useMediaQuery, useTheme } from "@mui/material";
-// WARNING: You won't be able to connect to local backend unless you remove the env variable below.
-const URL =
-  process.env.BELINDAS_CLOSET_PUBLIC_API_URL || "http://localhost:3000/api";
+
+const URL = process.env.BELINDAS_CLOSET_PUBLIC_API_URL;
 /**
  * Props for the ConfirmDeleteDialog component.
  */

diff --git a/components/EditProductDialog.tsx b/components/EditProductDialog.tsx
@@ -19,8 +19,7 @@ import {
 import { TextField, useMediaQuery, useTheme } from "@mui/material";
 import { Padding } from "@mui/icons-material";
 // WARNING: You won't be able to connect to local backend unless you remove the env variable below.
-const URL =
-  process.env.BELINDAS_CLOSET_PUBLIC_API_URL || "http://localhost:3000/api";
+const URL = process.env.BELINDAS_CLOSET_PUBLIC_API_URL;
 
 /**
  * Props for the EditProductDialog component.

diff --git a/components/EditUserRoleDialog.tsx b/components/EditUserRoleDialog.tsx
@@ -13,9 +13,8 @@ import FormControlLabel from "@mui/material/FormControlLabel";
 import React, { useEffect, useRef, useState } from "react";
 import { UserCardProps } from "./UserCard";
 import { useMediaQuery, useTheme } from "@mui/material";
-// WARNING: You won't be able to connect to local backend unless you remove the env variable below.
-const URL =
-  process.env.BELINDAS_CLOSET_PUBLIC_API_URL || "http://localhost:3000/api";
+
+const URL = process.env.BELINDAS_CLOSET_PUBLIC_API_URL;
 
 const options = ["admin", "creator", "user"];
 

diff --git a/components/ProductCard.tsx b/components/ProductCard.tsx
@@ -8,9 +8,8 @@ import { Stack, Button, Link, useTheme, useMediaQuery } from "@mui/material";
 import Image from "next/image";
 import DeleteIcon from "@mui/icons-material/Delete";
 import ArchiveIcon from "@mui/icons-material/Archive";
-// WARNING: You won't be able to connect to local backend unless you remove the env variable below.
-const URL =
-  process.env.BELINDAS_CLOSET_PUBLIC_API_URL || "http://localhost:3000/api";
+
+const URL = process.env.BELINDAS_CLOSET_PUBLIC_API_URL;
 
 type ProductCardProps = {
   image: StaticImageData;

diff --git a/next.config.js b/next.config.js
@@ -3,8 +3,8 @@ const nextConfig = {
   distDir: "build",
   //reactStrictMode: false, // Uncomment to test API behavior using front-end
   env: {
-    // variable call would be process.env.BELINDAS_CLOSET_PUBLIC_API_URL,
-    BELINDAS_CLOSET_PUBLIC_API_URL: "https://belindascloset.com/api",
+    // Check env.local file to update API address
+    BELINDAS_CLOSET_PUBLIC_API_URL: process.env.API_URL,
   },
 };