dce-reactkit 3.3.1 → 3.3.2

package/dist/esm/types/client/initClient.d.ts

@@ -24,14 +24,7 @@ declare type SendRequestFunction = (opts: {
  * @author Gabe Abrams
  * @returns sendRequest function
  */
-export declare const getSendRequest: () => SendRequestFunction;
-declare let dark: boolean | undefined;
-/**
- * Get the current dark/light theme
- * @author Gabe Abrams
- * @returns true if the app has a dark theme
- */
-export declare const darkModeIsOn: () => boolean;
+export declare const getSendRequest: () => Promise<SendRequestFunction>;
 declare let sessionExpiredMessage: string | undefined;
 /**
  * Get the custom session expired message
@@ -44,12 +37,10 @@ export declare const getSessionExpiredMessage: () => string;
  * @author Gabe Abrams
  * @param opts object containing all arguments
  * @param opts.sendRequest caccl send request functions
- * @param [opts.dark] if true, the app is a dark-themed app
  * @param [opts.sessionExpiredMessage] a custom session expired message
  */
 declare const initClient: (opts: {
     sendRequest: SendRequestFunction;
-    dark?: boolean;
     sessionExpiredMessage?: string;
 }) => void;
 export default initClient;

package/dist/esm/types/components/AppWrapper.d.ts

@@ -7,6 +7,7 @@ import React from 'react';
 import Variant from '../types/Variant';
 declare type Props = {
     children: React.ReactNode;
+    dark?: boolean;
 };
 /**
  * Show an alert modal with an "Okay" button

package/dist/index.d.ts

@@ -24,6 +24,7 @@ declare enum Variant {
 
 declare type Props$g = {
     children: React.ReactNode;
+    dark?: boolean;
 };
 /**
  * Show an alert modal with an "Okay" button
@@ -529,12 +530,10 @@ declare type SendRequestFunction = (opts: {
  * @author Gabe Abrams
  * @param opts object containing all arguments
  * @param opts.sendRequest caccl send request functions
- * @param [opts.dark] if true, the app is a dark-themed app
  * @param [opts.sessionExpiredMessage] a custom session expired message
  */
 declare const initClient: (opts: {
     sendRequest: SendRequestFunction;
-    dark?: boolean;
     sessionExpiredMessage?: string;
 }) => void;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dce-reactkit",
-  "version": "3.3.1",
+  "version": "3.3.2",
   "description": "Shared components for Harvard DCE apps",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/client/initClient.tsx

@@ -3,6 +3,7 @@ import { showFatalError } from '../components/AppWrapper';
 
 // Import shared types
 import ErrorWithCode from '../errors/ErrorWithCode';
+import waitMs from '../helpers/waitMs';
 import ReactKitErrorCode from '../types/ReactKitErrorCode';
 
 
@@ -40,7 +41,10 @@ type SendRequestFunction = (
 
 /* ----------- Initialized ---------- */
 
-let initialized = false;
+let onInitialized: (a: unknown) => void;
+let initialized = new Promise((resolve) => {
+  onInitialized = resolve;
+});
 
 /* ---------- Send Request ---------- */
 
@@ -51,9 +55,19 @@ let storedSendRequest: SendRequestFunction;
  * @author Gabe Abrams
  * @returns sendRequest function
  */
-export const getSendRequest = () => {
+export const getSendRequest = async () => {
+  // Wait for initialization or timeout
+  let timedOut = false;
+  await Promise.all([
+    (async () => {
+      await waitMs(1000);
+      timedOut = true;
+    })(),
+    initialized,
+  ]);
+
   // Error if no send request function
-  if (!initialized) {
+  if (timedOut) {
     showFatalError(
       new ErrorWithCode(
         'Could not send a request because the request needed to be sent before dce-reactkit was properly initialized. Perhaps dce-reactkit was not initialized with initClient.',
@@ -73,31 +87,6 @@ export const getSendRequest = () => {
   return storedSendRequest;
 };
 
-/* ------------ Dark Mode ----------- */
-
-let dark: boolean | undefined;
-
-/**
- * Get the current dark/light theme
- * @author Gabe Abrams
- * @returns true if the app has a dark theme
- */
-export const darkModeIsOn = () => {
-  // Error if not set up yet
-  if (!initialized) {
-    showFatalError(
-      new ErrorWithCode(
-        'Could not check theme color because dce-reactkit was properly initialized. Perhaps dce-reactkit was not initialized with initClient.',
-        ReactKitErrorCode.ThemeCheckedBeforeReactKitReady,
-      ),
-    );
-    return false;
-  }
-
-  // Return
-  return !!dark;
-};
-
 /* ----- Session Expired Message ---- */
 
 let sessionExpiredMessage: string | undefined;
@@ -108,17 +97,6 @@ let sessionExpiredMessage: string | undefined;
  * @returns session expired message
  */
 export const getSessionExpiredMessage = () => {
-  // Error if not set up yet
-  if (!initialized) {
-    showFatalError(
-      new ErrorWithCode(
-        'Could not get the session expired message because dce-reactkit was properly initialized. Perhaps dce-reactkit was not initialized with initClient.',
-        ReactKitErrorCode.SessionExpiredMessageGottenBeforeReactKitReady,
-      ),
-    );
-    return '';
-  }
-
   // Return
   return (
     sessionExpiredMessage
@@ -135,26 +113,22 @@ export const getSessionExpiredMessage = () => {
  * @author Gabe Abrams
  * @param opts object containing all arguments
  * @param opts.sendRequest caccl send request functions
- * @param [opts.dark] if true, the app is a dark-themed app
  * @param [opts.sessionExpiredMessage] a custom session expired message
  */
 const initClient = (
   opts: {
     // Copy of CACCL's send request function
     sendRequest: SendRequestFunction,
-    // True if this app is a dark-themed app
-    dark?: boolean,
     // Custom session expired message
     sessionExpiredMessage?: string,
   },
 ) => {
   // Store values
   storedSendRequest = opts.sendRequest;
-  dark = !!opts.dark;
   sessionExpiredMessage = opts.sessionExpiredMessage;
 
   // Mark as initialized
-  initialized = true;
+  onInitialized(null);
 };
 
 export default initClient;

package/src/components/AppWrapper.tsx

@@ -26,7 +26,6 @@ import ErrorWithCode from '../errors/ErrorWithCode';
 // Import other helpers
 import logClientEvent from '../helpers/logClientEvent';
 import {
-  darkModeIsOn,
   getSessionExpiredMessage,
 } from '../client/initClient';
 
@@ -37,6 +36,8 @@ import {
 type Props = {
   // The entire app
   children: React.ReactNode,
+  // True if this app is a dark-themed app
+  dark?: boolean,
 };
 
 /*------------------------------------------------------------------------*/
@@ -237,6 +238,7 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
 
   const {
     children,
+    dark,
   } = props;
 
   /* -------------- State ------------- */
@@ -387,7 +389,7 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
           minHeight: '100vh',
           paddingTop: '2rem',
           backgroundColor: (
-            darkModeIsOn()
+            dark
               ? '#222'
               : '#fff'
           ),

package/src/helpers/visitServerEndpoint.tsx

@@ -138,7 +138,7 @@ const visitServerEndpoint = async (
   }
 
   // Send the request
-  const sendRequest = getSendRequest();
+  const sendRequest = await getSendRequest();
   const response = await sendRequest({
     path: opts.path,
     method: opts.method ?? 'GET',