Manage voting
- {data.plusInfo.voting_ends ? ( -
- {!confirmed ? (
-
- ) : (
-
- )}
-
-
- {!confirmed ? (
-
- ) : (
-
- )}
-
-
- )}
-
- )
-}
-
-export default VotingManager
diff --git a/frontend-react/src/components/builds/AbilityIcon.tsx b/frontend-react/src/components/builds/AbilityIcon.tsx
new file mode 100644
index 000000000..841922142
--- /dev/null
+++ b/frontend-react/src/components/builds/AbilityIcon.tsx
@@ -0,0 +1,40 @@
+import React from "react"
+import { Ability } from "../../types"
+import { abilityIcons } from "../../assets/imageImports"
+
+//https://github.com/loadout-ink/splat2-calc
+
+const sizeMap = {
+ MAIN: "50px",
+ SUB: "40px",
+ TINY: "30px",
+}
+
+interface AbilityIconProps {
+ ability: Ability | "EMPTY"
+ size: "MAIN" | "SUB" | "TINY"
+}
+
+const AbilityIcon: React.FC
- setPrefersAPView(!prefersAPView)}
- toggle
- label="Default to Ability Point view"
- />
-
- )}
- {weaponsList()}
-
- )
-}
-
-export default BuildsBrowser
diff --git a/frontend-react/src/components/builds/BuildsPage.tsx b/frontend-react/src/components/builds/BuildsPage.tsx
new file mode 100644
index 000000000..f9adec446
--- /dev/null
+++ b/frontend-react/src/components/builds/BuildsPage.tsx
@@ -0,0 +1,126 @@
+import React from "react"
+import { Helmet } from "react-helmet-async"
+import { RouteComponentProps } from "@reach/router"
+import WeaponSelector from "../common/WeaponSelector"
+import { useState } from "react"
+import {
+ Weapon,
+ Ability,
+ SearchForBuildsData,
+ SearchForBuildsVars,
+ Build,
+} from "../../types"
+import { Box, Flex, Heading, FormLabel, Switch, Button } from "@chakra-ui/core"
+import { useContext } from "react"
+import MyThemeContext from "../../themeContext"
+import useLocalStorage from "@rehooks/local-storage"
+import { useQuery } from "@apollo/react-hooks"
+import { SEARCH_FOR_BUILDS } from "../../graphql/queries/searchForBuilds"
+import Loading from "../common/Loading"
+import Error from "../common/Error"
+import BuildCard from "./BuildCard"
+import InfiniteScroll from "react-infinite-scroller"
+import PageHeader from "../common/PageHeader"
+import AbilitySelector from "./AbilitySelector"
+import Alert from "../elements/Alert"
+
+const BuildsPage: React.FC
+ )
+}
+
+export default GearImage
diff --git a/frontend-react/src/components/builds/Gears.tsx b/frontend-react/src/components/builds/Gears.tsx
new file mode 100644
index 000000000..ec0c30a1d
--- /dev/null
+++ b/frontend-react/src/components/builds/Gears.tsx
@@ -0,0 +1,29 @@
+import React from "react"
+import { Build } from "../../types"
+import Box from "../elements/Box"
+import GearImage from "./GearImage"
+
+interface GearsProps {
+ build: Build
+}
+
+const Gears: React.FC+ AP + + ) : null} +
-
- You can add the calendar to your personal Google Calendar by pressing the - plus button above. If you are using other kind of calendar program you can - try{" "} - - this link - {" "} - instead. -
- )
-}
-
-export default PageCalendar
diff --git a/frontend-react/src/components/calendar/CalendarPage.tsx b/frontend-react/src/components/calendar/CalendarPage.tsx
new file mode 100644
index 000000000..66744d706
--- /dev/null
+++ b/frontend-react/src/components/calendar/CalendarPage.tsx
@@ -0,0 +1,118 @@
+import React, { useState, useEffect, useRef } from "react"
+import jstz from "jstz"
+import {
+ Popover,
+ PopoverTrigger,
+ PopoverContent,
+ PopoverArrow,
+ PopoverCloseButton,
+ PopoverBody,
+ Box,
+ Link,
+ Icon,
+} from "@chakra-ui/core"
+import { RouteComponentProps } from "@reach/router"
+import { useContext } from "react"
+import MyThemeContext from "../../themeContext"
+import PageHeader from "../common/PageHeader"
+import { Helmet } from "react-helmet-async"
+import Button from "../elements/Button"
+
+const CalendarPage: React.FC
-
- {showCode && (
-
-
-
- 💰
- {" "}
- - Has prizes
-
-
- )}
-
-
- If an event is missing you can contact{" "}
- Kbot about it.
-
-
- 💰
- {" "}
- - Has prizes
-
-
- 🎭
- {" "}
- - Unconventional ruleset
-
-
- 🔒
- {" "}
- - Limited registration
-
-
- 🤝
- {" "}
- - Local event
-
-
- 🎲
- {" "}
- - Solo registration available
-
-
- 👀
- {" "}
- - No open registration
-
- - You can add the calendar to your personal Google Calendar by pressing the - plus button above. If you are using other kind of calendar program you can - try{" "} - - this link - {" "} - instead. -
+
+ 💰
+ {" "}
+ - Has prizes
+
+
+ 🎭
+ {" "}
+ - Unconventional ruleset
+
+
+ 🔒
+ {" "}
+ - Limited registration
+
+
+ 🤝
+ {" "}
+ - Local event
+
+
+ 🎲
+ {" "}
+ - Solo registration available
+
+
+ 👀
+ {" "}
+ - No open registration
+
+ + You can add the calendar to your personal Google Calendar by pressing + the plus button above. If you are using other kind of calendar program + you can try{" "} + + this link
- {build.headgearItem && (
- (setHeadgear ? setHeadgear("") : null)}
- />
- )}
-
- {build.headgear.map((ability, index) => (
- removeAbility(0, index) : null}
- />
- ))}
-
-
-
- {build.clothingItem && (
- (setClothing ? setClothing("") : null)}
- />
- )}
-
- {build.clothing.map((ability, index) => (
- removeAbility(1, index) : null}
- />
- ))}
-
-
- <>
- {build.shoesItem && (
-
- {build.headgearItem && (
-
-
- {APArray.map((abilityPointArray, index) => {
- return (
-
-
- )
-}
-
-export default BuildApView
diff --git a/frontend-react/src/components/common/BuildCard.js b/frontend-react/src/components/common/BuildCard.js
deleted file mode 100644
index 1a4391a92..000000000
--- a/frontend-react/src/components/common/BuildCard.js
+++ /dev/null
@@ -1,149 +0,0 @@
-import React, { useState, useEffect } from "react"
-import { Card, Image, Icon, Popup, Button } from "semantic-ui-react"
-import { useHistory } from "react-router-dom"
-import english_internal from "../../utils/english_internal.json"
-
-import { wpnMedium } from "../../assets/imageImports"
-import top500 from "../../assets/xleaderboardIcons/all.png"
-import BuildDeleteModal from "../user/BuildDeleteModal.js"
-import AddBuildForm from "../user/AddBuildForm.js"
-import BuildAbilityView from "./BuildAbilityView.js"
-import BuildApView from "./BuildApView.js"
-
-const BuildCard = ({
- build,
- existingAbilities,
- setAbilities,
- removeBuildFunction,
- editBuildFunction,
- buildsArray,
- setWeapon,
- setHeadgear,
- setClothing,
- setShoes,
- prefersAPView,
- showWeapon = true,
- showDescription = true,
-}) => {
- const [showEdit, setShowEdit] = useState(false)
- const [apView, setApView] = useState(prefersAPView ? prefersAPView : false)
- const history = useHistory()
-
- useEffect(() => {
- setApView(prefersAPView)
- }, [prefersAPView])
-
- if (showEdit) {
- return (
-
-
- {abilityPointArray[0] === "999" ? (
- "MAIN ONLY"
- ) : (
-
- {abilityPointArray[0]}
- {index === 0 && " AP"}
-
- )}
-
-
- )
- })}
-
- {abilityPointArray[1].map(ability => (
-
-
- {
- setApView(false)
- editBuildFunction(build)
- }}
- buildsArray={buildsArray}
- />
-
- )
- }
-
- const buildTitle =
- !build.title || build.title === "" ? `${build.weapon} Build` : build.title
- const buildDescription = !build.description ? "" : build.description
-
- return (
-
-
-
- Delete build
-
- }
- buildTitle={buildTitle}
- onConfirm={() => removeBuildFunction(build)}
- />
-
- {errorMessage}
-}
-
-export default Error
diff --git a/frontend-react/src/components/common/Error.tsx b/frontend-react/src/components/common/Error.tsx
new file mode 100644
index 000000000..b13a24de0
--- /dev/null
+++ b/frontend-react/src/components/common/Error.tsx
@@ -0,0 +1,12 @@
+import React from "react"
+import Alert from "../elements/Alert"
+
+interface ErrorProps {
+ errorMessage: string
+}
+
+const Error: React.FC
+ )
+}
+
+export default Flag
diff --git a/frontend-react/src/components/common/Loading.js b/frontend-react/src/components/common/Loading.js
deleted file mode 100644
index ab233ed7c..000000000
--- a/frontend-react/src/components/common/Loading.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from "react"
-import { Loader } from "semantic-ui-react"
-
-const Loading = ({ inverted = false, minHeight = "500px" }) => {
- return (
-
-
- Loading
-
-
- )
-}
-
-export default Loading
diff --git a/frontend-react/src/components/common/Loading.tsx b/frontend-react/src/components/common/Loading.tsx
new file mode 100644
index 000000000..306b68243
--- /dev/null
+++ b/frontend-react/src/components/common/Loading.tsx
@@ -0,0 +1,29 @@
+import React, { useState, useEffect, useContext } from "react"
+import { Spinner, Box } from "@chakra-ui/core"
+import MyThemeContext from "../../themeContext"
+
+const Loading: React.FC = () => {
+ const { themeColorWithShade } = useContext(MyThemeContext)
+ const [showSpinner, setShowSpinner] = useState(false)
+
+ useEffect(() => {
+ const timer = setTimeout(() => setShowSpinner(true), 1000)
+
+ return () => clearTimeout(timer)
+ }, [])
+
+ if (!showSpinner) return null
+
+ return (
+
-
- 404 - Not Found
-
- The page you tried to access couldn't be found. Sorry about that!
-
-
-
- )
-}
-
-export default NotFound
diff --git a/frontend-react/src/components/common/PageHeader.tsx b/frontend-react/src/components/common/PageHeader.tsx
new file mode 100644
index 000000000..5dec84032
--- /dev/null
+++ b/frontend-react/src/components/common/PageHeader.tsx
@@ -0,0 +1,30 @@
+import React from "react"
+import { Heading } from "@chakra-ui/core"
+import { useContext } from "react"
+import MyThemeContext from "../../themeContext"
+
+interface PageHeaderProps {
+ title: string
+}
+
+const PageHeader: React.FC
-
-
-
- )
-}
-
-export default PleaseLogIn
diff --git a/frontend-react/src/components/common/TextAreaWithLimit.js b/frontend-react/src/components/common/TextAreaWithLimit.js
deleted file mode 100644
index dc7a7eebe..000000000
--- a/frontend-react/src/components/common/TextAreaWithLimit.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from "react"
-import { TextArea } from "semantic-ui-react"
-
-const TextAreaWithLimit = ({ value, setValue, limit, style = {} }) => {
- const inputLength = value ? value.length : 0
- return (
- <>
-