feat(app): add filtering questions #407
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
📦 Next.js Bundle AnalysisThis analysis was generated by the next.js bundle analysis action 🤖 🎉 Global Bundle Size Decreased
DetailsThe global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster. Any third party scripts you have added directly to your app using the If you want further insight into what is behind the changes, give @next/bundle-analyzer a try! |
| import { ChangeEvent, useState } from "react"; | ||
| import { DEFAULT_ORDER_QUERY } from "../../lib/order"; | ||
|
|
||
| export const useQuestionsHeader = () => { |
There was a problem hiding this comment.
Czy to na pewno dobra nazwa na hooka, który pozwala na sortowanie pytań? Raczej nie.
Może useQuestionsSortBy, który zwraca {orderBy, order i setOrderBy} ?
| setValue(value); | ||
|
|
||
| if (pathname) { | ||
| router.push(`${pathname}?sortBy=${value}`); |
There was a problem hiding this comment.
Powinniśmy zachować pozostałe query params jeśli jakieś były. Teraz nadpisujemy wszystkie.
Możemy zrobić do tego osobnego hooka w stylu:
const {mergeQueryParams} = useDevFAQRouter();
// …
mergeQueryParams({sortBy: value})
| variant="default" | ||
| defaultValue={DEFAULT_ORDER_QUERY} | ||
| onChange={handleSelectChange} | ||
| className="ml-3" |
|
|
||
| const setOrderBy = (order: string) => { | ||
| if (pathname) { | ||
| router.push(`${pathname}?${mergeQueryParams({ sortBy: order })}`); |
There was a problem hiding this comment.
Czemu tego wszystkiego nie robi mergeQueryParams?
|
|
||
| const setOrderBy = (order: string) => { | ||
| if (pathname) { | ||
| router.push(`${pathname}?${mergeQueryParams({ sortBy: order })}`); |
There was a problem hiding this comment.
A gdzie walidacja tego order ?
apps/app/src/lib/order.ts
Outdated
| return orderBy.includes(data); | ||
| }; | ||
|
|
||
| export const validateOrder = (data: unknown): data is typeof order[number] => { |
There was a problem hiding this comment.
| export const validateOrder = (data: unknown): data is typeof order[number] => { | |
| export const validateOrder = (data: string): data is typeof order[number] => { |
apps/app/src/lib/order.ts
Outdated
|
|
||
| export const DEFAULT_ORDER_QUERY = "acceptedAt*desc"; | ||
|
|
||
| export const validateOrderBy = (data: unknown): data is typeof orderBy[number] => { |
There was a problem hiding this comment.
| export const validateOrderBy = (data: unknown): data is typeof orderBy[number] => { | |
| export const validateOrderBy = (data: string): data is typeof orderBy[number] => { |
| }) { | ||
| const page = parseInt(params.page); | ||
| const [orderBy, order] = (searchParams?.sortBy || DEFAULT_ORDER_QUERY).split("*"); |
There was a problem hiding this comment.
To i walidacja nie powinny być w komponencie.
…5-filtering-questions
Fixes #405