Handle the feature that favorites

Author: YSHgroup

src/main.jsx

@@ -9,7 +9,7 @@ import Root, {
 	loader as rootLoader,
 	action as rootAction,
 } from './routes/root';
-import { loader as contactLoader } from './routes/contact';
+import { loader as contactLoader, action as contactAction } from './routes/contact';
 import './index.css';
 import EditContact from './routes/edit';
 import { action as editAction } from './routes/edit';
@@ -25,10 +25,11 @@ const router = createBrowserRouter([
 		action: rootAction,
 		children: [
 			{ index: true, element: <Index /> },
-			{
+			{	
 				path: 'contacts/:contactId',
 				element: <Contact />,
 				loader: contactLoader,
+				action: contactAction
 			},
 			{
 				path: 'contacts/:contactId/edit',

src/routes/contact.jsx

@@ -1,11 +1,18 @@
-import { Form, useLoaderData } from "react-router-dom";
-import { getContact } from "../contacts";
+import { Form, useLoaderData, useFetcher } from "react-router-dom";
+import { getContact, updateContact } from "../contacts";
 
 export const loader = async({params}) => {
   const contact = await getContact(params.contactId)
   return {contact}
 }
 
+export async function action({ request, params }) {
+  let formData = await request.formData();
+  return updateContact(params.contactId, {
+    favorite: formData.get("favorite") === "true",
+  });
+}
+
 export default function Contact() {
   const {contact} = useLoaderData();
 
@@ -79,9 +86,10 @@ export default function Contact() {
 
 function Favorite({ contact }) {
   // yes, this is a `let` for later
+  const fetcher = useFetcher()
   let favorite = contact.favorite;
   return (
-    <Form method="post">
+    <fetcher.Form method="post">
       <button
         name="favorite"
         value={favorite ? "false" : "true"}
@@ -93,6 +101,6 @@ function Favorite({ contact }) {
       >
         {favorite ? "★" : "☆"}
       </button>
-    </Form>
+    </fetcher.Form>
   );
 }

src/routes/root.jsx

@@ -5,6 +5,7 @@ import {
 	useLoaderData,
 	Form,
 	useNavigation,
+	useSubmit,
 } from 'react-router-dom';
 import { getContacts, createContact } from '../contacts';
 
@@ -23,11 +24,21 @@ export const action = async () => {
 export default function Root() {
 	const { contacts, q } = useLoaderData();
 	const navigation = useNavigation();
+	const submit = useSubmit();
 
+	const searching =
+		navigation.location &&
+		new URLSearchParams(navigation.location.search).has('q');
+
+	const changeHandler = (event) => {
+		const isFirstSearch = q === null;
+		console.log('isFirstSearch: ', isFirstSearch);
+		submit(event.currentTarget.form, { replace: !isFirstSearch });
+	};
 	// Synchronize the URL and Form state
 	useEffect(() => {
-		document.getElementById("q").value = q
-	}, [q])
+		document.getElementById('q').value = q;
+	}, [q]);
 	return (
 		<>
 			<div id='sidebar'>
@@ -36,13 +47,15 @@ export default function Root() {
 					<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={changeHandler}
 						/>
-						<div id='search-spinner' aria-hidden hidden={true} />
+						<div id='search-spinner' aria-hidden hidden={!searching} />
 						<div className='sr-only' aria-live='polite'></div>
 					</Form>
 					<Form method='post'>