Skip to content

Commit 8293c0a

Browse files
marsicdevmarsicdev
committed
Update example
1 parent 83572d6 commit 8293c0a

13 files changed

Lines changed: 290 additions & 214 deletions

File tree

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta charset="UTF-8" />
66
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
77
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8-
<title>Vite + React + TS</title>
8+
<title>React Users</title>
99
</head>
1010

1111
<body>

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,18 @@
66
"scripts": {
77
"dev": "vite",
88
"build": "tsc && vite build",
9-
"preview": "vite preview"
9+
"preview": "vite preview",
10+
"reset": "rm -rf node_modules && yarn"
1011
},
1112
"dependencies": {
1213
"@tanstack/react-query": "^4.19.1",
14+
"axios": "^1.3.4",
1315
"react": "experimental",
1416
"react-dom": "experimental",
1517
"rect-use": "^1.0.0"
1618
},
1719
"devDependencies": {
20+
"@types/node": "^18.15.7",
1821
"@types/react": "^18.0.26",
1922
"@types/react-dom": "^18.0.9",
2023
"@vitejs/plugin-react": "^2.2.0",

‎src/app/App.tsx‎

Lines changed: 9 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,22 @@
1-
import Title from '@/components/Title'
2-
import { useState, use } from 'react'
3-
import reactLogo from '../assets/react.svg'
4-
import './App.css'
1+
import { Suspense } from 'react'
52

6-
const fetchUsers = () => {
7-
return fetch('https://jsonplaceholder.typicode.com/users').then((res) => res.json())
8-
}
3+
import reactLogo from '../assets/react.svg'
94

10-
const fetchPosts = (userId: any) => {
11-
return fetch('https://jsonplaceholder.typicode.com/posts?userId' + userId).then(
12-
(res) => res.json()
13-
)
14-
}
5+
import UsersPage from './users/UsersPage'
6+
import './App.css'
157

168
function App() {
17-
const users = use(fetchUsers())
18-
19-
if (true) {
20-
const posts = use(fetchPosts(users[0].id))
21-
console.log('posts', posts)
22-
}
23-
24-
console.log('user', users)
259

2610
return (
2711
<div className="App">
2812
<div>
29-
<a href="https://vitejs.dev" target="_blank">
30-
<img src="/vite.svg" className="logo" alt="Vite logo" />
31-
</a>
32-
<a href="https://reactjs.org" target="_blank">
33-
<img src={reactLogo} className="logo react" alt="React logo" />
34-
</a>
35-
</div>
36-
<Title>Vite + React</Title>
37-
<div className="card">
38-
{users.map((user: any) => (
39-
<p>{user.name}</p>
40-
))}
41-
<p>
42-
Edit <code>src/App.tsx</code> and save to test HMR
43-
</p>
13+
<img src={reactLogo} className="logo react" alt="React logo" />
4414
</div>
15+
<Suspense fallback={<h2>Loading…</h2>}>
16+
<UsersPage />
17+
</Suspense>
4518
<p className="read-the-docs">
46-
Click on the Vite and React logos to learn more
19+
React 18 use() hook showcase
4720
</p>
4821
</div>
4922
)

‎src/app/main.tsx‎

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,6 @@ import '@/styles/index.css'
66

77
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
88
<React.StrictMode>
9-
<SuspenseList>
10-
<Suspense fallback={<h2>Loading…</h2>}>
11-
<App />
12-
</Suspense>
13-
<Suspense fallback={<h2>Loading…</h2>}>
14-
<App />
15-
</Suspense>
16-
<Suspense fallback={<h2>Loading…</h2>}>
17-
<App />
18-
</Suspense>
19-
</SuspenseList>
9+
<App />
2010
</React.StrictMode>
2111
)

‎src/app/users/UserList.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import User from '@/lib/models/User'
2+
3+
type Props = {
4+
users: User[]
5+
}
6+
7+
const UsersList = ({ users }: Props) => (
8+
<section>
9+
{users.map((user: any) => (
10+
<p>{user.name}</p>
11+
))}
12+
</section>
13+
)
14+
15+
export default UsersList

‎src/app/users/UsersPage.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { use } from 'react'
2+
3+
import { userService } from '@/lib/services/userService'
4+
import Title from '@/components/Title'
5+
6+
import UsersList from './UserList'
7+
8+
function UsersPage() {
9+
const users = use(userService.fetchUsers())
10+
11+
return (
12+
<>
13+
<Title>React Users</Title>
14+
<UsersList users={users} />
15+
</>
16+
)
17+
}
18+
19+
export default UsersPage

‎src/components/Title.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ type Props = {
33
}
44

55
const Title = (props: Props) => {
6-
return <div>{props.children}</div>
6+
return <h2>{props.children}</h2>
77
}
88

99
export default Title

‎src/config/constants.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export const BASE_URL = process.env.BASE_URL
1+
export const BASE_URL = import.meta.env.VITE_API_ENDPOINT_URL

‎src/lib/API.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import axios, { AxiosRequestConfig } from 'axios'
22

3-
import { BASE_URL } from 'config/constants'
3+
import { BASE_URL } from '@/config/constants'
44

55
export const publicAPI = axios.create({
66
baseURL: BASE_URL || undefined,
@@ -14,7 +14,7 @@ class ApiService {
1414
})
1515

1616
constructor() {
17-
this.http.interceptors.request.use((config: AxiosRequestConfig) => {
17+
this.http.interceptors.request.use((config) => {
1818
console.log('config', config)
1919
return config
2020
})

‎src/lib/services/userService.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { API } from 'lib/API'
2-
import User from 'lib/models/User'
1+
import { API } from '@/lib/API'
2+
import User from '@/lib/models/User'
33

44
class UserService {
55
private readonly endpoint = {

0 commit comments

Comments
 (0)