fix: improve onboarding and unify environment variables by Benbenzhouz · Pull Request #242 · Dispatch-AI-com/frontend

Benbenzhouz · 2025-12-21T09:30:37Z

Changes

Onboarding Improvements

Fixed undefined value handling in UserInputArea
Fixed AddressAutocomplete undefined errors
Improved address input validation

Environment Variables Unification

Unified API URL: use only NEXT_PUBLIC_API_BASE_URL
Removed hardcoded localhost URLs
Created centralized api-config.ts utility
Removed all fallback environment variables

Other Fixes

Fixed ESLint errors (prefer nullish coalescing)
Improved error handling

Environment Variables

NEXT_PUBLIC_API_BASE_URL (API base URL)

…ser input

- Replace || with ?? in AuthCallbackContent.tsx - Replace || with ?? in UserInputArea.tsx - Replace || with ?? in GoogleOAuthButton.tsx - Replace || with ?? in AddressAutocomplete.tsx - Replace || with ?? in publicApiSlice.ts - Replace || with ?? in axiosBaseQuery.ts - Fix useEffect dependency in AddressAutocomplete.tsx - Remove console.log statements in AuthCallbackContent.tsx

- Create unified getApiBaseUrl() utility function - Remove hardcoded localhost fallbacks from all files - Production environment now requires API URL to be configured - Development environment allows localhost fallback with warning - Improves code quality and prevents production misconfigurations Files updated: - src/utils/api-config.ts (new) - src/services/places.ts - src/lib/axiosBaseQuery.ts - src/features/public/publicApiSlice.ts - src/components/GoogleOAuthButton.tsx - src/app/(public)/blogs/page.tsx - src/app/(public)/blogs/components/BlogList.tsx - src/app/(public)/blogs/[id]/page.tsx

- Remove unnecessary NEXT_PUBLIC_API_BASE_URL fallback - Use only NEXT_PUBLIC_API_URL as it's the actual configured variable - Simplify code and error messages

- Change from NEXT_PUBLIC_API_URL to NEXT_PUBLIC_API_BASE_URL - This matches the actual configured environment variable name

Copilot

Pull request overview

This PR unifies environment variable handling by centralizing API URL configuration and improves the onboarding experience by fixing undefined value handling in address and input components. The changes introduce a new getApiBaseUrl() utility function to replace scattered environment variable references throughout the codebase.

Key Changes

Created centralized api-config.ts utility with development fallback for API URL configuration
Updated 9 files to use the new getApiBaseUrl() function instead of direct environment variable access
Enhanced type safety in onboarding components by properly handling undefined values in AddressAutocomplete and UserInputArea

Reviewed changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
src/utils/api-config.ts	New utility function providing centralized API URL configuration with development fallback
src/services/places.ts	Replaced direct env var access with `getApiBaseUrl()`
src/lib/axiosBaseQuery.ts	Updated to use `getApiBaseUrl()` and fixed ESLint nullish coalescing preference
src/features/public/publicApiSlice.ts	Replaced direct env var access with `getApiBaseUrl()`
src/components/ui/AddressAutocomplete.tsx	Enhanced undefined handling and improved address formatting with backend validation
src/components/GoogleOAuthButton.tsx	Replaced hardcoded localhost fallback with `getApiBaseUrl()`
src/app/onboarding/components/UserInputArea.tsx	Added proper undefined handling for user input prop
src/app/auth/callback/AuthCallbackContent.tsx	Added validation for parsed user data with fallback values
src/app/(public)/blogs/page.tsx	Replaced hardcoded localhost with `getApiBaseUrl()`
src/app/(public)/blogs/components/BlogList.tsx	Replaced hardcoded localhost with `getApiBaseUrl()`
src/app/(public)/blogs/[id]/page.tsx	Replaced hardcoded localhost with `getApiBaseUrl()` in server component
package.json	Added explicit port specification to dev script

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-21T09:34:18Z

src/components/ui/AddressAutocomplete.tsx

+      const state = components.administrativeAreaLevel1
+        .toUpperCase()
+        .substring(0, 3);
+      statePostcode.push(state);


The comment states "Ensure state is uppercase and 2-3 characters", but the code uses substring(0, 3) which always limits to a maximum of 3 characters. This doesn't enforce a minimum of 2 characters. If the state abbreviation is less than 2 characters, it should be validated or handled appropriately. Consider adding validation to ensure the state code meets the expected format (e.g., 2-3 uppercase letters).

Suggested change

const state = components.administrativeAreaLevel1

.toUpperCase()

.substring(0, 3);

statePostcode.push(state);

const rawState = components.administrativeAreaLevel1.toUpperCase();

if (rawState.length >= 2) {

const state = rawState.substring(0, 3);

statePostcode.push(state);

}

Copilot · 2025-12-21T09:34:19Z

src/services/places.ts

-const API_BASE = process.env.NEXT_PUBLIC_API_BASE_URL ?? '';
+import { getApiBaseUrl } from '@/utils/api-config';
+
+const API_BASE = getApiBaseUrl();


Calling getApiBaseUrl() at module initialization (top-level) can cause issues in Next.js. If this module is imported by a server component during build time, it will execute before environment variables are properly set up, and the NODE_ENV check in getApiBaseUrl() may not work as expected. Consider making API_BASE a function that calls getApiBaseUrl() lazily when needed, or ensure this module is only imported in client components.

Copilot · 2025-12-21T09:34:19Z

src/features/public/publicApiSlice.ts

  reducerPath: 'publicApi',
  baseQuery: fetchBaseQuery({
-    baseUrl: process.env.NEXT_PUBLIC_API_BASE_URL,
+    baseUrl: getApiBaseUrl(),


Calling getApiBaseUrl() at module initialization can cause issues if this module is imported during server-side rendering or build time. The baseUrl for fetchBaseQuery is evaluated when the module loads, not when the query runs. This means the NODE_ENV check in getApiBaseUrl() may execute in an unexpected context. Consider using a dynamic baseQuery that calls getApiBaseUrl() at query time, or ensure this slice is only used in client-side contexts.

Copilot · 2025-12-21T09:34:19Z

src/utils/api-config.ts

+  if (process.env.NODE_ENV === 'development') {
+    // eslint-disable-next-line no-console
+    console.warn(
+      '⚠️  API base URL not set. Using localhost fallback for development.',
+    );
+    return 'http://localhost:4000/api';
+  }


The use of process.env.NODE_ENV in this function can cause issues when used in server components during build time. In Next.js, server components are pre-rendered at build time, where NODE_ENV is always 'production'. This means the localhost fallback won't be available during development builds for server-side rendered pages. Consider using NEXT_PUBLIC_NODE_ENV if this needs to work in both client and server contexts, or document that this function should only be used in client components and API routes.

Copilot · 2025-12-21T09:34:19Z

src/app/(public)/blogs/[id]/page.tsx

  const { id } = await params;
-  const baseUrl =
-    process.env.NEXT_PUBLIC_API_BASE_URL ?? 'http://localhost:4000/api';
+  const baseUrl = getApiBaseUrl();


This server component is calling getApiBaseUrl() which relies on process.env.NODE_ENV at runtime. In Next.js server components, this will always be 'production' during the build process, even in development mode. This means the localhost fallback in getApiBaseUrl() won't work, and the function will throw an error if NEXT_PUBLIC_API_BASE_URL is not set during development builds. For server components, you should directly access process.env.NEXT_PUBLIC_API_BASE_URL or use a different approach that doesn't rely on NODE_ENV.

Copilot · 2025-12-21T09:34:20Z

src/components/ui/AddressAutocomplete.tsx

+    if (value !== undefined && value !== inputValue) {
+      setInputValue(value ?? '');
+    }
+  }, [value, inputValue]);


This useEffect has a dependency on 'inputValue' which is also being updated inside the effect (via setInputValue). This creates an infinite loop: when 'value' changes, inputValue is set, which triggers this effect again, which sets inputValue again, and so on. The dependency array should only include 'value', not 'inputValue', since you only want to sync when the external prop changes.

Suggested change

}, [value, inputValue]);

}, [value]);

Copilot · 2025-12-21T09:34:20Z

src/app/auth/callback/AuthCallbackContent.tsx

+              email: parsedUser.email ?? '',
+              firstName: parsedUser.firstName ?? '',
+              lastName: parsedUser.lastName ?? '',
+              role: parsedUser.role ?? 'user',
+              status: parsedUser.status ?? 'active',


The validation check on line 53 ensures that _id and email exist before using them. However, lines 65-69 still use the nullish coalescing operator (??) for these fields even though they're guaranteed to be defined at this point. This is redundant and could mask issues. Since the validation already ensures these fields exist, you can use them directly without the fallback operators for _id and email.

- Keep same behavior as before: NEXT_PUBLIC_API_BASE_URL ?? localhost fallback - Remove production environment check to match original usage - Environment variable name unchanged: NEXT_PUBLIC_API_BASE_URL - Function only provides centralized management, no behavior change

Benbenzhouz · 2025-12-21T09:42:24Z

Closing to restore original environment variable names

Ben Zhou and others added 8 commits December 20, 2025 15:13

Fix onboarding: handle undefined values in address autocomplete and u…

41e67a4

…ser input

fix: replace || with ?? operator in places.ts for ESLint compliance

755e8b5

fix: replace remaining || operator with ?? in AddressAutocomplete.tsx

d1989ab

Merge branch 'main' into fix-onboarding

7e971c7

refactor: simplify API config to use only NEXT_PUBLIC_API_URL

c362809

- Remove unnecessary NEXT_PUBLIC_API_BASE_URL fallback - Use only NEXT_PUBLIC_API_URL as it's the actual configured variable - Simplify code and error messages

fix: use NEXT_PUBLIC_API_BASE_URL as the only environment variable

8fb6596

- Change from NEXT_PUBLIC_API_URL to NEXT_PUBLIC_API_BASE_URL - This matches the actual configured environment variable name

Copilot AI review requested due to automatic review settings December 21, 2025 09:30

Copilot started reviewing on behalf of Benbenzhouz December 21, 2025 09:31 View session

Copilot AI reviewed Dec 21, 2025

View reviewed changes

Benbenzhouz closed this Dec 21, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: improve onboarding and unify environment variables#242

fix: improve onboarding and unify environment variables#242
Benbenzhouz wants to merge 9 commits intomainfrom
fix-onboarding

Benbenzhouz commented Dec 21, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Dec 21, 2025

Uh oh!

Copilot AI Dec 21, 2025

Uh oh!

Copilot AI Dec 21, 2025

Uh oh!

Copilot AI Dec 21, 2025

Uh oh!

Copilot AI Dec 21, 2025

Uh oh!

Copilot AI Dec 21, 2025

Uh oh!

Copilot AI Dec 21, 2025

Uh oh!

Benbenzhouz commented Dec 21, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

Benbenzhouz commented Dec 21, 2025

Changes

Onboarding Improvements

Environment Variables Unification

Other Fixes

Environment Variables

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Key Changes

Reviewed changes

Uh oh!

Copilot AI Dec 21, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 21, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 21, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 21, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 21, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 21, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 21, 2025

Choose a reason for hiding this comment

Uh oh!

Benbenzhouz commented Dec 21, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants