diff --git a/frontend-react/src/components/builds/BuildsPage.tsx b/frontend-react/src/components/builds/BuildsPage.tsx index f9adec446..33e248dd0 100644 --- a/frontend-react/src/components/builds/BuildsPage.tsx +++ b/frontend-react/src/components/builds/BuildsPage.tsx @@ -44,14 +44,16 @@ const BuildsPage: React.FC = () => { const buildsFilterByAbilities: Build[] = !data ? [] - : data.searchForBuilds.filter(build => { + : data.searchForBuilds.filter((build) => { if (abilities.length === 0) return true const abilitiesInBuild = new Set([ ...build.headgear, ...build.clothing, ...build.shoes, ]) - return abilities.every(ability => abilitiesInBuild.has(ability as any)) + return abilities.every((ability) => + abilitiesInBuild.has(ability as any) + ) }) return ( @@ -72,6 +74,7 @@ const BuildsPage: React.FC = () => { label="Select a weapon to start viewing builds" setValue={(weapon: string) => setWeapon(weapon as Weapon)} autoFocus + menuIsOpen={!weapon} /> {weapon && ( @@ -84,13 +87,13 @@ const BuildsPage: React.FC = () => { <> setBuildsToShow(page * 10)} + loadMore={(page) => setBuildsToShow(page * 10)} hasMore={buildsToShow < data.searchForBuilds.length} > {buildsFilterByAbilities .filter((build, index) => index < buildsToShow) - .map(build => ( + .map((build) => ( = ({}) => { +const CalendarPage: React.FC = () => { const { darkerBgColor, grayWithShade } = useContext(MyThemeContext) const { data, error, loading } = useQuery(UPCOMING_EVENTS) @@ -87,6 +87,9 @@ const CalendarPage: React.FC = ({}) => { })} All events listed in your local time: {new Date().toTimeString()} +

+ If you want your event displayed here message Sendou#0043 on Discord +

) diff --git a/frontend-react/src/components/calendar/TournamentInfo.tsx b/frontend-react/src/components/calendar/TournamentInfo.tsx index 3da15a687..d0b5c0365 100644 --- a/frontend-react/src/components/calendar/TournamentInfo.tsx +++ b/frontend-react/src/components/calendar/TournamentInfo.tsx @@ -1,7 +1,7 @@ import React, { useState, useContext } from "react" import { CompetitiveFeedEvent } from "../../graphql/queries/upcomingEvents" import Markdown from "../elements/Markdown" -import { Heading, Box, Flex, Link as ChakraLink } from "@chakra-ui/core" +import { Heading, Box, Flex } from "@chakra-ui/core" import Button from "../elements/Button" import { FiInfo, FiClock } from "react-icons/fi" import { FaDiscord } from "react-icons/fa" diff --git a/frontend-react/src/components/common/WeaponSelector.tsx b/frontend-react/src/components/common/WeaponSelector.tsx index 4cc6b1cf2..2013118f8 100644 --- a/frontend-react/src/components/common/WeaponSelector.tsx +++ b/frontend-react/src/components/common/WeaponSelector.tsx @@ -14,6 +14,7 @@ interface WeaponSelectorProps { autoFocus?: boolean clearable?: boolean isMulti?: boolean + menuIsOpen?: boolean } const singleOption = (props: any) => ( @@ -35,6 +36,7 @@ const WeaponSelector: React.FC = ({ autoFocus, required, isMulti, + menuIsOpen, }) => { return ( <> @@ -47,6 +49,7 @@ const WeaponSelector: React.FC = ({ clearable={clearable} isSearchable isMulti={!!isMulti} + menuIsOpen={menuIsOpen} components={{ IndicatorSeparator: () => null, Option: singleOption, diff --git a/frontend-react/src/components/elements/Select.tsx b/frontend-react/src/components/elements/Select.tsx index 84b004fbb..dcd547dd7 100644 --- a/frontend-react/src/components/elements/Select.tsx +++ b/frontend-react/src/components/elements/Select.tsx @@ -39,6 +39,7 @@ interface SelectProps { isLoading?: boolean isDisabled?: boolean isSearchable?: boolean + menuIsOpen?: boolean hideMenuBeforeTyping?: boolean } @@ -55,6 +56,7 @@ const Select: React.FC = ({ isLoading, isDisabled, isSearchable, + menuIsOpen, hideMenuBeforeTyping, }) => { const { @@ -94,6 +96,15 @@ const Select: React.FC = ({ return colorMode === "light" ? "black" : "white" } + const menuIsOpenCheck = () => { + if (menuIsOpen) return true + if (hideMenuBeforeTyping) { + return !!(inputValue.length >= 3) + } + + return undefined + } + return ( {label && } @@ -103,9 +114,7 @@ const Select: React.FC = ({ value={getValue()} inputValue={inputValue} onInputChange={(newValue) => setInputValue(newValue)} - menuIsOpen={ - hideMenuBeforeTyping ? !!(inputValue.length >= 3) : undefined - } + menuIsOpen={menuIsOpenCheck()} onChange={handleChange} placeholder={null} isSearchable={!!isSearchable} diff --git a/frontend-react/src/components/xtrends/XTrendsPage.tsx b/frontend-react/src/components/xtrends/XTrendsPage.tsx index b34fc98e5..f6b954c46 100644 --- a/frontend-react/src/components/xtrends/XTrendsPage.tsx +++ b/frontend-react/src/components/xtrends/XTrendsPage.tsx @@ -76,7 +76,7 @@ const XTrendsPage: React.FC = () => { MyThemeContext ) const { data, error, loading } = useQuery(X_TRENDS) - const [month, setMonth] = useState("March 2020") + const [month, setMonth] = useState(null) const [mode, setMode] = useState<"SZ" | "TC" | "RM" | "CB">("SZ") const [weaponMonths, setWeaponMonths] = useState = () => { if (error) return if (loading || !weaponMonths) return - const weaponsOrdered = weaponMonths[month][mode].sort((a, b) => { - const comparision = b.amount - a.amount - - if (comparision !== 0) return comparision - - return weapons.indexOf(a.name) - weapons.indexOf(b.name) - }) - const xRankMonths = Object.keys(weaponMonths).sort((a, b) => { const partsA = a.split(" ") const partsB = b.split(" ") @@ -134,6 +126,18 @@ const XTrendsPage: React.FC = () => { return months.indexOf(partsB[0] as any) - months.indexOf(partsA[0] as any) }) + if (!month) setMonth(xRankMonths[0]) + + const weaponsOrdered = month + ? weaponMonths[month][mode].sort((a, b) => { + const comparision = b.amount - a.amount + + if (comparision !== 0) return comparision + + return weapons.indexOf(a.name) - weapons.indexOf(b.name) + }) + : [] + return ( <>