Skip to content

Commit 4272225

Browse files
azinitazinit
committed
refactor(lint): decompose big components
#163
1 parent cd29416 commit 4272225

File tree

7 files changed

+158
-70
lines changed

7 files changed

+158
-70
lines changed

‎src/features/search/results/index.tsx‎

Lines changed: 18 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
11
import React from "react";
2-
import cn from "classnames";
3-
import { Skeleton, Empty, Pagination } from "antd";
4-
import { Repo, User, Org, Card } from "shared/components";
2+
import Toolbar from "./toolbar";
3+
import List from "./list";
4+
import Pagination from "./pagination";
55
import { useSearch, PAGE_SIZE } from "./hooks";
66
import { useSearchQuery } from "./queries.gen";
7-
import SortSelect from "./sort-select";
8-
import "./index.scss";
9-
10-
// FIXME: decompose
117

128
/**
139
* @feature Результаты поиска
@@ -28,65 +24,23 @@ const SearchResults = () => {
2824

2925
return (
3026
<div className="search-results">
31-
<h2 className="search-results__toolbar flex">
32-
<span className="search-results__label flex-grow">
33-
{loading && (
34-
<Skeleton
35-
className="search-results__label-placeholder"
36-
paragraph={false}
37-
active
38-
/>
39-
)}
40-
{!loading && (
41-
<>
42-
{count} results by <b>{searchConfig.queryClean}</b>:
43-
</>
44-
)}
45-
</span>
46-
<SortSelect className="search-results__sort-select ml-4" />
47-
</h2>
48-
<div className="search-results__list">
49-
{loading && <Card.SkeletonGroup amount={PAGE_SIZE} />}
50-
{data?.search.nodes?.map((node) => (
51-
<ResultItem key={node?.id} className={(node as any).__typename}>
52-
{isRepoSearch && <Repo data={node} format="owner-repo" />}
53-
{/* !!! FIXME: simplify */}
54-
{isUserSearch &&
55-
((node as any)?.__typename === "Organization" ? (
56-
<Org data={node} />
57-
) : (
58-
<User data={node} />
59-
))}
60-
</ResultItem>
61-
))}
62-
{isEmpty && <Empty className="p-8" description="No results found" />}
63-
</div>
64-
<div className="search-results__pagination text-center mt-6">
65-
{count > PAGE_SIZE && (
66-
<Pagination
67-
current={page}
68-
/**
69-
* Отображаем минимальное
70-
* - либо по кол-ву результатов,
71-
* - либо с ограничением в 100 страниц
72-
* (как на github)
73-
* @remark Да и их API не возвращает результаты после 1000
74-
*/
75-
total={Math.min(count, 100 * PAGE_SIZE)}
76-
onChange={handlePageChange}
77-
pageSize={PAGE_SIZE}
78-
showSizeChanger={false}
79-
showQuickJumper
80-
responsive
81-
/>
82-
)}
83-
</div>
27+
<Toolbar count={count} loading={loading} queryClean={searchConfig.queryClean} />
28+
<List
29+
nodes={data?.search.nodes}
30+
loading={loading}
31+
isEmpty={isEmpty}
32+
isRepoSearch={isRepoSearch}
33+
isUserSearch={isUserSearch}
34+
pageSize={PAGE_SIZE}
35+
/>
36+
<Pagination
37+
count={count}
38+
handlePageChange={handlePageChange}
39+
page={page}
40+
pageSize={PAGE_SIZE}
41+
/>
8442
</div>
8543
);
8644
};
8745

88-
const ResultItem = ({ children, className }: PropsWithChildren & PropsWithClassName) => (
89-
<div className={cn("search-results__item", "mb-6", className)}>{children}</div>
90-
);
91-
9246
export default SearchResults;

‎src/features/search/results/list/index.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.search-results {
2+
&__item {
3+
user-select: none;
4+
border-radius: 10px;
5+
}
6+
}

‎src/features/search/results/list/index.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React from "react";
2+
import cn from "classnames";
3+
import { Empty } from "antd";
4+
import { Repo, User, Org, Card } from "shared/components";
5+
import { SearchQuery } from "../queries.gen";
6+
import "./index.scss";
7+
8+
type Props = {
9+
/** Размер страницы */
10+
pageSize: number;
11+
/** Флаг загрузки */
12+
loading: boolean;
13+
/** Результаты поиска */
14+
nodes: SearchQuery["search"]["nodes"];
15+
/** Флаг пустого результата поиска */
16+
isEmpty: boolean;
17+
/** Флаг - поиск по репозиториям */
18+
isRepoSearch: boolean;
19+
/** Флаг - поиск по пользователям */
20+
isUserSearch: boolean;
21+
};
22+
23+
/**
24+
* Список результатов поиска
25+
*/
26+
const ResultsList = (props: Props) => {
27+
const { loading, nodes, pageSize, isEmpty, isRepoSearch, isUserSearch } = props;
28+
29+
return (
30+
<div className="search-results__list">
31+
{loading && <Card.SkeletonGroup amount={pageSize} />}
32+
{nodes?.map((node) => (
33+
<div
34+
key={node?.id}
35+
className={cn("search-results__item", "mb-6", (node as any).__typename)}
36+
>
37+
{/* !!! FIXME: simplify */}
38+
{isRepoSearch && <Repo data={node} format="owner-repo" />}
39+
{isUserSearch &&
40+
((node as any)?.__typename === "Organization" ? (
41+
<Org data={node} />
42+
) : (
43+
<User data={node} />
44+
))}
45+
</div>
46+
))}
47+
{isEmpty && <Empty className="p-8" description="No results found" />}
48+
</div>
49+
);
50+
};
51+
52+
export default ResultsList;

‎src/features/search/results/pagination/index.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import React from "react";
2+
import { Pagination } from "antd";
3+
4+
type Props = {
5+
/** Текущая страница */
6+
page: number;
7+
/** Размер страницы */
8+
pageSize: number;
9+
/** Количество результатов */
10+
count: number;
11+
/** @handler Изменение номера страницы */
12+
handlePageChange: (page: number) => void;
13+
};
14+
15+
/**
16+
* Пагинация по поиску
17+
*/
18+
const ResultsPagination = (props: Props) => {
19+
const { count, pageSize, page, handlePageChange } = props;
20+
return (
21+
<div className="search-results__pagination text-center mt-6">
22+
{count > pageSize && (
23+
<Pagination
24+
current={page}
25+
/**
26+
* Отображаем минимальное
27+
* - либо по кол-ву результатов,
28+
* - либо с ограничением в 100 страниц
29+
* (как на github)
30+
* @remark Да и их API не возвращает результаты после 1000
31+
*/
32+
total={Math.min(count, 100 * pageSize)}
33+
onChange={handlePageChange}
34+
pageSize={pageSize}
35+
showSizeChanger={false}
36+
showQuickJumper
37+
responsive
38+
/>
39+
)}
40+
</div>
41+
);
42+
};
43+
44+
export default ResultsPagination;

src/features/search/results/index.scss renamed to src/features/search/results/toolbar/index.scss

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,4 @@
99
max-width: 50%;
1010
}
1111
}
12-
13-
&__item {
14-
user-select: none;
15-
border-radius: 10px;
16-
}
1712
}

‎src/features/search/results/toolbar/index.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from "react";
2+
import { Skeleton } from "antd";
3+
import SortSelect from "./sort-select";
4+
import "./index.scss";
5+
6+
type Props = {
7+
loading: boolean;
8+
queryClean: string;
9+
count: number;
10+
};
11+
12+
/**
13+
* Тулбар результатов поиска
14+
*/
15+
const ResultsToolbar = ({ loading, queryClean, count }: Props) => {
16+
return (
17+
<h2 className="search-results__toolbar flex">
18+
<span className="search-results__label flex-grow">
19+
{loading && (
20+
<Skeleton
21+
className="search-results__label-placeholder"
22+
paragraph={false}
23+
active
24+
/>
25+
)}
26+
{!loading && (
27+
<>
28+
{count} results by <b>{queryClean}</b>:
29+
</>
30+
)}
31+
</span>
32+
<SortSelect className="search-results__sort-select ml-4" />
33+
</h2>
34+
);
35+
};
36+
37+
export default ResultsToolbar;

src/features/search/results/sort-select.tsx renamed to src/features/search/results/toolbar/sort-select.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react";
22
import cn from "classnames";
33
import { Select } from "antd";
4-
import * as Params from "../params";
4+
import * as Params from "../../params";
55

66
/**
77
* Select-меню для выбора сортировки поисковых результатов

0 commit comments

Comments
 (0)