access page implemented

frontend-react/src/components/plus/MapVoting.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react"
-import { RouteComponentProps, Link } from "@reach/router"
+import { RouteComponentProps, Link, Redirect } from "@reach/router"
 import { useQuery, useMutation } from "@apollo/react-hooks"
 import { MAP_VOTES, MapVotesData } from "../../graphql/queries/mapVotes"
 import Error from "../common/Error"
@@ -15,9 +15,15 @@ import {
   ADD_MAP_VOTES,
 } from "../../graphql/mutations/addMapVotes"
 import Alert from "../elements/Alert"
+import { USER } from "../../graphql/queries/user"
 
 const MapVoting: React.FC<RouteComponentProps> = ({}) => {
   const { data, error, loading } = useQuery<MapVotesData>(MAP_VOTES)
+  const {
+    data: userData,
+    error: userQueryError,
+    loading: userQueryLoading,
+  } = useQuery(USER)
   const toast = useToast()
   const [votes, setVotes] = useState<
     {
@@ -70,7 +76,10 @@ const MapVoting: React.FC<RouteComponentProps> = ({}) => {
   }, [data, error, loading])
 
   if (error) return <Error errorMessage={error.message} />
-  if (loading) return <Loading />
+  if (userQueryError) return <Error errorMessage={userQueryError.message} />
+  if (loading || userQueryLoading || !userData || !data) return <Loading />
+  if (!userData.user) return <Redirect to="/access" />
+  if (!data.mapVotes) return <Redirect to="/404" />
 
   return (
     <>

frontend-react/src/components/root/Access.tsx

@@ -0,0 +1,23 @@
+import React from "react"
+import { RouteComponentProps } from "@reach/router"
+import Alert from "../elements/Alert"
+import Button from "../elements/Button"
+import { FaDiscord } from "react-icons/fa"
+import { Box } from "@chakra-ui/core"
+
+const Access: React.FC<RouteComponentProps> = () => {
+  return (
+    <>
+      <Alert status="info">
+        This part of sendou.ink is restricted. Please log in to confirm access.
+      </Alert>
+      <Box mt="1em">
+        <a href="/auth/discord">
+          <Button icon={FaDiscord}>Log in via Discord</Button>
+        </a>
+      </Box>
+    </>
+  )
+}
+
+export default Access

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

@@ -17,6 +17,7 @@ const FreeAgentsPage = lazy(() => import("../freeagents/FreeAgentsPage"))
 const TeamPage = lazy(() => import("../team/TeamPage"))
 const XSearch = lazy(() => import("../xsearch/Top500BrowserPage"))
 const PlusPage = lazy(() => import("../plus/PlusPage"))
+const Access = lazy(() => import("./Access"))
 const VotingHistoryPage = lazy(() => import("../plus/VotingHistoryPage"))
 const MapVoting = lazy(() => import("../plus/MapVoting"))
 const About = lazy(() => import("./About"))
@@ -39,6 +40,7 @@ const Routes: React.FC = () => {
           <XSearch path="/xsearch" />
           <About path="/about" />
           <Links path="/links" />
+          <Access path="/access" />
           <PlusPage path="/plus" />
           <VotingHistoryPage path="/plus/history" />
           <MapVoting path="/plus/mapvoting" />