Commit 66ce031

committed

Adding user detail page

1 parent c791e4f commit 66ce031Copy full SHA for 66ce031

File tree

+75

-9

lines changed

+75

-9

lines changed

Lines changed: 4 additions & 4 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,15 +1,15 @@`
`1`		`-import { useState } from "react";`
`2`		`-import reactLogo from "./assets/react.svg";`
`3`		`-import viteLogo from "/vite.svg";`
`4`	`1`	`import "./App.css";`
`5`		`-import { BrowserRouter, Route, Routes } from "react-router-dom";`
	`2`	`+import { BrowserRouter, Navigate,Route, Routes } from "react-router-dom";`
`6`	`3`	`import Home from "./pages/Home";`
	`4`	`+import UserDetail from "./pages/UserDetail";`
`7`	`5`
`8`	`6`	`function App() {`
`9`	`7`	`return (`
`10`	`8`	`<BrowserRouter>`
`11`	`9`	`<Routes>`
	`10`	`+ <Route path="/home" element={<Navigate to={"/"} />} />`
`12`	`11`	`<Route path="/" element={<Home />} />`
	`12`	`+ <Route path="/user/:id" element={<UserDetail />} />`
`13`	`13`	`</Routes>`
`14`	`14`	`</BrowserRouter>`
`15`	`15`	`);`

Lines changed: 5 additions & 5 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`		`-import React,{ useEffect, useState } from "react";`
	`1`	`+import { useEffect, useState } from "react";`
`2`	`2`	`import "./index.css";`
`3`		`-import { Link,useNavigate } from "react-router-dom";`
	`3`	`+import { useNavigate } from "react-router-dom";`
`4`	`4`
`5`	`5`	`const Home = () => {`
`6`	`6`	`const [users, setUsers] = useState([]);`
`@@ -48,8 +48,8 @@ const Home = () => {`
`48`	`48`	`<tbody className="tbody">`
`49`	`49`	`{users.map(({ id, first_name, last_name, email, gender, phone }) => {`
`50`	`50`	`return (`
`51`		`- // <Link to=>`
`52`	`51`	`<tr`
	`52`	`+ key={id}`
`53`	`53`	`onClick={() => {`
`54`	`54`	navigate(`/user/${id}`);
`55`	`55`	`}}`
`@@ -61,7 +61,6 @@ const Home = () => {`
`61`	`61`	`<td>{gender}</td>`
`62`	`62`	`<td>{phone}</td>`
`63`	`63`	`</tr>`
`64`		`- // </Link>`
`65`	`64`	`);`
`66`	`65`	`})}`
`67`	`66`	`</tbody>`
`@@ -72,8 +71,9 @@ const Home = () => {`
`72`	`71`	`.map((element, i) => {`
`73`	`72`	`return (`
`74`	`73`	`<button`
	`74`	`+ key={i}`
`75`	`75`	`className={i + 1 === pagination.page ? "button-active" : ""}`
`76`		`- onClick={(e) =>`
	`76`	`+ onClick={() =>`
`77`	`77`	`setPagination((prevState) => ({ ...prevState, page: i + 1 }))`
`78`	`78`	`}`
`79`	`79`	`>`

Lines changed: 14 additions & 0 deletions

Lines changed: 52 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,52 @@`
	`1`	`+import { useEffect, useState } from "react";`
	`2`	`+import { Link, useParams } from "react-router-dom";`
	`3`	`+import "./index.css";`
	`4`	`+`
	`5`	`+const UserDetail = () => {`
	`6`	`+ const { id } = useParams();`
	`7`	`+ const [user, setUser] = useState(null);`
	`8`	`+`
	`9`	`+ useEffect(() => {`
	`10`	+ fetch(`${import.meta.env.VITE_SERVER_URL}/user/${id}`)
	`11`	`+ .then((res) => res.json())`
	`12`	`+ .then((json) => {`
	`13`	`+ setUser(json.data);`
	`14`	`+ })`
	`15`	`+ .catch((err) => {`
	`16`	`+ console.log(err);`
	`17`	`+ setUser(null);`
	`18`	`+ });`
	`19`	`+ }, [id]);`
	`20`	`+`
	`21`	`+ return (`
	`22`	`+ <div className="detail">`
	`23`	`+ <Link to={"/home"}>Go Back</Link>`
	`24`	`+ <table className="usertable">`
	`25`	`+ <tbody>`
	`26`	`+ <tr>`
	`27`	`+ <td>ID</td>`
	`28`	`+ <td>{user?.id}</td>`
	`29`	`+ </tr>`
	`30`	`+ <tr>`
	`31`	`+ <td>First name</td>`
	`32`	`+ <td>{user?.first_name}</td>`
	`33`	`+ </tr>`
	`34`	`+ <tr>`
	`35`	`+ <td>Last name</td>`
	`36`	`+ <td>{user?.last_name}</td>`
	`37`	`+ </tr>`
	`38`	`+ <tr>`
	`39`	`+ <td>Gender</td>`
	`40`	`+ <td>{user?.gender}</td>`
	`41`	`+ </tr>`
	`42`	`+ <tr>`
	`43`	`+ <td>Phone</td>`
	`44`	`+ <td>{user?.phone}</td>`
	`45`	`+ </tr>`
	`46`	`+ </tbody>`
	`47`	`+ </table>`
	`48`	`+ </div>`
	`49`	`+ );`
	`50`	`+};`
	`51`	`+`
	`52`	`+export default UserDetail;`

Comments

(0)