Update packages and improve dashboard SEO. Cleanup schema.

Improve SEO and add option to select channels from list to dashboard.

components/dashboard.tsx

@@ -10,11 +10,15 @@ import { gql } from 'apollo-boost'
 
 /* eslint-disable quotes, no-multi-str, no-undef */
 interface Props {
-  data: Array<{ perms: boolean, icon: string, serverId: string, name: string }>,
+  data: Array<{
+    perms: boolean, icon: string, serverId: string, name: string, channels: string[]
+  }>,
   token: string
 }
 interface State {
-  selected: boolean | { perms: boolean, icon: string, serverId: string, name: string }
+  selected: boolean | {
+    perms: boolean, icon: string, serverId: string, name: string, channels: string[]
+  }
 }
 class DashboardIndex extends React.Component<Props, State> {
   constructor (props) {
@@ -41,20 +45,21 @@ query getServerSettings($server: String!, $token: String!) {
     `
     let settings
     if (!this.state.selected) {
-      settings = <List>{this.props.data.map(element => {
-        let nameOfServer = element.name ? element.name : ''
-        if (nameOfServer.length >= 32) nameOfServer = element.name.substr(0, 29) + '...'
-        return (
-          <ListItem disabled={!element.perms}
-            divider button key={element.serverId} onClick={() => this.setState({ selected: element })}>
-            {element.icon === 'no icon'
-              ? ''
-              : <Avatar src={element.icon} />
-            }
-            <ListItemText primary={nameOfServer} secondary={element.serverId} />
-          </ListItem>
-        )
-      })}</List>
+      settings = (
+        <List>{this.props.data.map(element => {
+          let nameOfServer = element.name ? element.name : ''
+          if (nameOfServer.length >= 32) nameOfServer = element.name.substr(0, 29) + '...'
+          return (
+            <ListItem
+              disabled={!element.perms} divider button key={element.serverId}
+              onClick={() => this.setState({ selected: element })}
+            >
+              {element.icon === 'no icon' ? '' : <Avatar src={element.icon} />}
+              <ListItemText primary={nameOfServer} secondary={element.serverId} />
+            </ListItem>
+          )
+        })}</List>
+      )
     } else if (typeof this.state.selected === 'object') {
       const element = this.state.selected
       let nameOfServer = element.name
@@ -90,7 +95,7 @@ query getServerSettings($server: String!, $token: String!) {
                 refetch={refetch}
                 data={data.serverSettings}
                 token={this.props.token}
-                server={element.serverId}
+                server={element}
               />
             }}
           </Query>

components/settings.tsx

@@ -1,11 +1,10 @@
 import * as React from 'react'
 import {
   Typography, Button, LinearProgress, Divider, Input, InputLabel, FormGroup, FormControlLabel,
-  FormControl, FormHelperText, Switch
+  FormControl, FormHelperText, Switch, Select, MenuItem
 } from '@material-ui/core'
 import { Mutation } from 'react-apollo'
 import { gql } from 'apollo-boost'
-// import TextField from 'material-ui/TextField'
 
 /* eslint-disable quotes, no-multi-str, no-undef */
 interface Props {
@@ -17,7 +16,7 @@ interface Props {
     }
   },
   token: string,
-  server: string,
+  server: { perms: boolean, icon: string, serverId: string, name: string, channels: string[] },
   refetch: Function
 }
 interface State {
@@ -69,7 +68,7 @@ mutation variables(
       <Mutation mutation={mutation} variables={{
         token: this.props.token,
         role: this.state.role,
-        server: this.props.server,
+        server: this.props.server.serverId,
         joinAutorole: this.state.joinAutorole,
         joinLeaveMessages: this.state.joinLeaveMessages,
         ocrOnSend: this.state.ocrOnSend
@@ -124,11 +123,16 @@ mutation variables(
             <Typography gutterBottom>Ensure the channel name is correct.</Typography>
             <FormControl fullWidth>
               <InputLabel>Channel Name</InputLabel>
-              <Input
-                value={this.state.joinLeaveMessages.channelName} fullWidth
-                onChange={e => this.setState({ joinLeaveMessages: {
-                  ...this.state.joinLeaveMessages, channelName: e.target.value
-                } })} margin='dense' />
+              <Select value={this.state.joinLeaveMessages.channelName} fullWidth margin='dense'
+                onChange={e => this.setState({
+                  joinLeaveMessages: {
+                    ...this.state.joinLeaveMessages, channelName: e.target.value
+                  }
+                })}
+              >
+                <MenuItem value=''><em>None</em></MenuItem>
+                {this.props.server.channels.map(i => (<MenuItem value={i} key={i}>{i}</MenuItem>))}
+              </Select>
               <FormHelperText>Leave blank to disable join/leave messages</FormHelperText>
             </FormControl>
             <div style={{ height: 10 }} />

package.json

@@ -22,7 +22,7 @@
     "@material-ui/icons": "^3.0.1",
     "apollo-boost": "^0.1.4",
     "eris": "abalabahaha/eris#dev",
-    "graphql": "https://cdn.discordapp.com/attachments/415150079050252308/498798226166775818/graphql.tgz",
+    "graphql": "^14.0.2",
     "graphql-yoga": "^1.8.5",
     "isomorphic-unfetch": "^2.0.0",
     "json5": "^0.5.1",

pages/dashboard.tsx

@@ -5,10 +5,10 @@ import {
 } from '@material-ui/core'
 import Link from 'next/link'
 import fetch from 'isomorphic-unfetch'
+import withRoot from '../components/withRoot'
+import Dashboard from '../components/dashboard'
 import ApolloClient, { gql } from 'apollo-boost'
 import { ApolloProvider, Query } from 'react-apollo'
-import Dashboard from '../components/dashboard'
-import withRoot from '../components/withRoot'
 
 // Apollo Client definition.
 const client = new ApolloClient({ uri: `/graphql`, fetchOptions: { fetch } })
@@ -26,13 +26,17 @@ query getAllCommonServers($token: String!) {
     name
     perms
     icon
+    channels
   }
 }
     `
     return (
       <ApolloProvider client={client}>
       <>
-        <title>IveBot</title>
+        <head>
+          <title>IveBot</title>
+          <meta name='Description' content={'IveBot\'s dashboard for managing settings.'} />
+        </head>
         {/* login dialog. */}
         <Dialog open={this.state.open} onClose={this.closeDialog}>
           <DialogTitle>Log In</DialogTitle>

pages/index.tsx

@@ -26,7 +26,10 @@ class Index extends React.Component {
   render () {
     return (
       <div style={{ marginRight: 16, marginLeft: 16 }}>
-        <title>IveBot</title>
+        <head>
+          <title>IveBot</title>
+          <meta name='Description' content='IveBot is a multi-purpose Discord bot.' />
+        </head>
         <AppBar>
           <Toolbar>
             <Typography variant='title' color='inherit' style={{ flex: 1 }}>IveBot</Typography>

server/resolvers.ts

@@ -42,14 +42,17 @@ export default (ctx: { tempDB: DB, client: Client }) => ({
     },
     getUserInfo: (_: string, { linkToken }: { linkToken: string }) => {
       if (ctx.tempDB.link[linkToken]) {
-        let servers: Array<{ perms: boolean, icon: string, serverId: string, name: string }> = []
+        let servers: Array<{ /* eslint-disable indent */
+          perms: boolean, icon: string, serverId: string, name: string, channels: string[]
+        }> = [] /* eslint-enable indent */
         ctx.client.guilds.forEach(server => {
           ctx.client.guilds.find(a => a.id === server.id).members.forEach(member => {
             if (member.id === ctx.tempDB.link[linkToken]) {
               servers.push({
                 serverId: server.id,
                 name: server.name,
                 icon: server.iconURL || 'no icon',
+                channels: server.channels.filter(i => i.type === 0).map(i => i.name),
                 perms: host === ctx.tempDB.link[linkToken]
                   ? true : member.permission.has('manageGuild')
               })

server/schema.graphql

@@ -1,15 +1,11 @@
-# Server specific settings.
-type ServerSetting {
-  # Server ID.
-  serverId: String!
-  # If add role is enabled for everyone.
-  addRoleForAll: Boolean
-  # If join/leave messages are enabled, and if so, what message and channel.
-  joinLeaveMessages: JoinLeaveMessages
-  # If join autorole is enabled, and if so, what role.
-  joinAutorole: String
-  # If text recognition on image send is enabled.
-  ocrOnSend: Boolean
+# Joining and leaving servers.
+type JoinLeaveMessages {
+  # Name of channel.
+  channelName: String
+  # What to post when joining.
+  joinMessage: String
+  # What to post when leaving.
+  leaveMessage: String
 }
 
 # Server type.
@@ -22,16 +18,22 @@ type Server {
   icon: String
   # Name of server.
   name: String
+  # Channels in server.
+  channels: [String]
 }
 
-# Joining and leaving servers.
-type JoinLeaveMessages {
-  # Name of channel.
-  channelName: String
-  # What to post when joining.
-  joinMessage: String
-  # What to post when leaving.
-  leaveMessage: String
+# Server specific settings.
+type ServerSetting {
+  # Server ID.
+  serverId: String!
+  # If add role is enabled for everyone.
+  addRoleForAll: Boolean
+  # If join/leave messages are enabled, and if so, what message and channel.
+  joinLeaveMessages: JoinLeaveMessages
+  # If join autorole is enabled, and if so, what role.
+  joinAutorole: String
+  # If text recognition on image send is enabled.
+  ocrOnSend: Boolean
 }
 
 # Enable queries.
@@ -76,7 +78,10 @@ type Mutation {
   editServerSettings(input: EditServerSettingsInput!): ServerSetting!
 }
 
+# Final schema.
 schema {
+  # Mutations to modify data.
   mutation: Mutation
+  # Queries to query data.
   query: Query
 }