Update the SPA

MystenLabs · Oct 15, 2024 · e363feb · e363feb
1 parent 14361d6
commit e363feb
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 11 deletions.
diff --git a/react-spa/bun.lockb b/react-spa/bun.lockb
diff --git a/react-spa/public/favicon.png b/react-spa/public/favicon.png
diff --git a/react-spa/src/main.jsx b/react-spa/src/main.jsx
@@ -7,7 +7,8 @@ import {
 import "./index.css";
 import Root from "./routes/root";
 import ErrorPage from "./error-page";
-import Contact from "./routes/contact";
+import You from "./routes/you";
+import Friend from "./routes/friend";
 
 const router = createBrowserRouter([
   {
@@ -16,8 +17,12 @@ const router = createBrowserRouter([
     errorElement: <ErrorPage />,
     children: [
         {
-        path: "contacts/:contactId",
-        element: <Contact />,
+        path: "you/",
+        element: <You />,
+        },
+        {
+        path: "friend/",
+        element: <Friend />,
         },
     ],
   },

diff --git a/react-spa/src/routes/contact.jsx → react-spa/src/routes/friend.jsx b/react-spa/src/routes/contact.jsx → react-spa/src/routes/friend.jsx
@@ -1,11 +1,10 @@
 import { Form } from "react-router-dom";
 
-export default function Contact() {
+export default function Friend() {
   const contact = {
-    first: "Your",
-    last: "Name",
-    avatar: "https://robohash.org/you.png?size=200x200",
-    twitter: "your_handle",
+    first: "Wall-e",
+    last: "Iceberg",
+    twitter: "@"+"mysten_labs",
     notes: "Some notes",
     favorite: true,
   };
@@ -17,7 +16,7 @@ export default function Contact() {
           key={contact.avatar}
           src={
             contact.avatar ||
-            `https://robohash.org/${contact.id}.png?size=200x200`
+            `https://robohash.org/${contact.first+contact.last}.png?size=200x200`
           }
         />
       </div>

diff --git a/react-spa/src/routes/root.jsx b/react-spa/src/routes/root.jsx
@@ -31,10 +31,10 @@ export default function Root() {
         <nav>
           <ul>
             <li>
-              <Link to={`/contacts/1`}>Your Name</Link>
+              <Link to={`/you`}>You</Link>
             </li>
             <li>
-              <Link to={`/contacts/2`}>Your Friend</Link>
+              <Link to={`/friend`}>Friend</Link>
             </li>
           </ul>
         </nav>

diff --git a/react-spa/src/routes/you.jsx b/react-spa/src/routes/you.jsx
@@ -0,0 +1,91 @@
+import { Form } from "react-router-dom";
+
+export default function You() {
+  const contact = {
+    first: "Roby",
+    last: "Walson",
+    twitter: "@"+"suinetwork",
+    notes: "Some notes",
+    favorite: true,
+  };
+
+  return (
+    <div id="contact">
+      <div>
+        <img
+          key={contact.avatar}
+          src={
+            contact.avatar ||
+            `https://robohash.org/${contact.first+contact.last}.png?size=200x200`
+          }
+        />
+      </div>
+
+      <div>
+        <h1>
+          {contact.first || contact.last ? (
+            <>
+              {contact.first} {contact.last}
+            </>
+          ) : (
+            <i>No Name</i>
+          )}{" "}
+          <Favorite contact={contact} />
+        </h1>
+
+        {contact.twitter && (
+          <p>
+            <a
+              target="_blank"
+              href={`https://twitter.com/${contact.twitter}`}
+            >
+              {contact.twitter}
+            </a>
+          </p>
+        )}
+
+        {contact.notes && <p>{contact.notes}</p>}
+
+        <div>
+          <Form action="edit">
+            <button type="submit">Edit</button>
+          </Form>
+          <Form
+            method="post"
+            action="destroy"
+            onSubmit={(event) => {
+              if (
+                !confirm(
+                  "Please confirm you want to delete this record."
+                )
+              ) {
+                event.preventDefault();
+              }
+            }}
+          >
+            <button type="submit">Delete</button>
+          </Form>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Favorite({ contact }) {
+  const favorite = contact.favorite;
+  return (
+    <Form method="post">
+      <button
+        name="favorite"
+        value={favorite ? "false" : "true"}
+        aria-label={
+          favorite
+            ? "Remove from favorites"
+            : "Add to favorites"
+        }
+      >
+        {favorite ? "★" : "☆"}
+      </button>
+    </Form>
+  );
+}