diff --git a/assets/js/react/components/FilterModal.tsx b/assets/js/react/components/SortModal.tsx similarity index 96% rename from assets/js/react/components/FilterModal.tsx rename to assets/js/react/components/SortModal.tsx index 13f0b5e..f707ac7 100644 --- a/assets/js/react/components/FilterModal.tsx +++ b/assets/js/react/components/SortModal.tsx @@ -13,11 +13,7 @@ import { SelectTitle, SelectTitleProps } from "./SelectTitle" import { Site, getSiteName } from "../types/Site" import { Slider } from "./Slider" import { Title } from "../types/Title" -import { - FIDE_RATING_MIN as RATING_MIN, - FIDE_RATING_MAX as RATING_MAX, - SearchParams, -} from "../types/SearchParams" +import { RATING_MIN, RATING_MAX, SearchParams } from "../types/SearchParams" const computeStepLabels = ( min: number, @@ -42,19 +38,19 @@ const computeStepLabels = ( return labels } -interface FilterModalProps { +interface SortModalProps { open: boolean defaultValues: SearchParams onClose: () => void onSubmit: (p: SearchParams) => void } -export function FilterModal({ +export function SortModal({ open, defaultValues, onClose, onSubmit, -}: FilterModalProps) { +}: SortModalProps) { const idPrefix = React.useId() const { @@ -117,14 +113,14 @@ export function FilterModal({ closeAfterTransition frame={{ as: "form", - title: "Filters", + title: "Sort Coaches", footer: ( ), onSubmit: handleSubmit(onSubmit), diff --git a/assets/js/react/components/FilterScroll.tsx b/assets/js/react/components/SortScroll.tsx similarity index 93% rename from assets/js/react/components/FilterScroll.tsx rename to assets/js/react/components/SortScroll.tsx index 7efe89e..b9abde8 100644 --- a/assets/js/react/components/FilterScroll.tsx +++ b/assets/js/react/components/SortScroll.tsx @@ -5,7 +5,7 @@ import type { SearchParams } from "../types/SearchParams" import BulletIcon from "../icons/Bullet" import EnglishIcon from "../icons/English" -import FilterIcon from "../icons/Filter" +import SortIcon from "../icons/Sort" import KnightIcon from "../icons/Knight" import LightningIcon from "../icons/Lightning" import PawnIcon from "../icons/Pawn" @@ -18,22 +18,31 @@ import { Mode } from "../types/Mode" import { Site } from "../types/Site" import { Title } from "../types/Title" -interface FilterOption { +interface SortOption { title: string Icon: ({ ...props }: { [x: string]: any }) => React.JSX.Element enable: (p: SearchParams) => SearchParams isEnabled: (p: SearchParams) => boolean } -const filters: FilterOption[] = [ +const filters: SortOption[] = [ { - title: "FIDE 2000+", - Icon: RisingGraphIcon, + title: "On Lichess", + Icon: KnightIcon, enable: (p) => { - p.rating[0] = Math.max(2000, p.rating[0]) + p.sites.push(Site.LICHESS) return p }, - isEnabled: (p) => p.rating[0] >= 2000, + isEnabled: (p) => p.sites.includes(Site.LICHESS), + }, + { + title: "On Chess.com", + Icon: PawnIcon, + enable: (p) => { + p.sites.push(Site.CHESSCOM) + return p + }, + isEnabled: (p) => p.sites.includes(Site.CHESSCOM), }, { title: "English Speaking", @@ -51,6 +60,15 @@ const filters: FilterOption[] = [ isEnabled: (p) => p.languages.includes("en-US") || p.languages.includes("en-GB"), }, + { + title: "ELO 2000+", + Icon: RisingGraphIcon, + enable: (p) => { + p.rating[0] = Math.max(2000, p.rating[0]) + return p + }, + isEnabled: (p) => p.rating[0] >= 2000, + }, { title: "Rapid Specialty", Icon: RabbitIcon, @@ -78,24 +96,6 @@ const filters: FilterOption[] = [ }, isEnabled: (p) => p.modes.length === 1 && p.modes.includes(Mode.BULLET), }, - { - title: "On Chess.com", - Icon: PawnIcon, - enable: (p) => { - p.sites.push(Site.CHESSCOM) - return p - }, - isEnabled: (p) => p.sites.includes(Site.CHESSCOM), - }, - { - title: "On Lichess", - Icon: KnightIcon, - enable: (p) => { - p.sites.push(Site.LICHESS) - return p - }, - isEnabled: (p) => p.sites.includes(Site.LICHESS), - }, { title: "Titled Player", Icon: TrophyIcon, @@ -112,13 +112,13 @@ enum Direction { RIGHT, } -interface FilterScrollProps { +interface SortScrollProps { params: SearchParams onModal: () => void onSelect: (p: SearchParams) => void } -export function FilterScroll({ params, onModal, onSelect }: FilterScrollProps) { +export function SortScroll({ params, onModal, onSelect }: SortScrollProps) { const viewport = React.useRef(null) const [isFlush, setIsFlush] = React.useState([true, false]) @@ -190,8 +190,8 @@ export function FilterScroll({ params, onModal, onSelect }: FilterScrollProps) { ) diff --git a/assets/js/react/icons/Filter.tsx b/assets/js/react/icons/Filter.tsx deleted file mode 100644 index 32478ae..0000000 --- a/assets/js/react/icons/Filter.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import * as React from "react" - -const SvgComponent = ({ ...props }) => ( - - - -) - -export default SvgComponent diff --git a/assets/js/react/icons/Sort.tsx b/assets/js/react/icons/Sort.tsx new file mode 100644 index 0000000..0b948b7 --- /dev/null +++ b/assets/js/react/icons/Sort.tsx @@ -0,0 +1,14 @@ +import * as React from "react" + +const SvgComponent = ({ ...props }) => ( + + + +) + +export default SvgComponent diff --git a/assets/js/react/pages/Search.tsx b/assets/js/react/pages/Search.tsx index bbeab5d..a9a7b13 100644 --- a/assets/js/react/pages/Search.tsx +++ b/assets/js/react/pages/Search.tsx @@ -5,10 +5,10 @@ import type { SearchParams } from "../types/SearchParams" import { Container } from "../components/Container" import { FadeIn } from "../components/FadeIn" import { FallbackMessage } from "../components/FallbackMessage" -import { FilterModal } from "../components/FilterModal" -import { FilterScroll } from "../components/FilterScroll" import { Loading } from "../components/Loading" import { SearchResult } from "../components/SearchResult" +import { SortModal } from "../components/SortModal" +import { SortScroll } from "../components/SortScroll" import { defaultSearchParams } from "../types/SearchParams" import { useCoachesInfiniteQuery } from "../utils/queries" @@ -79,12 +79,12 @@ export function Search() { return ( - setModalOpen(true)} /> - setModalOpen(false)} diff --git a/assets/js/react/types/SearchParams.ts b/assets/js/react/types/SearchParams.ts index 5761791..f615a96 100644 --- a/assets/js/react/types/SearchParams.ts +++ b/assets/js/react/types/SearchParams.ts @@ -10,15 +10,15 @@ export type SearchParams = { sites: Site[] } -export const FIDE_RATING_MIN = 1500 -export const FIDE_RATING_MAX = 3200 +export const RATING_MIN = 1500 +export const RATING_MAX = 3200 export const defaultSearchParams: SearchParams = { - rating: [FIDE_RATING_MIN, FIDE_RATING_MAX], + rating: [RATING_MIN, RATING_MAX], modes: [Mode.RAPID, Mode.BLITZ, Mode.BULLET], languages: [], titles: [], - sites: [Site.CHESSCOM, Site.LICHESS], + sites: [Site.LICHESS], } export function toQueryParams(p: SearchParams) {