Spaces:
Sleeping
Sleeping
File size: 3,034 Bytes
750887b |
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 |
import {
Form,
Outlet,
useLoaderData,
redirect,
NavLink,
useNavigation,
useSubmit,
} from "react-router-dom";
import { createContact, getContacts } from "../contacts";
import { useEffect } from "react";
import { useAuth } from "../providers/AuthProvider";
export async function loader({ request }) {
const url = new URL(request.url);
const q = url.searchParams.get("q");
const contacts = await getContacts(q);
return { contacts, q };
}
export async function action() {
const contact = await createContact();
return redirect(`/contacts/${contact.id}/edit`);
}
export default function Root() {
const { contacts, q } = useLoaderData();
const navigation = useNavigation();
const submit = useSubmit();
const { user } = useAuth();
const searching =
navigation.location &&
new URLSearchParams(navigation.location.search).has("q");
useEffect(() => {
document.getElementById("q").value = q;
}, [q]);
return (
<>
<div id="sidebar">
<h1>React Router Contacts</h1>
<div>
<Form id="search-form" role="search">
<input
id="q"
className={searching ? "loading" : ""}
aria-label="Search contacts"
placeholder="Search"
type="search"
name="q"
defaultValue={q}
onChange={(event) => {
const isFirstSearch = q == null;
submit(event.currentTarget.form, {
replace: !isFirstSearch,
});
}}
/>
<div id="search-spinner" aria-hidden hidden={!searching} />
<div className="sr-only" aria-live="polite"></div>
</Form>
<Form method="post">
<button type="submit">New</button>
</Form>
</div>
<nav>
<ul>
{contacts.length ? (
<ul>
{contacts.map((contact) => (
<li key={contact.id}>
<NavLink
to={`contacts/${contact.id}`}
className={({ isActive, isPending }) =>
isActive ? "active" : isPending ? "pending" : ""
}
>
{contact.first || contact.last ? (
<>
{contact.first} {contact.last}
</>
) : (
<i>No Name</i>
)}{" "}
{contact.favorite && <span>★</span>}
</NavLink>
</li>
))}
</ul>
) : (
<p>
<i>No contacts</i>
</p>
)}
</ul>
</nav>
</div>
<div
id="detail"
className={navigation.state === "loading" ? "loading" : ""}
>
<p>Un mensaje {user.name}</p>
<Outlet />
</div>
</>
);
}
|