Skip to content

Commit e697abe

Browse files
melMassmelMass
committed
test: 🗃️ dump stage
1 parent 125a6a2 commit e697abe

File tree

3 files changed

+116
-67
lines changed

3 files changed

+116
-67
lines changed

‎.graphqlconfig

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"name": "Teztok GraphQL Schema",
3+
"schemaPath": "schema.graphql",
4+
"extensions": {
5+
"endpoints": {
6+
"dev": {
7+
"url": "https://teztok.teia.rocks/v1/graphql",
8+
"headers": {
9+
"user-agent": "JS GraphQL"
10+
},
11+
"introspect": true
12+
}
13+
}
14+
}
15+
}

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
},
3737
"scripts": {
3838
"analyze": "source-map-explorer 'build/assets/*.js'",
39+
"gen-api": "graphql-codegen",
3940
"start": "vite",
4041
"serve": "vite preview",
4142
"build": "vite build",

‎src/components/header/feed_toolbar/FeedToolbar.jsx

+100-67
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,28 @@
22
import { motion } from 'framer-motion'
33
import styles from '@style'
44
import { DropDown, DropdownButton } from '@atoms/dropdown'
5-
import { IconToggle } from '@atoms/toggles'
6-
import { SingleViewIcon, MasonryIcon, ChevronIcon } from '@icons'
5+
import { IconToggle, Toggle } from '@atoms/toggles'
6+
import { SingleViewIcon, MasonryIcon, ChevronIcon, FiltersIcon } from '@icons'
77

8-
import { useState } from 'react'
8+
import { useCallback, useState } from 'react'
99
import { Button } from '@atoms/button'
1010

1111
import { useLocalSettings } from '@context/localSettingsStore'
1212
import { useLocation, useNavigate } from 'react-router'
1313
import { useEffect } from 'react'
1414
import { Line } from '@atoms/line'
1515
import { shallow } from 'zustand/shallow'
16+
import { Input } from '@atoms/input'
17+
import { useSearchParams } from 'react-router-dom'
1618

17-
// const MediaFilter = ({ label, tagline }) => {
18-
// return (
19-
// <div className={styles.media_type}>
20-
// <Toggle box label={label} />
21-
// <p className={styles.tagline}>{tagline}</p>
22-
// </div>
23-
// )
24-
// }
19+
const MediaFilter = ({ label, tagline }) => {
20+
return (
21+
<div className={styles.media_type}>
22+
<Toggle box label={label} />
23+
<p className={styles.tagline}>{tagline}</p>
24+
</div>
25+
)
26+
}
2527

2628
const locationMap = new Map([
2729
['/', 'Recent Sales'],
@@ -51,7 +53,7 @@ const locationNeedSync = ['/feed/friends']
5153
const locationPaths = [...locationMap.keys()]
5254

5355
export const FeedToolbar = ({ feeds_menu = false }) => {
54-
// const [price, setPrice] = useState({ from: 0, to: 0 })
56+
const [price, setPrice] = useState({ from: 0, to: 0 })
5557

5658
const [viewMode, setViewMode] = useLocalSettings(
5759
(st) => [st.viewMode, st.setViewMode],
@@ -62,6 +64,8 @@ export const FeedToolbar = ({ feeds_menu = false }) => {
6264

6365
const navigate = useNavigate()
6466

67+
const [searchParams, setSearchParams] = useSearchParams()
68+
6569
useEffect(() => {
6670
for (const pth of locationPaths.slice(1)) {
6771
if (location.pathname.includes(pth)) {
@@ -72,8 +76,18 @@ export const FeedToolbar = ({ feeds_menu = false }) => {
7276
// return locationMap[location]
7377
}, [location])
7478

79+
const updateParams = useCallback(
80+
(key, value) => {
81+
setSearchParams({
82+
...Object.fromEntries(searchParams),
83+
[key]: value,
84+
})
85+
},
86+
[searchParams, setSearchParams]
87+
)
88+
7589
// TODO: finish the filtering logic
76-
// const filters = false
90+
const filters = true
7791
return (
7892
<motion.div className={styles.toolbar}>
7993
{feeds_menu && (
@@ -130,8 +144,37 @@ export const FeedToolbar = ({ feeds_menu = false }) => {
130144
icon={<MasonryIcon />}
131145
/>
132146
</div>
147+
{true && (
148+
<DropdownButton
149+
direction="left"
150+
menuID="sort"
151+
icon={<FiltersIcon />}
152+
label="Sort"
153+
className={styles.sort_area}
154+
>
155+
<DropDown left menuID="sort">
156+
<motion.div key="filters" className={styles.filters_container}>
157+
<motion.div key="media" className={styles.filter_box}>
158+
<Button onClick={() => updateParams('sort', 'price')} box fit>
159+
By Price
160+
</Button>
161+
<Button
162+
onClick={() => updateParams('sort', 'buy_date')}
163+
box
164+
fit
165+
>
166+
By Last Purchase Date
167+
</Button>
168+
<Button onClick={() => updateParams('sort', 'id')} box fit>
169+
By ID Number
170+
</Button>
171+
</motion.div>
172+
</motion.div>
173+
</DropDown>
174+
</DropdownButton>
175+
)}
133176
{/* KEEP */}
134-
{/* {filters && (
177+
{filters && (
135178
<DropdownButton
136179
direction="left"
137180
menuID="filters"
@@ -164,78 +207,68 @@ export const FeedToolbar = ({ feeds_menu = false }) => {
164207
</motion.div>
165208
<motion.div key="prices" className={styles.filter_box}>
166209
<h1>Price</h1>
167-
<div style={{ display: 'flex' }}>
168-
<Input
169-
type="number"
170-
min={0}
171-
max={1e6}
172-
onChange={(e) => {
173-
console.log(e.target.value)
174-
setPrice({ ...price, from: e.target.value })
175-
console.log(price)
176-
}}
177-
placeholder={`0`}
178-
label="From"
179-
value={price.from}
180-
>
181-
<Line/>
182-
</Input>
183-
<Input
184-
type="number"
185-
min={0}
186-
max={1e6}
187-
onChange={(e) => {
188-
console.log(e.target.value)
189-
setPrice({ ...price, to: e.target.value })
190-
console.log(price)
191-
}}
192-
placeholder={`0`}
193-
label="To"
194-
value={price.to}
195-
>
196-
<Line/>
197-
</Input>
210+
<div>
211+
<div style={{ display: 'flex' }}>
212+
<Input
213+
type="number"
214+
min={0}
215+
max={1e6}
216+
onChange={(e) => {
217+
console.log(e.target.value)
218+
setPrice({ ...price, from: e.target.value })
219+
console.log(price)
220+
}}
221+
placeholder={`0`}
222+
label="From"
223+
value={price.from}
224+
>
225+
<Line />
226+
</Input>
227+
<Input
228+
type="number"
229+
min={0}
230+
max={1e6}
231+
onChange={(e) => {
232+
console.log(e.target.value)
233+
setPrice({ ...price, to: e.target.value })
234+
console.log(price)
235+
}}
236+
placeholder={`0`}
237+
label="To"
238+
value={price.to}
239+
>
240+
<Line />
241+
</Input>
242+
</div>
243+
<div style={{ display: 'flex', width: '100%' }}>
244+
<Toggle box label="Primary" />
245+
<Toggle box label="Secondary" />
246+
</div>
198247
</div>
199248
</motion.div>
200249
<motion.div key="tags" className={styles.filter_box}>
201250
<h1>Featured tags</h1>
202251
<p className={styles.tagline}>Events</p>
203252
<div className={styles.tags}>
204-
<Toggle
205-
box
206-
key="pakistan"
207-
label="Pakistan"
208-
/>
253+
<Toggle box key="pakistan" label="Pakistan" />
209254
<Toggle box key="ukraine" label="Ukraine" />
210255
<Toggle box key="iran" label="Iran" />
211256
</div>
212257
<p className={styles.tagline}>Popular</p>
213258
<div className={styles.tags}>
214-
<Toggle
215-
box
216-
key="pixelart"
217-
label="pixelart"
218-
/>
219-
<Toggle
220-
box
221-
key="generativeart"
222-
label="generativeart"
223-
/>
259+
<Toggle box key="pixelart" label="pixelart" />
260+
<Toggle box key="generativeart" label="generativeart" />
224261
<Toggle box key="gan" label="gan" />
225262
</div>
226263
</motion.div>
227264
</motion.div>
228265
<div key="confirm_box" className={styles.confirm_box}>
229-
<Button>
230-
Clear
231-
</Button>
232-
<Button onClick={() => context.closeDropdowns()}>
233-
Ok
234-
</Button>
266+
<Button>Clear</Button>
267+
{/* <Button onClick={() => context.closeDropdowns()}>Ok</Button> */}
235268
</div>
236269
</DropDown>
237270
</DropdownButton>
238-
)} */}
271+
)}
239272
</motion.div>
240273
)
241274
}

0 commit comments

Comments
 (0)