完善搜索功能

zoujia · Jun 1, 2024 · 5c24f9f · 5c24f9f
1 parent 6379afa
commit 5c24f9f
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 17 deletions.
diff --git a/src/main.jsx b/src/main.jsx
@@ -13,6 +13,10 @@ import Contact, {
 import EditContact, {
   action as editAction
 } from './routes/edit';
+import DestroyContact, {
+  destroy as destroyAction
+} from './routes/destroy';
+import Index from './routes';
 
 const router = createBrowserRouter([
   {
@@ -22,6 +26,10 @@ const router = createBrowserRouter([
     loader: rootLoader,
     action: rootAction,
     children: [
+      {
+        index: true,
+        element: <Index />
+      },
       {
         path: 'contacts/:contactId',
         element: <Contact />,
@@ -32,6 +40,12 @@ const router = createBrowserRouter([
         element: <EditContact />,
         loader: contactLoader,
         action: editAction
+      },
+      {
+        path: 'contacts/:contactId/destroy',
+        element: <DestroyContact />,
+        action: destroyAction,
+        errorElement: <div>Oops! There was an error.</div>
       }
     ]
   }

diff --git a/src/routes/contact.jsx b/src/routes/contact.jsx
@@ -9,15 +9,6 @@ export async function loader({ params }) {
 export default function Contact() {
     const { contact } = useLoaderData();
 
-    // const contact = {
-    //     first: "Your",
-    //     last: "Name",
-    //     avatar: "https://placekitten.com/g/200/200",
-    //     twitter: "your_handle",
-    //     notes: "Some notes",
-    //     favorite: true,
-    // };
-
     return (
         <div id="contact">
             <div>

diff --git a/src/routes/destroy.jsx b/src/routes/destroy.jsx
@@ -0,0 +1,12 @@
+import { redirect } from "react-router-dom";
+import { deleteContact } from "../contacts";
+
+export async function destroy({ params }) {
+    throw Error('Oh dang!');
+    // await deleteContact(params.contactId);
+    // return redirect('/');
+}
+
+export default function DestroyContact() {
+    return <></>;
+}
diff --git a/src/routes/edit.jsx b/src/routes/edit.jsx
@@ -1,4 +1,4 @@
-import { useLoaderData, Form, redirect } from "react-router-dom";
+import { useLoaderData, Form, redirect, useNavigate } from "react-router-dom";
 import { updateContact } from "../contacts";
 
 export async function action({ request, params }) {
@@ -11,6 +11,7 @@ export async function action({ request, params }) {
 
 export default function EditContact() {
     const { contact } = useLoaderData();
+    const navigate = useNavigate();
 
     return (
         <Form method="post" id="contact-form">
@@ -60,7 +61,10 @@ export default function EditContact() {
             </label>
             <p>
                 <button type="submit">Save</button>
-                <button type="cancel">Cancel</button>
+                <button
+                    type="button"
+                    onClick={() => navigate(-1)}
+                >Cancel</button>
             </p>
         </Form>
     );

diff --git a/src/routes/index.jsx b/src/routes/index.jsx
@@ -0,0 +1,14 @@
+
+export default function Index() {
+    return (
+        <p id="zero-state">
+            This is a demo for React Router.
+            <br />
+            Check out {' '}
+            <a href="https://reactrouter.com">
+                the docs at reactrouter.com
+            </a>
+            .
+        </p>
+    );
+}
diff --git a/src/routes/root.jsx b/src/routes/root.jsx
@@ -1,4 +1,4 @@
-import { Outlet, useLoaderData, Form, redirect, NavLink } from "react-router-dom";
+import { Outlet, useLoaderData, Form, redirect, NavLink, useNavigation } from "react-router-dom";
 import { createContact, getContacts } from '../contacts';
 
 export async function action() {
@@ -7,20 +7,24 @@ export async function action() {
     return redirect(`/contacts/${contact.id}/edit`);
 }
 
-export async function loader () {
-    const contacts = await getContacts();
+export async function loader ({ request }) {
+    const url = new URL(request.url);
+    const q = url.searchParams.get('q');
+
+    const contacts = await getContacts(q);
     return { contacts };
 }
 
 export default function Root() {
     const { contacts } = useLoaderData();
+    const navigation = useNavigation();
 
     return (
         <>
             <div id="sidebar">
                 <h1>React Rooter Contacts</h1>
                 <div>
-                    <form id="search-form" role="search">
+                    <Form id="search-form" role="search">
                         <input
                             id="q"
                             aria-label="Search contacts"
@@ -37,7 +41,7 @@ export default function Root() {
                             className="sr-only"
                             aria-live="polite"
                         ></div>
-                    </form>
+                    </Form>
                     <Form method="post">
                         <button type="submit">New</button>
                     </Form>
@@ -71,7 +75,12 @@ export default function Root() {
                     )}
                 </nav>
             </div>
-            <div id="detail">
+            <div
+                id="detail"
+                className={
+                    navigation.state === 'loading' ? 'loading' : ''
+                }
+            >
                 <Outlet />
             </div>
         </>