Skip to content

Commit 4e66e1f

Browse files
KevinVandyKevinVandy
committed
redo home pages
1 parent cb71af9 commit 4e66e1f

File tree

11 files changed

+128
-103
lines changed

11 files changed

+128
-103
lines changed

‎apps/1-vite-componentdidmount/src/pages/HomePage.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ export class HomePage extends Component<{}, HomePageState> {
6666
<Loader />
6767
</Collapse>
6868
</Flex>
69-
<Stack gap="md">
69+
<Flex gap="md" wrap="wrap">
7070
{isErrorLoadingPosts ? (
7171
<Alert
7272
icon={<IconAlertCircle size="1rem" />}
@@ -77,7 +77,7 @@ export class HomePage extends Component<{}, HomePageState> {
7777
</Alert>
7878
) : isLoadingPosts ? (
7979
[...Array(5)].map((_, index) => (
80-
<Card withBorder shadow="md" key={index}>
80+
<Card w={300} mih={300} withBorder shadow="md" key={index}>
8181
<Skeleton animate height="20px" width="50%" mb="md" />
8282
<Skeleton animate height="40px" width="100%" mb="md" />
8383
</Card>
@@ -90,19 +90,24 @@ export class HomePage extends Component<{}, HomePageState> {
9090
style={{ textDecoration: "none" }}
9191
>
9292
<Card
93-
withBorder
93+
mih={320}
9494
shadow="md"
95+
w={300}
96+
withBorder
9597
style={{
9698
cursor: "pointer",
9799
}}
98100
>
99101
<Title order={3}>{post.title}</Title>
100102
<Text>{post.body}</Text>
103+
<Text c="blue" pt="md">
104+
Go to post
105+
</Text>
101106
</Card>
102107
</Link>
103108
))
104109
)}
105-
</Stack>
110+
</Flex>
106111
</Stack>
107112
);
108113
}

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

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export function HomePage() {
5555
<Loader />
5656
</Collapse>
5757
</Flex>
58-
<Stack gap="md">
58+
<Flex gap="md" wrap="wrap">
5959
{isErrorLoadingPosts ? (
6060
<Alert
6161
icon={<IconAlertCircle size="1rem" />}
@@ -66,7 +66,7 @@ export function HomePage() {
6666
</Alert>
6767
) : isLoadingPosts ? (
6868
[...Array(5)].map((_, index) => (
69-
<Card withBorder shadow="md" key={index}>
69+
<Card w={300} mih={300} withBorder shadow="md" key={index}>
7070
<Skeleton animate height="20px" width="50%" mb="md" />
7171
<Skeleton animate height="40px" width="100%" mb="md" />
7272
</Card>
@@ -79,19 +79,24 @@ export function HomePage() {
7979
style={{ textDecoration: "none" }}
8080
>
8181
<Card
82-
withBorder
82+
mih={320}
8383
shadow="md"
84+
w={300}
85+
withBorder
8486
style={{
8587
cursor: "pointer",
8688
}}
8789
>
8890
<Title order={3}>{post.title}</Title>
8991
<Text>{post.body}</Text>
92+
<Text c="blue" pt="md">
93+
Go to post
94+
</Text>
9095
</Card>
9196
</Link>
9297
))
9398
)}
94-
</Stack>
99+
</Flex>
95100
</Stack>
96101
);
97102
}

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

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export function HomePage() {
3939
<Loader />
4040
</Collapse>
4141
</Flex>
42-
<Stack gap="md">
42+
<Flex gap="md" wrap="wrap">
4343
{isErrorLoadingPosts ? (
4444
<Alert
4545
icon={<IconAlertCircle size="1rem" />}
@@ -50,7 +50,7 @@ export function HomePage() {
5050
</Alert>
5151
) : isLoadingPosts ? (
5252
[...Array(5)].map((_, index) => (
53-
<Card withBorder shadow="md" key={index}>
53+
<Card w={300} mih={300} withBorder shadow="md" key={index}>
5454
<Skeleton animate height="20px" width="50%" mb="md" />
5555
<Skeleton animate height="40px" width="100%" mb="md" />
5656
</Card>
@@ -63,19 +63,24 @@ export function HomePage() {
6363
style={{ textDecoration: "none" }}
6464
>
6565
<Card
66-
withBorder
66+
mih={320}
6767
shadow="md"
68+
w={300}
69+
withBorder
6870
style={{
6971
cursor: "pointer",
7072
}}
7173
>
7274
<Title order={3}>{post.title}</Title>
7375
<Text>{post.body}</Text>
76+
<Text c="blue" pt="md">
77+
Go to post
78+
</Text>
7479
</Card>
7580
</Link>
7681
))
7782
)}
78-
</Stack>
83+
</Flex>
7984
</Stack>
8085
);
8186
}

‎apps/4-nextjs-ssg/src/pages/_app.tsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,15 @@ import Head from "next/head";
44
import { MantineProvider } from "@mantine/core";
55
import { theme } from "@/theme";
66
import { AppLayout } from "@/components/AppLayout";
7-
import { useState } from "react";
7+
import { lazy, Suspense, useState } from "react";
88
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
99

10+
const ReactQueryDevtoolsProduction = lazy(() =>
11+
import("@tanstack/react-query-devtools/production").then((d) => ({
12+
default: d.ReactQueryDevtools,
13+
})),
14+
);
15+
1016
export default function App({ Component, pageProps }: AppProps) {
1117
const [queryClient] = useState(
1218
() =>
@@ -22,7 +28,7 @@ export default function App({ Component, pageProps }: AppProps) {
2228
return (
2329
<>
2430
<Head>
25-
<title>Next JS SSR (and React Query)</title>
31+
<title>Next JS SSG</title>
2632
<meta
2733
name="viewport"
2834
content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"
@@ -33,6 +39,9 @@ export default function App({ Component, pageProps }: AppProps) {
3339
<MantineProvider theme={theme}>
3440
<AppLayout>
3541
<Component {...pageProps} />
42+
<Suspense fallback={null}>
43+
<ReactQueryDevtoolsProduction />
44+
</Suspense>
3645
</AppLayout>
3746
</MantineProvider>
3847
</QueryClientProvider>

‎apps/4-nextjs-ssg/src/pages/index.tsx‎

Lines changed: 24 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { GetStaticProps } from "next";
2-
import { Alert, Card, Skeleton, Stack, Text, Title } from "@mantine/core";
3-
import { IconAlertCircle } from "@tabler/icons-react";
2+
import { Card, Flex, Stack, Text, Title } from "@mantine/core";
43
import Link from "next/link";
54
import { type IPost } from "../api-types";
65

@@ -39,43 +38,31 @@ export default function HomePage({ posts, error }: HomePageProps) {
3938
return (
4039
<Stack>
4140
<Title order={2}>Your Home Feed</Title>
42-
<Stack gap="md">
43-
{error ? (
44-
<Alert
45-
icon={<IconAlertCircle size="1rem" />}
46-
title="Bummer!"
47-
color="red"
41+
<Flex gap="md" wrap="wrap">
42+
{posts?.map((post) => (
43+
<Link
44+
key={post.id}
45+
href={`/posts/${post.id}`}
46+
style={{ textDecoration: "none" }}
4847
>
49-
There was an error fetching posts
50-
</Alert>
51-
) : !posts.length ? (
52-
[...Array(5)].map((_, index) => (
53-
<Card withBorder shadow="md" key={index}>
54-
<Skeleton animate height="20px" width="50%" mb="md" />
55-
<Skeleton animate height="40px" width="100%" mb="md" />
56-
</Card>
57-
))
58-
) : (
59-
posts.map((post) => (
60-
<Link
61-
key={post.id}
62-
href={`/posts/${post.id}`}
63-
style={{ textDecoration: "none" }}
48+
<Card
49+
mih={320}
50+
shadow="md"
51+
w={300}
52+
withBorder
53+
style={{
54+
cursor: "pointer",
55+
}}
6456
>
65-
<Card
66-
withBorder
67-
shadow="md"
68-
style={{
69-
cursor: "pointer",
70-
}}
71-
>
72-
<Title order={3}>{post.title}</Title>
73-
<Text>{post.body}</Text>
74-
</Card>
75-
</Link>
76-
))
77-
)}
78-
</Stack>
57+
<Title order={3}>{post.title}</Title>
58+
<Text>{post.body}</Text>
59+
<Text c="blue" pt="md">
60+
Go to post
61+
</Text>
62+
</Card>
63+
</Link>
64+
))}
65+
</Flex>
7966
</Stack>
8067
);
8168
}

‎apps/4-nextjs-ssg/src/pages/posts/[id].tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export const getStaticProps: GetStaticProps = async (context) => {
3737
]);
3838

3939
const userResponse = await fetch(
40-
`http://localhost:3333/users/${post.userId}`
40+
`http://localhost:3333/users/${post.userId}`,
4141
);
4242

4343
const user = await userResponse.json();

‎apps/5-nextjs-ssr/src/pages/_app.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,15 @@ import Head from "next/head";
44
import { MantineProvider } from "@mantine/core";
55
import { theme } from "@/theme";
66
import { AppLayout } from "@/components/AppLayout";
7-
import { useState } from "react";
7+
import { lazy, Suspense, useState } from "react";
88
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
99

10+
const ReactQueryDevtoolsProduction = lazy(() =>
11+
import("@tanstack/react-query-devtools/production").then((d) => ({
12+
default: d.ReactQueryDevtools,
13+
})),
14+
);
15+
1016
export default function App({ Component, pageProps }: AppProps) {
1117
const [queryClient] = useState(
1218
() =>
@@ -33,6 +39,9 @@ export default function App({ Component, pageProps }: AppProps) {
3339
<MantineProvider theme={theme}>
3440
<AppLayout>
3541
<Component {...pageProps} />
42+
<Suspense fallback={null}>
43+
<ReactQueryDevtoolsProduction />
44+
</Suspense>
3645
</AppLayout>
3746
</MantineProvider>
3847
</QueryClientProvider>

‎apps/5-nextjs-ssr/src/pages/index.tsx‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { GetServerSideProps } from "next";
2-
import { Alert, Card, Skeleton, Stack, Text, Title } from "@mantine/core";
2+
import { Alert, Card, Flex, Stack, Text, Title } from "@mantine/core";
33
import { IconAlertCircle } from "@tabler/icons-react";
44
import Link from "next/link";
55
import { type IPost } from "../api-types";
@@ -38,7 +38,7 @@ export default function HomePage({ posts, error }: HomePageProps) {
3838
return (
3939
<Stack>
4040
<Title order={2}>Your Home Feed</Title>
41-
<Stack gap="md">
41+
<Flex gap="md" wrap="wrap">
4242
{error ? (
4343
<Alert
4444
icon={<IconAlertCircle size="1rem" />}
@@ -47,34 +47,32 @@ export default function HomePage({ posts, error }: HomePageProps) {
4747
>
4848
There was an error fetching posts
4949
</Alert>
50-
) : !posts.length ? (
51-
[...Array(5)].map((_, index) => (
52-
<Card withBorder shadow="md" key={index}>
53-
<Skeleton animate height="20px" width="50%" mb="md" />
54-
<Skeleton animate height="40px" width="100%" mb="md" />
55-
</Card>
56-
))
5750
) : (
58-
posts.map((post) => (
51+
posts?.map((post) => (
5952
<Link
6053
key={post.id}
6154
href={`/posts/${post.id}`}
6255
style={{ textDecoration: "none" }}
6356
>
6457
<Card
65-
withBorder
58+
mih={320}
6659
shadow="md"
60+
w={300}
61+
withBorder
6762
style={{
6863
cursor: "pointer",
6964
}}
7065
>
7166
<Title order={3}>{post.title}</Title>
7267
<Text>{post.body}</Text>
68+
<Text c="blue" pt="md">
69+
Go to post
70+
</Text>
7371
</Card>
7472
</Link>
7573
))
7674
)}
77-
</Stack>
75+
</Flex>
7876
</Stack>
7977
);
8078
}

‎apps/6-remix-ssr/app/root.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,22 @@
11
import "@mantine/core/styles.css";
2-
32
import {
43
Links,
54
Meta,
65
Outlet,
76
Scripts,
87
ScrollRestoration,
98
} from "@remix-run/react";
10-
119
import { MantineProvider, ColorSchemeScript } from "@mantine/core";
1210
import { AppLayout } from "./components/AppLayout";
13-
import { ReactNode, useState } from "react";
11+
import { lazy, ReactNode, Suspense, useState } from "react";
1412
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
1513

14+
const ReactQueryDevtoolsProduction = lazy(() =>
15+
import("@tanstack/react-query-devtools/production").then((d) => ({
16+
default: d.ReactQueryDevtools,
17+
})),
18+
);
19+
1620
export function Layout({ children }: { children: ReactNode }) {
1721
const [queryClient] = useState(
1822
() =>
@@ -39,6 +43,9 @@ export function Layout({ children }: { children: ReactNode }) {
3943
<MantineProvider>
4044
<AppLayout>{children}</AppLayout>
4145
</MantineProvider>
46+
<Suspense fallback={null}>
47+
<ReactQueryDevtoolsProduction />
48+
</Suspense>
4249
</QueryClientProvider>
4350
<ScrollRestoration />
4451
<Scripts />

0 commit comments

Comments
 (0)