/** @jsxImportSource https://esm.sh/react@18.2.0 */ import isPointWithinRadius from "https://esm.sh/geolib/es/isPointWithinRadius"; import { useLoaderData } from "https://esm.sh/react-router-dom@6.23.0?deps=react@18.2.0,react-dom@18.2.0"; import date_me_doc_locations_geo from "https://esm.town/v/stevekrouse/date_me_doc_locations_geo"; import { nominatimSearch } from "https://esm.town/v/stevekrouse/nominatimSearch"; function absoluteURL(url) { if (url.startsWith("http://") || url.startsWith("https://")) return url; else return "https://" + url; } let headers = [ "Name", "Age", "Gender", "InterestedIn", "Style", "Location", "LocationFlexibility", "Contact", "LastUpdated", ]; let linkClass = "text-sky-600 hover:text-sky-500"; function httpsIfy(url: string) { if (!url.startsWith("http://") && !url.startsWith("https://")) { return `https://${url}`; } return url; } // TODO - refactor this into a Cell React component function renderCell(header, row) { let data = row[header]; if (header === "Name") { return {data}; } else if (Array.isArray(data)) { return data.map(d => {d}); } else if (header === "LastUpdated") { return new Date(data).toISOString().split("T")[0]; } else { return data; } } function convertParams(url) { const params = new URL(url).searchParams; const search = { gender: params.get("gender"), desiredGender: params.get("desired-gender"), minAge: params.get("min-age")?.length ? params.get("min-age") : 0, maxAge: params.get("max-age")?.length ? params.get("max-age") : 100, location: params.get("location"), radius: params.get("radius"), }; return search; } const metersInMile = 1609.34; function withinRadius( profileLocation: string[], searchLocation: { lat: number; lon: number }, radius: number, ) { if (!profileLocation) return false; if (!Array.isArray(profileLocation)) profileLocation = [profileLocation]; const profileLocations = profileLocation.map(l => date_me_doc_locations_geo[l]); return profileLocations.some(location => { return location && isPointWithinRadius(location, searchLocation, radius * metersInMile); }); } export async function loader({ request }) { "use server"; // this is not a real feature; just me reminding myself I'm on the server const { zip } = await import("npm:lodash-es"); const { sqlite } = await import("https://esm.town/v/std/sqlite"); const search = convertParams(request.url); let { columns, rows } = await sqlite.execute({ sql: `select * from datemedocs where Age >= ? and Age <= ? and Gender like ? and InterestedIn like ? order by LastUpdated desc `, args: [ search.minAge, search.maxAge, "%" + (search.desiredGender ?? "") + "%", "%" + (search.gender ?? "") + "%", ], }); const searchLocation = search["location"]?.length ? await nominatimSearch({ q: search["location"] }) : undefined; const searchLatLon = searchLocation && { lat: parseFloat(searchLocation[0].lat), lon: parseFloat(searchLocation[0].lon) }; const profiles = rows.map(row => Object.fromEntries(zip( columns, row.map(d => { try { return JSON.parse(d); } catch (_) { return d; } }), )) ).filter(profile => searchLocation ? withinRadius(profile.Location, searchLatLon, parseInt(search.radius)) : true); return Response.json({ profiles }); } export function Browse() { const search = convertParams(window.location.href); const { profiles } = useLoaderData() as any; // TODO - get good typing return ( <>

You are {search.gender?.length ? search.gender : "any gender"}{" "}looking for{" "} {search.desiredGender?.length ? search.desiredGender : "any gender"}{" "}bewteen the ages of{" "} {search.minAge}{" "}and{" "}{search.maxAge} in{" "} {search.location?.length ? search.location : "the world"}. There are{" "}{profiles.length}{" "} profiles for you.

Redo Search

Clear filters

{headers.map(h => )} {profiles.map(d => ( {headers.map(h => ( ))} ))}

{h}
{renderCell(h, d)}

); }