Hookup create sections FE/BE (#164)

* Wire up get course sections w/ create sections FE * Wire up adding sections * Handle error display * File name alignment fix * File name alignment fix * Refactor flow. Apply context free validation on file upload. Apply validation requiring awareness of server data on submit. * Uncoment a thus far unused property * Update ccm_web/client/src/api.ts Co-authored-by: Mr. Lance E Sloan «UMich» <lsloan-github.com@umich.edu> * Non functional tweaking of getPost getPut * Delete the forbidden comment * Reorder some imports ~asthetics~ * Remove an unused css style * rename a variable * Only change to LoadingExistingSectionNamesFailed if getCanvasSectionDataError is defined * Prevent multiple submits * Update ccm_web/client/src/pages/BulkSectionCreate.tsx Suggested formatting change Co-authored-by: Sam Sciolla <35741256+ssciolla@users.noreply.github.com> * Update ccm_web/client/src/pages/BulkSectionCreate.tsx Suggested formatting change Co-authored-by: Sam Sciolla <35741256+ssciolla@users.noreply.github.com> * Update ccm_web/client/src/pages/BulkSectionCreate.tsx Fix alert text Co-authored-by: Sam Sciolla <35741256+ssciolla@users.noreply.github.com> * Escape quotes in text * Learning to spell basic words * Get rid of redundant code. Need to get better at javascript * Add Canvas settings URL (#3) * Send Canvas URL in /api/globals; wire up BulkSectionCreate to use it for settings link * Use Link component; add target _parent Co-authored-by: Mr. Lance E Sloan «UMich» <lsloan-github.com@umich.edu> Co-authored-by: Sam Sciolla <35741256+ssciolla@users.noreply.github.com>
tl-its-umich-edu · Aug 5, 2021 · f0b7440 · f0b7440
1 parent 1a66f9d
commit f0b7440
Show file tree

Hide file tree

Showing 11 changed files with 257 additions and 81 deletions.
diff --git a/ccm_web/client/src/App.tsx b/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>

diff --git a/ccm_web/client/src/api.ts b/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()
 }
diff --git a/ccm_web/client/src/models/FeatureUIData.tsx b/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

diff --git a/ccm_web/client/src/models/canvas.ts b/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
+}
diff --git a/ccm_web/client/src/models/models.ts b/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[]
+}