small fixes

frontend-react/src/components/builds/BuildsPage.tsx

@@ -44,14 +44,16 @@ const BuildsPage: React.FC<RouteComponentProps> = () => {
 
   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<RouteComponentProps> = () => {
           label="Select a weapon to start viewing builds"
           setValue={(weapon: string) => setWeapon(weapon as Weapon)}
           autoFocus
+          menuIsOpen={!weapon}
         />
       </Box>
       {weapon && (
@@ -84,13 +87,13 @@ const BuildsPage: React.FC<RouteComponentProps> = () => {
         <>
           <InfiniteScroll
             pageStart={1}
-            loadMore={page => setBuildsToShow(page * 10)}
+            loadMore={(page) => setBuildsToShow(page * 10)}
             hasMore={buildsToShow < data.searchForBuilds.length}
           >
             <Flex flexWrap="wrap" pt="2em">
               {buildsFilterByAbilities
                 .filter((build, index) => index < buildsToShow)
-                .map(build => (
+                .map((build) => (
                   <BuildCard
                     key={build.id}
                     build={build}

frontend-react/src/components/calendar/CalendarPage.tsx

@@ -21,7 +21,7 @@ const badgeColor: { [key: string]: string } = {
   Sunday: "blue",
 } as const
 
-const CalendarPage: React.FC<RouteComponentProps> = ({}) => {
+const CalendarPage: React.FC<RouteComponentProps> = () => {
   const { darkerBgColor, grayWithShade } = useContext(MyThemeContext)
   const { data, error, loading } = useQuery<UpcomingEventsData>(UPCOMING_EVENTS)
 
@@ -87,6 +87,9 @@ const CalendarPage: React.FC<RouteComponentProps> = ({}) => {
       })}
       <Box color={grayWithShade} mt="2em">
         All events listed in your local time: {new Date().toTimeString()}
+        <p style={{ marginTop: "0.5em" }}>
+          If you want your event displayed here message Sendou#0043 on Discord
+        </p>
       </Box>
     </>
   )

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"

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<WeaponSelectorProps> = ({
   autoFocus,
   required,
   isMulti,
+  menuIsOpen,
 }) => {
   return (
     <>
@@ -47,6 +49,7 @@ const WeaponSelector: React.FC<WeaponSelectorProps> = ({
         clearable={clearable}
         isSearchable
         isMulti={!!isMulti}
+        menuIsOpen={menuIsOpen}
         components={{
           IndicatorSeparator: () => null,
           Option: singleOption,

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<SelectProps> = ({
   isLoading,
   isDisabled,
   isSearchable,
+  menuIsOpen,
   hideMenuBeforeTyping,
 }) => {
   const {
@@ -94,6 +96,15 @@ const Select: React.FC<SelectProps> = ({
     return colorMode === "light" ? "black" : "white"
   }
 
+  const menuIsOpenCheck = () => {
+    if (menuIsOpen) return true
+    if (hideMenuBeforeTyping) {
+      return !!(inputValue.length >= 3)
+    }
+
+    return undefined
+  }
+
   return (
     <Box>
       {label && <Label required={required}>{label}</Label>}
@@ -103,9 +114,7 @@ const Select: React.FC<SelectProps> = ({
         value={getValue()}
         inputValue={inputValue}
         onInputChange={(newValue) => setInputValue(newValue)}
-        menuIsOpen={
-          hideMenuBeforeTyping ? !!(inputValue.length >= 3) : undefined
-        }
+        menuIsOpen={menuIsOpenCheck()}
         onChange={handleChange}
         placeholder={null}
         isSearchable={!!isSearchable}

frontend-react/src/components/xtrends/XTrendsPage.tsx

@@ -76,7 +76,7 @@ const XTrendsPage: React.FC<RouteComponentProps> = () => {
     MyThemeContext
   )
   const { data, error, loading } = useQuery<XTrendsData>(X_TRENDS)
-  const [month, setMonth] = useState("March 2020")
+  const [month, setMonth] = useState<string | null>(null)
   const [mode, setMode] = useState<"SZ" | "TC" | "RM" | "CB">("SZ")
   const [weaponMonths, setWeaponMonths] = useState<Record<
     string,
@@ -116,14 +116,6 @@ const XTrendsPage: React.FC<RouteComponentProps> = () => {
   if (error) return <Error errorMessage={error.message} />
   if (loading || !weaponMonths) return <Loading />
 
-  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<RouteComponentProps> = () => {
     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 (
     <>
       <PageHeader title="Top 500 Tier Lists" />