plus page test

package-lock.json

@@ -1557,9 +1557,9 @@
       }
     },
     "mongoose": {
-      "version": "5.8.1",
-      "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-5.8.1.tgz",
-      "integrity": "sha512-8Cffl52cMK2iBlpLipoRKW/RdrhkxvVzXsy+xVsfbKHQBCWkFiS0T0jU4smYzomTMP4gW0sReJoRA7Gu/7VVgQ==",
+      "version": "5.8.2",
+      "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-5.8.2.tgz",
+      "integrity": "sha512-g9huwQpz3K+DadNIsvaTYe/8sNKS/Sy33k/4wbK6lk+h9qfuBsqYKxK2l6YffRiDV6RO6MNJEWVMdlQx3/P7lw==",
       "requires": {
         "bson": "~1.1.1",
         "kareem": "2.3.1",

package.json

@@ -22,7 +22,7 @@
     "express-session": "^1.17.0",
     "graphql": "^14.5.8",
     "lodash": "^4.17.15",
-    "mongoose": "^5.8.1",
+    "mongoose": "^5.8.2",
     "mongoose-unique-validator": "^2.0.3",
     "node-fetch": "^2.6.0",
     "passport": "^0.4.1",

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

@@ -0,0 +1,54 @@
+import React, { useState } from "react"
+import { useQuery } from "@apollo/react-hooks"
+import { Search } from "semantic-ui-react"
+
+import { users } from "../../graphql/queries/users"
+import Loading from "./Loading"
+import Error from "./Error"
+
+const RESULTS_TO_SHOW = 10
+
+const UserSearch = ({ setSelection }) => {
+  const { data, error, loading } = useQuery(users)
+  const [value, setValue] = useState("")
+
+  if (loading) return <Loading />
+  if (error) return <Error errorMessage={error.message} />
+
+  let filteredArray = data.users.filter(user => {
+    const valueUpper = value.toUpperCase()
+    const username = `${user.username.toUpperCase()}#${user.twitter_name}`
+    const twitter = user.twitter_name ? user.twitter_name.toUpperCase() : ""
+    const discord_id = user.discord_id
+    return (
+      username.indexOf(valueUpper) !== -1 ||
+      twitter.indexOf(valueUpper) !== -1 ||
+      discord_id.indexOf(valueUpper) !== -1
+    )
+  })
+
+  if (filteredArray.length <= RESULTS_TO_SHOW) {
+    filteredArray = filteredArray.map(user => ({
+      title: `${user.username}#${user.discriminator}`,
+      description: user.twitter_name && `@${user.twitter_name}`,
+      image:
+        user.twitter_name && `https://avatars.io/twitter/${user.twitter_name}`,
+      id: user.discord_id,
+    }))
+  } else {
+    filteredArray = []
+  }
+
+  return (
+    <Search
+      value={value}
+      onSearchChange={(e, { value }) => setValue(value)}
+      onResultSelect={(e, { result }) => setSelection(result)}
+      results={filteredArray}
+      open={filteredArray.length <= RESULTS_TO_SHOW}
+      showNoResults={false}
+    />
+  )
+}
+
+export default UserSearch

react-ui/src/components/plus/PlusPage.js

@@ -0,0 +1,9 @@
+import React from "react"
+import UserSearch from "../common/UserSearch"
+import SuggestionForm from "./SuggestionForm"
+
+const PlusPage = () => {
+  return <SuggestionForm />
+}
+
+export default PlusPage

react-ui/src/components/plus/SuggestionForm.js

@@ -0,0 +1,76 @@
+import React, { useState } from "react"
+import { Message, Card, Image, Icon, Radio, Form } from "semantic-ui-react"
+
+import UserSearch from "../common/UserSearch"
+
+const SuggestionForm = ({ plusServer }) => {
+  const [selectedUser, setSelectedUser] = useState(null)
+  const [form, setForm] = useState({})
+  return (
+    <>
+      {!selectedUser && (
+        <>
+          <Message>
+            Note that you can only search for people who have logged in to
+            sendou.ink at least once
+          </Message>
+          <label>
+            <b>
+              Search for a player to suggest using Discord name, Twitter name or
+              Discord ID
+            </b>
+          </label>
+          <UserSearch setSelection={setSelectedUser} />
+        </>
+      )}
+      {selectedUser && (
+        <>
+          <Card>
+            <Image src={selectedUser.image} wrapped ui={false} />
+            <Card.Content>
+              <Card.Header>{selectedUser.title}</Card.Header>
+              <Card.Description style={{ marginTop: "1em" }}>
+                {selectedUser.description && (
+                  <>
+                    <Icon
+                      name="twitter"
+                      size="large"
+                      style={{ color: "#1da1f2" }}
+                    />
+                    <a href={`https://twitter.com/${selectedUser.description}`}>
+                      {selectedUser.description}
+                    </a>
+                  </>
+                )}
+              </Card.Description>
+            </Card.Content>
+          </Card>
+          <Form>
+            <Form.Field>
+              <label>Suggested for</label>
+              <Form.Field>
+                <Radio
+                  label="+1"
+                  disabled={plusServer !== "ONE"}
+                  value="ONE"
+                  checked={form.plus_server === "ONE"}
+                  onChange={() => console.log("AAA")}
+                />
+              </Form.Field>
+              <Form.Field>
+                <Radio
+                  label="+2"
+                  value="TWO"
+                  checked={form.plus_server === "TWO"}
+                  onChange={() => console.log("BBB")}
+                />
+              </Form.Field>
+            </Form.Field>
+          </Form>
+        </>
+      )}
+    </>
+  )
+}
+
+export default SuggestionForm

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

@@ -21,6 +21,7 @@ const TournamentSearchPage = lazy(() =>
 )
 const BuildsBrowser = lazy(() => import("../builds/BuildsBrowser"))
 const FreeAgentBrowser = lazy(() => import("../freeagents/FreeAgentBrowser"))
+const PlusPage = lazy(() => import("../plus/PlusPage"))
 const UserPage = lazy(() => import("../user/UserPage"))
 const InfoPage = lazy(() => import("./InfoPage"))
 const AdminPanel = lazy(() => import("../admin/AdminPanel"))
@@ -74,6 +75,9 @@ const Routes = () => {
         <Route path="/u/:id">
           <UserPage />
         </Route>
+        <Route path="/plus">
+          <PlusPage />
+        </Route>
         <Route path="/about">
           <InfoPage />
         </Route>

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

@@ -1,12 +1,12 @@
-import { gql } from 'apollo-boost'
+import { gql } from "apollo-boost"
 
 export const links = gql`
-{
-  links {
-    title
-    url
-    description
-    type
+  {
+    links {
+      title
+      url
+      description
+      type
+    }
   }
-}
-`
+`

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

@@ -0,0 +1,12 @@
+import { gql } from "apollo-boost"
+
+export const users = gql`
+  {
+    users {
+      username
+      discriminator
+      twitter_name
+      discord_id
+    }
+  }
+`

schemas/user.js

@@ -11,6 +11,8 @@ const typeDef = gql`
     user: User
     "Returns user. Either discord_id or twitter has to provided or error is thrown."
     searchForUser(discord_id: String, twitter: String): User
+    "Returns all users"
+    users: [User!]!
   }
   extend type Mutation {
     updateUser(
@@ -102,6 +104,13 @@ const resolvers = {
         })
       })
     },
+    users: (root, args) => {
+      return User.find({})
+        .sort({ username: "asc" })
+        .catch(e => {
+          throw new Error(e.message)
+        })
+    },
   },
   Mutation: {
     updateUser: async (root, args, ctx) => {