fix: remove conditions for an infinite React hooks loop (#81)

The useAlert hook was being given a new payload object every time it was called, defeating any memoization happening inside.

It was also re-calling it’s useEffect hook when alertId changed, which it was changing itself. That’s a no-no.

src/alerts/access-expiration-alert/hooks.js

@@ -1,4 +1,5 @@
 /* eslint-disable import/prefer-default-export */
+import { useMemo } from 'react';
 import { useModel } from '../../model-store';
 import { useAlert } from '../../user-messages';
 
@@ -7,9 +8,11 @@ export function useAccessExpirationAlert(courseId) {
   const rawHtml = (course && course.courseExpiredMessage) || null;
   const isVisible = !!rawHtml; // If it exists, show it.
 
+  const payload = useMemo(() => ({ rawHtml }), [rawHtml]);
+
   useAlert(isVisible, {
     code: 'clientAccessExpirationAlert',
     topic: 'course',
-    payload: { rawHtml },
+    payload,
   });
 }

src/user-messages/hooks.js

@@ -22,5 +22,5 @@ export function useAlert(isVisible, {
         remove(alertId);
       }
     };
-  }, [alertId, isVisible, code, text, topic, type, dismissible, payload]);
+  }, [isVisible, code, text, topic, type, dismissible, payload]);
 }