diff --git a/react-ui/src/components/XLeaderboard/WeaponLeaderboard.js b/react-ui/src/components/XLeaderboard/WeaponLeaderboard.js
index 5450e0c92..86bfedbb3 100644
--- a/react-ui/src/components/XLeaderboard/WeaponLeaderboard.js
+++ b/react-ui/src/components/XLeaderboard/WeaponLeaderboard.js
@@ -1,5 +1,5 @@
import React from "react"
-import { Table, Icon, Popup, Segment } from "semantic-ui-react"
+import { Table, Icon, Popup } from "semantic-ui-react"
import { useQuery } from "@apollo/react-hooks"
import { useSelector } from "react-redux"
import { Loader } from "semantic-ui-react"
diff --git a/react-ui/src/components/XRank/PageXBrowser.js b/react-ui/src/components/XRank/PageXBrowser.js
index cb96f3b6d..e7db87924 100644
--- a/react-ui/src/components/XRank/PageXBrowser.js
+++ b/react-ui/src/components/XRank/PageXBrowser.js
@@ -1,19 +1,65 @@
-import React, { useEffect } from "react"
+import React, { useEffect, useState } from "react"
import { Segment } from "semantic-ui-react"
-import { Spin, Table } from "antd"
+import { Spin, Table, Avatar, Button, Input, Radio, InputNumber } from "antd"
import { useQuery } from "@apollo/react-hooks"
import { useSelector } from "react-redux"
import { Link } from "react-router-dom"
import { searchForPlacements } from "../../graphql/queries/searchForPlacements"
-import language_dict from '../../utils/english_internal.json'
-import { modesArr } from '../../img/imports'
+import language_dict from "../../utils/english_internal.json"
+import { modesArr } from "../../img/imports"
+import Select from "../elements/Select"
const PageXBrowser = ({ setMenuSelection }) => {
const localization = useSelector(state => state.localization)
- const { data, error, loading } = useQuery(searchForPlacements, {
- variables: {}
+ const [page, setPage] = useState(1)
+ const [filter, setFilter] = useState({
+ name: null,
+ weapon: null,
+ mode: null,
+ unique_id: null,
+ month: null,
+ year: null
})
+ const [showForms, setShowForms] = useState(false)
+ const [nameForm, setNameForm] = useState("")
+ const [weaponForm, setWeaponForm] = useState(null)
+ const [modeForm, setModeForm] = useState(0)
+ const [idForm, setIdForm] = useState("")
+ const [monthForm, setMonthForm] = useState("")
+ const [yearForm, setYearForm] = useState("")
+ const { data, error, loading } = useQuery(searchForPlacements, {
+ variables: { page, ...filter }
+ })
+
+ const handleFilterChange = () => {
+ // Empty input gets changed to null
+ const name = nameForm === "" ? null : nameForm
+ const mode = modeForm === 0 ? null : modeForm
+ const unique_id = idForm === "" ? null : idForm
+ const month = monthForm === "" ? null : monthForm
+ const year = yearForm === "" ? null : yearForm
+ const weapon = weaponForm
+
+ setPage(1)
+ setFilter({
+ name,
+ weapon,
+ mode,
+ unique_id,
+ month,
+ year
+ })
+ }
+
+ const handleClear = () => {
+ setNameForm("")
+ setModeForm(0)
+ setIdForm("")
+ setMonthForm("")
+ setYearForm("")
+ setWeaponForm(null)
+ }
useEffect(() => {
document.title = `${localization["Top 500 Browser"]} - sendou.ink`
@@ -21,56 +67,210 @@ const PageXBrowser = ({ setMenuSelection }) => {
}, [localization, setMenuSelection])
if (error) return
{error.message}
- if (loading) return
+ if (loading && !data.searchForPlacements) return
const columns = [
{
- title: localization['Name'],
- dataIndex: 'name',
- render: name =>
{name},
+ dataIndex: "player",
+ render: player =>
+ player.twitter ? (
+
+ ) : null
},
{
- title: localization['X Power'],
- dataIndex: 'x_power',
+ title: localization["Name"],
+ dataIndex: "name",
+ render: (name, record) => (
+
{name}
+ )
},
{
- title: localization['Mode'],
- dataIndex: 'mode',
- render: mode =>

,
+ title: localization["X Power"],
+ dataIndex: "x_power"
},
{
- title: localization['Placement'],
- dataIndex: 'rank',
+ title: localization["Weapon"],
+ dataIndex: "weapon",
+ render: weapon => (
+

{
+ setWeaponForm(weapon)
+ setShowForms(true)
+ }}
+ />
+ )
},
{
- title: localization['Weapon'],
- dataIndex: 'weapon',
- render: weapon =>

+ title: localization["Mode"],
+ dataIndex: "mode",
+ render: mode => (
+

{
+ setModeForm(mode)
+ setShowForms(true)
+ }}
+ />
+ )
},
{
- title: localization['Month'],
- dataIndex: 'month',
- }
+ title: localization["Placement"],
+ dataIndex: "rank"
+ },
{
- title: localization['Year'],
- dataIndex: 'year',
- }
+ title: localization["Month"],
+ dataIndex: "month",
+ render: month => (
+
{
+ setMonthForm(month)
+ setShowForms(true)
+ }}
+ >
+ {month}
+
+ )
+ },
{
- title: localization['ID'],
- dataIndex: 'unique_id',
+ title: localization["Year"],
+ dataIndex: "year",
+ render: year => (
+
{
+ setYearForm(year)
+ setShowForms(true)
+ }}
+ >
+ {year}
+
+ )
+ },
+ {
+ title: localization["ID"],
+ dataIndex: "unique_id",
+ render: unique_id => (
+
{
+ setIdForm(unique_id)
+ setShowForms(true)
+ }}
+ >
+ {unique_id}
+
+ )
}
]
- console.log("data", data)
return (
- "Header"}
- footer={() => "Footer"}
- />
+
+
+
+ {showForms && (
+
+
+ {localization["Name"]}
+
+ setNameForm(e.target.value)}
+ style={{ width: 200 }}
+ maxLength={10}
+ />
+
+
+ {localization["ID"]}
+
+ setIdForm(e.target.value)}
+ style={{ width: 200 }}
+ />
+
+
+ {localization["Weapon"]}
+
+
+
+ {localization["Mode"]}
+
+ setModeForm(e.target.value)}
+ value={modeForm}
+ >
+ {localization["All Modes"]}
+ {localization["Splat Zones"]}
+ {localization["Tower Control"]}
+ {localization["Rainmaker"]}
+ {localization["Clam Blitz"]}
+
+
+
+ {`${localization["Month"]} / ${localization["Year"]}`}
+
+ setMonthForm(value)}
+ />{" "}
+ setYearForm(value)}
+ />
+
+
+ {" "}
+
+
+
+ )}
+
+
setPage(page)
+ }}
+ rowKey="id"
+ scroll={{ x: true }}
+ loading={loading}
+ />
+
)
}
diff --git a/react-ui/src/components/XSearch/WeaponForm.js b/react-ui/src/components/XSearch/WeaponForm.js
deleted file mode 100644
index 7f81d83c9..000000000
--- a/react-ui/src/components/XSearch/WeaponForm.js
+++ /dev/null
@@ -1,369 +0,0 @@
-import React, { useState } from "react"
-import { Dropdown, Button } from "semantic-ui-react"
-import { withRouter } from "react-router-dom"
-import { weapons } from "../../utils/lists"
-import weaponDict from "../../utils/english_internal.json"
-
-const WeaponForm = withRouter(
- ({
- history,
- weaponForm,
- setWeaponForm,
- showImages = true,
- push = false,
- setPage,
- showSubSpecials = false
- }) => {
- const subSpecialOptions = [
- {
- key: "Splat Bomb",
- text: "Splat Bomb",
- value: "Splat Bomb",
- image: showImages
- ? {
- src:
- process.env.PUBLIC_URL + `/wpnSmall/Wst_Bomb_Splash.png`
- }
- : null
- },
- {
- key: "Suction Bomb",
- text: "Suction Bomb",
- value: "Suction Bomb",
- image: showImages
- ? {
- src:
- process.env.PUBLIC_URL + `/wpnSmall/Wst_Bomb_Suction.png`
- }
- : null
- },
- {
- key: "Burst Bomb",
- text: "Burst Bomb",
- value: "Burst Bomb",
- image: showImages
- ? {
- src:
- process.env.PUBLIC_URL + `/wpnSmall/Wst_Bomb_Quick.png`
- }
- : null
- },
- {
- key: "Curling Bomb",
- text: "Curling Bomb",
- value: "Curling Bomb",
- image: showImages
- ? {
- src:
- process.env.PUBLIC_URL + `/wpnSmall/Wst_Bomb_Curling.png`
- }
- : null
- },
- {
- key: "Autobomb",
- text: "Autobomb",
- value: "Autobomb",
- image: showImages
- ? {
- src: process.env.PUBLIC_URL + `/wpnSmall/Wst_Bomb_Robo.png`
- }
- : null
- },
- {
- key: "Ink Mine",
- text: "Ink Mine",
- value: "Ink Mine",
- image: showImages
- ? {
- src: process.env.PUBLIC_URL + `/wpnSmall/Wst_TimerTrap.png`
- }
- : null
- },
- {
- key: "Toxic Mist",
- text: "Toxic Mist",
- value: "Toxic Mist",
- image: showImages
- ? {
- src: process.env.PUBLIC_URL + `/wpnSmall/Wst_PoisonFog.png`
- }
- : null
- },
- {
- key: "Point Sensor",
- text: "Point Sensor",
- value: "Point Sensor",
- image: showImages
- ? {
- src:
- process.env.PUBLIC_URL + `/wpnSmall/Wst_PointSensor.png`
- }
- : null
- },
- {
- key: "Splash Wall",
- text: "Splash Wall",
- value: "Splash Wall",
- image: showImages
- ? {
- src: process.env.PUBLIC_URL + `/wpnSmall/Wst_Shield.png`
- }
- : null
- },
- {
- key: "Sprinkler",
- text: "Sprinkler",
- value: "Sprinkler",
- image: showImages
- ? {
- src: process.env.PUBLIC_URL + `/wpnSmall/Wst_Sprinkler.png`
- }
- : null
- },
- {
- key: "Squid Beakon",
- text: "Squid Beakon",
- value: "Squid Beakon",
- image: showImages
- ? {
- src: process.env.PUBLIC_URL + `/wpnSmall/Wst_Flag.png`
- }
- : null
- },
- {
- key: "Fizzy Bomb",
- text: "Fizzy Bomb",
- value: "Fizzy Bomb",
- image: showImages
- ? {
- src: process.env.PUBLIC_URL + `/wpnSmall/Wst_Bomb_Piyo.png`
- }
- : null
- },
- {
- key: "Torpedo",
- text: "Torpedo",
- value: "Torpedo",
- image: showImages
- ? {
- src: process.env.PUBLIC_URL + `/wpnSmall/Wst_Bomb_Tako.png`
- }
- : null
- },
- {
- key: "Tenta Missiles",
- text: "Tenta Missiles",
- value: "Tenta Missiles",
- image: showImages
- ? {
- src:
- process.env.PUBLIC_URL + `/wpnSmall/Wst_SuperMissile.png`
- }
- : null
- },
- {
- key: "Sting Ray",
- text: "Sting Ray",
- value: "Sting Ray",
- image: showImages
- ? {
- src:
- process.env.PUBLIC_URL + `/wpnSmall/Wst_WaterCutter.png`
- }
- : null
- },
- {
- key: "Inkjet",
- text: "Inkjet",
- value: "Inkjet",
- image: showImages
- ? {
- src: process.env.PUBLIC_URL + `/wpnSmall/Wst_Jetpack.png`
- }
- : null
- },
- {
- key: "Splashdown",
- text: "Splashdown",
- value: "Splashdown",
- image: showImages
- ? {
- src:
- process.env.PUBLIC_URL + `/wpnSmall/Wst_SuperLanding.png`
- }
- : null
- },
- {
- key: "Ink Armor",
- text: "Ink Armor",
- value: "Ink Armor",
- image: showImages
- ? {
- src:
- process.env.PUBLIC_URL + `/wpnSmall/Wst_SuperArmor.png`
- }
- : null
- },
- {
- key: "Autobomb Launcher",
- text: "Autobomb Launcher",
- value: "Autobomb Launcher",
- image: showImages
- ? {
- src:
- process.env.PUBLIC_URL + `/wpnSmall/Wst_LauncherRobo.png`
- }
- : null
- },
- {
- key: "Burst-Bomb Launcher",
- text: "Burst-Bomb Launcher",
- value: "Burst-Bomb Launcher",
- image: showImages
- ? {
- src:
- process.env.PUBLIC_URL +
- `/wpnSmall/Wst_LauncherQuick.png`
- }
- : null
- },
- {
- key: "Curling-Bomb Launcher",
- text: "Curling-Bomb Launcher",
- value: "Curling-Bomb Launcher",
- image: showImages
- ? {
- src:
- process.env.PUBLIC_URL +
- `/wpnSmall/Wst_LauncherCurling.png`
- }
- : null
- },
- {
- key: "Splat-Bomb Launcher",
- text: "Splat-Bomb Launcher",
- value: "Splat-Bomb Launcher",
- image: showImages
- ? {
- src:
- process.env.PUBLIC_URL +
- `/wpnSmall/Wst_LauncherSplash.png`
- }
- : null
- },
- {
- key: "Suction-Bomb Launcher",
- text: "Suction-Bomb Launcher",
- value: "Suction-Bomb Launcher",
- image: showImages
- ? {
- src:
- process.env.PUBLIC_URL +
- `/wpnSmall/Wst_LauncherSuction.png`
- }
- : null
- },
- {
- key: "Ink Storm",
- text: "Ink Storm",
- value: "Ink Storm",
- image: showImages
- ? {
- src: process.env.PUBLIC_URL + `/wpnSmall/Wst_RainCloud.png`
- }
- : null
- },
- {
- key: "Baller",
- text: "Baller",
- value: "Baller",
- image: showImages
- ? {
- src: process.env.PUBLIC_URL + `/wpnSmall/Wst_AquaBall.png`
- }
- : null
- },
- {
- key: "Bubble Blower",
- text: "Bubble Blower",
- value: "Bubble Blower",
- image: showImages
- ? {
- src:
- process.env.PUBLIC_URL + `/wpnSmall/Wst_SuperBubble.png`
- }
- : null
- },
- {
- key: "Booyah Bomb",
- text: "Booyah Bomb",
- value: "Booyah Bomb",
- image: showImages
- ? {
- src: process.env.PUBLIC_URL + `/wpnSmall/Wst_SuperBall.png`
- }
- : null
- },
- {
- key: "Ultra Stamp",
- text: "Ultra Stamp",
- value: "Ultra Stamp",
- image: showImages
- ? {
- src:
- process.env.PUBLIC_URL + `/wpnSmall/Wst_SuperStamp.png`
- }
- : null
- }
- ]
- let options = weapons.map(w => ({
- key: w,
- text: w,
- value: w,
- image: showImages
- ? { src: process.env.PUBLIC_URL + `/wpnSmall/Wst_${weaponDict[w]}.png` }
- : null
- }))
- if (showSubSpecials) options = options.concat(subSpecialOptions)
- return (
-
- {
- setWeaponForm(value)
- if (push) history.push(`/builds/${value.replace(/ /g, "_")}`)
- if (setPage) setPage(1)
- }}
- value={weaponForm}
- />
-
- )
- }
-)
-
-export const WeaponFormWithButton = withRouter(({ history }) => {
- const [weaponForm, setWeaponForm] = useState("")
- return (
-
-
-
-
-
-
- )
-})
-
-export default WeaponForm
diff --git a/react-ui/src/components/XSearch/XTrends.js b/react-ui/src/components/XSearch/XTrends.js
index 6566ac011..dad7dfff4 100644
--- a/react-ui/src/components/XSearch/XTrends.js
+++ b/react-ui/src/components/XSearch/XTrends.js
@@ -11,10 +11,10 @@ import {
Message,
Header
} from "semantic-ui-react"
-import WeaponForm from "./WeaponForm"
import useTrends from "../hooks/useTrends"
import useWindowDimensions from "../hooks/useWindowDimensions"
import english_internal from "../../utils/english_internal.json"
+import Select from '../elements/Select'
import {
LineChart,
Line,
@@ -121,15 +121,15 @@ const XTrends = ({ setMenuSelection }) => {
}
return (
-
+
Compare weapons based on their X Rank Top 500 appearances
-
+
)
}
diff --git a/react-ui/src/components/elements/Select.js b/react-ui/src/components/elements/Select.js
index 34f776bb7..5675cf15b 100644
--- a/react-ui/src/components/elements/Select.js
+++ b/react-ui/src/components/elements/Select.js
@@ -154,7 +154,7 @@ const SelectElement = ({ value, onChange, content }) => {
else if (content === "ALLWEAPONS") contentArr = allWeapons
return (
<>
-