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 | 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 3x 3x 3x 2x 2x 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";
import { AdminPageHead } from "../../components/admin/AdminPageHead";
import { Alert } from "../../components/ui/alert";
import { Button } from "../../components/ui/button";
import { Checkbox } from "../../components/ui/checkbox";
import { Field, Label } from "../../components/ui/field";
import { Input } from "../../components/ui/input";
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();
if (!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="max-w-2xl space-y-6">
<AdminPageHead
title="New pro import"
description="Paste a Houzz.in or website URL. Scrape runs for up to 25 minutes; you can return to this page to monitor progress."
/>
<form onSubmit={handleSubmit} className="space-y-5">
<Field controlId="proSearch">
<Label>Pro</Label>
{proId ? (
<div className="flex items-center justify-between gap-2 rounded-md border border-border-strong bg-background-subtle px-3 py-2 text-sm">
<span className="min-w-0 truncate">
<strong>{proLabel}</strong>{" "}
<span className="font-mono text-foreground-muted">
({proId})
</span>
</span>
<Button
variant="ghost"
size="sm"
onClick={() => {
setProId("");
setProLabel("");
}}
>
Change
</Button>
</div>
) : (
<>
<Input
id="proSearch"
type="text"
value={proSearch}
onChange={(e) => setProSearch(e.target.value)}
placeholder="Search by business name…"
/>
{proResults.data && proResults.data.length > 0 && (
// Ruled rows that tint on hover — not a boxed menu.
<ul className="mt-1 max-h-48 overflow-y-auto rounded-md border border-border-default bg-background-elevated">
{proResults.data.map((p) => (
<li
key={p.id}
className="[&+li]:border-t [&+li]:border-border-default"
>
<button
type="button"
onClick={() => pickPro(p.id, p.businessName)}
className="w-full px-3 py-2 text-left text-sm transition-colors hover:bg-foreground-default/7"
>
<span className="font-medium">{p.businessName}</span>{" "}
<span className="font-mono text-xs text-foreground-muted">
{p.id}
</span>
</button>
</li>
))}
</ul>
)}
{proResults.data && proResults.data.length === 0 && proSearch && (
<p className="mt-1 text-xs text-foreground-muted">
No matches.
</p>
)}
</>
)}
</Field>
<Field controlId="sourceUrl">
<Label>Source URL</Label>
<Input
id="sourceUrl"
type="url"
value={sourceUrl}
onChange={(e) => setSourceUrl(e.target.value)}
placeholder="https://www.houzz.in/pro/example"
/>
</Field>
<Checkbox
checked={consent}
onChange={(e) => setConsent(e.target.checked)}
>
I confirm that scraping this URL complies with site terms and that we
have the pro's consent to import their data.
</Checkbox>
{enqueue.isError && (
<Alert variant="error">{(enqueue.error as Error).message}</Alert>
)}
<div className="flex justify-end gap-2 border-t border-border-default pt-3">
<Button
type="button"
variant="outline"
onClick={() => navigate({ to: "/admin/imports" })}
>
Cancel
</Button>
<Button type="submit" disabled={!canSubmit}>
{enqueue.isPending ? "Starting…" : "Start import"}
</Button>
</div>
</form>
</div>
);
}
export default AdminImportsNewPage;
|