cleanup: merge types & add graphql-codegen-cli

api/router/middleware.go

@@ -12,6 +12,9 @@ func AuthenticationMiddleware(next http.Handler) http.Handler {
 	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
 		bearerTokenRaw := r.Header.Get("Authorization")
 		splitToken := strings.Split(bearerTokenRaw, "Bearer")
+		log.WithFields(log.Fields{
+			"bearerToken": bearerTokenRaw,
+		}).Warning("loading bearer token")
 		if len(splitToken) != 2 {
 			w.WriteHeader(http.StatusBadRequest)
 			return
@@ -21,7 +24,7 @@ func AuthenticationMiddleware(next http.Handler) http.Handler {
 		if err != nil {
 			if _, ok := err.(*ErrExpiredToken); ok {
 				w.Write([]byte(`{
-	"data": {}, 
+	"data": {},
 	"errors": [
 	{
 		"extensions": {

api/router/router.go

@@ -24,7 +24,7 @@ func NewRouter(db *sqlx.DB) (chi.Router, error) {
 	formatter.FullTimestamp = true
 
 	routerLogger := log.New()
-	routerLogger.SetLevel(log.WarnLevel)
+	routerLogger.SetLevel(log.DebugLevel)
 	routerLogger.Formatter = formatter
 	r := chi.NewRouter()
 	cors := cors.New(cors.Options{

web/codegen.yml

@@ -0,0 +1,16 @@
+overwrite: true
+schema:
+  - '../api/graph/schema.graphqls'
+documents: 'src/shared/graphql/*.graphqls'
+generates:
+  src/shared/generated/graphql.tsx:
+    plugins:
+      - 'typescript'
+      - 'typescript-operations'
+      - 'typescript-react-apollo'
+    config:
+      withHOC: false
+      withComponent: false
+      withHooks: true
+      scalars:
+        UUID: string

web/package.json

@@ -35,7 +35,7 @@
     "apollo-link-state": "^0.4.2",
     "apollo-utilities": "^1.3.3",
     "color": "^3.1.2",
-    "graphql": "^14.6.0",
+    "graphql": "^15.0.0",
     "graphql-tag": "^2.10.3",
     "history": "^4.10.1",
     "lodash": "^4.17.15",
@@ -57,7 +57,8 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "storybook": "start-storybook -p 9009 -s public",
-    "build-storybook": "build-storybook -s public"
+    "build-storybook": "build-storybook -s public",
+    "generate": "graphql-codegen"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -75,6 +76,10 @@
     ]
   },
   "devDependencies": {
+    "@graphql-codegen/cli": "^1.13.2",
+    "@graphql-codegen/typescript": "^1.13.2",
+    "@graphql-codegen/typescript-operations": "^1.13.2",
+    "@graphql-codegen/typescript-react-apollo": "^1.13.2",
     "@storybook/addon-actions": "^5.3.13",
     "@storybook/addon-links": "^5.3.13",
     "@storybook/addons": "^5.3.13",

web/src/Projects/Project/index.tsx

@@ -3,6 +3,13 @@ import styled from 'styled-components/macro';
 import { useQuery, useMutation } from '@apollo/react-hooks';
 import gql from 'graphql-tag';
 import { useParams } from 'react-router-dom';
+import {
+  useFindProjectQuery,
+  useUpdateTaskNameMutation,
+  useCreateTaskMutation,
+  useDeleteTaskMutation,
+  useUpdateTaskLocationMutation,
+} from 'shared/generated/graphql';
 
 import Navbar from 'App/Navbar';
 import TopNavbar from 'App/TopNavbar';
@@ -14,7 +21,7 @@ interface ColumnState {
 }
 
 interface TaskState {
-  [key: string]: RemoteTask;
+  [key: string]: Task;
 }
 
 interface State {
@@ -26,7 +33,7 @@ interface QuickCardEditorState {
   isOpen: boolean;
   left: number;
   top: number;
-  task?: RemoteTask;
+  task?: Task;
 }
 
 const MainContent = styled.div`
@@ -46,113 +53,10 @@ const Title = styled.span`
   color: #fff;
 `;
 
-interface ProjectData {
-  findProject: Project;
-}
-
-interface UpdateTaskLocationData {
-  updateTaskLocation: Task;
-}
-
-interface UpdateTaskLocationVars {
-  taskID: string;
-  taskGroupID: string;
-  position: number;
-}
-
-interface ProjectVars {
-  projectId: string;
-}
-
-interface CreateTaskVars {
-  taskGroupID: string;
-  name: string;
-  position: number;
-}
-
-interface CreateTaskData {
-  createTask: RemoteTask;
-}
-
 interface ProjectParams {
   projectId: string;
 }
 
-interface DeleteTaskData {
-  deleteTask: { taskID: string };
-}
-
-interface DeleteTaskVars {
-  taskID: string;
-}
-
-interface UpdateTaskNameData {
-  updateTaskName: RemoteTask;
-}
-
-interface UpdateTaskNameVars {
-  taskID: string;
-  name: string;
-}
-
-const UPDATE_TASK_NAME = gql`
-  mutation updateTaskName($taskID: String!, $name: String!) {
-    updateTaskName(input: { taskID: $taskID, name: $name }) {
-      taskID
-      name
-      position
-    }
-  }
-`;
-
-const GET_PROJECT = gql`
-  query getProject($projectId: String!) {
-    findProject(input: { projectId: $projectId }) {
-      name
-      taskGroups {
-        taskGroupID
-        name
-        position
-        tasks {
-          taskID
-          name
-          position
-        }
-      }
-    }
-  }
-`;
-
-const CREATE_TASK = gql`
-  mutation createTask($taskGroupID: String!, $name: String!, $position: Float!) {
-    createTask(input: { taskGroupID: $taskGroupID, name: $name, position: $position }) {
-      taskID
-      taskGroupID
-      name
-      position
-    }
-  }
-`;
-
-const DELETE_TASK = gql`
-  mutation deleteTask($taskID: String!) {
-    deleteTask(input: { taskID: $taskID }) {
-      taskID
-    }
-  }
-`;
-
-const UPDATE_TASK_LOCATION = gql`
-  mutation updateTaskLocation($taskID: String!, $taskGroupID: String!, $position: Float!) {
-    updateTaskLocation(input: { taskID: $taskID, taskGroupID: $taskGroupID, position: $position }) {
-      taskID
-      createdAt
-      name
-      position
-    }
-  }
-`;
-
 const initialState: State = { tasks: {}, columns: {} };
 const initialQuickCardEditorState: QuickCardEditorState = { isOpen: false, top: 0, left: 0 };
 
@@ -160,10 +64,8 @@ const Project = () => {
   const { projectId } = useParams<ProjectParams>();
   const [listsData, setListsData] = useState(initialState);
   const [quickCardEditor, setQuickCardEditor] = useState(initialQuickCardEditorState);
-  const [updateTaskLocation, updateTaskLocationData] = useMutation<UpdateTaskLocationData, UpdateTaskLocationVars>(
+  const [updateTaskLocation] = useUpdateTaskLocationMutation();
-    UPDATE_TASK_LOCATION,
+  const [createTask] = useCreateTaskMutation({
-  );
-  const [createTask, createTaskData] = useMutation<CreateTaskData, CreateTaskVars>(CREATE_TASK, {
     onCompleted: newTaskData => {
       const newListsData = {
         ...listsData,
@@ -181,7 +83,7 @@ const Project = () => {
       setListsData(newListsData);
     },
   });
-  const [deleteTask, deleteTaskData] = useMutation<DeleteTaskData, DeleteTaskVars>(DELETE_TASK, {
+  const [deleteTask] = useDeleteTaskMutation({
     onCompleted: deletedTask => {
       const { [deletedTask.deleteTask.taskID]: removedTask, ...remainingTasks } = listsData.tasks;
       const newListsData = {
@@ -191,7 +93,7 @@ const Project = () => {
       setListsData(newListsData);
     },
   });
-  const [updateTaskName, updateTaskNameData] = useMutation<UpdateTaskNameData, UpdateTaskNameVars>(UPDATE_TASK_NAME, {
+  const [updateTaskName] = useUpdateTaskNameMutation({
     onCompleted: newTaskData => {
       const newListsData = {
         ...listsData,
@@ -206,7 +108,7 @@ const Project = () => {
       setListsData(newListsData);
     },
   });
-  const { loading, data } = useQuery<ProjectData, ProjectVars>(GET_PROJECT, {
+  const { loading, data } = useFindProjectQuery({
     variables: { projectId },
     onCompleted: newData => {
       let newListsData: State = { tasks: {}, columns: {} };
@@ -217,7 +119,7 @@ const Project = () => {
           position: taskGroup.position,
           tasks: [],
         };
-        taskGroup.tasks.forEach((task: RemoteTask) => {
+        taskGroup.tasks.forEach((task: Task) => {
           newListsData.tasks[task.taskID] = {
             taskID: task.taskID,
             taskGroupID: taskGroup.taskGroupID,
@@ -254,9 +156,7 @@ const Project = () => {
     setListsData(newState);
   };
   const onCardCreate = (taskGroupID: string, name: string) => {
-    const taskGroupTasks = Object.values(listsData.tasks).filter(
+    const taskGroupTasks = Object.values(listsData.tasks).filter((task: Task) => task.taskGroupID === taskGroupID);
-      (task: RemoteTask) => task.taskGroupID === taskGroupID,
-    );
     var position = 65535;
     console.log(taskGroupID);
     console.log(taskGroupTasks);
@@ -269,12 +169,12 @@ const Project = () => {
     createTask({ variables: { taskGroupID: taskGroupID, name: name, position: position } });
   };
   const onQuickEditorOpen = (e: ContextMenuEvent) => {
-    const task = Object.values(listsData.tasks).find(task => task.taskID === e.cardId);
+    const currentTask = Object.values(listsData.tasks).find(task => task.taskID === e.taskID);
     setQuickCardEditor({
       top: e.top,
       left: e.left,
       isOpen: true,
-      task,
+      task: currentTask,
     });
   };
 
@@ -299,8 +199,8 @@ const Project = () => {
         {quickCardEditor.isOpen && (
           <QuickCardEditor
             isOpen={true}
-            listId={quickCardEditor.task ? quickCardEditor.task.taskGroupID : ''}
+            taskID={quickCardEditor.task ? quickCardEditor.task.taskID : ''}
-            cardId={quickCardEditor.task ? quickCardEditor.task.taskID : ''}
+            taskGroupID={quickCardEditor.task ? quickCardEditor.task.taskGroupID : ''}
             cardTitle={quickCardEditor.task ? quickCardEditor.task.name : ''}
             onCloseEditor={() => setQuickCardEditor(initialQuickCardEditorState)}
             onEditCard={(listId: string, cardId: string, cardName: string) =>

web/src/Projects/index.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import styled from 'styled-components/macro';
-import { useQuery } from '@apollo/react-hooks';
+import { useGetProjectsQuery } from 'shared/generated/graphql';
-import gql from 'graphql-tag';
 
 import TopNavbar from 'App/TopNavbar';
 import ProjectGridItem from 'shared/components/ProjectGridItem';
@@ -25,29 +24,8 @@ const Wrapper = styled.div`
   font-size: 16px;
   background-color: red;
 `;
-
-interface ProjectData {
-  name: string;
-  organizations: Organization[];
-}
-
-const GET_PROJECTS = gql`
-  query getProjects {
-    organizations {
-      name
-      teams {
-        name
-        projects {
-          name
-          projectID
-        }
-      }
-    }
-  }
-`;
-
 const Projects = () => {
-  const { loading, data } = useQuery<ProjectData>(GET_PROJECTS);
+  const { loading, data } = useGetProjectsQuery();
   console.log(loading, data);
   if (loading) {
     return <Wrapper>Loading</Wrapper>;

web/src/citadel.d.ts

@@ -1,23 +1,25 @@
 type ContextMenuEvent = {
   left: number;
   top: number;
-  cardId: string;
+  taskID: string;
-  listId: string;
+  taskGroupID: string;
 };
 
-interface RemoteTask {
+type Task = {
   taskID: string;
   taskGroupID: string;
   name: string;
   position: number;
   labels: Label[];
-}
+};
+
 type TaskGroup = {
   taskGroupID: string;
   name: string;
   position: number;
   tasks: RemoteTask[];
 };
+
 type Project = {
   projectID: string;
   name: string;
@@ -26,15 +28,16 @@ type Project = {
   taskGroups: TaskGroup[];
 };
 
-interface Organization {
+type Organization = {
   name: string;
   teams: Team[];
-}
+};
 
-interface Team {
+type Team = {
   name: string;
   projects: Project[];
-}
+};
+
 type Label = {
   labelId: string;
   name: string;
@@ -42,11 +45,6 @@ type Label = {
   active: boolean;
 };
 
-type Task = {
-  title: string;
-  position: number;
-};
-
 type RefreshTokenResponse = {
   accessToken: string;
 };

web/src/shared/components/Card/Card.stories.tsx

@@ -33,8 +33,8 @@ export const Default = () => {
   const $ref = useRef<HTMLDivElement>(null);
   return (
     <Card
-      cardId="1"
+      taskID="1"
-      listId="1"
+      taskGroupID="1"
       description=""
       ref={$ref}
       title="Hello, world"
@@ -48,8 +48,8 @@ export const Labels = () => {
   const $ref = useRef<HTMLDivElement>(null);
   return (
     <Card
-      cardId="1"
+      taskID="1"
-      listId="1"
+      taskGroupID="1"
       description=""
       ref={$ref}
       title="Hello, world"
@@ -64,8 +64,8 @@ export const Badges = () => {
   const $ref = useRef<HTMLDivElement>(null);
   return (
     <Card
-      cardId="1"
+      taskID="1"
-      listId="1"
+      taskGroupID="1"
       description="hello!"
       ref={$ref}
       title="Hello, world"
@@ -82,8 +82,8 @@ export const PastDue = () => {
   const $ref = useRef<HTMLDivElement>(null);
   return (
     <Card
-      cardId="1"
+      taskID="1"
-      listId="1"
+      taskGroupID="1"
       description="hello!"
       ref={$ref}
       title="Hello, world"
@@ -100,8 +100,8 @@ export const Everything = () => {
   const $ref = useRef<HTMLDivElement>(null);
   return (
     <Card
-      cardId="1"
+      taskID="1"
-      listId="1"
+      taskGroupID="1"
       description="hello!"
       ref={$ref}
       title="Hello, world"

web/src/shared/components/Card/index.tsx

@@ -33,8 +33,8 @@ type Checklist = {
 type Props = {
   title: string;
   description: string;
-  cardId: string;
+  taskID: string;
-  listId: string;
+  taskGroupID: string;
   onContextMenu: (e: ContextMenuEvent) => void;
   onClick: (e: React.MouseEvent<HTMLDivElement>) => void;
   dueDate?: DueDate;
@@ -49,8 +49,8 @@ const Card = React.forwardRef(
     {
       wrapperProps,
       onContextMenu,
-      cardId,
+      taskID,
-      listId,
+      taskGroupID,
       onClick,
       labels,
       title,
@@ -69,8 +69,8 @@ const Card = React.forwardRef(
         onContextMenu({
           top: pos.top,
           left: pos.left,
-          listId,
+          taskGroupID,
-          cardId,
+          taskID,
         });
       }
     };

web/src/shared/components/List/List.stories.tsx

@@ -35,8 +35,8 @@ const createCard = () => {
   const $ref = createRef<HTMLDivElement>();
   return (
     <Card
-      cardId="1"
+      taskID="1"
-      listId="1"
+      taskGroupID="1"
       description="hello!"
       ref={$ref}
       title="Hello, world"
@@ -113,8 +113,8 @@ export const WithCard = () => {
     >
       <ListCards>
         <Card
-          cardId="1"
+          taskID="1"
-          listId="1"
+          taskGroupID="1"
           description="hello!"
           ref={$cardRef}
           title="Hello, world"
@@ -151,8 +151,8 @@ export const WithCardAndComposer = () => {
     >
       <ListCards>
         <Card
-          cardId="1"
+          taskID="1"
-          listId="1"
+          taskGroupID="1"
           description="hello!"
           ref={$cardRef}
           title="Hello, world"

web/src/shared/components/Lists/index.tsx

@@ -53,7 +53,7 @@ interface Columns {
   [key: string]: TaskGroup;
 }
 interface Tasks {
-  [key: string]: RemoteTask;
+  [key: string]: Task;
 }
 
 type Props = {
@@ -139,7 +139,7 @@ const Lists = ({ columns, tasks, onCardDrop, onListDrop, onCardCreate, onQuickEd
                       <Droppable type="tasks" droppableId={column.taskGroupID}>
                         {columnDropProvided => (
                           <ListCards ref={columnDropProvided.innerRef} {...columnDropProvided.droppableProps}>
-                            {columnCards.map((task: RemoteTask, taskIndex: any) => {
+                            {columnCards.map((task: Task, taskIndex: any) => {
                               return (
                                 <Draggable key={task.taskID} draggableId={task.taskID} index={taskIndex}>
                                   {taskProvided => {
@@ -150,8 +150,8 @@ const Lists = ({ columns, tasks, onCardDrop, onListDrop, onCardCreate, onQuickEd
                                           ...taskProvided.dragHandleProps,
                                         }}
                                         ref={taskProvided.innerRef}
-                                        cardId={task.taskID}
+                                        taskID={task.taskID}
-                                        listId={column.taskGroupID}
+                                        taskGroupID={column.taskGroupID}
                                         description=""
                                         title={task.name}
                                         labels={task.labels}

web/src/shared/components/QuickCardEditor/QuickCardEditor.stories.tsx

@@ -42,8 +42,8 @@ export const Default = () => {
       {isEditorOpen && (
         <QuickCardEditor
           isOpen={isEditorOpen}
-          listId="1"
+          taskGroupID="1"
-          cardId="1"
+          taskID="1"
           cardTitle="Hello, world"
           onCloseEditor={() => setEditorOpen(false)}
           onEditCard={action('edit card')}
@@ -64,8 +64,8 @@ export const Default = () => {
       >
         <ListCards>
           <Card
-            cardId="1"
+            taskID="1"
-            listId="1"
+            taskGroupID="1"
             description="hello!"
             ref={$cardRef}
             title="Hello, world"

web/src/shared/components/QuickCardEditor/index.tsx

@@ -15,13 +15,13 @@ import {
 } from './Styles';
 
 type Props = {
-  listId: string;
+  taskID: string;
-  cardId: string;
+  taskGroupID: string;
   cardTitle: string;
   onCloseEditor: () => void;
-  onEditCard: (listId: string, cardId: string, cardName: string) => void;
+  onEditCard: (taskGroupID: string, taskID: string, cardName: string) => void;
   onOpenPopup: (popupType: number, top: number, left: number) => void;
-  onArchiveCard: (listId: string, cardId: string) => void;
+  onArchiveCard: (taskGroupID: string, taskID: string) => void;
   labels?: Label[];
   isOpen: boolean;
   top: number;
@@ -29,8 +29,8 @@ type Props = {
 };
 
 const QuickCardEditor = ({
-  listId,
+  taskGroupID,
-  cardId,
+  taskID,
   cardTitle,
   onCloseEditor,
   onOpenPopup,
@@ -57,7 +57,7 @@ const QuickCardEditor = ({
   const handleKeyDown = (e: any) => {
     if (e.key === 'Enter') {
       e.preventDefault();
-      onEditCard(listId, cardId, currentCardTitle);
+      onEditCard(taskGroupID, taskID, currentCardTitle);
       onCloseEditor();
     }
   };
@@ -89,7 +89,7 @@ const QuickCardEditor = ({
             />
           </EditorDetails>
         </Editor>
-        <SaveButton onClick={e => onEditCard(listId, cardId, currentCardTitle)}>Save</SaveButton>
+        <SaveButton onClick={e => onEditCard(taskGroupID, taskID, currentCardTitle)}>Save</SaveButton>
         <EditorButtons>
           <EditorButton
             ref={$labelsRef}
@@ -104,7 +104,7 @@ const QuickCardEditor = ({
           <EditorButton
             onClick={e => {
               e.stopPropagation();
-              onArchiveCard(listId, cardId);
+              onArchiveCard(taskGroupID, taskID);
               onCloseEditor();
             }}
           >

web/src/shared/generated/graphql.tsx

@@ -0,0 +1,568 @@
+import gql from 'graphql-tag';
+import * as ApolloReactCommon from '@apollo/react-common';
+import * as ApolloReactHooks from '@apollo/react-hooks';
+export type Maybe<T> = T | null;
+/** All built-in and custom scalars, mapped to their actual values */
+export type Scalars = {
+  ID: string;
+  String: string;
+  Boolean: boolean;
+  Int: number;
+  Float: number;
+  Time: any;
+  UUID: string;
+};
+
+
+
+export type RefreshToken = {
+   __typename?: 'RefreshToken';
+  tokenId: Scalars['ID'];
+  userId: Scalars['UUID'];
+  expiresAt: Scalars['Time'];
+  createdAt: Scalars['Time'];
+};
+
+export type UserAccount = {
+   __typename?: 'UserAccount';
+  userID: Scalars['ID'];
+  email: Scalars['String'];
+  createdAt: Scalars['Time'];
+  displayName: Scalars['String'];
+  username: Scalars['String'];
+};
+
+export type Organization = {
+   __typename?: 'Organization';
+  organizationID: Scalars['ID'];
+  createdAt: Scalars['Time'];
+  name: Scalars['String'];
+  teams: Array<Team>;
+};
+
+export type Team = {
+   __typename?: 'Team';
+  teamID: Scalars['ID'];
+  createdAt: Scalars['Time'];
+  name: Scalars['String'];
+  projects: Array<Project>;
+};
+
+export type Project = {
+   __typename?: 'Project';
+  projectID: Scalars['ID'];
+  teamID: Scalars['String'];
+  createdAt: Scalars['Time'];
+  name: Scalars['String'];
+  taskGroups: Array<TaskGroup>;
+};
+
+export type TaskGroup = {
+   __typename?: 'TaskGroup';
+  taskGroupID: Scalars['ID'];
+  projectID: Scalars['String'];
+  createdAt: Scalars['Time'];
+  name: Scalars['String'];
+  position: Scalars['Float'];
+  tasks: Array<Task>;
+};
+
+export type Task = {
+   __typename?: 'Task';
+  taskID: Scalars['ID'];
+  taskGroupID: Scalars['String'];
+  createdAt: Scalars['Time'];
+  name: Scalars['String'];
+  position: Scalars['Float'];
+};
+
+export type ProjectsFilter = {
+  teamID?: Maybe<Scalars['String']>;
+};
+
+export type FindUser = {
+  userId: Scalars['String'];
+};
+
+export type FindProject = {
+  projectId: Scalars['String'];
+};
+
+export type Query = {
+   __typename?: 'Query';
+  organizations: Array<Organization>;
+  users: Array<UserAccount>;
+  findUser: UserAccount;
+  findProject: Project;
+  teams: Array<Team>;
+  projects: Array<Project>;
+  taskGroups: Array<TaskGroup>;
+};
+
+
+export type QueryFindUserArgs = {
+  input: FindUser;
+};
+
+
+export type QueryFindProjectArgs = {
+  input: FindProject;
+};
+
+
+export type QueryProjectsArgs = {
+  input?: Maybe<ProjectsFilter>;
+};
+
+export type NewRefreshToken = {
+  userId: Scalars['String'];
+};
+
+export type NewUserAccount = {
+  username: Scalars['String'];
+  email: Scalars['String'];
+  displayName: Scalars['String'];
+  password: Scalars['String'];
+};
+
+export type NewTeam = {
+  name: Scalars['String'];
+  organizationID: Scalars['String'];
+};
+
+export type NewProject = {
+  teamID: Scalars['String'];
+  name: Scalars['String'];
+};
+
+export type NewTaskGroup = {
+  projectID: Scalars['String'];
+  name: Scalars['String'];
+  position: Scalars['Float'];
+};
+
+export type NewOrganization = {
+  name: Scalars['String'];
+};
+
+export type LogoutUser = {
+  userID: Scalars['String'];
+};
+
+export type NewTask = {
+  taskGroupID: Scalars['String'];
+  name: Scalars['String'];
+  position: Scalars['Float'];
+};
+
+export type NewTaskLocation = {
+  taskID: Scalars['String'];
+  taskGroupID: Scalars['String'];
+  position: Scalars['Float'];
+};
+
+export type DeleteTaskInput = {
+  taskID: Scalars['String'];
+};
+
+export type DeleteTaskPayload = {
+   __typename?: 'DeleteTaskPayload';
+  taskID: Scalars['String'];
+};
+
+export type UpdateTaskName = {
+  taskID: Scalars['String'];
+  name: Scalars['String'];
+};
+
+export type Mutation = {
+   __typename?: 'Mutation';
+  createRefreshToken: RefreshToken;
+  createUserAccount: UserAccount;
+  createOrganization: Organization;
+  createTeam: Team;
+  createProject: Project;
+  createTaskGroup: TaskGroup;
+  createTask: Task;
+  updateTaskLocation: Task;
+  logoutUser: Scalars['Boolean'];
+  updateTaskName: Task;
+  deleteTask: DeleteTaskPayload;
+};
+
+
+export type MutationCreateRefreshTokenArgs = {
+  input: NewRefreshToken;
+};
+
+
+export type MutationCreateUserAccountArgs = {
+  input: NewUserAccount;
+};
+
+
+export type MutationCreateOrganizationArgs = {
+  input: NewOrganization;
+};
+
+
+export type MutationCreateTeamArgs = {
+  input: NewTeam;
+};
+
+
+export type MutationCreateProjectArgs = {
+  input: NewProject;
+};
+
+
+export type MutationCreateTaskGroupArgs = {
+  input: NewTaskGroup;
+};
+
+
+export type MutationCreateTaskArgs = {
+  input: NewTask;
+};
+
+
+export type MutationUpdateTaskLocationArgs = {
+  input: NewTaskLocation;
+};
+
+
+export type MutationLogoutUserArgs = {
+  input: LogoutUser;
+};
+
+
+export type MutationUpdateTaskNameArgs = {
+  input: UpdateTaskName;
+};
+
+
+export type MutationDeleteTaskArgs = {
+  input: DeleteTaskInput;
+};
+
+export type CreateTaskMutationVariables = {
+  taskGroupID: Scalars['String'];
+  name: Scalars['String'];
+  position: Scalars['Float'];
+};
+
+
+export type CreateTaskMutation = (
+  { __typename?: 'Mutation' }
+  & { createTask: (
+    { __typename?: 'Task' }
+    & Pick<Task, 'taskID' | 'taskGroupID' | 'name' | 'position'>
+  ) }
+);
+
+export type DeleteTaskMutationVariables = {
+  taskID: Scalars['String'];
+};
+
+
+export type DeleteTaskMutation = (
+  { __typename?: 'Mutation' }
+  & { deleteTask: (
+    { __typename?: 'DeleteTaskPayload' }
+    & Pick<DeleteTaskPayload, 'taskID'>
+  ) }
+);
+
+export type FindProjectQueryVariables = {
+  projectId: Scalars['String'];
+};
+
+
+export type FindProjectQuery = (
+  { __typename?: 'Query' }
+  & { findProject: (
+    { __typename?: 'Project' }
+    & Pick<Project, 'name'>
+    & { taskGroups: Array<(
+      { __typename?: 'TaskGroup' }
+      & Pick<TaskGroup, 'taskGroupID' | 'name' | 'position'>
+      & { tasks: Array<(
+        { __typename?: 'Task' }
+        & Pick<Task, 'taskID' | 'name' | 'position'>
+      )> }
+    )> }
+  ) }
+);
+
+export type GetProjectsQueryVariables = {};
+
+
+export type GetProjectsQuery = (
+  { __typename?: 'Query' }
+  & { organizations: Array<(
+    { __typename?: 'Organization' }
+    & Pick<Organization, 'name'>
+    & { teams: Array<(
+      { __typename?: 'Team' }
+      & Pick<Team, 'name'>
+      & { projects: Array<(
+        { __typename?: 'Project' }
+        & Pick<Project, 'name' | 'projectID'>
+      )> }
+    )> }
+  )> }
+);
+
+export type UpdateTaskLocationMutationVariables = {
+  taskID: Scalars['String'];
+  taskGroupID: Scalars['String'];
+  position: Scalars['Float'];
+};
+
+
+export type UpdateTaskLocationMutation = (
+  { __typename?: 'Mutation' }
+  & { updateTaskLocation: (
+    { __typename?: 'Task' }
+    & Pick<Task, 'taskID' | 'createdAt' | 'name' | 'position'>
+  ) }
+);
+
+export type UpdateTaskNameMutationVariables = {
+  taskID: Scalars['String'];
+  name: Scalars['String'];
+};
+
+
+export type UpdateTaskNameMutation = (
+  { __typename?: 'Mutation' }
+  & { updateTaskName: (
+    { __typename?: 'Task' }
+    & Pick<Task, 'taskID' | 'name' | 'position'>
+  ) }
+);
+
+
+export const CreateTaskDocument = gql`
+    mutation createTask($taskGroupID: String!, $name: String!, $position: Float!) {
+  createTask(input: {taskGroupID: $taskGroupID, name: $name, position: $position}) {
+    taskID
+    taskGroupID
+    name
+    position
+  }
+}
+    `;
+export type CreateTaskMutationFn = ApolloReactCommon.MutationFunction<CreateTaskMutation, CreateTaskMutationVariables>;
+
+/**
+ * __useCreateTaskMutation__
+ *
+ * To run a mutation, you first call `useCreateTaskMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useCreateTaskMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [createTaskMutation, { data, loading, error }] = useCreateTaskMutation({
+ *   variables: {
+ *      taskGroupID: // value for 'taskGroupID'
+ *      name: // value for 'name'
+ *      position: // value for 'position'
+ *   },
+ * });
+ */
+export function useCreateTaskMutation(baseOptions?: ApolloReactHooks.MutationHookOptions<CreateTaskMutation, CreateTaskMutationVariables>) {
+        return ApolloReactHooks.useMutation<CreateTaskMutation, CreateTaskMutationVariables>(CreateTaskDocument, baseOptions);
+      }
+export type CreateTaskMutationHookResult = ReturnType<typeof useCreateTaskMutation>;
+export type CreateTaskMutationResult = ApolloReactCommon.MutationResult<CreateTaskMutation>;
+export type CreateTaskMutationOptions = ApolloReactCommon.BaseMutationOptions<CreateTaskMutation, CreateTaskMutationVariables>;
+export const DeleteTaskDocument = gql`
+    mutation deleteTask($taskID: String!) {
+  deleteTask(input: {taskID: $taskID}) {
+    taskID
+  }
+}
+    `;
+export type DeleteTaskMutationFn = ApolloReactCommon.MutationFunction<DeleteTaskMutation, DeleteTaskMutationVariables>;
+
+/**
+ * __useDeleteTaskMutation__
+ *
+ * To run a mutation, you first call `useDeleteTaskMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useDeleteTaskMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [deleteTaskMutation, { data, loading, error }] = useDeleteTaskMutation({
+ *   variables: {
+ *      taskID: // value for 'taskID'
+ *   },
+ * });
+ */
+export function useDeleteTaskMutation(baseOptions?: ApolloReactHooks.MutationHookOptions<DeleteTaskMutation, DeleteTaskMutationVariables>) {
+        return ApolloReactHooks.useMutation<DeleteTaskMutation, DeleteTaskMutationVariables>(DeleteTaskDocument, baseOptions);
+      }
+export type DeleteTaskMutationHookResult = ReturnType<typeof useDeleteTaskMutation>;
+export type DeleteTaskMutationResult = ApolloReactCommon.MutationResult<DeleteTaskMutation>;
+export type DeleteTaskMutationOptions = ApolloReactCommon.BaseMutationOptions<DeleteTaskMutation, DeleteTaskMutationVariables>;
+export const FindProjectDocument = gql`
+    query findProject($projectId: String!) {
+  findProject(input: {projectId: $projectId}) {
+    name
+    taskGroups {
+      taskGroupID
+      name
+      position
+      tasks {
+        taskID
+        name
+        position
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __useFindProjectQuery__
+ *
+ * To run a query within a React component, call `useFindProjectQuery` and pass it any options that fit your needs.
+ * When your component renders, `useFindProjectQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useFindProjectQuery({
+ *   variables: {
+ *      projectId: // value for 'projectId'
+ *   },
+ * });
+ */
+export function useFindProjectQuery(baseOptions?: ApolloReactHooks.QueryHookOptions<FindProjectQuery, FindProjectQueryVariables>) {
+        return ApolloReactHooks.useQuery<FindProjectQuery, FindProjectQueryVariables>(FindProjectDocument, baseOptions);
+      }
+export function useFindProjectLazyQuery(baseOptions?: ApolloReactHooks.LazyQueryHookOptions<FindProjectQuery, FindProjectQueryVariables>) {
+          return ApolloReactHooks.useLazyQuery<FindProjectQuery, FindProjectQueryVariables>(FindProjectDocument, baseOptions);
+        }
+export type FindProjectQueryHookResult = ReturnType<typeof useFindProjectQuery>;
+export type FindProjectLazyQueryHookResult = ReturnType<typeof useFindProjectLazyQuery>;
+export type FindProjectQueryResult = ApolloReactCommon.QueryResult<FindProjectQuery, FindProjectQueryVariables>;
+export const GetProjectsDocument = gql`
+    query getProjects {
+  organizations {
+    name
+    teams {
+      name
+      projects {
+        name
+        projectID
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __useGetProjectsQuery__
+ *
+ * To run a query within a React component, call `useGetProjectsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetProjectsQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useGetProjectsQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useGetProjectsQuery(baseOptions?: ApolloReactHooks.QueryHookOptions<GetProjectsQuery, GetProjectsQueryVariables>) {
+        return ApolloReactHooks.useQuery<GetProjectsQuery, GetProjectsQueryVariables>(GetProjectsDocument, baseOptions);
+      }
+export function useGetProjectsLazyQuery(baseOptions?: ApolloReactHooks.LazyQueryHookOptions<GetProjectsQuery, GetProjectsQueryVariables>) {
+          return ApolloReactHooks.useLazyQuery<GetProjectsQuery, GetProjectsQueryVariables>(GetProjectsDocument, baseOptions);
+        }
+export type GetProjectsQueryHookResult = ReturnType<typeof useGetProjectsQuery>;
+export type GetProjectsLazyQueryHookResult = ReturnType<typeof useGetProjectsLazyQuery>;
+export type GetProjectsQueryResult = ApolloReactCommon.QueryResult<GetProjectsQuery, GetProjectsQueryVariables>;
+export const UpdateTaskLocationDocument = gql`
+    mutation updateTaskLocation($taskID: String!, $taskGroupID: String!, $position: Float!) {
+  updateTaskLocation(input: {taskID: $taskID, taskGroupID: $taskGroupID, position: $position}) {
+    taskID
+    createdAt
+    name
+    position
+  }
+}
+    `;
+export type UpdateTaskLocationMutationFn = ApolloReactCommon.MutationFunction<UpdateTaskLocationMutation, UpdateTaskLocationMutationVariables>;
+
+/**
+ * __useUpdateTaskLocationMutation__
+ *
+ * To run a mutation, you first call `useUpdateTaskLocationMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useUpdateTaskLocationMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [updateTaskLocationMutation, { data, loading, error }] = useUpdateTaskLocationMutation({
+ *   variables: {
+ *      taskID: // value for 'taskID'
+ *      taskGroupID: // value for 'taskGroupID'
+ *      position: // value for 'position'
+ *   },
+ * });
+ */
+export function useUpdateTaskLocationMutation(baseOptions?: ApolloReactHooks.MutationHookOptions<UpdateTaskLocationMutation, UpdateTaskLocationMutationVariables>) {
+        return ApolloReactHooks.useMutation<UpdateTaskLocationMutation, UpdateTaskLocationMutationVariables>(UpdateTaskLocationDocument, baseOptions);
+      }
+export type UpdateTaskLocationMutationHookResult = ReturnType<typeof useUpdateTaskLocationMutation>;
+export type UpdateTaskLocationMutationResult = ApolloReactCommon.MutationResult<UpdateTaskLocationMutation>;
+export type UpdateTaskLocationMutationOptions = ApolloReactCommon.BaseMutationOptions<UpdateTaskLocationMutation, UpdateTaskLocationMutationVariables>;
+export const UpdateTaskNameDocument = gql`
+    mutation updateTaskName($taskID: String!, $name: String!) {
+  updateTaskName(input: {taskID: $taskID, name: $name}) {
+    taskID
+    name
+    position
+  }
+}
+    `;
+export type UpdateTaskNameMutationFn = ApolloReactCommon.MutationFunction<UpdateTaskNameMutation, UpdateTaskNameMutationVariables>;
+
+/**
+ * __useUpdateTaskNameMutation__
+ *
+ * To run a mutation, you first call `useUpdateTaskNameMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useUpdateTaskNameMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [updateTaskNameMutation, { data, loading, error }] = useUpdateTaskNameMutation({
+ *   variables: {
+ *      taskID: // value for 'taskID'
+ *      name: // value for 'name'
+ *   },
+ * });
+ */
+export function useUpdateTaskNameMutation(baseOptions?: ApolloReactHooks.MutationHookOptions<UpdateTaskNameMutation, UpdateTaskNameMutationVariables>) {
+        return ApolloReactHooks.useMutation<UpdateTaskNameMutation, UpdateTaskNameMutationVariables>(UpdateTaskNameDocument, baseOptions);
+      }
+export type UpdateTaskNameMutationHookResult = ReturnType<typeof useUpdateTaskNameMutation>;
+export type UpdateTaskNameMutationResult = ApolloReactCommon.MutationResult<UpdateTaskNameMutation>;
+export type UpdateTaskNameMutationOptions = ApolloReactCommon.BaseMutationOptions<UpdateTaskNameMutation, UpdateTaskNameMutationVariables>;

web/src/shared/graphql/createTask.graphqls

@@ -0,0 +1,8 @@
+mutation createTask($taskGroupID: String!, $name: String!, $position: Float!) {
+  createTask(input: { taskGroupID: $taskGroupID, name: $name, position: $position }) {
+    taskID
+    taskGroupID
+    name
+    position
+  }
+}

web/src/shared/graphql/deleteTask.graphqls

@@ -0,0 +1,5 @@
+mutation deleteTask($taskID: String!) {
+  deleteTask(input: { taskID: $taskID }) {
+    taskID
+  }
+}

web/src/shared/graphql/findProject.graphqls

@@ -0,0 +1,15 @@
+query findProject($projectId: String!) {
+  findProject(input: { projectId: $projectId }) {
+    name
+    taskGroups {
+      taskGroupID
+      name
+      position
+      tasks {
+        taskID
+        name
+        position
+      }
+    }
+  }
+}

web/src/shared/graphql/getProjects.graphqls

@@ -0,0 +1,12 @@
+query getProjects {
+  organizations {
+    name
+    teams {
+      name
+      projects {
+        name
+        projectID
+      }
+    }
+  }
+}

web/src/shared/graphql/updateTaskLocation.graphqls

@@ -0,0 +1,8 @@
+mutation updateTaskLocation($taskID: String!, $taskGroupID: String!, $position: Float!) {
+  updateTaskLocation(input: { taskID: $taskID, taskGroupID: $taskGroupID, position: $position }) {
+    taskID
+    createdAt
+    name
+    position
+  }
+}

web/src/shared/graphql/updateTaskName.graphqls

@@ -0,0 +1,7 @@
+mutation updateTaskName($taskID: String!, $name: String!) {
+  updateTaskName(input: { taskID: $taskID, name: $name }) {
+    taskID
+    name
+    position
+  }
+}