Add destroy feature.

Author: YSHgroup

src/main.jsx

@@ -12,6 +12,8 @@ import { loader as contactLoader } from './routes/contact';
 import './index.css';
 import EditContact from './routes/edit';
 import {action as editAction} from './routes/edit'
+// import DeleteContact from './routes/destroy'
+import {action as deleteAction} from './routes/destroy'
 
 const router = createBrowserRouter([
 	{
@@ -32,6 +34,12 @@ const router = createBrowserRouter([
 				loader: contactLoader,
         action: editAction
 			},
+      {
+        path: 'contacts/:contactId/destroy',
+        // element: <DeleteContact />,
+        action: deleteAction,
+        errorElement:  <div>Oops! There was an error.</div>,
+      }
 		],
 	},
 ]);

src/routes/destroy.jsx

@@ -0,0 +1,9 @@
+import { redirect } from 'react-router-dom'
+import { deleteContact } from '../contacts'
+
+export async function action ({params}) {
+    throw new Error('Ohh dang')
+    await deleteContact(params.contactId)
+    return redirect("/")
+}
+

src/routes/root.jsx

@@ -1,4 +1,10 @@
-import { Outlet, NavLink, useLoaderData, Form } from 'react-router-dom';
+import {
+	Outlet,
+	NavLink,
+	useLoaderData,
+	Form,
+	useNavigation,
+} from 'react-router-dom';
 import { getContacts, createContact } from '../contacts';
 
 export const loader = async () => {
@@ -13,6 +19,7 @@ export const action = async () => {
 
 export default function Root() {
 	const { contacts } = useLoaderData();
+	const navigation = useNavigation();
 	return (
 		<>
 			<div id='sidebar'>
@@ -33,35 +40,40 @@ export default function Root() {
 						<button type='submit'>New</button>
 					</Form>
 				</div>
-				{contacts.length ? (
-					<ul>
-						{contacts.map((contact) => (
-							<li key={contact.id}>
-								<NavLink
-									to={`contacts/${contact.id}`}
-									className={({ isActive, isPending }) =>
-										isActive ? 'active' : isPending ? 'peding' : ''
-									}
-								>
-									{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>
-				)}
+				<nav>
+					{contacts.length ? (
+						<ul>
+							{contacts.map((contact) => (
+								<li key={contact.id}>
+									<NavLink
+										to={`contacts/${contact.id}`}
+										className={({ isActive, isPending }) =>
+											isActive ? 'active' : isPending ? 'peding' : ''
+										}
+									>
+										{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>
+					)}
+				</nav>
 			</div>
-			<div id='detail'>
+			<div
+				id='detail'
+				className={navigation.state === 'loading' ? 'loading' : ''}
+			>
 				<Outlet />
 			</div>
 		</>