forked from tl-its-umich-edu/canvas-course-manager-next
-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.tsx
98 lines (84 loc) · 3.17 KB
/
App.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
import React, { useEffect, useState } from 'react'
import { Route, Routes, useLocation } from 'react-router-dom'
import { getCourse } from './api.js'
import './App.css'
import APIErrorMessage from './components/APIErrorMessage.js'
import AuthorizePrompt from './components/AuthorizePrompt.js'
import ErrorAlert from './components/ErrorAlert.js'
import Layout from './components/Layout.js'
import useGlobals from './hooks/useGlobals.js'
import usePromise from './hooks/usePromise.js'
import { CanvasCourseBase } from './models/canvas.js'
import allFeatures from './models/FeatureUIData.js'
import Home from './pages/Home.js'
import NotFound from './pages/NotFound.js'
import redirect from './utils/redirect.js'
function App (): JSX.Element {
const features = allFeatures.map(f => f.features).flat()
const location = useLocation()
const [globals, csrfToken, isAuthenticated, isLoading, globalsError, csrfTokenCookieError] = useGlobals()
const [course, setCourse] = useState<undefined|CanvasCourseBase>(undefined)
const [doLoadCourse, isCourseLoading, getCourseError] = usePromise<CanvasCourseBase|undefined, typeof getCourse>(
async (courseId: number): Promise<CanvasCourseBase> => {
return await getCourse(courseId)
},
(value: CanvasCourseBase|undefined) => setCourse(value)
)
useEffect(() => {
if (globals?.user.hasCanvasToken === true) {
void doLoadCourse(globals.course.id)
}
}, [globals])
const loading = <div className='App'><p>Loading...</p></div>
if (isAuthenticated === undefined || isLoading) return loading
if (globalsError !== undefined) console.error(globalsError)
if (csrfTokenCookieError !== undefined) console.error(csrfTokenCookieError)
if (globals === undefined || !isAuthenticated || csrfToken === undefined) {
redirect('/access-denied')
return (loading)
}
if (!globals.user.hasCanvasToken) {
return (
<Layout>
<AuthorizePrompt helpURL={globals.baseHelpURL} />
</Layout>
)
}
if (isCourseLoading) return loading
if (getCourseError !== undefined || course === undefined) {
return (
<Layout>
<ErrorAlert
messages={[<APIErrorMessage key={0} context='loading course data' error={getCourseError} />]}
/>
</Layout>
)
}
const pathnames = location !== undefined
? location.pathname.split('/').filter(x => x)
: undefined
return (
<Layout {...{ features, pathnames }} devMode={globals?.environment === 'development'} csrfToken={csrfToken}>
<Routes>
<Route path='/' element={
<Home globals={globals} csrfToken={csrfToken} course={course} setCourse={setCourse} getCourseError={getCourseError} />
} />
{features.map(feature => {
return (
<Route key={feature.data.id} path={feature.route} element={
<feature.component
globals={globals}
csrfToken={csrfToken}
course={course}
title={feature.data.title}
helpURLEnding={feature.data.helpURLEnding}
/>
}/>
)
})}
<Route path="/*" element={<NotFound />}/>
</Routes>
</Layout>
)
}
export default App