feat(api): implement centralized API client and refactor vendor pages

Introduced a new API client in src/lib/api/ to handle requests securely. Refactored vendor pages to use this client. Updated authentication logic in layout and login pages.
This commit is contained in:
2026-02-09 16:25:55 -05:00
parent bd602d58ab
commit a5df1bcacb
14 changed files with 722 additions and 722 deletions

View File

@@ -3,27 +3,11 @@
import { page } from '$app/stores';
import { onMount } from 'svelte';
import { newEnglandStates } from '../../../../lib/states';
interface Listing {
id: number;
company_name: string;
is_active: boolean;
price_per_gallon: number;
price_per_gallon_cash: number | null;
note: string | null;
minimum_order: number | null;
service: boolean;
bio_percent: number;
phone: string | null;
online_ordering: string;
county_id: number;
town: string | null;
user_id: number;
last_edited: string;
}
import { api } from '$lib/api';
import type { Listing, County } from '$lib/api';
const { stateSlug, countySlug } = $page.params as { stateSlug: string; countySlug: string };
let countyData: { id: number; name: string; state: string } | null = null;
let countyData: County | null = null;
let listings: Listing[] = [];
let loading = true;
let listingsLoading = false;
@@ -33,29 +17,18 @@
let sortDirection = 'asc'; // 'asc' or 'desc' - lowest price first
onMount(async () => {
try {
// Ensure API URL matches the Docker port forwarding for API (9552)
const token = localStorage.getItem('auth_token');
const headers: Record<string, string> = {};
if (token) {
headers['Authorization'] = `Bearer ${token}`;
}
const response = await fetch(`http://localhost:9552/state/${stateSlug.toUpperCase()}/${countySlug}`, {
headers
});
if (!response.ok) {
throw new Error(`Failed to fetch county data: ${response.statusText}`);
}
countyData = await response.json();
const result = await api.state.getCounty(stateSlug, countySlug);
if (result.error) {
error = result.error;
countyData = null;
} else {
countyData = result.data;
// Fetch listings for this county
await fetchListings();
} catch (err) {
error = err instanceof Error ? err.message : 'An error occurred while fetching county data.';
countyData = null;
} finally {
loading = false;
}
loading = false;
});
async function fetchListings() {
@@ -63,19 +36,17 @@
listingsLoading = true;
listingsError = null;
try {
const response = await fetch(`http://localhost:9552/listings/county/${countyData.id}`);
if (response.ok) {
listings = await response.json();
sortListings();
} else {
listingsError = 'Failed to load listings';
}
} catch (err) {
listingsError = 'Network error loading listings';
} finally {
listingsLoading = false;
const result = await api.listings.getByCounty(countyData.id);
if (result.error) {
listingsError = 'Failed to load listings';
} else {
listings = result.data || [];
sortListings();
}
listingsLoading = false;
}
function sortListings() {
@@ -260,7 +231,7 @@
</div>
</div>
</td>
<td>{new Date(listing.last_edited).toLocaleDateString()}</td>
<td>{listing.last_edited ? new Date(listing.last_edited).toLocaleDateString() : 'N/A'}</td>
</tr>
{/each}
</tbody>
@@ -319,7 +290,7 @@
</div>
<div>
<span class="font-semibold">Last Updated:</span><br>
<small>{new Date(listing.last_edited).toLocaleDateString()}</small>
<small>{listing.last_edited ? new Date(listing.last_edited).toLocaleDateString() : 'N/A'}</small>
</div>
</div>
</div>