got rid of useless box component

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

@@ -7,6 +7,7 @@ import {
   PopoverContent,
   PopoverBody,
   Button,
+  Box,
   BoxProps,
 } from "@chakra-ui/core"
 import { Link } from "@reach/router"
@@ -19,7 +20,6 @@ import ViewAP from "./ViewAP"
 import MyThemeContext from "../../themeContext"
 import { Build } from "../../types"
 import Gears from "./Gears"
-import Box from "../elements/Box"
 
 interface BuildCardProps {
   build: Build

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

@@ -1,7 +1,7 @@
 import React from "react"
 import { Build } from "../../types"
-import Box from "../elements/Box"
 import GearImage from "./GearImage"
+import { Flex, Box } from "@chakra-ui/core"
 
 interface GearsProps {
   build: Build
@@ -12,7 +12,7 @@ const Gears: React.FC<GearsProps> = ({ build }) => {
     return <Box h="30px" />
   }
   return (
-    <Box asFlex justifyContent="center">
+    <Flex justifyContent="center">
       <Box w={build.headgearItem ? "85px" : undefined} h="85px" mx="2px">
         <GearImage englishName={build.headgearItem} renderNullIfNoName />
       </Box>
@@ -22,7 +22,7 @@ const Gears: React.FC<GearsProps> = ({ build }) => {
       <Box w={build.shoesItem ? "85px" : undefined} h="85px" mx="2px">
         <GearImage englishName={build.shoesItem} renderNullIfNoName />
       </Box>
-    </Box>
+    </Flex>
   )
 }
 

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

@@ -1,7 +1,7 @@
 import React from "react"
 import { Build, Ability } from "../../types"
 import AbilityIcon from "./AbilityIcon"
-import Box from "../elements/Box"
+import { Flex, Box } from "@chakra-ui/core"
 
 interface ViewSlotsProps {
   build: Partial<Build>
@@ -11,7 +11,7 @@ interface ViewSlotsProps {
 const ViewSlots: React.FC<ViewSlotsProps> = ({ build, onAbilityClick }) => {
   return (
     <>
-      <Box asFlex alignItems="center" justifyContent="center">
+      <Flex alignItems="center" justifyContent="center">
         {(
           build.headgear ??
           (["UNKNOWN", "UNKNOWN", "UNKNOWN", "UNKNOWN"] as Ability[])
@@ -31,8 +31,8 @@ const ViewSlots: React.FC<ViewSlotsProps> = ({ build, onAbilityClick }) => {
             />
           </Box>
         ))}
-      </Box>
-      <Box asFlex alignItems="center" justifyContent="center" my="0.5em">
+      </Flex>
+      <Flex alignItems="center" justifyContent="center" my="0.5em">
         {(
           build.clothing ??
           (["UNKNOWN", "UNKNOWN", "UNKNOWN", "UNKNOWN"] as Ability[])
@@ -54,8 +54,8 @@ const ViewSlots: React.FC<ViewSlotsProps> = ({ build, onAbilityClick }) => {
             />
           </Box>
         ))}
-      </Box>
-      <Box asFlex alignItems="center" justifyContent="center">
+      </Flex>
+      <Flex alignItems="center" justifyContent="center">
         {(
           build.shoes ??
           (["UNKNOWN", "UNKNOWN", "UNKNOWN", "UNKNOWN"] as Ability[])
@@ -75,7 +75,7 @@ const ViewSlots: React.FC<ViewSlotsProps> = ({ build, onAbilityClick }) => {
             />
           </Box>
         ))}
-      </Box>
+      </Flex>
     </>
   )
 }

frontend-react/src/components/elements/Box.tsx

@@ -1,20 +0,0 @@
-import React from "react"
-import { Box as ChakraBox, BoxProps } from "@chakra-ui/core"
-
-interface MyBoxProps {
-  asFlex?: boolean
-}
-
-const Box: React.FC<BoxProps & MyBoxProps> = ({
-  children,
-  asFlex,
-  ...props
-}) => {
-  return (
-    <ChakraBox display={asFlex ? "flex" : undefined} {...props}>
-      {children}
-    </ChakraBox>
-  )
-}
-
-export default Box

frontend-react/src/components/elements/Input.tsx

@@ -3,10 +3,10 @@ import {
   Input as ChakraInput,
   InputGroup,
   InputLeftAddon,
+  Box,
 } from "@chakra-ui/core"
 import MyThemeContext from "../../themeContext"
 import Label from "./Label"
-import Box from "./Box"
 
 interface InputProps {
   value?: string

frontend-react/src/components/elements/Label.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import Box from "./Box"
+import { Box } from "@chakra-ui/core"
 
 interface LabelProps {
   required?: boolean

frontend-react/src/components/elements/Modal.tsx

@@ -1,10 +1,10 @@
 import React, { useContext } from "react"
-import Box from "./Box"
 import MyThemeContext from "../../themeContext"
 import useBreakPoints from "../../hooks/useBreakPoints"
 import IconButton from "./IconButton"
 import { MdClose } from "react-icons/md"
 import { useEffect } from "react"
+import { Box, Flex } from "@chakra-ui/core"
 
 interface ModalProps {
   title: string
@@ -44,8 +44,7 @@ const Modal: React.FC<ModalProps> = ({ children, title, closeModal }) => {
         maxWidth="1100px"
       >
         <>
-          <Box
-            asFlex
+          <Flex
             justifyContent="space-between"
             alignItems="center"
             fontSize="24px"
@@ -56,7 +55,7 @@ const Modal: React.FC<ModalProps> = ({ children, title, closeModal }) => {
             {closeModal && (
               <IconButton icon={MdClose} onClick={() => closeModal()} />
             )}
-          </Box>
+          </Flex>
           {children}
         </>
       </Box>

frontend-react/src/components/elements/RadioGroup.tsx

@@ -1,7 +1,6 @@
 import React, { useContext } from "react"
-import { RadioGroup as ChakraRadioGroup, Radio } from "@chakra-ui/core"
+import { RadioGroup as ChakraRadioGroup, Radio, Box } from "@chakra-ui/core"
 import MyThemeContext from "../../themeContext"
-import Box from "./Box"
 
 interface RadioGroupProps {
   options: string[]
@@ -27,10 +26,10 @@ const RadioGroup: React.FC<RadioGroupProps> = ({
       <ChakraRadioGroup
         spacing={5}
         isInline
-        onChange={e => setValue(e.target.value)}
+        onChange={(e) => setValue(e.target.value)}
         value={value}
       >
-        {options.map(option => (
+        {options.map((option) => (
           <Radio
             key={option}
             variantColor={themeColor}

frontend-react/src/components/elements/Select.tsx

@@ -2,8 +2,8 @@ import React, { useContext, useState } from "react"
 import ReactSelect, { OptionsType, GroupedOptionsType } from "react-select"
 import MyThemeContext from "../../themeContext"
 import { SelectComponents } from "react-select/src/components"
-import Box from "./Box"
 import Label from "./Label"
+import { Box } from "@chakra-ui/core"
 
 interface SelectProps {
   options?:
@@ -56,7 +56,6 @@ const Select: React.FC<SelectProps> = ({
   isDisabled,
   isSearchable,
   hideMenuBeforeTyping,
-  width = "290px",
 }) => {
   const {
     colorMode,
@@ -73,7 +72,7 @@ const Select: React.FC<SelectProps> = ({
       return
     }
     if (Array.isArray(selectedOption)) {
-      setValue(selectedOption.map(obj => obj.value))
+      setValue(selectedOption.map((obj) => obj.value))
     } else {
       setValue(selectedOption?.value)
     }
@@ -83,7 +82,7 @@ const Select: React.FC<SelectProps> = ({
     if (typeof value === "string") {
       return { label: value, value: value }
     } else if (Array.isArray(value)) {
-      return value.map(weapon => ({ label: weapon, value: weapon }))
+      return value.map((weapon) => ({ label: weapon, value: weapon }))
     }
 
     return value
@@ -103,7 +102,7 @@ const Select: React.FC<SelectProps> = ({
         classNamePrefix="select"
         value={getValue()}
         inputValue={inputValue}
-        onInputChange={newValue => setInputValue(newValue)}
+        onInputChange={(newValue) => setInputValue(newValue)}
         menuIsOpen={
           hideMenuBeforeTyping ? !!(inputValue.length >= 3) : undefined
         }
@@ -127,7 +126,7 @@ const Select: React.FC<SelectProps> = ({
                 ...components,
               }
         }
-        theme={theme => ({
+        theme={(theme) => ({
           ...theme,
           borderRadius: 5,
           colors: {
@@ -140,18 +139,18 @@ const Select: React.FC<SelectProps> = ({
         })}
         autoFocus={autoFocus}
         styles={{
-          singleValue: base => ({
+          singleValue: (base) => ({
             ...base,
             padding: 5,
             borderRadius: 5,
             color: colorMode === "light" ? "black" : "white",
             display: "flex",
           }),
-          input: base => ({
+          input: (base) => ({
             ...base,
             color: colorMode === "light" ? "black" : "white",
           }),
-          multiValue: base => ({
+          multiValue: (base) => ({
             ...base,
             background: themeColorHexLighter,
             color: "black",

frontend-react/src/components/elements/TextArea.tsx

@@ -1,7 +1,6 @@
 import React, { useContext } from "react"
-import { Textarea } from "@chakra-ui/core"
+import { Textarea, Box } from "@chakra-ui/core"
 import Label from "./Label"
-import Box from "./Box"
 import MyThemeContext from "../../themeContext"
 
 interface TextAreaProps {

frontend-react/src/components/freeagents/FreeAgentsPage.tsx

@@ -16,9 +16,8 @@ import PageHeader from "../common/PageHeader"
 import { Helmet } from "react-helmet-async"
 import WeaponSelector from "../common/WeaponSelector"
 import RadioGroup from "../elements/RadioGroup"
-import Box from "../elements/Box"
 import { continents } from "../../utils/lists"
-import { Collapse, Flex } from "@chakra-ui/core"
+import { Collapse, Flex, Box } from "@chakra-ui/core"
 import Button from "../elements/Button"
 import { FaFilter } from "react-icons/fa"
 import FAPostModal from "./FAPostModal"
@@ -65,7 +64,7 @@ const FreeAgentsPage: React.FC<RouteComponentProps> = () => {
   const faPosts = data!.freeAgentPosts
 
   const ownFAPost = faPosts.find(
-    post => post.discord_user.discord_id === userData!.user?.discord_id
+    (post) => post.discord_user.discord_id === userData!.user?.discord_id
   )
 
   const buttonText =

frontend-react/src/components/home/Stats.tsx

@@ -3,8 +3,7 @@ import { useQuery } from "@apollo/react-hooks"
 import { STATS } from "../../graphql/queries/stats"
 import Error from "../common/Error"
 import Loading from "../common/Loading"
-import Box from "../elements/Box"
-import { Flex } from "@chakra-ui/core"
+import { Flex, Box } from "@chakra-ui/core"
 import MyThemeContext from "../../themeContext"
 import { Link } from "@reach/router"
 

frontend-react/src/components/root/Footer.tsx

@@ -1,11 +1,10 @@
 import React, { useState, useContext } from "react"
-import { Link, Image } from "@chakra-ui/core"
+import { Link, Image, Box } from "@chakra-ui/core"
 import { Link as ReachLink } from "@reach/router"
 import { footerSquid, footerOcto } from "../../assets/imageImports"
 import MyThemeContext from "../../themeContext"
 import { FaTwitter, FaGithub, FaDiscord, FaTwitch } from "react-icons/fa"
 import useBreakPoints from "../../hooks/useBreakPoints"
-import Box from "../elements/Box"
 import IconButton from "../elements/IconButton"
 
 const Footer: React.FC = () => {

frontend-react/src/components/team/AddResultModal.tsx

@@ -1,10 +1,9 @@
 import React, { useState, useEffect } from "react"
 import Modal from "../elements/Modal"
-import Box from "../elements/Box"
 import { TournamentResult } from "../../types"
 import Input from "../elements/Input"
 import { useMutation } from "@apollo/react-hooks"
-import { useToast } from "@chakra-ui/core"
+import { useToast, Box } from "@chakra-ui/core"
 import { ADD_RESULT } from "../../graphql/mutations/addResult"
 import TweetEmbed from "react-tweet-embed"
 import DatePicker from "../elements/DatePicker"
@@ -37,7 +36,7 @@ const AddResultModal: React.FC<AddResultModalProps> = ({ closeModal }) => {
         duration: 10000,
       })
     },
-    onError: error => {
+    onError: (error) => {
       toast({
         title: "An error occurred",
         description: error.message,
@@ -76,21 +75,21 @@ const AddResultModal: React.FC<AddResultModalProps> = ({ closeModal }) => {
           <Input
             label="Tournament name"
             value={result.tournament_name}
-            setValue={value => handleChange({ tournament_name: value })}
+            setValue={(value) => handleChange({ tournament_name: value })}
           />
         </Box>
         <Box mt="1em">
           <Label>Date</Label>
           <DatePicker
             date={result.date ? new Date(result.date) : new Date()}
-            setDate={value => handleChange({ date: value?.toString() })}
+            setDate={(value) => handleChange({ date: value?.toString() })}
           />
         </Box>
         <Box mt="1em">
           <Input
             label="Tweet id"
             value={result.tweet_id}
-            setValue={value => handleChange({ tweet_id: value })}
+            setValue={(value) => handleChange({ tweet_id: value })}
             textLeft="https://twitter.com/.../status/"
           />
         </Box>
@@ -106,7 +105,7 @@ const AddResultModal: React.FC<AddResultModalProps> = ({ closeModal }) => {
       <Box mt="1em">
         <PlacementInput
           value={result.placement}
-          onChange={value => handleChange({ placement: value })}
+          onChange={(value) => handleChange({ placement: value })}
         />
       </Box>
       <Box mt="1em">

frontend-react/src/components/team/LogoHeader.tsx

@@ -1,10 +1,10 @@
 import React from "react"
 import UserAvatar from "../common/UserAvatar"
-import Box from "../elements/Box"
 import { useContext } from "react"
 import MyThemeContext from "../../themeContext"
 import { FaTwitter, FaTrophy, FaDiscord } from "react-icons/fa"
 import { months } from "../../utils/lists"
+import { Box } from "@chakra-ui/core"
 
 interface LogoHeaderProps {
   name: string

frontend-react/src/components/team/MemberCard.tsx

@@ -1,6 +1,5 @@
 import React from "react"
 import { Weapon, CountryCode } from "../../types"
-import Box from "../elements/Box"
 import { useContext } from "react"
 import MyThemeContext from "../../themeContext"
 import { Link } from "@reach/router"
@@ -8,6 +7,7 @@ import UserAvatar from "../common/UserAvatar"
 import WeaponImage from "../common/WeaponImage"
 import Flag from "../common/Flag"
 import { countries } from "../../utils/lists"
+import { Box } from "@chakra-ui/core"
 
 interface MemberCardProps {
   member: {
@@ -54,11 +54,11 @@ const MemberCard: React.FC<MemberCardProps> = ({ member }) => {
         {member.country && (
           <Box mt="0.5em" display="flex" alignItems="center">
             <Flag code={member.country} />
-            {countries.find(obj => obj.code === member.country)?.name}
+            {countries.find((obj) => obj.code === member.country)?.name}
           </Box>
         )}
         <Box display="flex" mt="0.5em">
-          {member.weapons.map(wpn => (
+          {member.weapons.map((wpn) => (
             <Box mx="0.3em" key={wpn}>
               <WeaponImage englishName={wpn} size="SMALL" />
             </Box>

frontend-react/src/components/team/Results.tsx

@@ -2,11 +2,10 @@ import React, { useContext } from "react"
 import Button from "../elements/Button"
 import { useState } from "react"
 import AddResultModal from "./AddResultModal"
-import Box from "../elements/Box"
 import { TournamentResult } from "../../types"
 import { medalEmoji } from "../../assets/imageImports"
 import MyThemeContext from "../../themeContext"
-import { IconButton } from "@chakra-ui/core"
+import { IconButton, Box } from "@chakra-ui/core"
 import { FaTwitter } from "react-icons/fa"
 import TweetEmbed from "react-tweet-embed"
 import useBreakPoints from "../../hooks/useBreakPoints"
@@ -39,7 +38,7 @@ const Results: React.FC<ResultsProps> = ({ results, canAddResults }) => {
         gridTemplateColumns={isSmall ? "repeat(3, 1fr)" : "repeat(4, 1fr)"}
         gridRowGap="1em"
       >
-        {results.map(result => {
+        {results.map((result) => {
           return (
             <React.Fragment key={result.tournament_name}>
               {result.placement < 4 ? (

frontend-react/src/components/team/TeamPage.tsx

@@ -7,10 +7,10 @@ import Loading from "../common/Loading"
 import Error from "../common/Error"
 import LogoHeader from "./LogoHeader"
 import MemberCard from "./MemberCard"
-import Box from "../elements/Box"
 import { Helmet } from "react-helmet-async"
 import Results from "./Results"
 import { USER } from "../../graphql/queries/user"
+import { Box } from "@chakra-ui/core"
 
 interface SearchForTeamData {
   searchForTeam: Team
@@ -58,7 +58,7 @@ const TeamPage: React.FC<RouteComponentProps & TeamPageProps> = ({ name }) => {
         founded={team.founded}
       />
       <Box display="flex" flexWrap="wrap" justifyContent="center" mt="1em">
-        {team.member_users.map(member => (
+        {team.member_users.map((member) => (
           <Box key={member.discord_id} p="0.5em">
             <MemberCard member={member} />
           </Box>

frontend-react/src/components/user/AbilityButtons.tsx

@@ -1,9 +1,9 @@
 import React from "react"
 import { abilitiesGameOrder } from "../../utils/lists"
 import AbilityIcon from "../builds/AbilityIcon"
-import Box from "../elements/Box"
 import Label from "../elements/Label"
 import { Ability } from "../../types"
+import { Box, Flex } from "@chakra-ui/core"
 
 interface AbilityButtonsProps {
   onClick: (ability: Ability) => void
@@ -15,16 +15,10 @@ const AbilityButtons: React.FC<AbilityButtonsProps> = ({ onClick }) => {
       <Box my="1em" textAlign="center">
         <Label>Main only abilities (click to select)</Label>
       </Box>
-      <Box
-        asFlex
-        flexWrap="wrap"
-        justifyContent="center"
-        maxW="340px"
-        mx="auto"
-      >
+      <Flex flexWrap="wrap" justifyContent="center" maxW="340px" mx="auto">
         {abilitiesGameOrder
           .slice(14, abilitiesGameOrder.length)
-          .map(ability => (
+          .map((ability) => (
             <Box
               m="0.3em"
               key={ability}
@@ -34,18 +28,12 @@ const AbilityButtons: React.FC<AbilityButtonsProps> = ({ onClick }) => {
               <AbilityIcon ability={ability} size="SUB" />
             </Box>
           ))}
-      </Box>
+      </Flex>
       <Box my="1em" textAlign="center">
         <Label>Stackable abilities</Label>
       </Box>
-      <Box
-        asFlex
-        flexWrap="wrap"
-        justifyContent="center"
-        maxW="350px"
-        mx="auto"
-      >
-        {abilitiesGameOrder.slice(0, 14).map(ability => (
+      <Flex flexWrap="wrap" justifyContent="center" maxW="350px" mx="auto">
+        {abilitiesGameOrder.slice(0, 14).map((ability) => (
           <Box
             m="0.3em"
             key={ability}
@@ -56,7 +44,7 @@ const AbilityButtons: React.FC<AbilityButtonsProps> = ({ onClick }) => {
             <AbilityIcon ability={ability} size="SUB" />
           </Box>
         ))}
-      </Box>
+      </Flex>
     </>
   )
 }

frontend-react/src/components/user/BuildFormModal.tsx

@@ -23,7 +23,6 @@ import {
   clothingOnlyAbilities,
   shoesOnlyAbilities,
 } from "../../utils/lists"
-import Box from "../elements/Box"
 import GearImage from "../builds/GearImage"
 import Input from "../elements/Input"
 import ViewSlots from "../builds/ViewSlots"
@@ -32,7 +31,7 @@ import TextArea from "../elements/TextArea"
 import Button from "../elements/Button"
 import { useMutation } from "@apollo/react-hooks"
 import { ADD_BUILD } from "../../graphql/mutations/addBuild"
-import { useToast } from "@chakra-ui/core"
+import { useToast, Box, Flex } from "@chakra-ui/core"
 import { UPDATE_BUILD } from "../../graphql/mutations/updateBuild"
 import { DELETE_BUILD } from "../../graphql/mutations/deleteBuild"
 
@@ -271,8 +270,8 @@ const BuildFormModal: React.FC<BuildFormModalProps> = ({
       {build.weapon && (
         <WeaponImage englishName={build.weapon as Weapon} size="BIG" />
       )}
-      <Box asFlex mt="1em" justifyContent="space-between" flexWrap="wrap">
-        <Box asFlex flexDirection="column" alignItems="center">
+      <Flex mt="1em" justifyContent="space-between" flexWrap="wrap">
+        <Flex flexDirection="column" alignItems="center">
           <Box minW="275px">
             <Select
               label="Headgear"
@@ -301,8 +300,8 @@ const BuildFormModal: React.FC<BuildFormModalProps> = ({
               <GearImage englishName={build.headgearItem} />
             </Box>
           )}
-        </Box>
-        <Box asFlex flexDirection="column" alignItems="center">
+        </Flex>
+        <Flex flexDirection="column" alignItems="center">
           <Box minW="275px">
             <Select
               label="Clothing"
@@ -331,8 +330,8 @@ const BuildFormModal: React.FC<BuildFormModalProps> = ({
               <GearImage englishName={build.clothingItem} />
             </Box>
           )}
-        </Box>
-        <Box asFlex flexDirection="column" alignItems="center">
+        </Flex>
+        <Flex flexDirection="column" alignItems="center">
           <Box minW="275px">
             <Select
               label="Shoes"
@@ -361,8 +360,8 @@ const BuildFormModal: React.FC<BuildFormModalProps> = ({
               <GearImage englishName={build.shoesItem} />
             </Box>
           )}
-        </Box>
-      </Box>
+        </Flex>
+      </Flex>
       <Box mt="1em">
         <Input
           value={build.title}

frontend-react/src/components/user/BuildTab.tsx

@@ -6,8 +6,8 @@ import { HeadGear, ClothingGear, ShoesGear, Ability } from "../../types"
 import BuildFormModal from "./BuildFormModal"
 import Button from "../elements/Button"
 import Alert from "../elements/Alert"
-import Box from "../elements/Box"
 import BuildCard from "../builds/BuildCard"
+import { Box } from "@chakra-ui/core"
 
 interface BuildTabProps {
   builds: Build[]
@@ -62,7 +62,7 @@ const BuildTab: React.FC<BuildTabProps> = ({ builds, canModifyBuilds }) => {
         </Alert>
       )}
       <Box display="flex" flexWrap="wrap" mt="1em">
-        {builds.map(build => (
+        {builds.map((build) => (
           <BuildCard
             canModify={canModifyBuilds}
             setBuildBeingEdited={(build: Build) => {

frontend-react/src/components/user/ProfileModal.tsx

@@ -1,12 +1,11 @@
 import React, { useState } from "react"
 import Modal from "../elements/Modal"
-import Box from "../elements/Box"
 import Label from "../elements/Label"
 import Input from "../elements/Input"
 import { useMutation } from "@apollo/react-hooks"
 import { UPDATE_USER } from "../../graphql/mutations/updateUser"
 import { Weapon } from "../../types"
-import { useToast } from "@chakra-ui/core"
+import { useToast, Box } from "@chakra-ui/core"
 import Select from "../elements/Select"
 import { countries } from "../../utils/lists"
 import SensInput from "./SensInput"

frontend-react/src/components/user/SensInput.tsx

@@ -5,9 +5,9 @@ import {
   NumberInputField,
   NumberIncrementStepper,
   NumberDecrementStepper,
+  Box,
 } from "@chakra-ui/core"
 import Label from "../elements/Label"
-import Box from "../elements/Box"
 import { useContext } from "react"
 import MyThemeContext from "../../themeContext"
 
@@ -28,7 +28,7 @@ const MotionInput: React.FC<MotionInputProps> = ({
       <Label>{label}</Label>
       <ChakraNumberInput
         value={value}
-        onChange={value => {
+        onChange={(value) => {
           const parsed = parseFloat(value.toString())
           if (
             [