8000 feat: add hydration and loading · codeisneverodd/home@1b7e7cc · GitHub
[go: up one dir, main page]
Skip to content

Commit 1b7e7cc

Browse files
codeisneveroddcodeisneverodd
committed
feat: add hydration and loading
1 parent 2417df0 commit 1b7e7cc

File tree

6 files changed

+118
-18
lines changed

6 files changed

+118
-18
lines changed

‎.husky/pre-commit

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
#!/usr/bin/env sh
22
. "$(dirname -- "$0")/_/husky.sh"
33

4-
yarn pre-commit
4+
yarn test

‎package.json

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
{
22
"name": "solution-pass-search",
3-
"version": "0.1.0",
3+
"version": "1.0.0",
44
"private": true,
55
"scripts": {
66
"dev": "next dev -p 8938",
77
"build": "next build",
88
"start": "next start",
9-
"lint": "next lint && tsc --noemit",
109
"prepare": "husky install",
11-
"pre-commit": "yarn lint"
10+
"lint": "next lint && tsc --noemit",
11+
"test": "yarn lint"
1212
},
1313
"dependencies": {
1414
"@chakra-ui/react": "^2.5.1",
@@ -19,13 +19,15 @@
1919
"@fortawesome/free-solid-svg-icons": "^6.3.0",
2020
"@fortawesome/react-fontawesome": "^0.2.0",
2121
"@tanstack/react-query": "^4.24.10",
22+
"@tanstack/react-query-devtools": "^4.26.1",
2223
"@toss/hangul": "^1.2.0",
2324
"@types/node": "18.14.2",
2425
"@types/react": "18.0.28",
2526
"@types/react-dom": "18.0.11",
2627
"eslint": "8.35.0",
2728
"eslint-config-next": "13.2.1",
2829
"framer-motion": "^10.0.0",
30+
"husky": "^8.0.3",
2931
"next": "13.2.1",
3032
"octokit": "^2.0.14",
3133
"react": "18.2.0",
@@ -45,7 +47,6 @@
4547
"eslint-plugin-prettier": "^4.2.1",
4648
"eslint-plugin-react": "^7.32.2",
4749
"eslint-plugin-react-hooks": "^4.6.0",
48-
"husky": "^8.0.3",
4950
"prettier": "^2.8.4"
5051
}
5152
}

‎src/lib/solution-pass/components/ResultSection.tsx

Lines changed: 42 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import useColor from "@/lib/hooks/useColor";
2+
import { CustomAppProps } from "@/pages/_app";
23
import {
34
Accordion,
45
AccordionButton,
@@ -13,13 +14,15 @@ import {
1314
Flex,
1415
Icon,
1516
IconButton,
17+
Spinner,
1618
Text,
1719
useToast
1820
} from "@chakra-ui/react";
1921
import { faCopy } from "@fortawesome/free-solid-svg-icons";
2022
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
23+
import { dehydrate, QueryClient } from "@tanstack/react-query";
2124
import Link from "next/link";
22-
import useRepo, { Prob, Sol } from "../hooks/useRepo";
25+
import useRepo, { Prob, repoQueryOptions, Sol } from "../hooks/useRepo";
2326
import useSearch from "../hooks/useSearch";
2427

2528
export default function ResultSection() {
@@ -64,7 +67,24 @@ function TableContent() {
6467
const { repoQuery } = useRepo();
6568
const { result } = useSearch();
6669

67-
if (!repoQuery.data) return null;
70+
if (repoQuery.isLoading) {
71+
return (
72+
<Flex
73+
h="200px"
74+
px="20px"
75+
direction="column"
76+
align="center"
77+
justify="center"
78+
gap="40px"
79+
>
80+
<Text>해설을 불러오는 중이에요</Text>
81+
82+
<Spinner thickness="2px" speed="1s" size="md" />
83+
</Flex>
84+
);
85+
}
86+
if (repoQuery.isError) return null;
87+
6888
if (result.keyword !== "" && result.probs.length === 0)
6989
return (
7090
<Center h="60px" px="20px">
@@ -90,7 +110,7 @@ function TableRow({ probData: { title, level, id } }: { probData: Prob }) {
90110
const solutions = repoQuery.data?.sols.filter(s => s.probId === id);
91111

92112
return (
93-
<AccordionItem w="full">
113+
<AccordionItem w="full" content-visibility="auto">
94114
<AccordionButton
95115
as={Box}
96116
borderTop="0.5px solid gray"
@@ -129,6 +149,7 @@ function TableRow({ probData: { title, level, id } }: { probData: Prob }) {
129149

130150
function Solutions({ solData: { author, code } }: { solData: Sol }) {
131151
const toast = useToast();
152+
132153
return (
133154
<Flex direction="column" gap="20px">
134155
<Link href={`https://github.com/${author}`} target="_blank">
@@ -158,8 +179,8 @@ function Solutions({ solData: { author, code } }: { solData: Sol }) {
158179
});
159180
}}
160181
pos="absolute"
161-
top="0"
162-
right="0"
182+
top="4px"
183+
right="4px"
163184
/>
164185
<Code
165186
w="full"
@@ -168,10 +189,26 @@ function Solutions({ solData: { author, code } }: { solData: Sol }) {
168189
py="20px"
169190
px="12px"
170191
overflow="scroll"
192+
_light={{
193+
bg: "white"
194+
}}
171195
>
172196
{code}
173197
</Code>
174198
</Box>
175199
</Flex>
176200
);
177201
}
202+
203+
export async function getServerSideProps() {
204+
const queryClient = new QueryClient();
205+
await queryClient.prefetchQuery(repoQueryOptions.all);
206+
207+
const props: CustomAppProps["pageProps"] = {
208+
dehydratedState: dehydrate(queryClient)
209+
};
210+
211+
return {
212+
props
213+
};
214+
}

‎src/lib/solution-pass/hooks/useRepo.ts

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,15 @@ const getRepo = (() => {
3434
};
3535
})();
3636

37+
export const repoQueryOptions = {
38+
all: {
39+
queryKey: ["repo"],
40+
queryFn: getRepo
41+
}
42+
};
43+
3744
export default function useRepo() {
38-
const repoQuery = useQuery({ queryKey: ["repo"], queryFn: getRepo });
45+
const repoQuery = useQuery(repoQueryOptions.all);
3946

4047
return { repoQuery };
4148
}

‎src/pages/_app.tsx

Lines changed: 22 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,34 @@
11
import { ChakraProvider } from "@chakra-ui/react";
2-
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
2+
import {
3+
dehydrate,
4+
Hydrate,
5+
QueryClient,
6+
QueryClientProvider
7+
} from "@tanstack/react-query";
8+
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
39
import type { AppProps } from "next/app";
410
import { useState } from "react";
511
import { RecoilRoot } from "recoil";
612

7-
export default function App({ Component, pageProps }: AppProps) {
13+
export default function App({ Component, pageProps }: CustomAppProps) {
814
const [queryClient] = useState(() => new QueryClient());
915

1016
return (
1117
<QueryClientProvider client={queryClient}>
12-
<ChakraProvider>
13-
<RecoilRoot>
14-
<Component {...pageProps} />
15-
</RecoilRoot>
16-
</ChakraProvider>
18+
<Hydrate state={pageProps.dehydratedState}>
19+
<ChakraProvider>
20+
<RecoilRoot>
21+
<Component {...pageProps} />
22+
</RecoilRoot>
23+
</ChakraProvider>
24+
</Hydrate>
25+
<ReactQueryDevtools initialIsOpen={false} />
1726
</QueryClientProvider>
1827
);
1928
}
29+
30+
export interface CustomAppProps extends AppProps {
31+
pageProps: {
32+
dehydratedState?: ReturnType<typeof dehydrate>;
33+
};
34+
}

‎yarn.lock

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1383,11 +1383,27 @@
13831383
dependencies:
13841384
tslib "^2.4.0"
13851385

1386+
"@tanstack/match-sorter-utils@^8.7.0":
1387+
version "8.7.6"
1388+
resolved "https://registry.yarnpkg.com/@tanstack/match-sorter-utils/-/match-sorter-utils-8.7.6.tgz#ccf54a37447770e0cf0fe49a579c595fd2655b16"
1389+
integrity sha512-2AMpRiA6QivHOUiBpQAVxjiHAA68Ei23ZUMNaRJrN6omWiSFLoYrxGcT6BXtuzp0Jw4h6HZCmGGIM/gbwebO2A==
1390+
dependencies:
1391+
remove-accents "0.4.2"
1392+
13861393
"@tanstack/query-core@4.24.10":
13871394
version "4.24.10"
13881395
resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-4.24.10.tgz#758e1f5b2d7faf7316d299facd272a9f64c26299"
13891396
integrity sha512-2QywqXEAGBIUoTdgn1lAB4/C8QEqwXHj2jrCLeYTk2xVGtLiPEUD8jcMoeB2noclbiW2mMt4+Fq7fZStuz3wAQ==
13901397

1398+
"@tanstack/react-query-devtools@^4.26.1":
1399+
version "4.26.1"
1400+
resolved "https://registry.yarnpkg.com/@tanstack/react-query-devtools/-/react-query-devtools-4.26.1.tgz#1895b2c6a257e461fa071a30202565d174e36238"
1401+
integrity sha512-ts2mA+fyFYFRi3Cee4xBk8Fx6waSFOM+yCkFqwJfGQRGjjTIMYMZPJv4wkv7vy12IVi1SYhL8au22LRKlXS1Zg==
1402+
dependencies:
1403+
"@tanstack/match-sorter-utils" "^8.7.0"
1404+
superjson "^1.10.0"
1405+
use-sync-external-store "^1.2.0"
1406+
13911407
"@tanstack/react-query@^4.24.10":
13921408
version "4.24.10"
13931409
resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-4.24.10.tgz#2e1004bb1d1f55198961a21e875e2c65ec865130"
@@ -1863,6 +1879,13 @@ convert-source-map@^1.5.0:
18631879
resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
18641880
integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
18651881

1882+
copy-anything@^3.0.2:
1883+
version "3.0.3"
1884+
resolved "https://registry.yarnpkg.com/copy-anything/-/copy-anything-3.0.3.tgz#206767156f08da0e02efd392f71abcdf79643559"
1885+
integrity sha512-fpW2W/BqEzqPp29QS+MwwfisHCQZtiduTe/m8idFo0xbti9fIZ2WVhAsCv4ggFVH3AgCkVdpoOCtQC6gBrdhjw==
1886+
dependencies:
1887+
is-what "^4.1.8"
1888+
18661889
copy-to-clipboard@3.3.3:
18671890
version "3.3.3"
18681891
resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz#55ac43a1db8ae639a4bd99511c148cdd1b83a1b0"
@@ -2929,6 +2952,11 @@ is-weakset@^2.0.1:
29292952
call-bind "^1.0.2"
29302953
get-intrinsic "^1.1.1"
29312954

2955+
is-what@^4.1.8:
2956+
version "4.1.8"
2957+
resolved "https://registry.yarnpkg.com/is-what/-/is-what-4.1.8.tgz#0e2a8807fda30980ddb2571c79db3d209b14cbe4"
2958+
integrity sha512-yq8gMao5upkPoGEU9LsB2P+K3Kt8Q3fQFCGyNCWOAnJAMzEXVV9drYb0TXr42TTliLLhKIBvulgAXgtLLnwzGA==
2959+
29322960
is-wsl@^2.2.0:
29332961
version "2.2.0"
29342962
resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.2.0.tgz#74a4c76e77ca9fd3f932f290c17ea326cd157271"
@@ -3482,6 +3510,11 @@ regexpp@^3.2.0:
34823510
resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
34833511
integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
34843512

3513+
remove-accents@0.4.2:
3514+
version "0.4.2"
3515+
resolved "https://registry.yarnpkg.com/remove-accents/-/remove-accents-0.4.2.tgz#0a43d3aaae1e80db919e07ae254b285d9e1c7bb5"
3516+
integrity sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA==
3517+
34853518
resolve-from@^4.0.0:
34863519
version "4.0.0"
34873520
resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
@@ -3666,6 +3699,13 @@ stylis@4.1.3:
36663699
resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.1.3.tgz#fd2fbe79f5fed17c55269e16ed8da14c84d069f7"
36673700
integrity sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA==
36683701

3702+
superjson@^1.10.0:
3703+
version "1.12.2"
3704+
resolved "https://registry.yarnpkg.com/superjson/-/superjson-1.12.2.tgz#072471f1e6add2d95a38b77fef8c7a199d82103a"
3705+
integrity sha512-ugvUo9/WmvWOjstornQhsN/sR9mnGtWGYeTxFuqLb4AiT4QdUavjGFRALCPKWWnAiUJ4HTpytj5e0t5HoMRkXg==
3706+
dependencies:
3707+
copy-anything "^3.0.2"
3708+
36693709
supports-color@^5.3.0:
36703710
version "5.5.0"
36713711
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"

0 commit comments

Comments
 (0)
0