Skip to content

Commit 629b943

Browse files
marcodejonghmarcodejongh
committed
Change classics only to a toggle
1 parent 19aa52c commit 629b943

File tree

1 file changed

+41
-61
lines changed

1 file changed

+41
-61
lines changed

‎app/components/search-drawer/basic-search-form.tsx‎

Lines changed: 41 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client';
22

33
import React from 'react';
4-
import { Form, InputNumber, Row, Col, Select, Input, Switch, Alert, Typography } from 'antd';
4+
import { Form, InputNumber, Row, Col, Select, Input, Switch, Alert, Typography, Slider } from 'antd';
55
import { TENSION_KILTER_GRADES } from '@/app/lib/board-data';
66
import { useUISearchParams } from '@/app/components/queue-control/ui-searchparams-provider';
77
import SearchClimbNameInput from './search-climb-name-input';
@@ -15,14 +15,6 @@ const BasicSearchForm: React.FC = () => {
1515
const userId = user?.id;
1616
const grades = TENSION_KILTER_GRADES;
1717

18-
const handleGradeChange = (type: 'min' | 'max', value: number | undefined) => {
19-
if (type === 'min') {
20-
updateFilters({ minGrade: value });
21-
} else {
22-
updateFilters({ maxGrade: value });
23-
}
24-
};
25-
2618
const renderLogbookSection = () => {
2719
if (!userId) {
2820
return (
@@ -41,27 +33,31 @@ const BasicSearchForm: React.FC = () => {
4133
<>
4234
<Form.Item label="Climbs I have Done" valuePropName="checked">
4335
<Switch
36+
style={{ float: 'right' }}
4437
checked={uiSearchParams.showDone}
4538
onChange={(checked) => updateFilters({ showDone: checked })}
4639
/>
4740
</Form.Item>
4841

4942
<Form.Item label="Climbs I have Attempted" valuePropName="checked">
5043
<Switch
44+
style={{ float: 'right' }}
5145
checked={uiSearchParams.showAttempted}
5246
onChange={(checked) => updateFilters({ showAttempted: checked })}
5347
/>
5448
</Form.Item>
5549

5650
<Form.Item label="Climbs I have Not Attempted" valuePropName="checked">
5751
<Switch
52+
style={{ float: 'right' }}
5853
checked={uiSearchParams.showNotAttempted}
5954
onChange={(checked) => updateFilters({ showNotAttempted: checked })}
6055
/>
6156
</Form.Item>
6257

6358
<Form.Item label="Climbs I Liked" valuePropName="checked">
6459
<Switch
60+
style={{ float: 'right' }}
6561
checked={uiSearchParams.showOnlyLiked}
6662
onChange={(checked) => updateFilters({ showOnlyLiked: checked })}
6763
/>
@@ -71,57 +67,37 @@ const BasicSearchForm: React.FC = () => {
7167
};
7268

7369
return (
74-
<Form labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
70+
<Form layout="horizontal" labelAlign="left" labelCol={{ span: 14 }} wrapperCol={{ span: 10 }}>
7571
<Form.Item label="Climb Name">
7672
<SearchClimbNameInput />
7773
</Form.Item>
7874

7975
<Form.Item label="Grade Range">
80-
<Row gutter={8}>
81-
<Col span={12}>
82-
<Form.Item label="Min" noStyle>
83-
<Select
84-
value={uiSearchParams.minGrade || 0}
85-
defaultValue={0}
86-
onChange={(value) => handleGradeChange('min', value)}
87-
style={{ width: '100%' }}
88-
>
89-
<Select.Option value={0}>Any</Select.Option>
90-
{grades.map((grade) => (
91-
<Select.Option key={grade.difficulty_id} value={grade.difficulty_id}>
92-
{grade.difficulty_name}
93-
</Select.Option>
94-
))}
95-
</Select>
96-
</Form.Item>
97-
</Col>
98-
<Col span={12}>
99-
<Form.Item label="Max" noStyle>
100-
<Select
101-
value={uiSearchParams.maxGrade || 0}
102-
defaultValue={0}
103-
onChange={(value) => handleGradeChange('max', value)}
104-
style={{ width: '100%' }}
105-
>
106-
<Select.Option value={0}>Any</Select.Option>
107-
{grades.map((grade) => (
108-
<Select.Option key={grade.difficulty_id} value={grade.difficulty_id}>
109-
{grade.difficulty_name}
110-
</Select.Option>
111-
))}
112-
</Select>
113-
</Form.Item>
114-
</Col>
115-
</Row>
76+
<Slider
77+
range
78+
min={grades[0].difficulty_id}
79+
max={grades[grades.length - 1].difficulty_id}
80+
value={[uiSearchParams.minGrade, uiSearchParams.maxGrade]}
81+
marks={{
82+
[uiSearchParams.minGrade]: {
83+
style: { transform: 'translate(-5px, 0px)' },
84+
label: grades.find(({ difficulty_id }) => difficulty_id === uiSearchParams.minGrade)?.difficulty_name,
85+
},
86+
[uiSearchParams.maxGrade]: {
87+
style: { transform: 'translate(-5px, -30px)' },
88+
label: grades.find(({ difficulty_id }) => difficulty_id === uiSearchParams.maxGrade)?.difficulty_name,
89+
},
90+
}}
91+
onChange={(value) => updateFilters({ minGrade: value[0], maxGrade: value[1] })}
92+
/>
11693
</Form.Item>
11794

11895
<Form.Item label="Min Ascents">
11996
<InputNumber
12097
min={1}
12198
value={uiSearchParams.minAscents}
122-
onChange={(value) => updateFilters({ minAscents: value || undefined })}
99+
onChange={(value) => updateFilters({ minAscents: value || 10 })}
123100
style={{ width: '100%' }}
124-
placeholder="Any"
125101
/>
126102
</Form.Item>
127103

@@ -158,30 +134,26 @@ const BasicSearchForm: React.FC = () => {
158134
max={3.0}
159135
step={0.1}
160136
value={uiSearchParams.minRating}
161-
onChange={(value) => updateFilters({ minRating: value || undefined })}
137+
onChange={(value) => updateFilters({ minRating: value || 1 })}
162138
style={{ width: '100%' }}
163-
placeholder="Any"
164139
/>
165140
</Form.Item>
166141

167-
<Form.Item label="Classics Only">
168-
<Select
169-
value={uiSearchParams.onlyClassics}
170-
onChange={(value) => updateFilters({ onlyClassics: value })}
171-
style={{ width: '100%' }}
172-
>
173-
<Select.Option value="0">No</Select.Option>
174-
<Select.Option value="1">Yes</Select.Option>
175-
</Select>
142+
<Form.Item label="Classics Only" valuePropName="checked">
143+
<Switch
144+
style={{ float: 'right' }}
145+
checked={uiSearchParams.onlyClassics}
146+
onChange={(checked) => updateFilters({ onlyClassics: checked })}
147+
/>
176148
</Form.Item>
177149

178150
<Form.Item label="Grade Accuracy">
179151
<Select
180152
value={uiSearchParams.gradeAccuracy}
181-
onChange={(value) => updateFilters({ gradeAccuracy: value || undefined })}
153+
onChange={(value) => updateFilters({ gradeAccuracy: value })}
182154
style={{ width: '100%' }}
183155
>
184-
<Select.Option value={undefined}>Any</Select.Option>
156+
<Select.Option value={1}>Any</Select.Option>
185157
<Select.Option value={0.2}>Somewhat Accurate (&lt;0.2)</Select.Option>
186158
<Select.Option value={0.1}>Very Accurate (&lt;0.1)</Select.Option>
187159
<Select.Option value={0.05}>Extremely Accurate (&lt;0.05)</Select.Option>
@@ -200,6 +172,7 @@ const BasicSearchForm: React.FC = () => {
200172

201173
<Form.Item label="Only Climbs with Beta Videos" valuePropName="checked">
202174
<Switch
175+
style={{ float: 'right' }}
203176
checked={uiSearchParams.onlyWithBeta}
204177
onChange={(checked) => updateFilters({ onlyWithBeta: checked })}
205178
/>
@@ -211,13 +184,15 @@ const BasicSearchForm: React.FC = () => {
211184

212185
<Form.Item label="Boulders" valuePropName="checked">
213186
<Switch
187+
style={{ float: 'right' }}
214188
checked={uiSearchParams.showBoulders}
215189
onChange={(checked) => updateFilters({ showBoulders: checked })}
216190
/>
217191
</Form.Item>
218192

219193
<Form.Item label="Routes" valuePropName="checked">
220194
<Switch
195+
style={{ float: 'right' }}
221196
checked={uiSearchParams.showRoutes}
222197
onChange={(checked) => updateFilters({ showRoutes: checked })}
223198
/>
@@ -229,20 +204,23 @@ const BasicSearchForm: React.FC = () => {
229204

230205
<Form.Item label="Established" valuePropName="checked">
231206
<Switch
207+
style={{ float: 'right' }}
232208
checked={uiSearchParams.showEstablished}
233209
onChange={(checked) => updateFilters({ showEstablished: checked })}
234210
/>
235211
</Form.Item>
236212

237213
<Form.Item label="Open Projects" valuePropName="checked">
238214
<Switch
215+
style={{ float: 'right' }}
239216
checked={uiSearchParams.showProjects}
240217
onChange={(checked) => updateFilters({ showProjects: checked })}
241218
/>
242219
</Form.Item>
243220

244221
<Form.Item label="Drafts" valuePropName="checked">
245222
<Switch
223+
style={{ float: 'right' }}
246224
checked={uiSearchParams.showDrafts}
247225
onChange={(checked) => updateFilters({ showDrafts: checked })}
248226
/>
@@ -254,13 +232,15 @@ const BasicSearchForm: React.FC = () => {
254232

255233
<Form.Item label="Only Tall Climbs" valuePropName="checked">
256234
<Switch
235+
style={{ float: 'right' }}
257236
checked={uiSearchParams.onlyTall}
258237
onChange={(checked) => updateFilters({ onlyTall: checked })}
259238
/>
260239
</Form.Item>
261240

262241
<Form.Item label="Only Side Climbs" valuePropName="checked">
263242
<Switch
243+
style={{ float: 'right' }}
264244
checked={uiSearchParams.onlySide}
265245
onChange={(checked) => updateFilters({ onlySide: checked })}
266246
/>

0 commit comments

Comments
 (0)