Michel

package.json

@@ -7,10 +7,11 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.3.5",
     "bootstrap": "^5.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.4.1",
+    "react-router-dom": "^6.10.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

src/App.jsx

@@ -1,17 +1,33 @@
-
 import { Outlet } from "react-router-dom";
 import Footer from "./Components/Footer";
 import Navbar from "./Components/Navbar";
+import Home from "./pages/home";
+import Login from "./pages/login";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import Detail from "./pages/detail";
+import NotFound from "./pages/not-found";
+import { useContext } from "react";
+import { ThemeContext } from "./contexts/theme-context";
 
 function App() {
+  const { theme, handleChangeTheme } = useContext(ThemeContext);
+
   return (
     <>
       {/* //Na linha seguinte deverá ser feito um teste se a aplicação
         // está em dark mode e deverá utilizar a classe dark ou light */}
-      <div className={`app light}`}>
+      <div className={`{app ${theme}}`}>
         <Navbar />
         <main>
           <Outlet />
+          <BrowserRouter>
+            <Routes>
+              <Route path="/" element={<Home />} />
+              <Route path="/login" element={<Login />} />
+              <Route path="/detail/:matricula" element={<Detail />} />
+              <Route path="*" element={<NotFound />} />
+            </Routes>
+          </BrowserRouter>
         </main>
         <Footer />
       </div>

src/Components/Card.jsx

@@ -1,7 +1,32 @@
+import { Link, useNavigate } from "react-router-dom";
 import styles from "./Card.module.css";
+import { useEffect } from "react";
 
-const Card = () => {
+//import {useState, useEffect} from 'react'
 
+const Card = (props) => {
+  const {nome, sobrenome, usuario, matricula} = props.dados;
+//  const {matricula, setMatricula} = useState("")
+  const navigate = useNavigate()
+
+useEffect(() => {
+  const token = localStorage.getItem("ctd_token");
+
+
+  console.log("Token no contexto: " + token);
+  if(token == null){
+    navigate("/login")
+  }
+  else{
+
+  }
+}, []);
+
+  //useEffect(() => {
+   // const response = localStorage.getItem("@dentista_matricula");
+   // saveMatricula(response);
+  //}, []);
+
   return (
     <>
       {/* //Na linha seguinte deverá ser feito um teste se a aplicação
@@ -15,9 +40,10 @@ const Card = () => {
         <div className={`card-body ${styles.CardBody}`}>
           {/* Na linha seguinte o link deverá utilizar a matricula, nome e sobrenome do dentista
           que vem da API */}
-          <a href={`/dentist/MatriculaDoDentista`}>
-            <h5 className={`card-title ${styles.title}`}>Nome e Sobrenome do dentista</h5>
-          </a>
+          <Link to = {`/detail/${matricula}`}>
+
+            <h5 className={`card-title ${styles.title}`}>{nome} {sobrenome}</h5>
+          </Link>
         </div>
       </div>
     </>

src/Components/DetailCard.jsx

@@ -1,18 +1,48 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import ScheduleFormModal from "./ScheduleFormModal";
 import styles from "./DetailCard.module.css";
+import { useParams } from "react-router-dom";
+import api from "../services/api";
 
 const DetailCard = () => {
+  const { matricula } = useParams();
+  const [dentista, setDentista] = useState({});
+  const [token, setToken] = useState("");
+
+  async function getDentista(){
+    const t = localStorage.getItem("ctd_token");
+    setToken(t);
+    try{
+        const response = await api.get(`/dentista?matricula=${matricula}`, {
+          headers: {
+            'Authorization': `Bearer ${t}`
+          }});
+        const d = {
+          nome: response.data.nome,
+          sobrenome: response.data.sobrenome,
+          matricula: response.data.matricula,
+          email: response.data.usuario.username
+        }
+        setDentista(d);
+        console.log(d);
+    } catch (error) {
+        console.log(error);
+        alert("Erro ao tentar pegar dados do Dentista");
+    }
+  }
 
   useEffect(() => {
     //Nesse useEffect, você vai fazer um fetch na api passando o 
     //id do dentista que está vindo do react-router e carregar os dados em algum estado
+    getDentista();
+
   }, []);
+
   return (
     //As instruções que estão com {''} precisam ser 
     //substituídas com as informações que vem da api
     <>
-      <h1>Detail about Dentist {'Nome do Dentista'} </h1>
+      <h1>Detail about Dentist {dentista.nome} </h1>
       <section className="card col-sm-12 col-lg-6 container">
         {/* //Na linha seguinte deverá ser feito um teste se a aplicação
         // está em dark mode e deverá utilizar o css correto */}
@@ -28,12 +58,12 @@ const DetailCard = () => {
           </div>
           <div className="col-sm-12 col-lg-6">
             <ul className="list-group">
-              <li className="list-group-item">Nome: {'Nome do Dentista'}</li>
+              <li className="list-group-item">Nome: {dentista.nome}</li>
               <li className="list-group-item">
-                Sobrenome: {'Sobrenome do Dentista'}
+                Sobrenome: {dentista.sobrenome}
               </li>
               <li className="list-group-item">
-                Usuário: {'Nome de usuário do Dentista'}
+                Usuário: {dentista.email}
               </li>
             </ul>
             <div className="text-center">