can add builds

package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "start": "node index.js",
     "watch": "nodemon index.js",
-    "build": "rm -rf build && cd react-ui && npm run build && mv build ../build"
+    "build": "rm -rf build && cd react-ui && npm run build && mv build ../build",
+    "testbuild": "rmdir /s /q build && cd react-ui && npm run build && move build ../build"
   },
   "author": "Sendou",
   "license": "ISC",

react-ui/src/components/root/App.test.js

@@ -1,9 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-
-it('renders without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
-  ReactDOM.unmountComponentAtNode(div);
-});

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

@@ -1,6 +1,8 @@
 import React from "react"
 import { Menu, Container, Image, Dropdown, Icon } from "semantic-ui-react"
-import { Link, NavLink } from "react-router-dom"
+import { Link, 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"
 
 const dropdownStyle = {
@@ -10,6 +12,61 @@ const dropdownStyle = {
 }
 
 const MainMenu = () => {
+  const { data, error, loading } = useQuery(userLean)
+  const history = useHistory()
+
+  const logInOrAva = () => {
+    if (loading) {
+      return null
+    }
+
+    if (!data || !data.user || error) {
+      return (
+        <Menu.Item href="/auth/discord" position="right">
+          <Icon name="discord" size="large" style={{ paddingRight: "0.2em" }} />
+          Log in via Discord
+        </Menu.Item>
+      )
+    }
+
+    const user = data.user
+
+    const userMenuOptions = [
+      {
+        key: "user",
+        text: "User Page",
+        icon: "user",
+        onClick: () => history.push(`/u/${user.discord_id}`)
+      },
+      {
+        key: "sign-out",
+        text: "Sign Out",
+        icon: "sign out",
+        onClick: () => window.location.assign("/logout")
+      }
+    ]
+
+    const userMenuTrigger = (
+      <span>
+        <span style={{ paddingRight: "5px" }}>{user.username}</span>
+        <Image
+          src={`https://cdn.discordapp.com/avatars/${user.discord_id}/${user.avatar}.png`}
+          avatar
+        />{" "}
+      </span>
+    )
+
+    return (
+      <Menu.Item position="right">
+        <Dropdown
+          item
+          icon={null}
+          options={userMenuOptions}
+          trigger={userMenuTrigger}
+        />
+      </Menu.Item>
+    )
+  }
   return (
     <Menu inverted secondary attached="top" stackable>
       <Container>
@@ -60,10 +117,7 @@ const MainMenu = () => {
           </Dropdown.Menu>
         </Dropdown>
 
-        <Menu.Item as={Link} to="/auth/discord" position="right">
-          <Icon name="discord" size="large" style={{ paddingRight: "0.2em" }} />
-          Log in via Discord
-        </Menu.Item>
+        {logInOrAva()}
       </Container>
     </Menu>
   )

react-ui/src/components/user/AddBuildForm.js

@@ -58,11 +58,15 @@ const AddBuildForm = ({
     shoesItem
   }
 
-  const submit = async e => {
+  const submit = async (e, func) => {
     e.preventDefault()
 
     let buildToAdd = { ...build }
     if (buildToAdd.title === "") delete buildToAdd.title
+    if (buildToAdd.description === "") delete buildToAdd.description
+    if (buildToAdd.headgearItem === "") delete buildToAdd.headgearItem
+    if (buildToAdd.clothingItem === "") delete buildToAdd.clothingItem
+    if (buildToAdd.shoesItem === "") delete buildToAdd.shoesItem
 
     await addBuild({
       variables: { ...buildToAdd }
@@ -70,7 +74,11 @@ const AddBuildForm = ({
 
     setWeapon("")
     setTitle("")
+    setDescription("")
     setAbilities([["", "", "", ""], ["", "", "", ""], ["", "", "", ""]])
+    setHeadgear("")
+    setClothing("")
+    setShoes("")
     setSuccessMsg("New build succesfully added!")
     setTimeout(() => {
       setSuccessMsg(null)
@@ -155,7 +163,6 @@ const AddBuildForm = ({
               onClick={() => {
                 editBuildFunction(build)
                 setShowEdit(false)
-                window.scrollTo(0, 0)
               }}
             >
               Edit build

react-ui/src/components/user/UserPage.js

@@ -19,6 +19,7 @@ const UserPage = () => {
 
   useEffect(() => {
     if (loading) return
+    console.log("data", data)
     document.title = `${data.searchForUser.username} - sendou.ink`
   }, [loading, data])
 

react-ui/src/graphql/mutations/addBuild.js

@@ -1,21 +1,39 @@
-import { gql } from 'apollo-boost'
+import { gql } from "apollo-boost"
 
 export const addBuild = gql`
-mutation addBuild ($weapon: String!, $title: String, $headgear: [Ability!]!, $clothing: [Ability!]!, $shoes: [Ability!]!) {
-   addBuild(
-     weapon: $weapon,
-     title: $title,
-     headgear: $headgear,
-     clothing: $clothing,
-     shoes: $shoes
-   ) {
-     id
-     weapon
-     title
-     headgear
-     clothing
-     shoes
-     updatedAt
-   }
-}
-`
+  mutation addBuild(
+    $weapon: String!
+    $title: String
+    $description: String
+    $headgear: [Ability!]!
+    $headgearItem: String
+    $clothing: [Ability!]!
+    $clothingItem: String
+    $shoes: [Ability!]!
+    $shoesItem: String
+  ) {
+    addBuild(
+      weapon: $weapon
+      title: $title
+      description: $description
+      headgear: $headgear
+      headgearItem: $headgearItem
+      clothing: $clothing
+      clothingItem: $clothingItem
+      shoes: $shoes
+      shoesItem: $shoesItem
+    ) {
+      id
+      weapon
+      title
+      description
+      headgear
+      headgearItem
+      clothing
+      clothingItem
+      shoes
+      shoesItem
+      updatedAt
+    }
+  }
+`

react-ui/src/graphql/mutations/updateBuild.js

@@ -1,14 +1,28 @@
-import { gql } from 'apollo-boost'
+import { gql } from "apollo-boost"
 
 export const updateBuild = gql`
-mutation updateBuild ($id: ID!, $weapon: String!, $title: String, $headgear: [Ability!]!, $clothing: [Ability!]!, $shoes: [Ability!]!) {
-  updateBuild(
-     id: $id,
-     weapon: $weapon,
-     title: $title,
-     headgear: $headgear,
-     clothing: $clothing,
-     shoes: $shoes
-   )
-}
-`
+  mutation updateBuild(
+    $id: ID!
+    $title: String
+    $description: String
+    $headgear: [Ability!]!
+    $headgearItem: String
+    $clothing: [Ability!]!
+    $clothingItem: String
+    $shoes: [Ability!]!
+    $shoesItem: String
+  ) {
+    updateBuild(
+      id: $id
+      weapon: $weapon
+      title: $title
+      description: $description
+      headgear: $headgear
+      headgearItem: $headgearItem
+      clothing: $clothing
+      clothingItem: $clothingItem
+      shoes: $shoes
+      shoesItem: $shoesItem
+    )
+  }
+`

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

@@ -1,16 +1,20 @@
-import { gql } from 'apollo-boost'
+import { gql } from "apollo-boost"
 
 export const searchForBuilds = gql`
-query searchForBuilds($discord_id: String!) {
-  searchForBuilds(discord_id: $discord_id) {
-    id
-    weapon
-    title
-    headgear
-    clothing
-    shoes
-    updatedAt
-    top
+  query searchForBuilds($discord_id: String!) {
+    searchForBuilds(discord_id: $discord_id) {
+      id
+      weapon
+      title
+      description
+      headgear
+      headgearItem
+      clothing
+      clothingItem
+      shoes
+      shoesItem
+      updatedAt
+      top
+    }
   }
-}
-`
+`

react-ui/src/index.js

@@ -8,11 +8,12 @@ import { BrowserRouter as Router } from "react-router-dom"
 import "semantic-ui-css/semantic.min.css"
 import "./index.css"
 
+//TODO: figure out how to do this well
 const client = new ApolloClient({
   uri:
-    process.env.REACT_APP_APOLLO_URI === "local"
-      ? "http://localhost:3001/graphql"
-      : "https://www.sendou.ink/graphql"
+    process.env.NODE_ENV === "production"
+      ? "/graphql"
+      : "http://localhost:3001/graphql"
 })
 
 ReactDOM.render(

schemas/build.js

@@ -152,7 +152,7 @@ const resolvers = {
           invalidArgs: args
         })
 
-      const items = gear.map(brand => {
+      const items = gear.flatMap(brand => {
         const headItems = brand.head ? brand.head : []
         const clothesItems = brand.clothes ? brand.clothes : []
         const shoesItems = brand.shoes ? brand.shoes : []
@@ -237,7 +237,7 @@ const resolvers = {
           invalidArgs: args
         })
 
-      const items = gear.map(brand => {
+      const items = gear.flatMap(brand => {
         const headItems = brand.head ? brand.head : []
         const clothesItems = brand.clothes ? brand.clothes : []
         const shoesItems = brand.shoes ? brand.shoes : []