Fix: Use centralized API functions instead of manual URL construction

- ComparisonView now uses fetchComparison from lib/api
- SchoolSearchModal now uses fetchSchools from lib/api
- Fixed bug in fetcher function that incorrectly sliced URLs
  (url.slice(4) was removing '/com' from '/compare')

This fixes the malformed URL issue where '/api/compare' became '/apipare'.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

nextjs-app/components/ComparisonView.tsx

@@ -13,6 +13,7 @@ import { SchoolSearchModal } from './SchoolSearchModal';
 import { EmptyState } from './EmptyState';
 import type { ComparisonData, MetricDefinition } from '@/lib/types';
 import { formatPercentage, formatProgress } from '@/lib/utils';
+import { fetchComparison } from '@/lib/api';
 import styles from './ComparisonView.module.css';
 
 interface ComparisonViewProps {
@@ -55,13 +56,8 @@ export function ComparisonView({
 
     // Fetch comparison data
     if (selectedSchools.length > 0) {
-      const apiBaseUrl = process.env.NEXT_PUBLIC_API_URL || '/api';
       console.log('Fetching comparison data for URNs:', urns);
-      fetch(`${apiBaseUrl}/compare?urns=${urns}`)
-        .then((res) => {
-          console.log('Comparison API response status:', res.status);
-          return res.json();
-        })
+      fetchComparison(urns, { cache: 'no-store' })
         .then((data) => {
           console.log('Comparison data received:', data);
           setComparisonData(data.comparison);

nextjs-app/components/SchoolSearchModal.tsx

@@ -9,6 +9,7 @@ import { useState, useMemo } from 'react';
 import { Modal } from './Modal';
 import { useComparison } from '@/hooks/useComparison';
 import { debounce } from '@/lib/utils';
+import { fetchSchools } from '@/lib/api';
 import type { School } from '@/lib/types';
 import styles from './SchoolSearchModal.module.css';
 
@@ -36,9 +37,7 @@ export function SchoolSearchModal({ isOpen, onClose }: SchoolSearchModalProps) {
 
         setIsSearching(true);
         try {
-          const apiBaseUrl = process.env.NEXT_PUBLIC_API_URL || '/api';
-          const response = await fetch(`${apiBaseUrl}/schools?search=${encodeURIComponent(term)}&page_size=10`);
-          const data = await response.json();
+          const data = await fetchSchools({ search: term, page_size: 10 }, { cache: 'no-store' });
           setResults(data.schools || []);
           setHasSearched(true);
         } catch (error) {

nextjs-app/lib/api.ts

@@ -272,7 +272,9 @@ export async function fetchDataInfo(
  * ```
  */
 export async function fetcher<T>(url: string): Promise<T> {
-  const fullUrl = url.startsWith('http') ? url : `${API_BASE_URL}${url.startsWith('/') ? url.slice(4) : url}`;
+  // If it's already a full URL, use it directly
+  // Otherwise, prepend the API_BASE_URL
+  const fullUrl = url.startsWith('http') ? url : `${API_BASE_URL}${url.startsWith('/') ? url : `/${url}`}`;
 
   const response = await fetch(fullUrl);
   return handleResponse<T>(response);