dce-reactkit 2.0.5 → 2.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/lib/components/AppWrapper.d.ts +2 -1
  2. package/lib/components/AppWrapper.js +9 -3
  3. package/lib/components/AppWrapper.js.map +1 -1
  4. package/lib/components/AppWrapper.tsx +181 -0
  5. package/lib/components/ErrorBox.tsx +124 -0
  6. package/lib/components/LoadingSpinner.tsx +105 -0
  7. package/lib/components/Modal.tsx +447 -0
  8. package/lib/errors/ErrorWithCode.tsx +15 -0
  9. package/lib/helpers/abbreviate.tsx +23 -0
  10. package/lib/helpers/avg.tsx +22 -0
  11. package/lib/helpers/ceilToNumDecimals.tsx +13 -0
  12. package/lib/helpers/floorToNumDecimals.tsx +13 -0
  13. package/lib/helpers/forceNumIntoBounds.tsx +19 -0
  14. package/lib/helpers/handleError.ts +65 -0
  15. package/lib/helpers/handleSuccess.ts +18 -0
  16. package/lib/helpers/padDecimalZeros.tsx +32 -0
  17. package/lib/helpers/padZerosLeft.tsx +21 -0
  18. package/lib/helpers/parseRequest.ts +299 -0
  19. package/lib/helpers/roundToNumDecimals.tsx +13 -0
  20. package/lib/helpers/showFatalError.tsx +3 -0
  21. package/lib/helpers/sum.tsx +16 -0
  22. package/lib/helpers/visitServerEndpoint.tsx +110 -0
  23. package/lib/helpers/waitMs.tsx +12 -0
  24. package/lib/types/ParamType.ts +18 -0
  25. package/lib/types/ReactKitErrorCode.tsx +16 -0
  26. package/lib/types/Variant.tsx +16 -0
  27. package/package.json +1 -1
  28. package/src/components/AppWrapper.tsx +189 -0
  29. package/src/components/ErrorBox.tsx +124 -0
  30. package/src/components/LoadingSpinner.tsx +105 -0
  31. package/src/components/Modal.tsx +447 -0
  32. package/src/errors/ErrorWithCode.tsx +15 -0
  33. package/src/helpers/abbreviate.tsx +23 -0
  34. package/src/helpers/avg.tsx +22 -0
  35. package/src/helpers/ceilToNumDecimals.tsx +13 -0
  36. package/src/helpers/floorToNumDecimals.tsx +13 -0
  37. package/src/helpers/forceNumIntoBounds.tsx +19 -0
  38. package/src/helpers/handleError.ts +65 -0
  39. package/src/helpers/handleSuccess.ts +18 -0
  40. package/src/helpers/padDecimalZeros.tsx +32 -0
  41. package/src/helpers/padZerosLeft.tsx +21 -0
  42. package/src/helpers/parseRequest.ts +299 -0
  43. package/src/helpers/roundToNumDecimals.tsx +13 -0
  44. package/src/helpers/showFatalError.tsx +3 -0
  45. package/src/helpers/sum.tsx +16 -0
  46. package/src/helpers/visitServerEndpoint.tsx +110 -0
  47. package/src/helpers/waitMs.tsx +12 -0
  48. package/src/types/ParamType.ts +18 -0
  49. package/src/types/ReactKitErrorCode.tsx +16 -0
  50. package/src/types/Variant.tsx +16 -0
@@ -0,0 +1,299 @@
1
+ // Import caccl libs
2
+ import { getLaunchInfo } from 'caccl-lti';
3
+
4
+ // Import shared types
5
+ import ReactKitErrorCode from '../types/ReactKitErrorCode';
6
+ import ParamType from '../types/ParamType';
7
+
8
+ // Import helpers
9
+ import handleError from './handleError';
10
+
11
+ /**
12
+ * Parse express request params and body
13
+ * @author Gabe Abrams
14
+ * @param opts object containing all arguments
15
+ * @param opts.req express request instance
16
+ * @param opts.res express response instance
17
+ * @param opts.params map of parameters that should be parsed out of the request
18
+ * @returns parsed params + user info from session (if it exists) or undefined
19
+ * if an error occurred
20
+ */
21
+ const parseRequest = (
22
+ opts: {
23
+ req: any,
24
+ res: any,
25
+ params: {
26
+ [k in string]: ParamType
27
+ },
28
+ },
29
+ ): ({ [k in string]: any } | undefined) => {
30
+ // Output
31
+
32
+ const output: { [k in string]: any } = {};
33
+
34
+ /*----------------------------------------*/
35
+ /* Parse Params */
36
+ /*----------------------------------------*/
37
+
38
+ // Process items one by one
39
+ const paramList = Object.entries(opts.params);
40
+ for (let i = 0; i < paramList.length; i++) {
41
+ const [name, type] = paramList[i];
42
+
43
+ // Find the value as a string
44
+ const value = (
45
+ opts.req.params[name]
46
+ || opts.req.query[name]
47
+ || opts.req.body[name]
48
+ );
49
+
50
+ // Parse
51
+ if (type === ParamType.Boolean || type === ParamType.BooleanOptional) {
52
+ // Boolean
53
+
54
+ // Handle case where value doesn't exist
55
+ if (value === undefined) {
56
+ if (type === ParamType.BooleanOptional) {
57
+ output[name] = undefined;
58
+ } else {
59
+ return handleError(
60
+ opts.res,
61
+ {
62
+ message: `Parameter ${name} is required, but it was not included.`,
63
+ code: ReactKitErrorCode.MissingParameter,
64
+ status: 422,
65
+ },
66
+ );
67
+ }
68
+ } else {
69
+ // Value exists
70
+
71
+ // Simplify value
72
+ const simpleVal = (
73
+ String(value)
74
+ .trim()
75
+ .toLowerCase()
76
+ );
77
+
78
+ // Parse
79
+ output[name] = (
80
+ [
81
+ 'true',
82
+ 'yes',
83
+ 'y',
84
+ '1',
85
+ 't',
86
+ ].indexOf(simpleVal) >= 0
87
+ );
88
+ }
89
+ } else if (type === ParamType.Float || type === ParamType.FloatOptional) {
90
+ // Float
91
+
92
+ // Handle case where value doesn't exist
93
+ if (value === undefined) {
94
+ if (type === ParamType.FloatOptional) {
95
+ output[name] = undefined;
96
+ } else {
97
+ return handleError(
98
+ opts.res,
99
+ {
100
+ message: `Parameter ${name} is required, but it was not included.`,
101
+ code: ReactKitErrorCode.MissingParameter,
102
+ status: 422,
103
+ },
104
+ );
105
+ }
106
+ } else if (!Number.isNaN(Number.parseFloat(String(value)))) {
107
+ // Value is a number
108
+ output[name] = Number.parseFloat(String(value));
109
+ } else {
110
+ // Issue!
111
+ return handleError(
112
+ opts.res,
113
+ {
114
+ message: `Request data was malformed: ${name} was not a valid float.`,
115
+ code: ReactKitErrorCode.InvalidParameter,
116
+ status: 422,
117
+ },
118
+ );
119
+ }
120
+ } else if (type === ParamType.Int || type === ParamType.IntOptional) {
121
+ // Int
122
+
123
+ // Handle case where value doesn't exist
124
+ if (value === undefined) {
125
+ if (type === ParamType.IntOptional) {
126
+ output[name] = undefined;
127
+ } else {
128
+ return handleError(
129
+ opts.res,
130
+ {
131
+ message: `Parameter ${name} is required, but it was not included.`,
132
+ code: ReactKitErrorCode.MissingParameter,
133
+ status: 422,
134
+ },
135
+ );
136
+ }
137
+ } else if (!Number.isNaN(Number.parseInt(String(value), 10))) {
138
+ // Value is a number
139
+ output[name] = Number.parseInt(String(value), 10);
140
+ } else {
141
+ // Issue!
142
+ return handleError(
143
+ opts.res,
144
+ {
145
+ message: `Request data was malformed: ${name} was not a valid int.`,
146
+ code: ReactKitErrorCode.InvalidParameter,
147
+ status: 422,
148
+ },
149
+ );
150
+ }
151
+ } else if (type === ParamType.JSON || type === ParamType.JSONOptional) {
152
+ // Stringified JSON
153
+
154
+ // Handle case where value doesn't exist
155
+ if (value === undefined) {
156
+ if (type === ParamType.JSONOptional) {
157
+ output[name] = undefined;
158
+ } else {
159
+ return handleError(
160
+ opts.res,
161
+ {
162
+ message: `Parameter ${name} is required, but it was not included.`,
163
+ code: ReactKitErrorCode.MissingParameter,
164
+ status: 422,
165
+ },
166
+ );
167
+ }
168
+ } else {
169
+ // Value exists
170
+
171
+ // Parse
172
+ try {
173
+ output[name] = JSON.parse(String(value));
174
+ } catch (err) {
175
+ return handleError(
176
+ opts.res,
177
+ {
178
+ message: `Request data was malformed: ${name} was not a valid JSON payload.`,
179
+ code: ReactKitErrorCode.InvalidParameter,
180
+ status: 422,
181
+ },
182
+ );
183
+ }
184
+ }
185
+ } else if (type === ParamType.String || type === ParamType.StringOptional) {
186
+ // String
187
+
188
+ // Handle case where value doesn't exist
189
+ if (value === undefined) {
190
+ if (type === ParamType.StringOptional) {
191
+ output[name] = undefined;
192
+ } else {
193
+ return handleError(
194
+ opts.res,
195
+ {
196
+ message: `Parameter ${name} is required, but it was not included.`,
197
+ code: ReactKitErrorCode.MissingParameter,
198
+ status: 422,
199
+ },
200
+ );
201
+ }
202
+ } else {
203
+ // Value exists
204
+
205
+ // Leave as is
206
+ output[name] = value;
207
+ }
208
+ } else {
209
+ // No valid data type
210
+ return handleError(
211
+ opts.res,
212
+ {
213
+ message: `An internal error occurred: we could not determine the type of ${name}.`,
214
+ code: ReactKitErrorCode.InvalidParameter,
215
+ status: 422,
216
+ },
217
+ );
218
+ }
219
+ }
220
+
221
+ /*----------------------------------------*/
222
+ /* Launch Info */
223
+ /*----------------------------------------*/
224
+
225
+ // Get launch info
226
+ const { launched, launchInfo } = getLaunchInfo(opts.req);
227
+ if (!launched || !launchInfo) {
228
+ return handleError(
229
+ opts.res,
230
+ {
231
+ message: 'Your session has expired. Please refresh the page and try again.',
232
+ code: ReactKitErrorCode.SessionExpired,
233
+ status: 440,
234
+ },
235
+ );
236
+ }
237
+
238
+ // Error if user info cannot be found
239
+ if (
240
+ !launchInfo.userId
241
+ || !launchInfo.userFirstName
242
+ || !launchInfo.userLastName
243
+ || (
244
+ launchInfo.notInCourse
245
+ && !launchInfo.isAdmin
246
+ )
247
+ || (
248
+ !launchInfo.isTTM
249
+ && !launchInfo.isLearner
250
+ && !launchInfo.isAdmin
251
+ )
252
+ ) {
253
+ return handleError(
254
+ opts.res,
255
+ {
256
+ message: 'Your session was invalid. Please refresh the page and try again.',
257
+ code: ReactKitErrorCode.SessionExpired,
258
+ status: 440,
259
+ },
260
+ );
261
+ }
262
+
263
+ // Add launch info to output
264
+ output.userId = launchInfo.userId;
265
+ output.userFirstName = launchInfo.userFirstName;
266
+ output.userLastName = launchInfo.userLastName;
267
+ output.isLearner = !!launchInfo.isLearner;
268
+ output.isTTM = !!launchInfo.isTTM;
269
+ output.isAdmin = !!launchInfo.isAdmin;
270
+ output.isWatchingInPrivate = !!(opts.req.session.isWatchingInPrivate);
271
+
272
+ /*----------------------------------------*/
273
+ /* Require Course Consistency */
274
+ /*----------------------------------------*/
275
+
276
+ // Make sure the user actually launched from the appropriate course
277
+ if (
278
+ output.courseId
279
+ && launchInfo.courseId
280
+ && output.courseId !== launchInfo.courseId
281
+ && !output.isTTM
282
+ && !output.isAdmin
283
+ ) {
284
+ // Course of interest is not the launch course
285
+ return handleError(
286
+ opts.res,
287
+ {
288
+ message: 'You switched sessions by opening Immersive Classroom in another tab. Please refresh the page and try again.',
289
+ code: ReactKitErrorCode.WrongCourse,
290
+ status: 401,
291
+ },
292
+ );
293
+ }
294
+
295
+ // Return processed params
296
+ return output;
297
+ };
298
+
299
+ export default parseRequest;
@@ -0,0 +1,13 @@
1
+ /**
2
+ * Round a number to a certain number of decimals
3
+ * @author Gabe Abrams
4
+ * @param num the number to round
5
+ * @param numDecimals the number of decimals to round to
6
+ * @returns rounded number
7
+ */
8
+ const roundToNumDecimals = (num: number, numDecimals: number): number => {
9
+ const rounder = 10 ** numDecimals;
10
+ return (Math.round(num * rounder) / rounder);
11
+ };
12
+
13
+ export default roundToNumDecimals;
@@ -0,0 +1,3 @@
1
+ import { showFatalError } from '../components/AppWrapper';
2
+
3
+ export default showFatalError;
@@ -0,0 +1,16 @@
1
+ /**
2
+ * Sum the numbers in an array
3
+ * @author Gabe Abrams
4
+ * @param nums the numbers to sum
5
+ * @returns the sum of the numbers
6
+ */
7
+ const sum = (nums: number[]): number => {
8
+ return nums.reduce(
9
+ (a: number, b: number) => {
10
+ return (a + b);
11
+ },
12
+ 0,
13
+ );
14
+ };
15
+
16
+ export default sum;
@@ -0,0 +1,110 @@
1
+ // Initialize caccl
2
+ import { sendRequest } from 'caccl/client';
3
+
4
+ // Import custom error
5
+ import ErrorWithCode from '../errors/ErrorWithCode';
6
+ import ReactKitErrorCode from '../types/ReactKitErrorCode';
7
+
8
+ /*------------------------------------------------------------------------*/
9
+ /* Listener */
10
+ /*------------------------------------------------------------------------*/
11
+
12
+ // Handler for session expiry
13
+ let sessionExpiryHandler: () => void;
14
+
15
+ // Keep track of whether or not session expiry has already been handled
16
+ let sessionAlreadyExpired = false;
17
+
18
+ /**
19
+ * Set the session expiry handler
20
+ * @author Gabe Abrams
21
+ * @param handler new handler to use when session expires
22
+ */
23
+ export const setSessionExpiryHandler = (handler: () => void) => {
24
+ sessionExpiryHandler = handler;
25
+ };
26
+
27
+ /*------------------------------------------------------------------------*/
28
+ /* Main */
29
+ /*------------------------------------------------------------------------*/
30
+
31
+ /**
32
+ * Visit an endpoint on the server [for client only]
33
+ * @author Gabe Abrams
34
+ * @param opts object containing all arguments
35
+ * @param opts.path - the path of the server endpoint
36
+ * @param [opts.method=GET] - the method of the endpoint
37
+ * @param [opts.params] - query/body parameters to include
38
+ * @returns response from server
39
+ */
40
+ const visitServerEndpoint = async (
41
+ opts: {
42
+ path: string,
43
+ method?: ('GET' | 'POST' | 'DELETE' | 'PUT'),
44
+ params?: { [key in string]: any },
45
+ },
46
+ ): Promise<any> => {
47
+ // Send the request
48
+ const response = await sendRequest({
49
+ path: opts.path,
50
+ method: opts.method,
51
+ params: opts.params,
52
+ });
53
+
54
+ // Check for failure
55
+ if (!response || !response.body) {
56
+ throw new ErrorWithCode(
57
+ 'We didn\'t get a response from the server. Please check your internet connection.',
58
+ ReactKitErrorCode.NoResponse,
59
+ );
60
+ }
61
+ if (!response.body.success) {
62
+ // Session expired
63
+ if (response.body.code === ReactKitErrorCode.SessionExpired) {
64
+ // Skip notice if session was already expired
65
+ if (sessionAlreadyExpired) {
66
+ // Never return (browser is already reloading)
67
+ await new Promise<{ [key in string]: any }>(() => {
68
+ // Promise that never returns
69
+ });
70
+ }
71
+ sessionAlreadyExpired = true;
72
+
73
+ // Show session expiration message
74
+ if (sessionExpiryHandler) {
75
+ // Use handler
76
+ sessionExpiryHandler();
77
+ } else {
78
+ // Fallback to alert
79
+
80
+ // eslint-disable-next-line no-alert
81
+ alert('Your session has expired. Please start over.');
82
+ }
83
+
84
+ // Never return (don't continue execution)
85
+ await new Promise<{ [key in string]: any }>(() => {
86
+ // Promise that never returns
87
+ });
88
+ }
89
+
90
+ // Other errors
91
+ throw new ErrorWithCode(
92
+ (
93
+ response.body.message
94
+ || 'An unknown error occurred. Please contact an admin.'
95
+ ),
96
+ (
97
+ response.body.code
98
+ || ReactKitErrorCode.NoCode
99
+ ),
100
+ );
101
+ }
102
+
103
+ // Success! Extract the body
104
+ const { body } = response.body;
105
+
106
+ // Return
107
+ return body;
108
+ };
109
+
110
+ export default visitServerEndpoint;
@@ -0,0 +1,12 @@
1
+ /**
2
+ * Wait for a certain number of ms
3
+ * @author Gabe Abrams
4
+ * @param ms number of ms to wait
5
+ */
6
+ const waitMs = async (ms = 0) => {
7
+ return new Promise((resolve) => {
8
+ setTimeout(resolve, ms);
9
+ });
10
+ };
11
+
12
+ export default waitMs;
@@ -0,0 +1,18 @@
1
+ /**
2
+ * API param types
3
+ * @author Gabe Abrams
4
+ */
5
+ enum ParamType {
6
+ Boolean = 'boolean', // Boolean
7
+ BooleanOptional = 'boolean-optional', // Optional boolean
8
+ Float = 'float', // Float Number
9
+ FloatOptional = 'float-optional', // Optional Float Number
10
+ Int = 'int', // Integer Number
11
+ IntOptional = 'int-optional', // Optional Integer Number
12
+ JSON = 'json', // JSONified object
13
+ JSONOptional = 'json-optional', // Optional JSONified object
14
+ String = 'string', // String
15
+ StringOptional = 'string-optional', // Optional string
16
+ }
17
+
18
+ export default ParamType;
@@ -0,0 +1,16 @@
1
+ // Highest error code = DRK2
2
+
3
+ /**
4
+ * List of error codes built into the react kit
5
+ * @author Gabe Abrams
6
+ */
7
+ enum ReactKitErrorCode {
8
+ NoResponse = 'DRK1',
9
+ NoCode = 'DRK2',
10
+ SessionExpired = 'DRK3',
11
+ MissingParameter = 'DRK4',
12
+ InvalidParameter = 'DRK5',
13
+ WrongCourse = 'DRK6',
14
+ }
15
+
16
+ export default ReactKitErrorCode;
@@ -0,0 +1,16 @@
1
+ /**
2
+ * Bootstrap variants
3
+ * @author Gabe Abrams
4
+ */
5
+ enum Variant {
6
+ Primary = 'primary',
7
+ Secondary = 'secondary',
8
+ Success = 'success',
9
+ Warning = 'warning',
10
+ Info = 'info',
11
+ Danger = 'danger',
12
+ Light = 'light',
13
+ Dark = 'dark',
14
+ }
15
+
16
+ export default Variant;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dce-reactkit",
3
- "version": "2.0.5",
3
+ "version": "2.0.8",
4
4
  "main": "index.js",
5
5
  "module": "index.js",
6
6
  "scripts": {