Started working on X Browser

react-ui/src/App.js

@@ -6,7 +6,7 @@ import NotFound from './components/Misc/NotFound'
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
 
 import PageXLeaderboard from './components/XLeaderboard/PageXLeaderboard'
-import XSearch from './components/XSearch/XSearch'
+import PageXBrowser from './components/XRank/PageXBrowser'
 import InfoPlayer from './components/XSearch/InfoPlayer'
 import ScrollToTop from './utils/ScrollToTop'
 import PageMapListGenerator from './components/Tools/PageMapListGenerator'
@@ -31,7 +31,7 @@ const App = () => {
             <Switch>
               <Route exact path="/" render={() => <PageHome setMenuSelection={setMenuSelection} />} />
               <Route path="/xleaderboard" render={() => <PageXLeaderboard setMenuSelection={setMenuSelection} />} />
-              <Route exact path="/xsearch" render={() => <XSearch setMenuSelection={setMenuSelection} />} />
+              <Route exact path="/xsearch" render={() => <PageXBrowser setMenuSelection={setMenuSelection} />} />
               <Route exact path="/xsearch/p/:uid" render={({ match }) =>
                 <InfoPlayer uid={match.params.uid} setMenuSelection={setMenuSelection} />
               } />

react-ui/src/components/Misc/MainMenu.js

@@ -141,7 +141,7 @@ const MainMenu = withRouter(({ history, menuSelection, setMenuSelection }) => {
             }}
           />
           <Menu.Item
-            name="top 500 search"
+            name="Top 500 Browser"
             active={menuSelection === "search"}
             onClick={() => {
               history.push("/xsearch")

react-ui/src/components/XRank/PageXBrowser.js

@@ -1,12 +1,78 @@
-import React from 'react'
-import { Segment } from 'semantic-ui-react'
+import React, { useEffect } from "react"
+import { Segment } from "semantic-ui-react"
+import { Spin, Table } from "antd"
+import { useQuery } from "@apollo/react-hooks"
+import { useSelector } from "react-redux"
+import { Link } from "react-router-dom"
 
-const PageXBrowser = () => {
+import { searchForPlacements } from "../../graphql/queries/searchForPlacements"
+import language_dict from '../../utils/english_internal.json'
+import { modesArr } from '../../img/imports'
+
+const PageXBrowser = ({ setMenuSelection }) => {
+  const localization = useSelector(state => state.localization)
+  const { data, error, loading } = useQuery(searchForPlacements, {
+    variables: {}
+  })
+
+  useEffect(() => {
+    document.title = `${localization["Top 500 Browser"]} - sendou.ink`
+    setMenuSelection("search")
+  }, [localization, setMenuSelection])
+
+  if (error) return <div style={{ color: "red" }}>{error.message}</div>
+  if (loading) return <Spin />
+
+  const columns = [
+    {
+      title: localization['Name'],
+      dataIndex: 'name',
+      render: name => <Link to>{name}</Link>,
+    },
+    {
+      title: localization['X Power'],
+      dataIndex: 'x_power',
+    },
+    {
+      title: localization['Mode'],
+      dataIndex: 'mode',
+      render: mode => <img src={modesArr[mode]} alt={mode} />,
+    },
+    {
+      title: localization['Placement'],
+      dataIndex: 'rank',
+    },
+    {
+      title: localization['Weapon'],
+      dataIndex: 'weapon',
+      render: weapon => <img src={process.env.PUBLIC_URL + `/wpnSmall/Wst_${language_dict[weapon]}.png`} alt={weapon} />
+    },
+    {
+      title: localization['Month'],
+      dataIndex: 'month',
+    }
+    {
+      title: localization['Year'],
+      dataIndex: 'year',
+    }
+    {
+      title: localization['ID'],
+      dataIndex: 'unique_id',
+    }
+  ]
+
+  console.log("data", data)
   return (
     <Segment>
-      moro
+      <Table
+        columns={columns}
+        dataSource={data}
+        bordered
+        title={() => "Header"}
+        footer={() => "Footer"}
+      />
     </Segment>
   )
 }
 
-export default PageXBrowser
+export default PageXBrowser

react-ui/src/components/XSearch/PlayerSearchForm.js

@@ -1,35 +0,0 @@
-import React, { useState } from 'react'
-import { Button, Form, Checkbox } from 'semantic-ui-react'
-import XSearchResults from './XSearchResults'
-
-const PlayerSearchForm = (props) => {
-  const [playerForm, setPlayerForm] = useState('')
-  const [exact, setExact] = useState(false)
-  const [renderSearch, setRenderSearch] = useState(false)
-  return (
-    <div>
-      <Form>
-        <Form.Input 
-          placeholder='Search for a player'
-          value={playerForm}
-          onChange={(event) => {
-            setRenderSearch(false)
-            setPlayerForm(event.target.value)} 
-          }
-          />
-        <Button 
-          disabled={playerForm.length === 0}
-          onClick={() => setRenderSearch(true)}
-        >
-        Search for a player
-        </Button>
-      </Form>
-      <div style={{"paddingTop": "7px"}}>
-        <Checkbox label='Search for an exact match' onChange={() => setExact(!exact)} checked={exact} />
-      </div>
-      {renderSearch ? <XSearchResults name={playerForm} exact={exact} setPlayerForm={setPlayerForm} /> : null}
-    </div>
-  )
-}
-
-export default PlayerSearchForm 

react-ui/src/components/XSearch/XSearch.js

@@ -1,23 +0,0 @@
-import React, { useEffect } from 'react'
-import { WeaponFormWithButton } from './WeaponForm'
-import PlayerSearchForm from './PlayerSearchForm'
-
-const XSearch = ({ setMenuSelection }) => {
-  useEffect(() => {
-    setMenuSelection('search')
-    document.title = "X Rank Top 500 Search - sendou.ink"
-  }, [setMenuSelection])
-  return (
-    <div>
-      <div>
-        <div style={{"paddingBottom": "5px"}}>
-          <WeaponFormWithButton />
-        </div>
-        <div style={{"paddingBottom": "5px"}}><b>or</b></div>
-          <PlayerSearchForm />
-        </div>
-    </div>
-  )
-}
-
-export default XSearch

react-ui/src/graphql/queries/searchForPlacements.js

@@ -28,6 +28,7 @@ query searchForPlacements(
       unique_id
       month
       year
+      mode
       player {
         twitter
       }

react-ui/src/img/imports.js

@@ -25,6 +25,11 @@ import T from './abilityIcons/T.png'
 import TI from './abilityIcons/TI.png'
 import OS from './abilityIcons/OS.png'
 
+import SplatZ from './modeIcons/sz.png'
+import TowerC from './modeIcons/tc.png'
+import RainM from './modeIcons/rm.png'
+import ClamB from './modeIcons/cb.png'
+
 export const abilities = {
   "BDU": {image: BDU, fullName: "Bomb Defense Up DX"},
   "BRU": {image: BRU, fullName: "Sub Power Up"},
@@ -53,4 +58,6 @@ export const abilities = {
   "OS": {image: OS, fullName: "Object Shredder", mainOnly: true}
 }
 
+export const modesArr = [null, SplatZ, TowerC, RainM, ClamB]
+
 export const top500crown = top500