add twitter reimplemented

frontend-react/src/components/admin/AdminPage.tsx

@@ -0,0 +1,83 @@
+import React, { useState } from "react"
+import PageHeader from "../common/PageHeader"
+import { RouteComponentProps, Redirect } from "@reach/router"
+import { useQuery, useMutation } from "@apollo/react-hooks"
+import { UserData } from "../../types"
+import { USER } from "../../graphql/queries/user"
+import Loading from "../common/Loading"
+import Error from "../common/Error"
+import {
+  UPDATE_TWITTER,
+  UpdateTwitterVars,
+} from "../../graphql/mutations/updateTwitter"
+import { useToast, Heading, Flex, Box } from "@chakra-ui/core"
+import Input from "../elements/Input"
+import Button from "../elements/Button"
+
+const AdminPage: React.FC<RouteComponentProps> = ({}) => {
+  const [updateTwitterForms, setUpdateTwitterForms] = useState<
+    Partial<UpdateTwitterVars>
+  >({})
+  const toast = useToast()
+  const { data: userData, error: userError, loading: userLoading } = useQuery<
+    UserData
+  >(USER)
+
+  const [updateTwitter] = useMutation<
+    { updateTwitter: boolean },
+    UpdateTwitterVars
+  >(UPDATE_TWITTER, {
+    variables: updateTwitterForms as UpdateTwitterVars,
+    onCompleted: data => {
+      toast({
+        description: "Twitter updated",
+        position: "top-right",
+        status: "success",
+        duration: 10000,
+      })
+    },
+    onError: error => {
+      toast({
+        title: "An error occurred",
+        description: error.message,
+        position: "top-right",
+        status: "error",
+        duration: 10000,
+      })
+    },
+  })
+
+  if (userError) return <Error errorMessage={userError.message} />
+  if (userLoading) return <Loading />
+  if (!userData!.user) return <Redirect to="/404" />
+  if (userData!.user.discord_id !== "79237403620945920")
+    return <Redirect to="/404" />
+
+  return (
+    <>
+      <PageHeader title="Admin" />
+      <Heading>Update Twitter</Heading>
+      <Flex my="1em">
+        <Box mr="1em">
+          <Input
+            value={updateTwitterForms.unique_id ?? ""}
+            setValue={value =>
+              setUpdateTwitterForms({ ...updateTwitterForms, unique_id: value })
+            }
+            label="Unique ID"
+          />
+        </Box>
+        <Input
+          value={updateTwitterForms.twitter ?? ""}
+          setValue={value =>
+            setUpdateTwitterForms({ ...updateTwitterForms, twitter: value })
+          }
+          label="Twitter"
+        />
+      </Flex>
+      <Button onClick={() => updateTwitter()}>Submit</Button>
+    </>
+  )
+}
+
+export default AdminPage

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

@@ -3,6 +3,7 @@ import { Router } from "@reach/router"
 import Loading from "../common/Loading"
 import NotFound from "./NotFound"
 import { ScrollToTop } from "./ScrollToTop"
+import AdminPage from "../admin/AdminPage"
 
 const HomePage = lazy(() => import("../home/HomePage"))
 const UserPage = lazy(() => import("../user/UserPage"))
@@ -31,6 +32,7 @@ const Routes: React.FC = () => {
       <Router>
         <ScrollToTop path="/">
           <HomePage path="/" />
+          <AdminPage path="/admin" />
           <UserPage path="/u/:id" />
           <TeamPage path="/t/:name" />
           <BuildsPage path="/builds" />

frontend-react/src/graphql/mutations/updateTwitter.js

@@ -1,7 +0,0 @@
-import { gql } from "apollo-boost"
-
-export const updateTwitter = gql`
-  mutation updateTwitter($unique_id: String!, $twitter: String!) {
-    updateTwitter(unique_id: $unique_id, twitter: $twitter)
-  }
-`

frontend-react/src/graphql/mutations/updateTwitter.ts

@@ -0,0 +1,12 @@
+import { gql, DocumentNode } from "apollo-boost"
+
+export interface UpdateTwitterVars {
+  unique_id: string
+  twitter: string
+}
+
+export const UPDATE_TWITTER: DocumentNode = gql`
+  mutation updateTwitter($unique_id: String!, $twitter: String!) {
+    updateTwitter(unique_id: $unique_id, twitter: $twitter)
+  }
+`