8000 feat: add LangFilter · codeisneverodd/home@2d21125 · GitHub
[go: up one dir, main page]
Skip to content

Commit 2d21125

Browse files
codeisneveroddcodeisneverodd
committed
feat: add LangFilter
1 parent 4dcad76 commit 2d21125

File tree

10 files changed

+302
-167
lines changed

10 files changed

+302
-167
lines changed

‎src/lib/@hooks/useColor.ts

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { useColorModeValue } from "@chakra-ui/react";
2+
import { Lang } from "../solution-pass/hooks/useSearch";
23

34
export default function useColor() {
45
const bodyBg = useColorModeValue("white", "gray.800");
@@ -13,5 +14,11 @@ export default function useColor() {
1314
return "#2189ff";
1415
};
1516

16-
return { bodyBg, subtleBg, alphaBg, accentBg, getCountColor };
17+
const getLangColor = (lang: Lang) => {
18+
if (lang === "JavaScript") return "#f7df1e";
19+
if (lang === "Python") return "#4584B6";
20+
return accentBg;
21+
};
22+
23+
return { bodyBg, subtleBg, alphaBg, accentBg, getCountColor, getLangColor };
1724
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export default function DropdownSearhBar() {
1919
}
2020

2121
function Result({ onClose }: { onClose: () => void }) {
22-
const { result, select } = useSearch();
22+
const { result, selectProb: select } = useSearch();
2323
const { subtleBg } = useColor();
2424

2525
const ref = useRef(null);

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import useClient from "@/lib/@hooks/useClient";
2+
import { Checkbox, Flex, Stack, Text } from "@chakra-ui/react";
3+
import useSearch, { POSSIBLE_LANGS } from "../hooks/useSearch";
4+
5+
export default function LangFilter() {
6+
const { result, toggleLang, toggleAllLang } = useSearch();
7+
const isClient = useClient();
8+
if (!isClient) return null;
9+
10+
return (
11+
<Flex direction="column" w="full" pl="12px">
12+
<Text>언어 선택</Text>
13+
<Stack spacing={5} direction="row">
14+
<Checkbox
15+
isChecked={result.selectedLangs?.length === POSSIBLE_LANGS.length}
16+
onChange={() => {
17+
toggleAllLang();
18+
}}
19+
>
20+
전체
21+
</Checkbox>
22+
{POSSIBLE_LANGS.map(lang => (
23+
<Checkbox
24+
key={lang}
25+
isChecked={result.selectedLangs?.includes(lang)}
26+
onChange={() => {
27+
toggleLang(lang);
28+
}}
29+
>
30+
{lang}
31+
</Checkbox>
32+
))}
33+
</Stack>
34+
</Flex>
35+
);
36+
}

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

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
11
import {
2-
Icon,
32
Input,
43
InputGroup,
5-
InputLeftElement,
64
InputRightElement,
75
Spinner
86
} from "@chakra-ui/react";
9-
import { faSearch } from "@fortawesome/free-solid-svg-icons";
10-
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
117
import { ComponentProps, useState } from "react";
128
import useSearch from "../hooks/useSearch";
139

@@ -40,9 +36,7 @@ export default function SearhBar(props: ComponentProps<typeof Input>) {
4036
placeholder="문제를 검색해주세요"
4137
{...props}
4238
/>
43-
<InputLeftElement>
44-
<Icon as={FontAwesomeIcon} icon={faSearch} />
45-
</InputLeftElement>
39+
4640
<InputRightElement>
4741
<Spinner
4842
display={isTyping ? "block" : "none"}

‎src/lib/solution-pass/components/ResultSection.tsx renamed to ‎src/lib/solution-pass/components/SearchResultSection.tsx

Lines changed: 46 additions & 26 deletions
< 72A8 td data-grid-cell-id="diff-59205f50442f9c2173f953cde81a3d8eb5494b7c806a869e107dde6dd40d35f5-186-185-0" data-selected="false" role="gridcell" style="background-color:var(--diffBlob-deletionNum-bgColor, var(--diffBlob-deletion-bgColor-num));text-align:center" tabindex="-1" valign="top" class="focusable-grid-cell diff-line-number position-relative left-side">186
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ import { InView } from "react-intersection-observer";
2727
import useRepo, { Prob, repoQueryOptions, Sol } from "../hooks/useRepo";
2828
import useSearch from "../hooks/useSearch";
2929

30-
export default function ResultSection() {
30+
export default function SearchResultSection() {
3131
const { subtleBg } = useColor();
3232

3333
return (
@@ -67,11 +67,11 @@ function TableHeader() {
6767
}
6868

6969
function TableContent() {
70-
const { repoQuery } = useRepo();
70+
const { probsQuery } = useRepo();
7171
const { result } = useSearch();
7272
const [itemsInViewLength, setItemsInViewLength] = useState(30);
7373

74-
if (repoQuery.isLoading) {
74+
if (probsQuery.isLoading) {
7575
return (
7676
<Flex
7777
h="200px"
@@ -87,19 +87,26 @@ function TableContent() {
8787
</Flex>
8888
);
8989
}
90-
if (repoQuery.isError) return null;
90+
if (probsQuery.isError) return null;
9191

9292
if (result.keyword !== "" && result.probs.length === 0) {
9393
return (
94-
<Center h="60px" px="20px">
94+
<Center h="60px" px="20px" pb="20px">
9595
<Text>일치하는 문제가 없어요</Text>
9696
</Center>
9797
);
9898
}
9999

100-
const items = (
101-
result.keyword === "" ? repoQuery.data.probs : result.probs
102-
).slice();
100+
if (result.selectedLangs?.length === 0) {
101+
return (
102+
<Center h="60px" px="20px" pb="20px">
103+
<Text>언어를 선택해주세요</Text>
104+
</Center>
105+
);
106+
}
107+
const items = (result.keyword === "" ? probsQuery.data : result.probs)
108+
.slice()
109+
.sort((a, b) => b.solvedCount - a.solvedCount);
103110

104111
return (
105112
<>
@@ -130,8 +137,12 @@ function TableContent() {
130137
}
131138

132139
function TableRow({ probData: { title, id } }: { probData: Prob }) {
133-
const { repoQuery } = useRepo();
134-
const solutions = repoQuery.data?.sols.filter(s => s.probId === id);
140+
const { solsQuery } = useRepo();
141+
const { result } = useSearch();
142+
const solutions = solsQuery.data?.filter(
143+
s => s.probId === id && result.selectedLangs?.includes(s.lang)
144+
);
145+
135146
const { getCountColor } = useColor();
136147

137148
return (
@@ -167,24 +178,32 @@ function TableRow({ probData: { title, id } }: { probData: Prob }) {
167178
);
168179
}
169180

170-
function Solutions({ solData: { author, code } }: { solData: Sol }) {
181+
function Solutions({ solData: { author, code, lang } }: { solData: Sol }) {
171182
const toast = useToast();
172-
183+
const { getLangColor } = useColor();
173184
return (
174185
<Flex direction="column" gap="20px">
175-
<Link href={`https://github.com/${author}`} target="_blank">
176-
<Button
177-
h="64px"
178-
w="full"
179-
textAlign="left"
180-
justifyContent="left"
181-
gap="20px"
182-
variant="ghost"
183-
>
184-
<Avatar src={`https://github.com/${author}.png`} />
185-
<Text fontWeight="bold"> {author}</Text>
-
</Button>
187-
</Link>
186+
<Flex align="center" justify="space-between">
187+
<Link href={`https://github.com/${author}`} target="_blank">
188+
<Button
189+
h="64px"
190+
w="full"
191+
textAlign="left"
192+
justifyContent="left"
193+
gap="20px"
194+
variant="ghost"
195+
>
196+
<Avatar src={`https://github.com/${author}.png`} />
197+
<Text fontWeight="bold"> {author}</Text>
198+
</Button>
199+
</Link>
200+
<Center bg={getLangColor(lang)} px="12px" h="30px" rounded="4px">
201+
<Text fontWeight="extrabold" color="black">
202+
{lang}
203+
</Text>
204+
</Center>
205+
</Flex>
206+
188207
<Box as="pre" w="full" overflow="hidden" pos="relative">
189208
<IconButton
190209
icon={<Icon as={FontAwesomeIcon} icon={faCopy} />}
@@ -221,7 +240,8 @@ function Solutions({ solData: { author, code } }: { solData: Sol }) {
221240

222241
export async function getServerSideProps() {
223242
const queryClient = new QueryClient();
224-
await queryClient.prefetchQuery(repoQueryOptions.all);
243+
await queryClient.prefetchQuery(repoQueryOptions.probs);
244+
await queryClient.prefetchQuery(repoQueryOptions.sols);
225245

226246
const props: CustomAppProps["pageProps"] = {
227247
dehydratedState: dehydrate(queryClient)

0 commit comments

Comments
 (0)
0