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) {