From 359b33d200fc96a306a0b750c24da4f88ad30518 Mon Sep 17 00:00:00 2001
From: Cristina Rodriguez <yosola@gmail.com>
Date: Thu, 6 Apr 2023 13:59:03 -0700
Subject: [PATCH] Adding one router rout

---
 .../client/package-lock.json                  | 26 +++++-----
 .../2023TemplateWithVite/client/src/App.css   |  4 ++
 .../2023TemplateWithVite/client/src/App.jsx   | 17 +++++--
 .../client/src/components/ListStudents.jsx    |  5 +-
 .../client/src/components/contact.jsx         | 49 +++++++++++++++++++
 .../client/src/components/error-page.jsx      | 16 ++++++
 .../2023TemplateWithVite/client/src/main.jsx  | 25 +++++++++-
 .../src/{components => routes}/Navbar.jsx     |  8 ++-
 8 files changed, 128 insertions(+), 22 deletions(-)
 create mode 100644 projects/2023TemplateWithVite/client/src/components/contact.jsx
 create mode 100644 projects/2023TemplateWithVite/client/src/components/error-page.jsx
 rename projects/2023TemplateWithVite/client/src/{components => routes}/Navbar.jsx (80%)

diff --git a/projects/2023TemplateWithVite/client/package-lock.json b/projects/2023TemplateWithVite/client/package-lock.json
index f9a080a62..3cab66688 100644
--- a/projects/2023TemplateWithVite/client/package-lock.json
+++ b/projects/2023TemplateWithVite/client/package-lock.json
@@ -14,7 +14,7 @@
         "react-bootstrap": "^2.7.2",
         "react-dom": "^18.2.0",
         "react-icons": "^4.8.0",
-        "react-router-dom": "^6.9.0"
+        "react-router-dom": "^6.10.0"
       },
       "devDependencies": {
         "@types/react": "^18.0.28",
@@ -810,9 +810,9 @@
       }
     },
     "node_modules/@remix-run/router": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.4.0.tgz",
-      "integrity": "sha512-BJ9SxXux8zAg991UmT8slpwpsd31K1dHHbD3Ba4VzD+liLQ4WAMSxQp2d2ZPRPfN0jN2NPRowcSSoM7lCaF08Q==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.5.0.tgz",
+      "integrity": "sha512-bkUDCp8o1MvFO+qxkODcbhSqRa6P2GXgrGZVpt0dCXNW2HCSCqYI0ZoAqEOSAjRWmmlKcYgFvN4B4S+zo/f8kg==",
       "engines": {
         "node": ">=14"
       }
@@ -1460,11 +1460,11 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.9.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.9.0.tgz",
-      "integrity": "sha512-51lKevGNUHrt6kLuX3e/ihrXoXCa9ixY/nVWRLlob4r/l0f45x3SzBvYJe3ctleLUQQ5fVa4RGgJOTH7D9Umhw==",
+      "version": "6.10.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.10.0.tgz",
+      "integrity": "sha512-Nrg0BWpQqrC3ZFFkyewrflCud9dio9ME3ojHCF/WLsprJVzkq3q3UeEhMCAW1dobjeGbWgjNn/PVF6m46ANxXQ==",
       "dependencies": {
-        "@remix-run/router": "1.4.0"
+        "@remix-run/router": "1.5.0"
       },
       "engines": {
         "node": ">=14"
@@ -1474,12 +1474,12 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.9.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.9.0.tgz",
-      "integrity": "sha512-/seUAPY01VAuwkGyVBPCn1OXfVbaWGGu4QN9uj0kCPcTyNYgL1ldZpxZUpRU7BLheKQI4Twtl/OW2nHRF1u26Q==",
+      "version": "6.10.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.10.0.tgz",
+      "integrity": "sha512-E5dfxRPuXKJqzwSe/qGcqdwa18QiWC6f3H3cWXM24qj4N0/beCIf/CWTipop2xm7mR0RCS99NnaqPNjHtrAzCg==",
       "dependencies": {
-        "@remix-run/router": "1.4.0",
-        "react-router": "6.9.0"
+        "@remix-run/router": "1.5.0",
+        "react-router": "6.10.0"
       },
       "engines": {
         "node": ">=14"
diff --git a/projects/2023TemplateWithVite/client/src/App.css b/projects/2023TemplateWithVite/client/src/App.css
index 65e63208d..ceeb437aa 100644
--- a/projects/2023TemplateWithVite/client/src/App.css
+++ b/projects/2023TemplateWithVite/client/src/App.css
@@ -71,3 +71,7 @@ button.btn.btn-primary {
   margin-left: 2em;
   margin-right: 2em;
 }
+
+#contact{
+  padding: 5em;
+}
diff --git a/projects/2023TemplateWithVite/client/src/App.jsx b/projects/2023TemplateWithVite/client/src/App.jsx
index 4d2d3275f..2a13a5cc2 100644
--- a/projects/2023TemplateWithVite/client/src/App.jsx
+++ b/projects/2023TemplateWithVite/client/src/App.jsx
@@ -1,16 +1,23 @@
 import './App.css'
 import 'bootstrap/dist/css/bootstrap.min.css';
-import MyNavBar from './components/Navbar'
+import MyNavBar from './routes/Navbar'
 import ListStudents from './components/ListStudents'
-
+import React, { useState } from 'react'
+import { Outlet } from 'react-router-dom';
 
 function App() {
 
+  const [isClicked, setIsClicked] = useState(false);
+
+  const handleMe = () =>{
+    setIsClicked(true);
+  }
+
+
   return (
     <div className="App">
-      <MyNavBar />
-      <ListStudents />
-
+      <MyNavBar handleMe={handleMe} />
+      {isClicked ? <Outlet /> : <ListStudents /> }
     </div>
   )
 }
diff --git a/projects/2023TemplateWithVite/client/src/components/ListStudents.jsx b/projects/2023TemplateWithVite/client/src/components/ListStudents.jsx
index 82f99f0a8..5c334add2 100644
--- a/projects/2023TemplateWithVite/client/src/components/ListStudents.jsx
+++ b/projects/2023TemplateWithVite/client/src/components/ListStudents.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react'
-import * as ioicons from 'react-icons/io5'
 import MyForm from './Form';
 import Student from './Student';
+import { Outlet} from "react-router-dom";
 
 const ListStudents = () => {
 
@@ -69,6 +69,9 @@ const ListStudents = () => {
                 })}
             </ul>
         </div>
+        <div id="detail">
+        <Outlet />
+      </div>
         <MyForm key={editingStudent ? editingStudent.id : null} onSaveStudent={onSaveStudent} editingStudent={editingStudent} onUpdateStudent={updateStudent} />
         </div>
     );
diff --git a/projects/2023TemplateWithVite/client/src/components/contact.jsx b/projects/2023TemplateWithVite/client/src/components/contact.jsx
new file mode 100644
index 000000000..a004010be
--- /dev/null
+++ b/projects/2023TemplateWithVite/client/src/components/contact.jsx
@@ -0,0 +1,49 @@
+
+
+export default function Contact() {
+  const contact = {
+    first: "Cristina",
+    last: "Rodriguez",
+    avatar: "https://placekitten.com/g/200/200",
+    twitter: "yosola",
+    notes: "Some notes",
+    favorite: true,
+  };
+
+  return (
+    <div id="contact">
+      <div>
+        <img
+          key={contact.avatar}
+          src={contact.avatar || null}
+        />
+      </div>
+
+      <div>
+        <h1>
+          {contact.first || contact.last ? (
+            <>
+              {contact.first} {contact.last}
+            </>
+          ) : (
+            <i>No Name</i>
+          )}{" "}
+        </h1>
+
+        {contact.twitter && (
+          <p>
+            <a
+              target="_blank"
+              href={`https://twitter.com/${contact.twitter}`}
+            >
+              {contact.twitter}
+            </a>
+          </p>
+        )}
+
+        {contact.notes && <p>{contact.notes}</p>}
+
+        </div>
+        </div>
+        )
+    }
diff --git a/projects/2023TemplateWithVite/client/src/components/error-page.jsx b/projects/2023TemplateWithVite/client/src/components/error-page.jsx
new file mode 100644
index 000000000..7c9fca134
--- /dev/null
+++ b/projects/2023TemplateWithVite/client/src/components/error-page.jsx
@@ -0,0 +1,16 @@
+import { useRouteError } from "react-router-dom";
+
+export default function ErrorPage() {
+  const error = useRouteError();
+  console.error(error);
+
+  return (
+    <div id="error-page">
+      <h1>Oops Techtonica template apologizes!!</h1>
+      <p>Sorry,  an unexpected error has occurred.</p>
+      <p>
+        <i>{error.statusText || error.message}</i>
+      </p>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/projects/2023TemplateWithVite/client/src/main.jsx b/projects/2023TemplateWithVite/client/src/main.jsx
index 5cc599199..5e2e6ff1d 100644
--- a/projects/2023TemplateWithVite/client/src/main.jsx
+++ b/projects/2023TemplateWithVite/client/src/main.jsx
@@ -1,10 +1,33 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
+import { createBrowserRouter, createRoutesFromElements, Route, RouterProvider,} from "react-router-dom";
 import './index.css'
+import ErrorPage from "./components/error-page";
+import Contact from "./components/contact";
+
+
+// /*
+// const router = createBrowserRouter(
+//   createRoutesFromElements(
+//     <Route path="/" element={<App />}>
+//       <Route path="login" element={<Contact />} />
+//       </Route>
+//       )
+//     );
+
+// */
+
+const router = createBrowserRouter(
+    createRoutesFromElements(
+      <Route path="/" element={<App />}>
+        <Route path="login" element={<Contact />} />
+        </Route>
+        )
+      );
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
-    <App />
+    <RouterProvider router={router} />
   </React.StrictMode>,
 )
diff --git a/projects/2023TemplateWithVite/client/src/components/Navbar.jsx b/projects/2023TemplateWithVite/client/src/routes/Navbar.jsx
similarity index 80%
rename from projects/2023TemplateWithVite/client/src/components/Navbar.jsx
rename to projects/2023TemplateWithVite/client/src/routes/Navbar.jsx
index fa3347d94..83bc3ea0c 100644
--- a/projects/2023TemplateWithVite/client/src/components/Navbar.jsx
+++ b/projects/2023TemplateWithVite/client/src/routes/Navbar.jsx
@@ -2,10 +2,14 @@ import Container from 'react-bootstrap/Container';
 import Navbar from 'react-bootstrap/Navbar';
 import Nav from 'react-bootstrap/Nav';
 import Logo from '../assets/BlueTechtonicaWord.png'
-
+import { Link } from "react-router-dom";
 
 function MyNavBar(props) {
 
+  const handleClick = () =>{
+    props.handleMe();
+  }
+
   return (
     <>
     <Navbar bg="dark" variant="dark" sticky="top">
@@ -22,7 +26,7 @@ function MyNavBar(props) {
         <Navbar.Toggle />
         <Navbar.Collapse className="justify-content-end">
           <Navbar.Text>
-            Signed in as: <a href="#login">Cristina Rodriguez</a>
+            Signed in as: <Link onClick={handleClick} to={`/login`}>Cristina Rodriguez</Link>
           </Navbar.Text>
         </Navbar.Collapse>
       </Container>