dce-reactkit 3.5.10 → 3.5.12

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

@@ -9,6 +9,14 @@ type Props = {
     children: React.ReactNode;
     dark?: boolean;
 };
+/**
+ * Redirect to a new page
+ * @author Gabe Abrams
+ * @param url the url to redirect to
+ * @param destination the destination of the redirect, for example "YouTube"
+ *   and will be used in the following text: `Redirecting to ${destination}...`
+ */
+export declare const leaveToURL: (url: string, destination: string) => Promise<void>;
 /**
  * Show an alert modal with an "Okay" button
  * @author Gabe Abrams

package/dist/esm/types/index.d.ts

@@ -1,4 +1,4 @@
-import AppWrapper, { alert, confirm, showFatalError, addFatalErrorHandler } from './components/AppWrapper';
+import AppWrapper, { alert, confirm, showFatalError, addFatalErrorHandler, leaveToURL } from './components/AppWrapper';
 import LoadingSpinner from './components/LoadingSpinner';
 import ErrorBox from './components/ErrorBox';
 import Modal from './components/Modal';
@@ -83,4 +83,4 @@ import PickableItem from './components/ItemPicker/types/PickableItem';
 import DBEntry from './components/DBEntryManagerPanel/types/DBEntry';
 import DBEntryField from './components/DBEntryManagerPanel/types/DBEntryField';
 import DBEntryFieldType from './components/DBEntryManagerPanel/types/DBEntryFieldType';
-export { AppWrapper, LoadingSpinner, ErrorBox, Modal, TabBox, RadioButton, CheckboxButton, ButtonInputGroup, SimpleDateChooser, Drawer, PopSuccessMark, PopFailureMark, PopPendingMark, CopiableBox, ItemPicker, LogReviewer, IntelliTable, CSVDownloadButton, DBEntryManagerPanel, Tooltip, ToggleSwitch, AutoscrollToBottomContainer, alert, confirm, showFatalError, ErrorWithCode, MINUTE_IN_MS, HOUR_IN_MS, DAY_IN_MS, DynamicWord, abbreviate, avg, ceilToNumDecimals, floorToNumDecimals, forceNumIntoBounds, padDecimalZeros, padZerosLeft, roundToNumDecimals, sum, waitMs, getOrdinal, getTimeInfoInET, stubServerEndpoint, startMinWait, getHumanReadableDate, getPartOfDay, stringsToHumanReadableList, onlyKeepLetters, parallelLimit, getMonthName, genCSV, canReviewLogs, isMobileOrTablet, extractProp, compareArraysByProp, genCommaList, validateEmail, validatePhoneNumber, validateString, getLocalTimeInfo, idify, initClient, visitServerEndpoint, logClientEvent, addFatalErrorHandler, initServer, genRouteHandler, handleError, handleSuccess, initLogCollection, addDBEditorEndpoints, ModalButtonType, ModalSize, ModalType, ReactKitErrorCode, Variant, DayOfWeek, Log, LogType, LogSource, LogAction, LogBuiltInMetadata, LogMetadataType, IntelliTableColumn, PickableItem, DBEntry, DBEntryField, DBEntryFieldType, ParamType, };
+export { AppWrapper, LoadingSpinner, ErrorBox, Modal, TabBox, RadioButton, CheckboxButton, ButtonInputGroup, SimpleDateChooser, Drawer, PopSuccessMark, PopFailureMark, PopPendingMark, CopiableBox, ItemPicker, LogReviewer, IntelliTable, CSVDownloadButton, DBEntryManagerPanel, Tooltip, ToggleSwitch, AutoscrollToBottomContainer, alert, confirm, showFatalError, ErrorWithCode, MINUTE_IN_MS, HOUR_IN_MS, DAY_IN_MS, DynamicWord, abbreviate, avg, ceilToNumDecimals, floorToNumDecimals, forceNumIntoBounds, padDecimalZeros, padZerosLeft, roundToNumDecimals, sum, waitMs, getOrdinal, getTimeInfoInET, stubServerEndpoint, startMinWait, getHumanReadableDate, getPartOfDay, stringsToHumanReadableList, onlyKeepLetters, parallelLimit, getMonthName, genCSV, canReviewLogs, isMobileOrTablet, extractProp, compareArraysByProp, genCommaList, validateEmail, validatePhoneNumber, validateString, getLocalTimeInfo, idify, initClient, visitServerEndpoint, logClientEvent, addFatalErrorHandler, leaveToURL, initServer, genRouteHandler, handleError, handleSuccess, initLogCollection, addDBEditorEndpoints, ModalButtonType, ModalSize, ModalType, ReactKitErrorCode, Variant, DayOfWeek, Log, LogType, LogSource, LogAction, LogBuiltInMetadata, LogMetadataType, IntelliTableColumn, PickableItem, DBEntry, DBEntryField, DBEntryFieldType, ParamType, };

package/dist/index.d.ts

@@ -28,6 +28,14 @@ type Props$k = {
     children: React.ReactNode;
     dark?: boolean;
 };
+/**
+ * Redirect to a new page
+ * @author Gabe Abrams
+ * @param url the url to redirect to
+ * @param destination the destination of the redirect, for example "YouTube"
+ *   and will be used in the following text: `Redirecting to ${destination}...`
+ */
+declare const leaveToURL: (url: string, destination: string) => Promise<void>;
 /**
  * Show an alert modal with an "Okay" button
  * @author Gabe Abrams
@@ -1414,4 +1422,4 @@ declare const LogBuiltInMetadata: {
     };
 };
 
-export { AppWrapper, AutoscrollToBottomContainer, ButtonInputGroup, CSVDownloadButton, CheckboxButton, CopiableBox, DAY_IN_MS, DBEntry, DBEntryField, DBEntryFieldType, DBEntryManagerPanel, DayOfWeek, Drawer, DynamicWord, ErrorBox, ErrorWithCode, HOUR_IN_MS, IntelliTable, IntelliTableColumn, ItemPicker, LoadingSpinner, Log, LogAction, LogBuiltInMetadata, LogMetadataType, LogReviewer, LogSource, LogType, MINUTE_IN_MS, Modal, ModalButtonType, ModalSize, ModalType, ParamType, PickableItem, PopFailureMark, PopPendingMark, PopSuccessMark, RadioButton, ReactKitErrorCode, SimpleDateChooser, TabBox, ToggleSwitch, Tooltip, Variant, abbreviate, addDBEditorEndpoints, addFatalErrorHandler, alert, avg, canReviewLogs, ceilToNumDecimals, compareArraysByProp, confirm, extractProp, floorToNumDecimals, forceNumIntoBounds, genCSV, genCommaList, genRouteHandler, getHumanReadableDate, getLocalTimeInfo, getMonthName, getOrdinal, getPartOfDay, getTimeInfoInET, handleError, handleSuccess, idify, initClient, initLogCollection, initServer, isMobileOrTablet, logClientEvent, onlyKeepLetters, padDecimalZeros, padZerosLeft, parallelLimit, roundToNumDecimals, showFatalError, startMinWait, stringsToHumanReadableList, stubServerEndpoint, sum, validateEmail, validatePhoneNumber, validateString, visitServerEndpoint, waitMs };
+export { AppWrapper, AutoscrollToBottomContainer, ButtonInputGroup, CSVDownloadButton, CheckboxButton, CopiableBox, DAY_IN_MS, DBEntry, DBEntryField, DBEntryFieldType, DBEntryManagerPanel, DayOfWeek, Drawer, DynamicWord, ErrorBox, ErrorWithCode, HOUR_IN_MS, IntelliTable, IntelliTableColumn, ItemPicker, LoadingSpinner, Log, LogAction, LogBuiltInMetadata, LogMetadataType, LogReviewer, LogSource, LogType, MINUTE_IN_MS, Modal, ModalButtonType, ModalSize, ModalType, ParamType, PickableItem, PopFailureMark, PopPendingMark, PopSuccessMark, RadioButton, ReactKitErrorCode, SimpleDateChooser, TabBox, ToggleSwitch, Tooltip, Variant, abbreviate, addDBEditorEndpoints, addFatalErrorHandler, alert, avg, canReviewLogs, ceilToNumDecimals, compareArraysByProp, confirm, extractProp, floorToNumDecimals, forceNumIntoBounds, genCSV, genCommaList, genRouteHandler, getHumanReadableDate, getLocalTimeInfo, getMonthName, getOrdinal, getPartOfDay, getTimeInfoInET, handleError, handleSuccess, idify, initClient, initLogCollection, initServer, isMobileOrTablet, leaveToURL, logClientEvent, onlyKeepLetters, padDecimalZeros, padZerosLeft, parallelLimit, roundToNumDecimals, showFatalError, startMinWait, stringsToHumanReadableList, stubServerEndpoint, sum, validateEmail, validatePhoneNumber, validateString, visitServerEndpoint, waitMs };

package/package.json

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

package/src/components/AppWrapper.tsx

@@ -44,6 +44,47 @@ type Props = {
 /* --------------------------- Static Helpers --------------------------- */
 /*------------------------------------------------------------------------*/
 
+/*----------------------------------------*/
+/* ----------- Redirect/Leave ----------- */
+/*----------------------------------------*/
+
+// Stored copy of setter for url to leave to
+let setURLToLeaveTo: (
+  opts: {
+    url: string,
+    destination: string,
+  },
+) => void;
+
+/**
+ * Redirect to a new page
+ * @author Gabe Abrams
+ * @param url the url to redirect to
+ * @param destination the destination of the redirect, for example "YouTube"
+ *   and will be used in the following text: `Redirecting to ${destination}...`
+ */
+export const leaveToURL = async (url: string, destination: string) => {
+  if (setURLToLeaveTo) {
+    // Beautiful redirect
+    setURLToLeaveTo({ url, destination });
+  } else {
+    // Overwrite page in a janky way
+    window.document.body.innerHTML = `
+      <div>
+        <h1>
+          Redirecting to ${destination}...
+        </h1>
+        <p>
+          If you are not redirected in 5 seconds, please <a href="${url}">click here</a>.
+        </p>
+      </div>
+    `;
+  }
+
+  // Redirect to location
+  window.location.href = url;
+};
+
 /*----------------------------------------*/
 /* ---------------- Alert --------------- */
 /*----------------------------------------*/
@@ -247,6 +288,32 @@ export const showSessionExpiredMessage = (): undefined => {
   return undefined;
 };
 
+/*------------------------------------------------------------------------*/
+/* -------------------------------- Style ------------------------------- */
+/*------------------------------------------------------------------------*/
+
+const style = `
+  .AppWrapper-leave-to-url-notice {
+    opacity: 0;
+
+    animation-name: AppWrapper-leave-to-url-notice-appear;
+    animation-duration: 0.5s;
+    animation-delay: 1s;
+    animation-fill-mode: both;
+    animation-timing-function: ease-out;
+    animation-iteration-count: 1;
+  }
+
+  @keyframes AppWrapper-leave-to-url-notice-appear {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+`;
+
 /*------------------------------------------------------------------------*/
 /* ------------------------------ Component ----------------------------- */
 /*------------------------------------------------------------------------*/
@@ -265,6 +332,13 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
 
   /* -------------- State ------------- */
 
+  // Leave to URL
+  const [
+    urlToLeaveTo,
+    setURLToLeaveToInner,
+  ] = useState<{ url: string, destination: string } | undefined>();
+  setURLToLeaveTo = setURLToLeaveToInner;
+
   // Fatal error
   const [
     fatalErrorMessage,
@@ -386,9 +460,47 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
   // Body that will be filled with the current view
   let body: React.ReactNode;
 
+  /* ---------- Leave to URL ---------- */
+
+  if (!body && urlToLeaveTo) {
+    // Destructure url info
+    const {
+      url,
+      destination,
+    } = urlToLeaveTo;
+
+    // Show pretty redirect screen
+    body = (
+      <div className="AppWrapper-leave-to-url-container p-5 text-center">
+        <div className="AppWrapper-leave-to-url-notice d-inline-block">
+          <h3 className="text-start m-0">
+            Redirecting to
+            {' '}
+            {destination}
+            ...
+          </h3>
+          <div className="text-start">
+            If you are not automatically redirected in 5 seconds, please
+            {' '}
+            <a
+              href={url}
+              aria-label={`Click here to leave to ${destination}`}
+            >
+              click here
+            </a>
+            .
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   /* ----------- Fatal Error ---------- */
 
-  if (fatalErrorMessage || fatalErrorCode || sessionHasExpired) {
+  if (
+    !body
+    && (fatalErrorMessage || fatalErrorCode || sessionHasExpired)
+  ) {
     // Re-encapsulate in an error
     const error = (
       sessionHasExpired
@@ -441,6 +553,9 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
 
   return (
     <>
+      <style>
+        {style}
+      </style>
       {modal}
       {body}
     </>

package/src/components/AutoscrollToBottomContainer.tsx

@@ -215,7 +215,7 @@ const AutoscrollToBottomContainer: React.FC<Props> = (props) => {
   // Initialize refs
   const lastItemIds = useRef<(string | number)[]>([]);
   const container = useRef<HTMLDivElement | null>(null);
-  const wasScrolledToBottomBeforeItemsUpdate = useRef<boolean>(true);
+  const wasLastScrolledToBottom = useRef<boolean>(true);
 
   /*------------------------------------------------------------------------*/
   /* ------------------------- Component Functions ------------------------ */
@@ -253,7 +253,12 @@ const AutoscrollToBottomContainer: React.FC<Props> = (props) => {
     );
 
     // Figure out if we're scrolled to the bottom
-    return (distanceToBottomRems < SCROLLED_TO_BOTTOM_THRESHOLD_REMS);
+    const atBottom = (distanceToBottomRems < SCROLLED_TO_BOTTOM_THRESHOLD_REMS);
+
+    // Remember if we scrolled to the bottom
+    wasLastScrolledToBottom.current = atBottom;
+
+    return atBottom;
   };
 
   /**
@@ -272,7 +277,13 @@ const AutoscrollToBottomContainer: React.FC<Props> = (props) => {
     });
 
     // Scroll to bottom
-    container.current.scrollTop = container.current.scrollHeight;
+    container.current.scrollTop = (
+      container.current.scrollHeight
+      - container.current.clientHeight
+    );
+
+    // Remember that we scrolled to the bottom
+    wasLastScrolledToBottom.current = true;
   };
 
   /*----------------------------------------*/
@@ -289,8 +300,9 @@ const AutoscrollToBottomContainer: React.FC<Props> = (props) => {
       return;
     }
 
-    // If scrolled to bottom, hide the button
+    // If scrolled to bottom, hide the button and remember position
     if (isScrolledToBottom()) {
+      // Hide button
       dispatch({
         type: ActionType.HideJumpToBottomButton,
       });
@@ -324,22 +336,24 @@ const AutoscrollToBottomContainer: React.FC<Props> = (props) => {
 
       // Check if new content appeared at bottom
       const newContentAppeared = (
+        // There are items
         currentItemIds.length > 0
-        && lastItemIds.current
-        && lastItemIds.current.length > 0
-        && (
-          currentItemIds[currentItemIds.length - 1]
-          !== lastItemIds.current[lastItemIds.current.length - 1]
+        // The last item is new
+        && !lastItemIds.current.includes(
+          currentItemIds[currentItemIds.length - 1],
         )
       );
 
+      // Update last item ids
+      lastItemIds.current = currentItemIds;
+
       // Do nothing if no new content
       if (!newContentAppeared) {
         return;
       }
 
       // Check if used to be scrolled to the bottom
-      if (wasScrolledToBottomBeforeItemsUpdate.current) {
+      if (wasLastScrolledToBottom.current) {
         // Was scrolled to the bottom! Autoscroll.
         scrollToBottom();
       } else {
@@ -348,14 +362,6 @@ const AutoscrollToBottomContainer: React.FC<Props> = (props) => {
           type: ActionType.ShowJumpToBottomButton,
         });
       }
-
-      // Update last item ids
-      lastItemIds.current = currentItemIds;
-
-      // Remember if we were scrolled to the bottom before the update
-      return () => {
-        wasScrolledToBottomBeforeItemsUpdate.current = isScrolledToBottom();
-      };
     },
     [items],
   );

package/src/index.ts

@@ -4,6 +4,7 @@ import AppWrapper, {
   confirm,
   showFatalError,
   addFatalErrorHandler,
+  leaveToURL,
 } from './components/AppWrapper';
 import LoadingSpinner from './components/LoadingSpinner';
 import ErrorBox from './components/ErrorBox';
@@ -176,6 +177,7 @@ export {
   visitServerEndpoint,
   logClientEvent,
   addFatalErrorHandler,
+  leaveToURL,
   // Server helpers
   initServer,
   genRouteHandler,