[UID-159] Better handle RTR callback; handle new token expiration format

src/settings/RefreshTokenRotation.js

@@ -1,53 +1,50 @@
-import { merge } from 'lodash';
 import PropTypes from 'prop-types';
 import { useCallback, useEffect, useState } from 'react';
-import { Field, Form } from 'react-final-form';
 import { FormattedMessage } from 'react-intl';
 
-import { getTokenExpiry } from '@folio/stripes/core';
-import { Button, LoadingPane, Pane, PaneHeader, TextField } from '@folio/stripes/components';
+import { getTokenExpiry, RTR_CONSTANTS } from '@folio/stripes/core';
+import { Button, LoadingPane, Pane, PaneHeader } from '@folio/stripes/components';
 
 /**
  * manipulate AT/RT expiration dates in storage in order to test RTR.
- * @returns
  */
-const RefreshTokenRotation = ({ stripes }) => {
-  // why WHY copy this string here instead of importing it from stripes-core?
-  //
-  // RTR_FORCE_REFRESH_EVENT will be present in stripes-core 10.2.0 (stripes
-  // 9.2.0). Importing it would force the stripes peer depedency to bump from
-  // ^9.1.0 to ^9.2.0.If we copy the string instead of importing it, we can
-  // remain compatible with 9.1.0.
-  //
-  // OK, compatibility is nice. But it's still gross, right? Yep, super gross.
-  // Aren't you nauseated? Yes, yes I am. 🤢🧼🛁
-  const RTR_FORCE_REFRESH_EVENT = '@folio/stripes/core::RTRForceRefresh';
-
+const RefreshTokenRotation = () => {
   const [isLoading, setIsLoading] = useState(true);
-  const [tokenExpiration, setTokenExpiration] = useState({});
+  const [tokenExpiration, setTokenExpiration] = useState({ atExpires: -1, rtExpires: -1 });
 
   useEffect(() => {
-    setIsLoading(true);
-    getTokenExpiry().then((te) => {
-      setTokenExpiration(te ?? { atExpires: -1, rtExpires: -1 });
-      setIsLoading(false);
-    });
+    const callback = () => {
+      setIsLoading(true);
+      getTokenExpiry().then((te) => {
+        setTokenExpiration({
+          atExpires: te.atExpires ?? te.accessTokenExpiration ?? -1,
+          rtExpires: te.rtExpires ?? te.refreshTokenExpiration ?? -1,
+        });
+        setIsLoading(false);
+      });
+    };
+
+    callback();
+
+    window.addEventListener(RTR_CONSTANTS.RTR_SUCCESS_EVENT, callback);
+
+    return () => window.removeEventListener(RTR_CONSTANTS.RTR_SUCCESS_EVENT, callback);
   }, []);
 
   /**
    * forceRefresh
    * dispatch an event to force a token rotation
    */
   const forceRefresh = useCallback(
-    () => window.dispatchEvent(new Event(RTR_FORCE_REFRESH_EVENT)),
+    () => window.dispatchEvent(new Event(RTR_CONSTANTS.RTR_FORCE_REFRESH_EVENT)),
     [],
   );
 
   /**
    * saveRtrConfig
    * update stripes.config.rtr from form
    */
-  const saveRtrConfig = useCallback(
+  /* const saveRtrConfig = useCallback(
     (values) => {
       merge(stripes.config.rtr, {
         idleSessionTTL: values.idleSessionTTL,
@@ -60,7 +57,7 @@ const RefreshTokenRotation = ({ stripes }) => {
       forceRefresh();
     },
     [stripes, forceRefresh],
-  );
+  ); */
 
   if (!isLoading) {
     return (
@@ -88,7 +85,7 @@ const RefreshTokenRotation = ({ stripes }) => {
             <FormattedMessage id="ui-developer.rtr.forceRefresh" />
           </Button>
 
-          <Form
+          {/* <Form
             onSubmit={saveRtrConfig}
             initialValues={{
               ...stripes.config.rtr,
@@ -130,7 +127,7 @@ const RefreshTokenRotation = ({ stripes }) => {
                 </Button>
               </form>
             )}
-          </Form>
+          </Form> */}
         </div>
       </Pane>
     );