plus page small stuff

frontend-react/src/components/common/Loading.js

@@ -1,9 +1,9 @@
 import React from "react"
 import { Loader } from "semantic-ui-react"
 
-const Loading = () => {
+const Loading = ({ minHeight = "500px" }) => {
   return (
-    <div style={{ minHeight: "500px" }}>
+    <div style={{ minHeight: minHeight }}>
       <Loader active inline="centered">
         Loading
       </Loader>

frontend-react/src/components/common/PleaseLogIn.js

@@ -0,0 +1,29 @@
+import React from "react"
+import { Button, Icon, Message } from "semantic-ui-react"
+import { useQuery } from "@apollo/react-hooks"
+import { Redirect } from "react-router-dom"
+
+import { userLean } from "../../graphql/queries/userLean"
+import Loading from "./Loading"
+import Error from "./Error"
+
+const PleaseLogIn = () => {
+  const { data, error, loading } = useQuery(userLean)
+
+  if (loading) return <Loading />
+  if (error) return <Error errorMessage={error.message} />
+  if (data.user) return <Redirect to={`u/${data.user.discord_id}`} />
+  return (
+    <>
+      <Message>Please log in to access this page</Message>
+      <div style={{ textAlign: "center" }}>
+        <Button as="a" href="/auth/discord" size="large" secondary>
+          <Icon name="discord" size="large" />
+          Log in via Discord
+        </Button>
+      </div>
+    </>
+  )
+}
+
+export default PleaseLogIn

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

@@ -7,6 +7,7 @@ import Error from "../common/Error"
 import { plusInfo } from "../../graphql/queries/plusInfo"
 import { Input } from "semantic-ui-react"
 import { Redirect } from "react-router-dom"
+import { userLean } from "../../graphql/queries/userLean"
 
 const copyToClipboard = (e, refToUse, setCopySuccess) => {
   refToUse.current.select()
@@ -43,9 +44,16 @@ const PlusPage = () => {
   const [plusTwoCopySuccess, setPlusTwoCopySuccess] = useState(false)
 
   const { data, error, loading } = useQuery(plusInfo)
+  const {
+    data: userData,
+    error: userQueryError,
+    loading: userQueryLoading,
+  } = useQuery(userLean)
 
-  if (loading) return <Loading />
+  if (loading || userQueryLoading) return <Loading />
   if (error) return <Error errorMessage={error.message} />
+  if (userQueryError) return <Error errorMessage={userQueryError.message} />
+  if (!userData.user) return <Redirect to="/access" />
   if (!data.plusInfo) return <Redirect to="/404" />
 
   return (
@@ -86,6 +94,7 @@ const PlusPage = () => {
       )}
       {!data.plusInfo.voting_ends && (
         <Suggestions
+          user={userData.user}
           plusServer={data.plusInfo.users_membership}
           showSuggestionForm={showSuggestionForm}
           setShowSuggestionForm={setShowSuggestionForm}

frontend-react/src/components/plus/Suggestions.js

@@ -74,6 +74,7 @@ const SuggestionList = ({ suggestionsArray }) => {
 }
 
 const Suggestions = ({
+  user,
   showSuggestionForm,
   setShowSuggestionForm,
   plusServer,
@@ -82,23 +83,13 @@ const Suggestions = ({
   const [errorMsg, setErrorMsg] = useState(null)
 
   const { data, error, loading } = useQuery(suggestions)
-  const {
-    data: userData,
-    error: userQueryError,
-    loading: userQueryLoading,
-  } = useQuery(userLean)
 
-  {
-    /*just return on userLean error/loading */
-  }
-
-  if (loading || userQueryLoading) return <Loading />
+  if (loading) return <Loading minHeight="250px" />
   if (error) return <Error errorMessage={error.message} />
-  if (userQueryError) return <Error errorMessage={userQueryError.message} />
 
   const ownSuggestion = data.suggestions.find(
     suggestion =>
-      suggestion.suggester_discord_user.discord_id === userData.user.discord_id
+      suggestion.suggester_discord_user.discord_id === user.discord_id
   )
 
   const handleSuccess = () => {

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

@@ -70,6 +70,7 @@ const MainMenu = () => {
       </Menu.Item>
     )
   }
+
   return (
     <Menu inverted secondary attached="top" stackable>
       <Container>
@@ -122,7 +123,14 @@ const MainMenu = () => {
             </Dropdown.Item>
           </Dropdown.Menu>
         </Dropdown>
-
+        {data &&
+          data.user &&
+          data.user.plus &&
+          data.user.plus.membership_status && (
+            <Menu.Item as={NavLink} to="/plus">
+              {data.user.plus.membership_status === "ONE" ? "+1" : "+2"}
+            </Menu.Item>
+          )}
         {logInOrAva()}
       </Container>
     </Menu>

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

@@ -25,6 +25,7 @@ const PlusPage = lazy(() => import("../plus/PlusPage"))
 const UserPage = lazy(() => import("../user/UserPage"))
 const InfoPage = lazy(() => import("./InfoPage"))
 const AdminPanel = lazy(() => import("../admin/AdminPanel"))
+const PleaseLogIn = lazy(() => import("../common/PleaseLogIn"))
 
 const Routes = () => {
   return (
@@ -84,6 +85,9 @@ const Routes = () => {
         <Route path="/admin">
           <AdminPanel />
         </Route>
+        <Route path="/access">
+          <PleaseLogIn />
+        </Route>
         <Route path="/404" render={() => <NotFound />} />
         <Route path="*" render={() => <NotFound />} />
       </Switch>

frontend-react/src/graphql/queries/userLean.js

@@ -7,6 +7,9 @@ export const userLean = gql`
       username
       twitter_name
       discord_id
+      plus {
+        membership_status
+      }
     }
   }
 `

graphql-schemas/plus.js

@@ -93,7 +93,7 @@ const typeDef = gql`
     plus_server: PlusServer!
     month: Int!
     year: Int!
-    "Average of all scores of the voters for the month -100% to 100%"
+    "Average of all scores of the voters for the month 0% to 100%"
     score: Float!
   }
 `

graphql-schemas/user.js

@@ -76,7 +76,7 @@ const resolvers = {
   },
   Query: {
     user: (root, args, ctx) => {
-      if (process.env.NODE_ENV === "development") {
+      if (process.env.LOGGED_IN) {
         return {
           id: "5cee8f73d1120d4315c55011",
           discord_id: "79237403620945920",
@@ -86,6 +86,11 @@ const resolvers = {
           twitch_name: "sendou",
           twitter_name: "sendouc",
           username: "Sendou",
+          top500: true,
+          plus: {
+            membership_status: "ONE",
+            vouch_status: null,
+          },
         }
       }
       return ctx.user

index.js

@@ -84,7 +84,7 @@ mongoose
 const server = new ApolloServer({
   schema,
   context: ({ req }) => {
-    if (process.env.NODE_ENV === "development") {
+    if (process.env.LOGGED_IN) {
       return {
         user: {
           _id: "5cee8f73d1120d4315c55011",

package-lock.json

@@ -805,6 +805,58 @@
         "capture-stack-trace": "^1.0.0"
       }
     },
+    "cross-env": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-6.0.3.tgz",
+      "integrity": "sha512-+KqxF6LCvfhWvADcDPqo64yVIB31gv/jQulX2NGzKS/g3GEVz6/pt4wjHFtFWsHMddebWD/sDthJemzM4MaAag==",
+      "dev": true,
+      "requires": {
+        "cross-spawn": "^7.0.0"
+      },
+      "dependencies": {
+        "cross-spawn": {
+          "version": "7.0.1",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.1.tgz",
+          "integrity": "sha512-u7v4o84SwFpD32Z8IIcPZ6z1/ie24O6RU3RbtL5Y316l3KuHVPx9ItBgWQ6VlfAFnRnTtMUrsQ9MUUTuEZjogg==",
+          "dev": true,
+          "requires": {
+            "path-key": "^3.1.0",
+            "shebang-command": "^2.0.0",
+            "which": "^2.0.1"
+          }
+        },
+        "path-key": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+          "dev": true
+        },
+        "shebang-command": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+          "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+          "dev": true,
+          "requires": {
+            "shebang-regex": "^3.0.0"
+          }
+        },
+        "shebang-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+          "dev": true
+        },
+        "which": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+          "dev": true,
+          "requires": {
+            "isexe": "^2.0.0"
+          }
+        }
+      }
+    },
     "cross-spawn": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",

package.json

@@ -4,7 +4,8 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "start": "node index.js",
+    "start": "cross-env LOGGED_IN=TRUE node index.js",
+    "loggedout": "node index.js",
     "watch": "nodemon index.js",
     "build": "cd frontend-react && npm install && npm run build && mv build ../build",
     "testbuild": "rmdir /s /q build && cd frontend-react && npm run build && move build ../build"
@@ -30,6 +31,7 @@
     "webhook-discord": "^3.5.1"
   },
   "devDependencies": {
+    "cross-env": "^6.0.3",
     "nodemon": "^2.0.2"
   }
 }