code cleanup and comments

jsapp/js/stores/useSession.tsx

@@ -3,42 +3,47 @@ import {useEffect, useState} from 'react';
 import {reaction} from 'mobx';
 import type {AccountResponse} from '../dataInterface';
 
-
+/**
+ * Hook to use the session store in functional components.
+ * This hook provides a way to access teh current logged account, information
+ * regarding the anonymous state of the login and session methods.
+ *
+ * This hook uses mob-x reactions to track the current account and update the
+ * state accordingly.
+ * In the future we should update this hook to use react-query and drop the usage of mob-x
+ */
 export const useSession = () => {
 
   const [currentLoggedAccount, setCurrentLoggedAccount] = useState<AccountResponse>();
   const [isAnonymous, setIsAnonymous] = useState<boolean>(true);
   const [isPending, setIsPending] = useState<boolean>(false);
 
   useEffect(() => {
-    // using mobx reaction in the hook (the reaction can be used anywhere)
-
-    const reactionDisposer = reaction(
-      // should pass the required store.
-      // Could be done by DI, direct instance injection
-      // or passing into hook from the parent component etc.
-      () => sessionStore,
-      (session) => {
-        setIsPending(session.isPending);
-        if (session.isLoggedIn) {
-          setCurrentLoggedAccount(session.currentAccount as AccountResponse);
+    // We need to setup a reaction for every observable we want to track
+    // Generic reaction to sessionStore won't fire the re-rendering of the hook
+    const currentAccountReactionDisposer = reaction(
+      () => sessionStore.currentAccount,
+      (currentAccount) => {
+        if (sessionStore.isLoggedIn) {
+          setCurrentLoggedAccount(currentAccount as AccountResponse);
           setIsAnonymous(false);
+          setIsPending(sessionStore.isPending);
         }
       }, {fireImmediately: true}
     );
 
     return () => {
-      reactionDisposer();
+      currentAccountReactionDisposer();
     };
   }, []);
 
   return {
     currentLoggedAccount,
     isAnonymous,
     isPending,
-    logOut: sessionStore.logOut,
-    logOutAll: sessionStore.logOutAll,
-    refreshAccount: sessionStore.refreshAccount,
+    logOut: sessionStore.logOut.bind(sessionStore),
+    logOutAll: sessionStore.logOutAll.bind(sessionStore),
+    refreshAccount: sessionStore.refreshAccount.bind(sessionStore),
   };
 
 };