Skip to content

Commit e98790a

Browse files
KevinVandyKevinVandy
committed
add users table pages for useffect and rq
1 parent 8a3455e commit e98790a

File tree

15 files changed

+329
-1471
lines changed

15 files changed

+329
-1471
lines changed

‎apps/1-vite-componentdidmount/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"@mantine/core": "7.11.2",
1414
"@mantine/hooks": "7.11.2",
1515
"@tabler/icons-react": "^3.10.0",
16+
"mantine-react-table": "^2.0.0-beta.6",
1617
"react": "^18.3.1",
1718
"react-dom": "^18.3.1",
1819
"react-router-dom": "^6.24.1"

‎apps/2-vite-useeffect/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"@mantine/core": "7.11.2",
1414
"@mantine/hooks": "7.11.2",
1515
"@tabler/icons-react": "^3.10.0",
16+
"mantine-react-table": "^2.0.0-beta.6",
1617
"react": "^18.3.1",
1718
"react-dom": "^18.3.1",
1819
"react-router-dom": "^6.24.1"

‎apps/2-vite-useeffect/src/App.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { AppRoutes } from "./AppRoutes";
22
import { AppProviders } from "./AppProviders";
33
import "@mantine/core/styles.css";
4+
import "mantine-react-table/styles.css";
45

56
export const App = () => {
67
return (

‎apps/2-vite-useeffect/src/AppRoutes.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Route, Routes } from "react-router-dom";
22
import { AppLayout } from "./AppLayout";
33
import { HomePage } from "./pages/HomePage";
44
import { PostPage } from "./pages/PostPage";
5-
// import { UsersPage } from './pages/UsersPage';
5+
import { UsersPage } from "./pages/UsersPage";
66
// import { UserPage } from './pages/UserPage';
77

88
export const AppRoutes = () => {
@@ -11,7 +11,7 @@ export const AppRoutes = () => {
1111
<Routes>
1212
<Route path="/" element={<HomePage />} />
1313
<Route path="/posts/:id" element={<PostPage />} />
14-
{/* <Route path="/users" element={<UsersPage />} /> */}
14+
<Route path="/users" element={<UsersPage />} />
1515
</Routes>
1616
</AppLayout>
1717
);

‎apps/2-vite-useeffect/src/pages/UsersPage.tsx‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import { useCallback, useEffect, useMemo, useState } from "react";
2+
import { MRT_ColumnDef, MantineReactTable } from "mantine-react-table";
3+
import { Anchor } from "@mantine/core";
4+
import { useNavigate } from "react-router-dom";
5+
import { IUser } from "../api-types";
6+
7+
export const UsersPage = () => {
8+
const navigate = useNavigate();
9+
10+
const [users, setUsers] = useState<IUser[]>([]);
11+
const [isLoadingUser, setIsLoadingUser] = useState(false);
12+
const [isErrorLoadingUser, setIsErrorLoadingUser] = useState(false);
13+
const [isFetchingUser, setIsFetchingUser] = useState(false);
14+
15+
const fetchUsers = useCallback(async () => {
16+
if (!users.length) {
17+
setIsLoadingUser(true);
18+
}
19+
setIsFetchingUser(true);
20+
try {
21+
const fetchUrl = new URL(`http://localhost:3333/users`);
22+
const response = await fetch(fetchUrl.href);
23+
await new Promise((resolve) => setTimeout(resolve, 1000)); // Simulate slow network
24+
const newUsers = (await response.json()) as IUser[];
25+
setUsers(newUsers);
26+
} catch (error) {
27+
console.error(error);
28+
setIsErrorLoadingUser(true);
29+
} finally {
30+
setIsLoadingUser(false);
31+
setIsFetchingUser(false);
32+
}
33+
// eslint-disable-next-line react-hooks/exhaustive-deps
34+
}, []);
35+
36+
useEffect(() => {
37+
fetchUsers();
38+
}, [fetchUsers]);
39+
40+
const columns = useMemo<MRT_ColumnDef<IUser>[]>(
41+
() => [
42+
{
43+
accessorKey: "name",
44+
header: "Name",
45+
},
46+
{
47+
accessorKey: "email",
48+
header: "Email",
49+
},
50+
{
51+
accessorKey: "phone",
52+
header: "Phone",
53+
},
54+
{
55+
accessorKey: "website",
56+
header: "Website",
57+
Cell: ({ cell, renderedCellValue }) => (
58+
<Anchor
59+
onClick={(e) => e.stopPropagation()}
60+
href={`https://${cell.getValue<string>()}`}
61+
target="_blank"
62+
>
63+
{renderedCellValue}
64+
</Anchor>
65+
),
66+
},
67+
],
68+
[]
69+
);
70+
71+
return (
72+
<MantineReactTable
73+
data={users}
74+
columns={columns}
75+
state={{
76+
isLoading: isLoadingUser,
77+
showProgressBars: isFetchingUser,
78+
showAlertBanner: isErrorLoadingUser,
79+
}}
80+
mantineToolbarAlertBannerProps={
81+
isErrorLoadingUser
82+
? {
83+
color: "red",
84+
children: "Error loading data",
85+
}
86+
: undefined
87+
}
88+
mantineTableBodyRowProps={({ row }) => ({
89+
onClick: () => navigate(`/users/${row.original.id}`),
90+
style: {
91+
cursor: "pointer",
92+
},
93+
})}
94+
/>
95+
);
96+
};

‎apps/3-vite-reactquery/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"@tabler/icons-react": "^3.10.0",
1616
"@tanstack/react-query": "^5.51.1",
1717
"@tanstack/react-query-devtools": "^5.51.1",
18+
"mantine-react-table": "^2.0.0-beta.6",
1819
"react": "^18.3.1",
1920
"react-dom": "^18.3.1",
2021
"react-router-dom": "^6.24.1"

‎apps/3-vite-reactquery/src/App.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { AppRoutes } from "./AppRoutes";
22
import { AppProviders } from "./AppProviders";
33
import "@mantine/core/styles.css";
4+
import "mantine-react-table/styles.css";
45

56
export const App = () => {
67
return (

‎apps/3-vite-reactquery/src/AppRoutes.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Route, Routes } from "react-router-dom";
22
import { AppLayout } from "./AppLayout";
33
import { HomePage } from "./pages/HomePage";
44
import { PostPage } from "./pages/PostPage";
5-
// import { UsersPage } from './pages/UsersPage';
5+
import { UsersPage } from "./pages/UsersPage";
66
// import { UserPage } from './pages/UserPage';
77

88
export const AppRoutes = () => {
@@ -11,8 +11,8 @@ export const AppRoutes = () => {
1111
<Routes>
1212
<Route path="/" element={<HomePage />} />
1313
<Route path="/posts/:id" element={<PostPage />} />
14-
{/* <Route path="/users" element={<UsersPage />} />
15-
<Route path="/users/:id" element={<UserPage />} /> */}
14+
<Route path="/users" element={<UsersPage />} />
15+
{/* <Route path="/users/:id" element={<UserPage />} /> */}
1616
</Routes>
1717
</AppLayout>
1818
);

‎apps/3-vite-reactquery/src/pages/UsersPage.tsx‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import { useMemo } from "react";
2+
import { MRT_ColumnDef, MantineReactTable } from "mantine-react-table";
3+
import { Anchor } from "@mantine/core";
4+
import { useNavigate } from "react-router-dom";
5+
import { IUser } from "../api-types";
6+
import { useQuery } from "@tanstack/react-query";
7+
8+
export const UsersPage = () => {
9+
const navigate = useNavigate();
10+
11+
//load users
12+
const {
13+
data: users = [],
14+
isError: isErrorLoadingUser,
15+
isFetching: isFetchingUser,
16+
isLoading: isLoadingUser,
17+
} = useQuery({
18+
queryKey: ["users"],
19+
queryFn: async () => {
20+
const response = await fetch(`http://localhost:3333/users`);
21+
await new Promise((resolve) => setTimeout(resolve, 1000));
22+
return response.json() as Promise<IUser[]>;
23+
},
24+
});
25+
26+
const columns = useMemo<MRT_ColumnDef<IUser>[]>(
27+
() => [
28+
{
29+
accessorKey: "name",
30+
header: "Name",
31+
},
32+
{
33+
accessorKey: "email",
34+
header: "Email",
35+
},
36+
{
37+
accessorKey: "phone",
38+
header: "Phone",
39+
},
40+
{
41+
accessorKey: "website",
42+
header: "Website",
43+
Cell: ({ cell, renderedCellValue }) => (
44+
<Anchor
45+
onClick={(e) => e.stopPropagation()}
46+
href={`https://${cell.getValue<string>()}`}
47+
target="_blank"
48+
>
49+
{renderedCellValue}
50+
</Anchor>
51+
),
52+
},
53+
],
54+
[]
55+
);
56+
57+
return (
58+
<MantineReactTable
59+
data={users}
60+
columns={columns}
61+
state={{
62+
isLoading: isLoadingUser,
63+
showProgressBars: isFetchingUser,
64+
showAlertBanner: isErrorLoadingUser,
65+
}}
66+
mantineToolbarAlertBannerProps={
67+
isErrorLoadingUser
68+
? {
69+
color: "red",
70+
children: "Error loading data",
71+
}
72+
: undefined
73+
}
74+
mantineTableBodyRowProps={({ row }) => ({
75+
onClick: () => navigate(`/users/${row.original.id}`),
76+
style: {
77+
cursor: "pointer",
78+
},
79+
})}
80+
/>
81+
);
82+
};

‎apps/4-nextjs-ssg/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"@mantine/core": "7.11.2",
1313
"@mantine/hooks": "7.11.2",
1414
"@tabler/icons-react": "^3.10.0",
15+
"mantine-react-table": "^2.0.0-beta.6",
1516
"next": "14.2.5",
1617
"react": "^18",
1718
"react-dom": "^18"

0 commit comments

Comments
 (0)