Solved Issue #61

web/components/AdminResignation.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import { Mutation, Query } from "react-apollo";
-import gql from "graphql-tag";
 import Button from "@material-ui/core/Button";
 import Dialog from "@material-ui/core/Dialog";
 import DialogActions from "@material-ui/core/DialogActions";
@@ -10,22 +9,7 @@ import DialogTitle from "@material-ui/core/DialogTitle";
 
 import { Router } from "../Router";
 import { destroySessionFrontend } from "../lib/handleSessions";
-
-const REMOVE_ADMIN = gql`
-  mutation($myId: String!) {
-    promoteUser(id: $myId, admin: false) {
-      id
-    }
-  }
-`;
-
-const MY_ID = gql`
-  {
-    me @client {
-      id
-    }
-  }
-`;
+import { REMOVE_ADMIN, MY_ID } from "../queries/userQueries";
 
 interface IAdminResignationState {
   showDialog: boolean;

web/components/CourseList.tsx

@@ -1,6 +1,4 @@
 import React from "react";
-import { Query } from "react-apollo";
-import gql from "graphql-tag";
 import ReactPlaceholder from "react-placeholder";
 import { TextBlock, RoundShape } from "react-placeholder/lib/placeholders";
 import ErrorMessage from "../components/ErrorMessage";
@@ -17,11 +15,11 @@ import NotificationsIcon from "@material-ui/icons/Notifications";
 import CalendarIcon from "@material-ui/icons/CalendarToday";
 import ListSubheader from "@material-ui/core/ListSubheader";
 import { withRouter } from "next/router";
-
-interface ICourse {
-  id: string;
-  name: string;
-}
+import {
+  GET_COURSES,
+  ICourse,
+  CourseQueryComp,
+} from "../queries/courseQueries";
 
 const customPlaceholderUser = (
   <div className="customPlaceHolder">
@@ -49,24 +47,9 @@ const customPlaceholderCourse = (
     />
   </div>
 );
-const GET_COURSES = gql`
-  {
-    courses {
-      id
-      name
-    }
-    me @client {
-      isAdmin
-      id
-      name
-      email
-      photo
-    }
-  }
-`;
 
 const CourseList: React.SFC<{}> = ({ router, href }) => (
-  <Query query={GET_COURSES}>
+  <CourseQueryComp query={GET_COURSES}>
     {({ loading, error, data }) => {
       if (loading) {
         return (
@@ -176,7 +159,7 @@ const CourseList: React.SFC<{}> = ({ router, href }) => (
         </div>
       );
     }}
-  </Query>
+  </CourseQueryComp>
 );
 
 export default withRouter(CourseList);

web/components/CreateCourse.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import { Mutation } from "react-apollo";
-import gql from "graphql-tag";
 import { createStyles, withStyles } from "@material-ui/core/styles";
 import Button from "@material-ui/core/Button";
 import Grid from "@material-ui/core/Grid";
@@ -13,15 +12,7 @@ import Slide from "@material-ui/core/Slide";
 import IconButton from "@material-ui/core/IconButton";
 import CloseIcon from "@material-ui/icons/Close";
 import Snackbar from "@material-ui/core/Snackbar";
-
-const CREATE_COURSE = gql`
-  mutation CreateCourse($name: String!, $description: String!) {
-    createCourse(name: $name, description: $description) {
-      name
-      id
-    }
-  }
-`;
+import { CREATE_COURSE, ICreateCourseProps } from "../queries/courseQueries";
 
 const styles = theme =>
   createStyles({
@@ -39,14 +30,6 @@ const styles = theme =>
 
 const Transition = props => <Slide direction="up" {...props} />;
 
-interface ICreateCourseProps {
-  classes: {
-    appBar: string;
-    grow: string;
-    formMain: string;
-  };
-}
-
 interface ICreateCourseState {
   createFormOpen: boolean;
   courseName: string;

web/components/Draft.tsx

@@ -2,16 +2,8 @@ import React from "react";
 import { Editor, EditorState } from "draft-js";
 import "draft-js/dist/Draft.css";
 import Paper from "@material-ui/core/Paper";
-import gql from "graphql-tag";
 import { Mutation } from "react-apollo";
-
-const CREATE_COURSE_MESSAGE = gql`
-  mutation CreateCourseMessage($body: String!, $course_id: String!) {
-    createCourseMessage(body: $body, course_id: $course_id) {
-      id
-    }
-  }
-`;
+import { CREATE_COURSE_MESSAGE } from "../queries/courseQueries";
 
 interface IEditorState {
   editorState: EditorState;

web/components/Header.tsx

@@ -11,27 +11,14 @@ import AccountCircle from "@material-ui/icons/AccountCircle";
 import MailIcon from "@material-ui/icons/Mail";
 import MoreIcon from "@material-ui/icons/MoreVert";
 import Drawer from "@material-ui/core/Drawer";
-import { Query } from "react-apollo";
-import gql from "graphql-tag";
 
 import ProfilePic from "../components/ProfilePic";
 import { Link, Router } from "../Router";
 import SearchBar from "../components/SearchBar";
 import CourseList from "./CourseList";
 import Notifications from "./NotificationMenu";
 import { destroySessionFrontend } from "../lib/handleSessions";
-
-const GET_ME = gql`
-  {
-    me @client {
-      isAdmin
-      id
-      name
-      email
-      photo
-    }
-  }
-`;
+import { GET_ME, UserQueryComp } from "../queries/userQueries";
 
 const drawerWidth = 300;
 
@@ -172,7 +159,7 @@ class PrimarySearchAppBar extends React.Component<IProps, IState> {
         open={isMobileMenuOpen}
         onClose={this.handleMobileMenuClose}
       >
-        <Query query={GET_ME}>
+        <UserQueryComp query={GET_ME}>
           {({ loading, error, data }) => {
             if (loading || error) {
               return (
@@ -207,7 +194,7 @@ class PrimarySearchAppBar extends React.Component<IProps, IState> {
               </Link>
             );
           }}
-        </Query>
+        </UserQueryComp>
 
         <MenuItem>
           <IconButton color="inherit">
@@ -253,7 +240,7 @@ class PrimarySearchAppBar extends React.Component<IProps, IState> {
                   <MailIcon />
                 </Badge>
               </IconButton>
-              <Query query={GET_ME}>
+              <UserQueryComp query={GET_ME}>
                 {({ loading, error, data }) => {
                   if (loading || error) {
                     return (
@@ -281,7 +268,7 @@ class PrimarySearchAppBar extends React.Component<IProps, IState> {
                     </IconButton>
                   );
                 }}
-              </Query>
+              </UserQueryComp>
             </div>
             <div className={classes.sectionMobile}>
               <IconButton

web/components/Reminders.tsx

@@ -13,36 +13,14 @@ import {
 } from "@material-ui/core";
 import { AddAlertRounded } from "@material-ui/icons";
 import { format, setHours, setMinutes, addHours } from "date-fns";
-import gql from "graphql-tag";
-import { Query, Mutation } from "react-apollo";
 import ErrorMessage from "./ErrorMessage";
-
-const CREATE_REMINDER = gql`
-  mutation($message: String!, $targetTime: String!) {
-    createReminder(msg: $message, triggerTime: $targetTime) {
-      id
-    }
-  }
-`;
-
-const DELETE_REMINDER = gql`
-  mutation($reminder: String) {
-    deleteReminder(id: $reminder) {
-      id
-    }
-  }
-`;
-
-const VIEW_REMINDERS = gql`
-  query {
-    reminders {
-      id
-      msg
-      add_data
-      triggerTime
-    }
-  }
-`;
+import {
+  CREATE_REMINDER,
+  DELETE_REMINDER,
+  VIEW_REMINDERS,
+  ReminderMutationComp,
+  ReminderQueryComp,
+} from "../queries/reminderQueries";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -119,7 +97,7 @@ class Reminders extends React.Component<IProps, IState> {
     const { classes } = this.props;
     return (
       <div className={classes.root}>
-        <Mutation
+        <ReminderMutationComp
           mutation={CREATE_REMINDER}
           refetchQueries={[{ query: VIEW_REMINDERS }]}
         >
@@ -207,10 +185,10 @@ class Reminders extends React.Component<IProps, IState> {
               </Grid>
             );
           }}
-        </Mutation>
+        </ReminderMutationComp>
         <Divider />
         <Typography variant="subtitle1">Upcoming Reminders</Typography>
-        <Query query={VIEW_REMINDERS}>
+        <ReminderQueryComp query={VIEW_REMINDERS}>
           {({ loading, error, data }) => {
             if (loading) {
               return <div>Loading...</div>;
@@ -226,7 +204,7 @@ class Reminders extends React.Component<IProps, IState> {
               </div>
             );
           }}
-        </Query>
+        </ReminderQueryComp>
       </div>
     );
   }

web/components/SearchBar.tsx

@@ -6,25 +6,12 @@ import List from "@material-ui/core/List";
 import ListItem from "@material-ui/core/ListItem";
 import ListItemText from "@material-ui/core/ListItemText";
 import Paper from "@material-ui/core/Paper";
-import gql from "graphql-tag";
-import { Query } from "react-apollo";
 import { Link } from "../Router";
 import ProfilePic from "../components/ProfilePic";
 import { fade } from "@material-ui/core/styles/colorManipulator";
 import SearchIcon from "@material-ui/icons/Search";
 import CircularProgress from "@material-ui/core/CircularProgress";
-
-const SEARCH = gql`
-  query UserSearch($searchString: String!) {
-    userSearch(name: $searchString, email: $searchString) {
-      id
-      email
-      name
-      photo
-      nickname
-    }
-  }
-`;
+import { SEARCH, UserQueryComp } from "../queries/userQueries";
 
 const styles = theme =>
   createStyles({
@@ -102,7 +89,10 @@ class SearchBar extends Component<ISearchBarProps> {
     const { classes } = this.props;
 
     return (
-      <Query query={SEARCH} variables={{ searchString: this.state.inputValue }}>
+      <UserQueryComp
+        query={SEARCH}
+        variables={{ searchString: this.state.inputValue }}
+      >
         {({ loading, error, data }) => {
           const searchIcon = loading ? (
             <CircularProgress size={24} />
@@ -176,7 +166,7 @@ class SearchBar extends Component<ISearchBarProps> {
             </div>
           );
         }}
-      </Query>
+      </UserQueryComp>
     );
   }
 }