From 0a8f642836a960b7ea5e90a8fedb446f1358311c Mon Sep 17 00:00:00 2001 From: Sendou Date: Sat, 9 Nov 2019 15:03:16 +0200 Subject: [PATCH] build page first version --- react-ui/src/components/builds/Builds.js | 30 -------- .../src/components/builds/BuildsBrowser.js | 70 +++++++++++++++++++ react-ui/src/components/common/BuildCard.js | 5 +- react-ui/src/components/common/WpnImage.js | 11 +++ react-ui/src/components/root/MainMenu.js | 2 +- react-ui/src/components/root/Routes.js | 4 ++ .../queries/searchForBuildsByWeapon.js | 41 ++++++----- react-ui/src/hooks/useUrlParamQuery.js | 4 +- react-ui/src/index.js | 5 +- 9 files changed, 116 insertions(+), 56 deletions(-) delete mode 100644 react-ui/src/components/builds/Builds.js create mode 100644 react-ui/src/components/builds/BuildsBrowser.js create mode 100644 react-ui/src/components/common/WpnImage.js diff --git a/react-ui/src/components/builds/Builds.js b/react-ui/src/components/builds/Builds.js deleted file mode 100644 index dfeb744f6..000000000 --- a/react-ui/src/components/builds/Builds.js +++ /dev/null @@ -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 ( - <> -
- handleFormChange} /> -
-
- {weaponFromUrl ? : null} -
- - ) -} - -export default Builds diff --git a/react-ui/src/components/builds/BuildsBrowser.js b/react-ui/src/components/builds/BuildsBrowser.js new file mode 100644 index 000000000..150a74429 --- /dev/null +++ b/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 + if (error) return + console.log("data", data) + return ( + <> +
+ {weapon ? ( + <> + {weapon} Builds + + ) : ( + <>Latest Builds + )} +
+ + {data.searchForBuildsByWeapon.builds.map(build => { + return + })} + + + ) + } + + return ( + <> + +
{weaponsList()}
+ + ) +} + +export default BuildsBrowser diff --git a/react-ui/src/components/common/BuildCard.js b/react-ui/src/components/common/BuildCard.js index 3ea545122..e068bd6fe 100644 --- a/react-ui/src/components/common/BuildCard.js +++ b/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 = ({ {build.discord_user && ( - {build.discord_user.username}#{build.discord_user.discriminator} + + {build.discord_user.username}#{build.discord_user.discriminator} + )} {build.updatedAt && ( diff --git a/react-ui/src/components/common/WpnImage.js b/react-ui/src/components/common/WpnImage.js new file mode 100644 index 000000000..161c4fac0 --- /dev/null +++ b/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 +} + +export default WpnImage diff --git a/react-ui/src/components/root/MainMenu.js b/react-ui/src/components/root/MainMenu.js index bde09479b..9b34f07c0 100644 --- a/react-ui/src/components/root/MainMenu.js +++ b/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" diff --git a/react-ui/src/components/root/Routes.js b/react-ui/src/components/root/Routes.js index 19c02f407..44f16897f 100644 --- a/react-ui/src/components/root/Routes.js +++ b/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 = () => { + + + diff --git a/react-ui/src/graphql/queries/searchForBuildsByWeapon.js b/react-ui/src/graphql/queries/searchForBuildsByWeapon.js index 61aaf17c9..f9aa5109f 100644 --- a/react-ui/src/graphql/queries/searchForBuildsByWeapon.js +++ b/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 } -} -` \ No newline at end of file +` diff --git a/react-ui/src/hooks/useUrlParamQuery.js b/react-ui/src/hooks/useUrlParamQuery.js index df80c24a4..a575492c1 100644 --- a/react-ui/src/hooks/useUrlParamQuery.js +++ b/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 diff --git a/react-ui/src/index.js b/react-ui/src/index.js index 2963a97e0..b58ce915f 100644 --- a/react-ui/src/index.js +++ b/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()