-
Notifications
You must be signed in to change notification settings - Fork 1
/
browse.tsx
150 lines (131 loc) · 4.8 KB
/
browse.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
import { Button } from '@sharingan/front/forms/button';
import { SelectInput } from '@sharingan/front/forms/select-input';
import { ChevronDoubleLeftIcon, ChevronDoubleRightIcon, SearchIcon } from '@sharingan/front/icons';
import { usePublicSnippets } from '@sharingan/front/services';
import { SelectOption } from '@sharingan/front/typings/components';
import { PublicSnippetItem, PublicSnippetResult } from '@sharingan/front/typings/queries';
import { NextSeo } from 'next-seo';
import { useState } from 'react';
import { Layout } from '@/components/layout/private/layout';
import { PublicSnippet } from '@/components/snippets/public-snippet';
import { usePaginationToken } from '@/hooks/usePaginationToken';
type Props = {
data: PublicSnippetResult;
};
const sortOptions: SelectOption[] = [
{ id: 'recently-created', label: 'Sort: recently created' },
{ id: 'recently-updated', label: 'Sort: recently updated' },
];
const Browse = ({ data }: Props) => {
const [snippetList, setSnippetList] = useState<PublicSnippetItem[]>(data.items);
const [sortOption, setSortOption] = useState<SelectOption>(sortOptions[0]);
const [search, setSearch] = useState<string | undefined>();
const { addPageFromNext, addPageFromPrevious, canGoBack, canGoForward, getPage } = usePaginationToken(
data.nextToken ?? null,
);
const { findPublicSnippets, isLoading } = usePublicSnippets();
const onSearchChange = (value: string) => {
setSearch(value);
console.log('Search => ', search);
// TODO make request
};
const onSortOptionChange = (option: SelectOption) => {
setSortOption(option);
console.log('Sort option => ', sortOption);
// TODO make request
};
const onNextItemClick = async () => {
const page = getPage();
await findPublicSnippets({
itemPerPage: data.itemPerPage,
nextToken: page?.nextToken,
// keyword: search,
// sort: sortOption.id,
onCompleted: (data) => {
console.log('Result Next => ', data);
if (!data) {
return;
}
setSnippetList(data.items);
addPageFromNext(data.nextToken ?? null);
},
});
};
const onPreviousItemClick = async () => {
const page = getPage();
await findPublicSnippets({
itemPerPage: data.itemPerPage,
nextToken: page?.previousToken,
// keyword: search,
// sort: sortOption.id,
onCompleted: (data) => {
console.log('Result Previous => ', data);
if (!data) {
return;
}
setSnippetList(data.items);
addPageFromPrevious(data.nextToken ?? null);
},
});
};
return (
<Layout>
<NextSeo title="Browse" />
<div className="py-10">
<main>
<div className="max-w-6xl mx-auto sm:px-6 lg:px-8">
<div className="w-full mx-auto border-b border-gray-400 flex justify-between pb-4">
<div className="relative mt-1 rounded-md shadow-sm w-1/4">
<input
className="block w-full rounded-md border-gray-300 pr-10 sm:text-sm"
id="account-number"
name="account-number"
placeholder="Search..."
type="text"
onChange={(e) => onSearchChange(e.target.value)}
/>
<div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
<SearchIcon className="h-5 w-5 text-gray-400" />
</div>
</div>
<SelectInput
className="w-1/5 cursor-pointer"
options={sortOptions}
value={sortOption}
onChange={onSortOptionChange}
/>
</div>
<div className="px-4 py-8 sm:px-0">
<div className="space-y-6 min-h-96">
{snippetList.map((snippet) => (
<PublicSnippet key={snippet.id} snippet={snippet} />
))}
</div>
<div className="w-full flex justify-center mt-10 space-x-4">
<Button
className="bg-gray-200 w-auto items-center"
color="white-gray"
disabled={!canGoBack}
onClick={onPreviousItemClick}
>
<ChevronDoubleLeftIcon className="w-6 h-4" />
Previous
</Button>
<Button
className="bg-gray-200 w-auto items-center"
color="white-gray"
disabled={!canGoForward}
onClick={onNextItemClick}
>
Next
<ChevronDoubleRightIcon className="w-6 h-4" />
</Button>
</div>
</div>
</div>
</main>
</div>
</Layout>
);
};
export { Browse };