- Find an Artisan -
-- Artisans near you ready to help. -
- - {locationStatus === "denied" && ( -
-
- )}
- {/* Desktop Filter Bar */}
- Location access denied. Displaying results for default location.
- -
-
-
- {/* Mobile Filter Button */}
-
-
-
-
-
-
- setMinRating(Number(e.target.value))}
- className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-600"
- />
-
-
- setIsAvailable(e.target.checked)}
- className="w-5 h-5 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 cursor-pointer"
- />
-
-
-
-
-
-
-
- {/* Mobile Filter Drawer */}
- {isFilterDrawerOpen && (
- - {total} results -
-
-
setIsFilterDrawerOpen(false)}
- />
-
-
- (null);
const [kit, setKit] = useState(null);
+ const kitRef = useRef(null);
+
useEffect(() => {
- import("@creit.tech/stellar-wallets-kit").then(
- ({
- StellarWalletsKit: Kit,
- WalletNetwork,
- allowAllModules,
- FREIGHTER_ID,
- }) => {
- setKit(
- new Kit({
+ let isMounted = true;
+
+ if (!kitRef.current) {
+ import("@creit.tech/stellar-wallets-kit").then(
+ ({
+ StellarWalletsKit: Kit,
+ WalletNetwork,
+ allowAllModules,
+ FREIGHTER_ID,
+ }) => {
+ if (!isMounted) return;
+ const newKit = new Kit({
network: WalletNetwork.TESTNET,
selectedWalletId: FREIGHTER_ID,
modules: allowAllModules(),
- })
- );
+ });
+ kitRef.current = newKit as WalletKitInstance;
+ setKit(kitRef.current);
+ }
+ );
+ }
+
+ return () => {
+ isMounted = false;
+ // Ensure event listeners for the wallet kit are properly cleaned up on unmount
+ if (kitRef.current) {
+ const currentKit = kitRef.current as any;
+ if (typeof currentKit.removeEventListeners === "function") {
+ currentKit.removeEventListeners();
+ } else if (typeof currentKit.disconnect === "function") {
+ currentKit.disconnect();
+ }
}
- );
+ };
}, []);
const connect = useCallback(async () => {
diff --git a/frontend/lib/api.ts b/frontend/lib/api.ts
index c5b9608..51aa50f 100644
--- a/frontend/lib/api.ts
+++ b/frontend/lib/api.ts
@@ -13,39 +13,52 @@ async function request(
options: RequestInit & { token?: string } = {},
): Promise {
const { token, ...init } = options;
+
const url = `${getBaseUrl()}${path.startsWith("/") ? path : `/${path}`}`;
+
const headers: HeadersInit = {
...(init.headers as Record),
};
+
if (!(init.body instanceof FormData)) {
headers["Content-Type"] = "application/json";
}
+
if (token) {
(headers as Record)["Authorization"] = `Bearer ${token}`;
}
+
const res = await fetch(url, { ...init, headers });
const text = await res.text();
+
if (!res.ok) {
let message = res.statusText;
+
try {
const json = JSON.parse(text);
- message =
- json.detail ??
- (typeof json.detail === "string" ? json.detail : message);
- if (Array.isArray(json.detail))
+
+ if (typeof json.detail === "string") {
+ message = json.detail;
+ } else if (Array.isArray(json.detail)) {
message =
json.detail.map((d: { msg?: string }) => d.msg ?? "").join("; ") ||
message;
+ }
} catch {
if (text) message = text;
}
+
throw new Error(message);
}
+
if (!text) return undefined as T;
+
return JSON.parse(text) as T;
}
-// --- Types (aligned with backend schemas) ---
+/* =========================
+ TYPES
+========================= */
export interface UserOut {
id: number;
@@ -155,7 +168,9 @@ interface PaginatedArtisansResponse {
page_size: number;
}
-// --- API object ---
+/* =========================
+ API
+========================= */
export const api = {
auth: {
@@ -164,6 +179,7 @@ export const api = {
method: "POST",
body: JSON.stringify(body),
}),
+
register: (body: {
email: string;
password: string;
@@ -176,18 +192,22 @@ export const api = {
body: JSON.stringify(body),
}),
},
+
users: {
me: (token: string) =>
request("/users/me", { method: "GET", token }),
+
updateMe: (body: Partial, token: string) =>
request("/users/me", {
method: "PUT",
body: JSON.stringify(body),
token,
}),
+
uploadAvatar: (file: File, token: string) => {
const formData = new FormData();
formData.append("file", file);
+
return request("/users/me/avatar", {
method: "POST",
body: formData,
@@ -195,17 +215,21 @@ export const api = {
});
},
},
+
artisans: {
me: (token: string) =>
request("/artisans/me", { method: "GET", token }),
+
nearby: (
lat: number,
lon: number,
opts: {
page?: number;
page_size?: number;
- skill?: string;
+ specialties?: string[];
min_rating?: number;
+ max_price?: number;
+ min_experience?: number;
is_available?: boolean;
} = {},
) => {
@@ -215,15 +239,35 @@ export const api = {
page: String(opts.page ?? 1),
page_size: String(opts.page_size ?? 10),
});
- if (opts.skill) params.append("skill", opts.skill);
- if (opts.min_rating !== undefined && opts.min_rating > 0)
+
+ if (opts.specialties && opts.specialties.length > 0) {
+ opts.specialties.forEach((s) => params.append("specialties", s));
+ }
+
+ if (opts.min_rating && opts.min_rating > 0) {
params.append("min_rating", String(opts.min_rating));
- if (opts.is_available !== undefined)
+ }
+
+ if (opts.max_price && opts.max_price > 0) {
+ params.append("max_price", String(opts.max_price));
+ }
+
+ if (opts.min_experience && opts.min_experience > 0) {
+ params.append("min_experience", String(opts.min_experience));
+ }
+
+ if (opts.is_available !== undefined) {
params.append("is_available", String(opts.is_available));
- return request(`/artisans/nearby?${params}`);
+ }
+
+ return request(
+ `/artisans/nearby?${params.toString()}`,
+ );
},
+
getProfile: (artisanId: number) =>
request(`/artisans/${artisanId}/profile`),
+
updateProfile: (body: ArtisanProfileUpdate, token: string) =>
request("/artisans/profile", {
method: "PUT",
@@ -231,12 +275,14 @@ export const api = {
token,
}),
},
+
bookings: {
myBookings: (token: string) =>
request("/bookings/my-bookings", {
method: "GET",
token,
}),
+
create: (body: BookingCreate, token: string) =>
request("/bookings/create", {
method: "POST",
@@ -244,8 +290,9 @@ export const api = {
token,
}),
},
+
notifications: {
- get: (token: string, skip: number = 0, limit: number = 50) =>
+ get: (token: string, skip = 0, limit = 50) =>
request(
`/notifications/?skip=${skip}&limit=${limit}`,
{
@@ -253,25 +300,35 @@ export const api = {
token,
},
),
+
getUnreadCount: (token: string) =>
request<{ unread_count: number }>("/notifications/unread-count", {
method: "GET",
token,
}),
+
markAsRead: (token: string, notificationId: string) =>
- request(`/notifications/${notificationId}/read`, {
- method: "PUT",
- token,
- }),
+ request(
+ `/notifications/${notificationId}/read`,
+ {
+ method: "PUT",
+ token,
+ },
+ ),
+
markAllAsRead: (token: string) =>
request<{ message: string }>("/notifications/mark-all-read", {
method: "PUT",
token,
}),
+
delete: (token: string, notificationId: string) =>
- request<{ message: string }>(`/notifications/${notificationId}`, {
- method: "DELETE",
- token,
- }),
+ request<{ message: string }>(
+ `/notifications/${notificationId}`,
+ {
+ method: "DELETE",
+ token,
+ },
+ ),
},
-};
+};
\ No newline at end of file
-
-
- Filters
- -
-
- )}
- {error && (
-
-
-
-
-
-
-
- setMinRating(Number(e.target.value))}
- className="w-full h-2 bg-gray-100 rounded-lg appearance-none cursor-pointer accent-blue-600"
- />
-
-
-
- 0
- 1
- 2
- 3
- 4
- 5
-
-
-
-
+
- Find an Artisan
+Artisans near you ready to help.
+ +
+
+ {/* Sidebar */}
+
+ checked={specialties.includes(s)}
+ onChange={(e) =>
+ e.target.checked
+ ? setSpecialties([...specialties, s])
+ : setSpecialties(specialties.filter((x) => x !== s))
+ }
+ />{" "}
+ {s}
+
+ ))}
+
-
-
-
+ {/* Rating */}
+
+
- Min Rating: {minRating}
+ setMinRating(Number(e.target.value))} + />{error}
- )} + {/* Price */} +
+
- Max Price
+ + setMaxPrice(e.target.value ? Number(e.target.value) : "") + } + className="w-full border p-2" + /> +
-
);
diff --git a/frontend/context/WalletContext.tsx b/frontend/context/WalletContext.tsx
index b7b4341..d1b24eb 100644
--- a/frontend/context/WalletContext.tsx
+++ b/frontend/context/WalletContext.tsx
@@ -7,6 +7,7 @@ import {
useCallback,
useMemo,
useEffect,
+ useRef,
ReactNode,
} from "react";
@@ -41,23 +42,43 @@ export function WalletProvider({ children }: { children: ReactNode }) {
const [address, setAddress] = useState
-
-
-
- - Search Results -
-- {showInitialSkeleton ? "Finding artisans near you" : `${total} artisans available`} -
-- {loading - ? hasLoadedResults - ? "Updating the list with your latest filters." - : "Loading cards and map markers for this area." - : "Browse detailed cards while the map keeps nearby context in view."} -
-
- {locationStatus === "granted" ? "Live location" : "Fallback location"}
-
+ {/* Experience */}
+
+
- Min Experience
+ + setMinExperience(e.target.value ? Number(e.target.value) : "") + } + className="w-full border p-2" + />
- {Array.from({ length: 6 }).map((_, i) => (
-
- ) : artisans.length === 0 ? (
-
-
- ) : (
- <>
- No artisans found
-Try adjusting your filters to find what you're looking for.
- -
-
+
- {artisans.map((a) => (
-
-
-
-
+
-
- {total > pageSize && (
-
-
- {loading && (
-
-
-
-
+ {/* Availability */}
+
+
+
+
+
+ {/* Main Content */}
+
-
-
-
- ))}
-
+ {/* Availability */}
+
+
+
+
+
+ {/* Main Content */}
+
+ {error && {error}
}
+
+ {loading ? (
+ Loading...
+ ) : artisans.length === 0 ? (
+
+ No artisans found
+
+
+ ) : (
+ <>
+
+ {artisans.map((a) => (
+
+
+
+
{a.business_name || specialtyLabel(a)}
-
-
+
-
- {a.rating != null && (
-
-
- )}
- {a.hourly_rate != null && (
-
-
- )}
-
-
-
-
- {a.is_available && (
-
- Available now
-
+
+ {a.rating && (
+
+
)}
- {a.distance_km != null && (
-
- {Number(a.distance_km).toFixed(1)} km away
-
+
+ {a.hourly_rate && (
+
+
)}
-
-
{error}
} + + {loading ? ( +Loading...
+ ) : artisans.length === 0 ? ( +
+
+ ) : (
+ <>
+ No artisans found
+ +
+ {artisans.map((a) => (
+
+
+
+
- {a.business_name || specialtyLabel(a)}
-
-
+
- {a.rating != null && (
-
-
-
-
+
+
-
-
-
- )}
-
-
-
+
+ {/* Pagination */}
+ {total > pageSize && (
+
- Page {page} of {Math.ceil(total / pageSize)}
+
+
+
+ ))}
-
-
+
+
+ {page} / {Math.ceil(total / pageSize)}
+
+
+
+ )}
+
)}
-
- )}
+