Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 | 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 3x 3x 3x 1x 1x 1x 1x 1x 15x 1x 1x 1x 16x 3x 2x 2x 1x | import { useNavigate } from "@tanstack/react-router";
import { useState } from "react";
import {
useAdminProSearch,
useEnqueueImport,
} from "../../hooks/queries/useAdminImports";
export function AdminImportsNewPage() {
const [proId, setProId] = useState("");
const [proLabel, setProLabel] = useState("");
const [proSearch, setProSearch] = useState("");
const [sourceUrl, setSourceUrl] = useState("");
const [consent, setConsent] = useState(false);
const navigate = useNavigate();
const enqueue = useEnqueueImport();
const proResults = useAdminProSearch(proSearch);
const canSubmit =
proId.trim().length > 0 &&
sourceUrl.trim().length > 0 &&
consent &&
!enqueue.isPending;
const pickPro = (id: string, label: string) => {
setProId(id);
setProLabel(label);
setProSearch("");
};
async function handleSubmit(e: React.FormEvent) {
e.preventDefault();
Iif (!canSubmit) return;
const result = await enqueue.mutateAsync({
proId: proId.trim(),
sourceUrl: sourceUrl.trim(),
consentAt: Date.now(),
});
Eif (result?.importId) {
void navigate({
to: "/admin/imports/$importId",
params: { importId: result.importId },
});
}
}
return (
<div className="p-6 max-w-2xl mx-auto">
<h1 className="text-2xl font-semibold text-stone-900 mb-2">
New pro import
</h1>
<p className="text-sm text-stone-500 mb-6">
Paste a Houzz.in or website URL. Scrape runs for up to 25 minutes; you
can return to this page to monitor progress.
</p>
<form onSubmit={handleSubmit} className="space-y-5">
<div>
<label
htmlFor="proSearch"
className="block text-sm font-medium text-stone-700 mb-1"
>
Pro
</label>
{proId ? (
<div className="flex items-center justify-between px-3 py-2 border border-stone-300 rounded-md text-sm bg-stone-50">
<span>
<strong>{proLabel}</strong>{" "}
<span className="font-mono text-stone-500">({proId})</span>
</span>
<button
type="button"
onClick={() => {
setProId("");
setProLabel("");
}}
className="text-xs text-orange-600 hover:underline"
>
Change
</button>
</div>
) : (
<>
<input
id="proSearch"
type="text"
value={proSearch}
onChange={(e) => setProSearch(e.target.value)}
placeholder="Search by business name…"
className="w-full px-3 py-2 border border-stone-300 rounded-md text-sm"
/>
{proResults.data && proResults.data.length > 0 && (
<ul className="mt-1 max-h-48 overflow-y-auto border border-stone-200 rounded-md bg-white shadow-sm">
{proResults.data.map((p) => (
<li key={p.id}>
<button
type="button"
onClick={() => pickPro(p.id, p.businessName)}
className="w-full text-left px-3 py-2 text-sm hover:bg-stone-50"
>
<span className="font-medium">{p.businessName}</span>{" "}
<span className="font-mono text-xs text-stone-500">
{p.id}
</span>
</button>
</li>
))}
</ul>
)}
{proResults.data && proResults.data.length === 0 && proSearch && (
<p className="text-xs text-stone-500 mt-1">No matches.</p>
)}
</>
)}
</div>
<div>
<label
htmlFor="sourceUrl"
className="block text-sm font-medium text-stone-700 mb-1"
>
Source URL
</label>
<input
id="sourceUrl"
type="url"
value={sourceUrl}
onChange={(e) => setSourceUrl(e.target.value)}
placeholder="https://www.houzz.in/pro/example"
className="w-full px-3 py-2 border border-stone-300 rounded-md text-sm"
/>
</div>
<label className="flex items-start gap-2 text-sm text-stone-700">
<input
type="checkbox"
checked={consent}
onChange={(e) => setConsent(e.target.checked)}
className="mt-1"
/>
<span>
I confirm that scraping this URL complies with site terms and that
we have the pro's consent to import their data.
</span>
</label>
{enqueue.isError && (
<p className="text-sm text-red-600">
{(enqueue.error as Error).message}
</p>
)}
<div className="flex justify-end gap-2">
<button
type="button"
onClick={() => navigate({ to: "/admin/imports" })}
className="px-4 py-2 text-sm text-stone-700 border border-stone-300 rounded-md hover:bg-stone-50"
>
Cancel
</button>
<button
type="submit"
disabled={!canSubmit}
className="px-4 py-2 bg-orange-600 text-white text-sm font-medium rounded-md hover:bg-orange-700 disabled:opacity-50 disabled:cursor-not-allowed"
>
{enqueue.isPending ? "Starting…" : "Start import"}
</button>
</div>
</form>
</div>
);
}
export default AdminImportsNewPage;
|