build page first version

react-ui/src/components/builds/Builds.js

@@ -1,30 +0,0 @@
-import React, { useState, useEffect } from "react"
-import { useHistory } from "react-router-dom"
-import WeaponDropdown from "../common/WeaponDropdown"
-
-const Builds = ({ weaponFromUrl }) => {
-  const [weapon, setWeapon] = useState(weaponFromUrl ? weaponFromUrl : null)
-  const history = useHistory()
-
-  const handleFormChange = value => {
-    setWeapon(value)
-    history.push(`/builds/${value.replace(/ /g, "_")}`)
-  }
-
-  useEffect(() => {
-    if (!weapon) document.title = "Builds - sendou.ink"
-  }, [weapon])
-
-  return (
-    <>
-      <div style={{ margin: "0 1.5em" }}>
-        <WeaponDropdown value={weapon} onChange={() => handleFormChange} />
-      </div>
-      <div style={{ margin: "2em 1.5em 1.5em" }}>
-        {weaponFromUrl ? <BuildsList weapon={weaponFromUrl} /> : null}
-      </div>
-    </>
-  )
-}
-
-export default Builds

react-ui/src/components/builds/BuildsBrowser.js

@@ -0,0 +1,70 @@
+import React, { useState, useEffect } from "react"
+import { useLocation } from "react-router-dom"
+import useUrlParamQuery from "../../hooks/useUrlParamQuery"
+import WeaponDropdown from "../common/WeaponDropdown"
+import { searchForBuildsByWeapon } from "../../graphql/queries/searchForBuildsByWeapon"
+import Loading from "../common/Loading"
+import Error from "../common/Error"
+import { Card, Header } from "semantic-ui-react"
+import BuildCard from "../common/BuildCard"
+import WpnImage from "../common/WpnImage"
+
+const BuildsBrowser = () => {
+  const location = useLocation()
+  const weaponFromUrl = () => {
+    const searchParams = new URLSearchParams(location.search)
+    if (searchParams.has("weapon")) return searchParams.get("weapon")
+    return ""
+  }
+  const [weapon, setWeapon] = useState(weaponFromUrl())
+  console.log("weapon", weapon)
+  const { data, error, loading, filter, fireQuery } = useUrlParamQuery(
+    searchForBuildsByWeapon,
+    {
+      weapon
+    }
+  )
+
+  const handleFormChange = (e, { value }) => {
+    setWeapon(value)
+    fireQuery({ ...filter, weapon: value })
+  }
+
+  useEffect(() => {
+    if (!weapon) document.title = "Builds - sendou.ink"
+    document.title = `${weapon} Builds - sendou.ink`
+  }, [weapon])
+
+  const weaponsList = () => {
+    if (loading || !data) return <Loading />
+    if (error) return <Error errorMessage={error.message} />
+    console.log("data", data)
+    return (
+      <>
+        <Header as="h2">
+          {weapon ? (
+            <>
+              <WpnImage weapon={weapon} /> {weapon} Builds
+            </>
+          ) : (
+            <>Latest Builds</>
+          )}
+        </Header>
+        <Card.Group style={{ marginTop: "1em" }}>
+          {data.searchForBuildsByWeapon.builds.map(build => {
+            return <BuildCard key={build.id} build={build} showWeapon={false} />
+          })}
+        </Card.Group>
+      </>
+    )
+  }
+
+  return (
+    <>
+      <WeaponDropdown value={filter.weapon} onChange={handleFormChange} />
+      <div style={{ marginTop: "1em" }}>{weaponsList()}</div>
+    </>
+  )
+}
+
+export default BuildsBrowser

react-ui/src/components/common/BuildCard.js

@@ -1,5 +1,6 @@
 import React, { useState } from "react"
 import { Card, Image, Icon, Popup, Button } from "semantic-ui-react"
+import { Link } from "react-router-dom"
 import english_internal from "../../utils/english_internal.json"
 import AbilityIcon from "./AbilityIcon"
 
@@ -67,7 +68,9 @@ const BuildCard = ({
           </Card.Header>
           {build.discord_user && (
             <Card.Meta>
-              {build.discord_user.username}#{build.discord_user.discriminator}
+              <Link to={`/u/${build.discord_id}`} style={{ color: "#4183C4" }}>
+                {build.discord_user.username}#{build.discord_user.discriminator}
+              </Link>
             </Card.Meta>
           )}
           {build.updatedAt && (

react-ui/src/components/common/WpnImage.js

@@ -0,0 +1,11 @@
+import React from "react"
+
+import english_internal from "../../utils/english_internal.json"
+import { wpnMedium } from "../../assets/imageImports"
+import { Image } from "semantic-ui-react"
+
+const WpnImage = ({ weapon }) => {
+  return <Image src={wpnMedium[english_internal[weapon]]} />
+}
+
+export default WpnImage

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

@@ -1,6 +1,6 @@
 import React from "react"
 import { Menu, Container, Image, Dropdown, Icon } from "semantic-ui-react"
-import { Link, NavLink, useHistory } from "react-router-dom"
+import { NavLink, useHistory } from "react-router-dom"
 import { userLean } from "../../graphql/queries/userLean"
 import { useQuery } from "@apollo/react-hooks"
 import sink_logo from "../../assets/sink_logo.png"

react-ui/src/components/root/Routes.js

@@ -17,6 +17,7 @@ const TournamentDetailsPage = lazy(() =>
 const TournamentSearchPage = lazy(() =>
   import("../tournament/TournamentSearchPage")
 )
+const BuildsBrowser = lazy(() => import("../builds/BuildsBrowser"))
 const UserPage = lazy(() => import("../user/UserPage"))
 
 const Routes = () => {
@@ -53,6 +54,9 @@ const Routes = () => {
         <Route path="/tournaments/:id">
           <TournamentDetailsPage />
         </Route>
+        <Route path="/builds">
+          <BuildsBrowser />
+        </Route>
         <Route path="/u/:id">
           <UserPage />
         </Route>

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

@@ -1,23 +1,28 @@
-import { gql } from 'apollo-boost'
+import { gql } from "apollo-boost"
 
 export const searchForBuildsByWeapon = gql`
-query searchForBuildsByWeapon($weapon: String!, $page: Int) {
-  searchForBuildsByWeapon(weapon: $weapon, page: $page) {
-    builds {
-      id
-      discord_id
-      top
-      headgear
-      clothing
-      shoes
-      title
-      updatedAt
-      discord_user {
-        username
-        discriminator
+  query searchForBuildsByWeapon($weapon: String!, $page: Int) {
+    searchForBuildsByWeapon(weapon: $weapon, page: $page) {
+      builds {
+        id
+        discord_id
+        top
+        weapon
+        headgear
+        headgearItem
+        clothing
+        clothingItem
+        shoes
+        shoesItem
+        title
+        description
+        updatedAt
+        discord_user {
+          username
+          discriminator
+        }
       }
+      pageCount
     }
-    pageCount
   }
-}
-`
+`

react-ui/src/hooks/useUrlParamQuery.js

@@ -2,7 +2,7 @@ import { useState, useEffect } from "react"
 import { useHistory, useLocation } from "react-router-dom"
 import { useLazyQuery } from "@apollo/react-hooks"
 
-function useSearchForms(query, initialFilter = {}) {
+function useUrlParamQuery(query, initialFilter = {}) {
   const [filter, setFilter] = useState(initialFilter)
   const [filterForSearch, setFilterForSearch] = useState({})
   const location = useLocation()
@@ -57,4 +57,4 @@ function useSearchForms(query, initialFilter = {}) {
   return { data, error, loading, filter, setFilter, fireQuery }
 }
 
-export default useSearchForms
+export default useUrlParamQuery

react-ui/src/index.js

@@ -25,7 +25,4 @@ ReactDOM.render(
   document.getElementById("root")
 )
 
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister()
+serviceWorker.register()