Hookup create sections FE/BE

ccm_web/client/src/App.tsx

@@ -103,7 +103,7 @@ function App (props: AppProps): JSX.Element {
           <Switch>
             <Route exact={true} path="/" render={() => (<Home globals={globals} ltiKey={props.ltiKey} course={course} setCourse={setCourse} getCourseError={getCourseError} />)} />
             {features.map(feature => {
-              return <Route key={feature.data.id} path={feature.route} component={feature.component} />
+              return <Route key={feature.data.id} path={feature.route} component={() => <feature.component globals={globals} ltiKey={props.ltiKey} />}/>
             })}
             <Route render={() => (<div><em>Under Construction</em></div>)} />
           </Switch>

ccm_web/client/src/api.ts

@@ -1,11 +1,13 @@
-import { CanvasCourseBase } from './models/canvas'
+import { CanvasCourseBase, CanvasCourseSection } from './models/canvas'
 import { Globals } from './models/models'
 import handleErrors from './utils/handleErrors'
 
 export interface LtiProps {
   ltiKey: string | undefined
 }
 
+const jsonMimeType = 'application/json'
+
 const initRequest = (key: string | undefined, headers: string[][] = []): RequestInit => {
   if (key !== undefined) {
     headers.push(['Authorization', 'Bearer ' + key])
@@ -23,11 +25,17 @@ const getGet = (key: string | undefined): RequestInit => {
   return request
 }
 
+const getPost = (key: string | undefined, body: string): RequestInit => {
+  const headers: string[][] = [['Content-Type', jsonMimeType], ['Accept', jsonMimeType]]
+  const request = initRequest(key, headers)
+  request.method = 'POST'
+  request.body = body
+  return request
+}
+
 // This currently assumes all put requests have a JSON payload and receive a JSON response.
 const getPut = (key: string | undefined, body: string): RequestInit => {
-  const headers: string[][] = []
-  headers.push(['Content-Type', 'application/json'])
-  headers.push(['Accept', 'application/json'])
+  const headers: string[][] = [['Content-Type', jsonMimeType], ['Accept', jsonMimeType]]
   const request = initRequest(key, headers)
   request.method = 'PUT'
   request.body = body
@@ -55,18 +63,17 @@ export const getGlobals = async (key: string | undefined): Promise<Globals> => {
   return await resp.json()
 }
 
-const delay = async (ms: number): Promise<void> => {
-  await new Promise<void>(resolve => setTimeout(() => resolve(), ms))
+export const getCourseSections = async (key: string | undefined, courseId: number): Promise<CanvasCourseSection[]> => {
+  const request = getGet(key)
+  const resp = await fetch('/api/course/' + courseId.toString() + '/sections', request)
+  await handleErrors(resp)
+  return await resp.json()
 }
 
-// This is a placeholder for a real implementation (I mean, obviously :D)
-export const getCourseSections = async (key: string | undefined, courseId: string): Promise<string[]> => {
-  const sections = await delay(2000).then(() => {
-    if (Math.random() * 3 > 1) {
-      return (['AAAA', 'BBBB'])
-    } else {
-      return new Promise<string[]>((resolve, reject) => { reject(new Error('Error retrieving course section information.')) })
-    }
-  })
-  return sections
+export const addCourseSections = async (key: string | undefined, courseId: number, sectionNames: string[]): Promise<CanvasCourseSection[]> => {
+  const body = JSON.stringify({ sections: sectionNames })
+  const request = getPost(key, body)
+  const resp = await fetch('/api/course/' + courseId.toString() + '/sections', request)
+  await handleErrors(resp)
+  return await resp.json()
 }

ccm_web/client/src/models/FeatureUIData.tsx

@@ -11,9 +11,11 @@ import ConvertCanvasGradebook from '../pages/GradebookCanvas'
 import MergeSections from '../pages/MergeSections'
 import BulkSectionCreate from '../pages/BulkSectionCreate'
 import { LtiProps } from '../api'
-import { RoleEnum } from './models'
+import { Globals, RoleEnum } from './models'
 
-export interface CCMComponentProps extends LtiProps {}
+export interface CCMComponentProps extends LtiProps {
+  globals: Globals
+}
 
 interface FeatureUIGroup {
   id: string

ccm_web/client/src/models/canvas.ts

@@ -2,3 +2,9 @@ export interface CanvasCourseBase {
   id: number
   name: string
 }
+
+export interface CanvasCourseSection {
+  id: number
+  name: string
+  total_students?: number
+}

ccm_web/client/src/models/models.ts

@@ -28,6 +28,7 @@ export interface Course {
 
 export interface Globals {
   environment: 'production' | 'development'
+  canvasURL: string
   userLoginId: string
   course: Course
 }
@@ -42,3 +43,7 @@ export interface APIErrorData {
   statusCode: number
   errors: APIErrorPayload[]
 }
+
+export interface IDefaultError {
+  errors: APIErrorPayload[]
+}