diff --git a/examples/fullstack/frontend/index.html b/examples/fullstack/frontend/index.html index e4b78ea..d980ca1 100644 --- a/examples/fullstack/frontend/index.html +++ b/examples/fullstack/frontend/index.html @@ -4,7 +4,7 @@ - Vite + React + TS + Vite + React + TS + Docker + Traefik
diff --git a/examples/fullstack/frontend/src/App.tsx b/examples/fullstack/frontend/src/App.tsx index b4dc655..16129e2 100644 --- a/examples/fullstack/frontend/src/App.tsx +++ b/examples/fullstack/frontend/src/App.tsx @@ -1,40 +1,82 @@ import { useState, useEffect } from 'react' import reactLogo from './assets/react.svg' +import dockerLogo from './assets/docker.svg' import viteLogo from '/vite.svg' import './App.css' function App() { - const [count, setCount] = useState(0) - const [greeting, setGreeting] = useState() + const [users, setUsers] = useState([]) + const [page, setPage] = useState(1) + const [pagination, setPagination] = useState({ + currentPage: 1, + lastPage: 1, + total: 0, + }) useEffect(() => { - fetch('/api') - .then(res => res.json()) - .then(data => setGreeting(data)) - }, []) + fetch(`/api/users?page=${page}`) + .then(res => res.json()) + .then(data => { + setUsers(data.data || []) + setPagination({ + currentPage: data.meta.currentPage, + lastPage: data.meta.lastPage, + total: data.meta.total, + }) + }) + .catch(err => console.error('Failed to fetch users:', err)) + }, [page]) + + const handlePrevious = () => { + if (page > 1) setPage(page - 1) + } + + const handleNext = () => { + if (page < pagination.lastPage) setPage(page + 1) + } + return ( <>
- + Vite logo - + React logo + + + Docker logo
-

Vite + React

-

{ JSON.stringify(greeting) ?? 'adf' }

-
- -

- Edit src/App.tsx and save to test HMR -

+ +

Vite + React + Docker + Traefik

+ + + + + + + + + + {users.length > 0 ? users.map((user) => ( + + + + + )) : ( + + + + )} + +
NameEmail
{user.fullName}{user.email}
No users found
+ +
+ + Page {pagination.currentPage} of {pagination.lastPage} +
-

- Click on the Vite and React logos to learn more -

) } diff --git a/examples/fullstack/frontend/src/assets/docker.svg b/examples/fullstack/frontend/src/assets/docker.svg new file mode 100644 index 0000000..4518f0b --- /dev/null +++ b/examples/fullstack/frontend/src/assets/docker.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + \ No newline at end of file